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 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 = ({ const Input = ({
autoComplete, autoComplete,
@ -9,7 +48,7 @@ const Input = ({
className, className,
disabled = false, disabled = false,
form, form,
id, id = rndId(),
inputMode, inputMode,
label, label,
list, list,
@ -29,23 +68,17 @@ const Input = ({
const _label = label || children; const _label = label || children;
const _children = label && children ? children : null; const _children = label && children ? children : null;
const cn = classNames( const labelledby = `${rndId()}-label`;
className,
styles['input-group']
);
const labelledby = `${styles.label}-label`;
return ( return (
<div className={cn}> <div className={className}>
<label className={styles.label} htmlFor={id}> <StyledLabel htmlFor={id}>
{_label} {_label}
</label> </StyledLabel>
<input <StyledInput
aria-labelledby={labelledby} aria-labelledby={labelledby}
autoComplete={autoComplete} autoComplete={autoComplete}
autoFocus={autoFocus} autoFocus={autoFocus}
className={styles.input}
disabled={disabled} disabled={disabled}
form={form} form={form}
id={id} 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 React = require('react');
const styles = require('./style.css'); const Styled = require('styled-components');
const Modal = React.createClass({ const {
default: styled
} = Styled;
propTypes: { const StyledModal = styled.div`
children: React.PropTypes.node, background: white;
className: React.PropTypes.string, display: block;
name: React.PropTypes.string, left: 50%;
trigger: React.PropTypes.func.isRequired margin: 0 auto;
}, padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
`;
getInitialState: function() { const StyledClose = styled.button`
return { background-color: #FFFFFF;
active: false 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) { const StyledOverlay = styled.div`
e.preventDefault(); background: rgba(0, 0, 0, 0.4);
this.setState({ height: 100%;
active: this.state.active ? false : true left: 0;
}); position: absolute;
}, top: 0;
width: 100%;
z-index: 0;
`;
render: function() { const Modal = ({
const { active = true,
children, children,
className, className,
name, handleDismiss,
trigger name,
} = this.props; style
}) => {
const { if (!active) {
active return null;
} = 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>
);
} }
});
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; 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 React = require('react');
const styles = require('./style.css'); const Styled = require('styled-components');
const Icon = require('../icon');
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 = ({ const Notificaton = ({
children, children,
className, className,
style, style,
type = '', type = ''
icon = ''
}) => { }) => {
const cn = classNames(
className,
styles[`notification__${type}`],
styles.notification
);
const iconClass = classNames(
className,
styles.notification__icon,
styles[`notification__icon--${type}`]
);
return ( return (
<div <StyledNotification
className={cn} className={className}
style={style} style={style}
type={type} type={type}
> >
{ icon ? ( <StyledContent>
<Icon
className={iconClass}
iconSet="fa"
name={icon}
/>
) : null }
<div className={styles.notification__content}>
{children} {children}
</div> </StyledContent>
</div> </StyledNotification>
); );
}; };
Notificaton.propTypes = { Notificaton.propTypes = {
children: React.PropTypes.object, children: React.PropTypes.object,
className: React.PropTypes.str, className: React.PropTypes.str,
icon: React.PropTypes.str,
style: React.PropTypes.object, style: React.PropTypes.object,
type: React.PropTypes.str 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; } = fns;
const { const {
default: styled, default: styled
} = Styled; } = Styled;
const classNames = { 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'), Tab: require('./components/tabs/tab'),
Tabs: require('./components/tabs'), Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'), Toggle: require('./components/toggle'),
// Notificaton: require('./components/notification'), Notificaton: require('./components/notification'),
// Input: require('./components/input'), Input: require('./components/input'),
// Icon: require('./components/icon'), // Icon: require('./components/icon'),
RangeSlider: require('./components/range-slider'), RangeSlider: require('./components/range-slider'),
Radio: require('./components/radio'), Radio: require('./components/radio'),
@ -18,5 +18,5 @@ module.exports = {
Select: require('./components/select'), Select: require('./components/select'),
Widget: require('./components/widget'), Widget: require('./components/widget'),
Pagination: require('./components/pagination'), 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]; const op = obj[key];
return isFunction(op) ? op(props) : op; 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, Row,
Column, Column,
Avatar, Avatar,
Input,
Modal,
Notificaton,
Pagination, Pagination,
RangeSlider, RangeSlider,
Select, Select,
@ -146,6 +149,43 @@ storiesOf('Radio', module)
<Radio disabled /> <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) storiesOf('Pagination', module)
.add('Default', () => ( .add('Default', () => (