convert input, modal, notification and pagination

This commit is contained in:
Sérgio Ramos 2016-12-11 23:43:41 +00:00
parent 2b57f65d61
commit 5bb7c1d19b
11 changed files with 253 additions and 319 deletions

View File

@ -1,6 +1,45 @@
const classNames = require('classnames');
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const styles = require('./style.css');
const Styled = require('styled-components');
const {
baseBox
} = composers;
const {
colors
} = constants;
const {
rndId
} = fns;
const {
default: styled
} = Styled;
const StyledLabel = styled.label`
color: #464646;
`;
const StyledInput = styled.input`
background: ${colors.background};
display: block;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
${baseBox()}
:focus {
border-color: ${colors.borderSelected};
outline: none;
}
`;
const Input = ({
autoComplete,
@ -9,7 +48,7 @@ const Input = ({
className,
disabled = false,
form,
id,
id = rndId(),
inputMode,
label,
list,
@ -29,23 +68,17 @@ const Input = ({
const _label = label || children;
const _children = label && children ? children : null;
const cn = classNames(
className,
styles['input-group']
);
const labelledby = `${styles.label}-label`;
const labelledby = `${rndId()}-label`;
return (
<div className={cn}>
<label className={styles.label} htmlFor={id}>
<div className={className}>
<StyledLabel htmlFor={id}>
{_label}
</label>
<input
</StyledLabel>
<StyledInput
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
className={styles.input}
disabled={disabled}
form={form}
id={id}

View File

@ -1,33 +0,0 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--background-color: ~colors.background;
--border-color: ~colors.border;
--border-selected-color: ~colors.borderSelected;
--border-radius: remcalc(~boxes.borderRadius);
--inset-box-shadow: ~boxes.insetShaddow;
}
.input {
background: var(--background-color);
display: block;
height: 50px;
padding-left: 15px;
padding-right: 15px;
visibility: visible;
width: 100%;
@add-mixin create-base-box-properties;
&:focus {
border-color: var(--border-selected-color);
outline: none;
}
}
.label {
color: #464646;
}

View File

@ -1,98 +1,86 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Styled = require('styled-components');
const Modal = React.createClass({
const {
default: styled
} = Styled;
propTypes: {
children: React.PropTypes.node,
className: React.PropTypes.string,
name: React.PropTypes.string,
trigger: React.PropTypes.func.isRequired
},
const StyledModal = styled.div`
background: white;
display: block;
left: 50%;
margin: 0 auto;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
`;
getInitialState: function() {
return {
active: false
};
},
const StyledClose = styled.button`
background-color: #FFFFFF;
border: solid 1px #D8D8D8;
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
color: black;
cursor: #000000;
font-size: 20px;
padding: 0 10px;
position: absolute;
right: -20px;
text-align: center;
text-decoration: none;
top: -15px;
`;
handleReveal: function(e) {
e.preventDefault();
this.setState({
active: this.state.active ? false : true
});
},
const StyledOverlay = styled.div`
background: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
`;
render: function() {
const {
children,
className,
name,
trigger
} = this.props;
const {
active
} = this.state;
const {
handleReveal
} = this;
const triggerClass = classNames(
className,
styles.trigger
);
const modal = classNames(
className,
styles.modal,
);
const overlay = classNames(
className,
styles.overlay,
);
return (
<div>
<span
aria-label={name}
className={triggerClass}
href="#"
onClick={handleReveal}
role="link"
tabIndex={0}
>
{trigger()}
</span>
{ active ? (
<div
aria-label="overlay"
className={overlay}
onClick={handleReveal}
role="link"
tabIndex={-2}
/>
) : null }
{ active ? (
<div aria-label={name} className={modal} >
<button
className={styles.close}
href='#'
onClick={handleReveal}
role="dialog"
tabIndex={-1}
>X</button>
{children}
</div>
) : null }
</div>
);
const Modal = ({
active = true,
children,
className,
handleDismiss,
name,
style
}) => {
if (!active) {
return null;
}
});
return (
<div className={className} style={style}>
<StyledOverlay
aria-label='overlay'
role='link'
tabIndex={-2}
/>
<StyledModal aria-label={name}>
<StyledClose
onClick={handleDismiss}
role='dialog'
tabIndex={-1}
>X</StyledClose>
{children}
</StyledModal>
</div>
);
};
Modal.propTypes = {
active: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
handleDismiss: React.PropTypes.func,
name: React.PropTypes.string,
style: React.PropTypes.object
};
module.exports = Modal;

View File

@ -1,43 +0,0 @@
.overlay {
background: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.modal {
background: white;
display: block;
left: 50%;
margin: 0 auto;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.close {
background-color: #FFFFFF;
border: solid 1px #D8D8D8;
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
color: black;
cursor: #000000;
font-size: 20px;
padding: 0 10px;
position: absolute;
right: -20px;
text-align: center;
text-decoration: none;
top: -15px;
}
.trigger {
cursor: pointer;
display: inline-block;
outline: none;
}

View File

@ -1,52 +1,72 @@
const classNames = require('classnames');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const match = require('../../shared/match');
const React = require('react');
const styles = require('./style.css');
const Icon = require('../icon');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
prop: matchProp
} = match;
const {
default: styled
} = Styled;
const background = matchProp({
warning: colors.warningLight,
alert: colors.alertLight,
}, 'transparent');
const border = matchProp({
warning: colors.warning,
alert: 'red',
}, 'none');
const StyledNotification = styled.div`
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
display: inline-block;
height: 100%;
background-color: ${background('type')};
border: ${border('type')};
`;
const StyledContent = styled.div`
float: left;
padding: ${remcalc(20)};
`;
const Notificaton = ({
children,
className,
style,
type = '',
icon = ''
type = ''
}) => {
const cn = classNames(
className,
styles[`notification__${type}`],
styles.notification
);
const iconClass = classNames(
className,
styles.notification__icon,
styles[`notification__icon--${type}`]
);
return (
<div
className={cn}
<StyledNotification
className={className}
style={style}
type={type}
>
{ icon ? (
<Icon
className={iconClass}
iconSet="fa"
name={icon}
/>
) : null }
<div className={styles.notification__content}>
<StyledContent>
{children}
</div>
</div>
</StyledContent>
</StyledNotification>
);
};
Notificaton.propTypes = {
children: React.PropTypes.object,
className: React.PropTypes.str,
icon: React.PropTypes.str,
style: React.PropTypes.object,
type: React.PropTypes.str
};

View File

@ -1,54 +0,0 @@
~colors: "../../shared/constants.js";
@define-mixin block-decoration $background, $color {
background-color: $background;
border: solid 1px $color;
}
@define-mixin icon-decoration $background, $color {
background: $background;
color: $color;
}
.notification {
border-radius: 4px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
display: inline-block;
height: 100%;
&__warning {
@add-mixin block-decoration ~colors.warningLight, ~colors.warning;
}
&__alert {
@add-mixin block-decoration ~colors.alertLight, red;
}
&__content {
float: left;
padding: remcalc(20);
}
&__icon {
display: inline-block;
float: left;
height: 100%;
min-height: 100%;
padding: remcalc(15);
text-align: center;
& svg {
position: relative;
top: 50%;
transform: translateY(-100%);
}
&--warning {
@add-mixin icon-decoration ~colors.warning, white;
}
&--alert {
@add-mixin icon-decoration ~colors.alert, white;
}
}
}

View File

@ -17,7 +17,7 @@ const {
} = fns;
const {
default: styled,
default: styled
} = Styled;
const classNames = {

View File

@ -1,50 +0,0 @@
@import "../../shared/mixins.css";
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.paginatation_list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.pagination_item {
align-items: center;
cursor: pointer;
display: flex;
float: left;
height: 50px;
justify-content: center;
margin-right: 10px;
min-width: 50px;
padding-left: 15px;
padding-right: 15px;
position: relative;
@add-mixin create-base-box-properties;
&:last-child {
margin-right: inherit;
}
&:not( .active ):hover {
border: var(--border-checked);
}
& a:hover {
text-decoration: none;
}
&.active {
cursor: default;
}
}

View File

@ -9,8 +9,8 @@ module.exports = {
Tab: require('./components/tabs/tab'),
Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'),
// Notificaton: require('./components/notification'),
// Input: require('./components/input'),
Notificaton: require('./components/notification'),
Input: require('./components/input'),
// Icon: require('./components/icon'),
RangeSlider: require('./components/range-slider'),
Radio: require('./components/radio'),
@ -18,5 +18,5 @@ module.exports = {
Select: require('./components/select'),
Widget: require('./components/widget'),
Pagination: require('./components/pagination'),
// Modal: require('./components/modal')
Modal: require('./components/modal')
};

View File

@ -36,4 +36,37 @@ module.exports = (obj = {}, initial = '') => (props) => {
const op = obj[key];
return isFunction(op) ? op(props) : op;
};
};
/**
* get values based on the props[prop]
*
* ```js
* const matchable = match.map({
* large: 20,
* small: 10,
* medium: (prop) => prop > 5 ? 15 : false
* }, 'initial');
*
* matchable('type')({
* type: 'large'
* }); //=> 20
*
* matchable('type')(); //=> 'initial'
*
* matchable('type'){
* type: 6
* }); //=> 15
* ```
**/
module.exports.prop = (obj = {}, initial = '') => (prop) => (props = {}) => {
console.log(props);
const value = props[prop];
if (!value) {
return initial;
}
const op = obj[value];
return isFunction(op) ? op(value) : op;
};

View File

@ -13,6 +13,9 @@ const {
Row,
Column,
Avatar,
Input,
Modal,
Notificaton,
Pagination,
RangeSlider,
Select,
@ -146,6 +149,43 @@ storiesOf('Radio', module)
<Radio disabled />
));
storiesOf('Input', module)
.add('Default', () => (
<Input />
))
.add('type=email', () => (
<Input
placeholder='Enter email'
label='Email Address'
type='email'
>
<small>We'll never share your email with anyone else.</small>
</Input>
));
storiesOf('Modal', module)
.add('Default', () => (
<Modal>
<h2>This is the Modal</h2>
</Modal>
));
storiesOf('Notificaton', module)
.add('Default', () => (
<Notificaton>
<span>This is the default content</span>
</Notificaton>
))
.add('warning', () => (
<Notificaton type='warning'>
<span>This is the warning content</span>
</Notificaton>
))
.add('alert', () => (
<Notificaton type='alert'>
<span>This is the alert content</span>
</Notificaton>
));
storiesOf('Pagination', module)
.add('Default', () => (