convert input, modal, notification and pagination
This commit is contained in:
Sérgio Ramos
parent
2b57f65d61
commit
5bb7c1d19b
@ -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}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 {
|
||||
const Modal = ({
|
||||
active = true,
|
||||
children,
|
||||
className,
|
||||
handleDismiss,
|
||||
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,
|
||||
);
|
||||
style
|
||||
}) => {
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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"
|
||||
<div className={className} style={style}>
|
||||
<StyledOverlay
|
||||
aria-label='overlay'
|
||||
role='link'
|
||||
tabIndex={-2}
|
||||
/>
|
||||
) : null }
|
||||
|
||||
{ active ? (
|
||||
<div aria-label={name} className={modal} >
|
||||
<button
|
||||
className={styles.close}
|
||||
href='#'
|
||||
onClick={handleReveal}
|
||||
role="dialog"
|
||||
<StyledModal aria-label={name}>
|
||||
<StyledClose
|
||||
onClick={handleDismiss}
|
||||
role='dialog'
|
||||
tabIndex={-1}
|
||||
>X</button>
|
||||
>X</StyledClose>
|
||||
{children}
|
||||
</div>
|
||||
) : null }
|
||||
</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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -17,7 +17,7 @@ const {
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const classNames = {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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')
|
||||
};
|
||||
|
||||
@ -37,3 +37,36 @@ 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;
|
||||
};
|
||||
|
||||
@ -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', () => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user