convert input, modal, notification and pagination

ui/src/components/input/index.js

@@ -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(
+  const labelledby = `${rndId()}-label`;
-    className,
-    styles['input-group']
-  );
-
-  const labelledby = `${styles.label}-label`;
 
   return (
-    <div className={cn}>
+    <div className={className}>
-      <label className={styles.label} htmlFor={id}>
+      <StyledLabel htmlFor={id}>
         {_label}
-      </label>
+      </StyledLabel>
-      <input
+      <StyledInput
         aria-labelledby={labelledby}
         autoComplete={autoComplete}
         autoFocus={autoFocus}
-        className={styles.input}
         disabled={disabled}
         form={form}
         id={id}

ui/src/components/input/style.css

@@ -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;
-}

ui/src/components/modal/index.js

@@ -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: {
+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;

ui/src/components/modal/style.css

@@ -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;
-}

ui/src/components/notification/index.js

@@ -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 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 = ({
   children,
   className,
   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 (
-    <div
+    <StyledNotification
-      className={cn}
+      className={className}
       style={style}
       type={type}
     >
-      { icon ? (
+      <StyledContent>
-        <Icon
-          className={iconClass}
-          iconSet="fa"
-          name={icon}
-        />
-      ) : null }
-      <div className={styles.notification__content}>
         {children}
-      </div>
+      </StyledContent>
-    </div>
+    </StyledNotification>
   );
 };
 
 Notificaton.propTypes = {
   children: React.PropTypes.object,
   className: React.PropTypes.str,
-  icon: React.PropTypes.str,
   style: React.PropTypes.object,
   type: React.PropTypes.str
 };

ui/src/components/notification/style.css

@@ -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;
-    }
-  }
-}

ui/src/components/pagination/index.js

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

ui/src/components/pagination/style.css

@@ -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;
-  }
-}

ui/src/index.js

@@ -9,8 +9,8 @@ module.exports = {
   Tab: require('./components/tabs/tab'),
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
-  // Notificaton: require('./components/notification'),
+  Notificaton: require('./components/notification'),
-  // Input: require('./components/input'),
+  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')
 };

ui/src/shared/match.js

@@ -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;
+};

ui/stories/index.js

@@ -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', () => (