feat(cf-component-progress): implement in fela

BREAKING CHANGE: Underlying styling have been completely re-written in `fela` warranting extra caution when updating as well as a major version bump. Closes: cloudflare#230
koddsson · Jul 7, 2017 · b7763b4 · b7763b4
1 parent 6419397
commit b7763b4
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 45 deletions.
diff --git a/packages/cf-component-progress/README.md b/packages/cf-component-progress/README.md
@@ -12,7 +12,7 @@ $ npm install cf-component-progress
 
 ```jsx
 import React from 'react';
-import Progress from 'cf-component-progress';
+import { Progress } from 'cf-component-progress';
 
 class ProgressComponent extends React.Component {
   constructor(props) {

diff --git a/packages/cf-component-progress/src/Progress.js b/packages/cf-component-progress/src/Progress.js
@@ -1,6 +1,92 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'cf-component-link';
+import { createComponent } from 'cf-style-container';
+import { clearFix } from 'polished';
+
+const styles = () => ({
+  position: 'relative'
+});
+
+const Bar = createComponent(
+  ({ theme }) => ({
+    display: 'block',
+    width: '100%',
+    appearance: 'none',
+
+    '&::-webkit-progress-bar': {
+      backgroundColor: theme.bodyBackground,
+      color: theme.bodyBackground
+    },
+
+    '&::-webkit-progress-value': {
+      backgroundColor: theme.color.marine,
+      color: theme.color.marine,
+      transition: 'width 500ms ease'
+    },
+
+    /* Mozilla uses progress-bar as the value */
+    '&::-moz-progress-bar': {
+      backgroundColor: theme.color.marine,
+      color: theme.color.marine
+    }
+  }),
+  'progress',
+  ['max', 'value']
+);
+
+const Items = createComponent(
+  () => ({
+    listStyle: 'none',
+    ...clearFix(),
+    margin: 0,
+    padding: 0
+  }),
+  'ol'
+);
+
+const Item = createComponent(
+  ({ theme, width, disabled, active }) => {
+    let color = theme.colorGray;
+    if (disabled) {
+      color = theme.colorGrayLight;
+    } else if (active) {
+      color = theme.color.marine;
+    }
+
+    return {
+      width,
+      float: 'left',
+      height: 'auto',
+      padding: 0,
+      paddingTop: '7.5px',
+
+      color,
+      fontSize: '0.86667em',
+
+      textAlign: 'center',
+      cursor: disabled ? 'default' : 'pointer',
+
+      '&::before': {
+        content: 'none'
+      },
+
+      tablet: {
+        display: active ? 'block' : 'none',
+        width: 'auto !important',
+        float: 'none'
+      },
+
+      '& > .cf-link': {
+        display: 'block',
+        color: 'inherit',
+        cursor: 'pointer'
+      }
+    };
+  },
+  'li',
+  ['key', 'width', 'disabled', 'active']
+);
 
 class Progress extends React.Component {
   constructor(props) {
@@ -15,41 +101,42 @@ class Progress extends React.Component {
   }
 
   render() {
-    const max = this.props.steps.length;
+    const { className, steps, active } = this.props;
+    const max = steps.length;
     const itemWidth = (1 / max * 100).toFixed(4) + '%';
 
     let value;
 
-    const items = this.props.steps.map((step, index) => {
-      let className = 'cf-progress__item';
+    const items = steps.map((step, index) => {
+      const isActive = step.id === active;
 
-      if (step.id === this.props.active) {
+      if (isActive) {
         value = index + 1;
-        className += ' cf-progress__item--active';
-      }
-
-      if (step.disabled) {
-        className += ' cf-progress__item--disabled';
       }
 
       return (
-        <li key={step.id} className={className} style={{ width: itemWidth }}>
+        <Item
+          key={step.id}
+          width={itemWidth}
+          disabled={step.disabled}
+          active={isActive}
+        >
           <Link
             onClick={this.handleClick.bind(null, step)}
             disabled={step.disabled}
           >
             {step.label}
           </Link>
-        </li>
+        </Item>
       );
     });
 
     return (
-      <div className="cf-progress">
-        <progress className="cf-progress__bar" max={max} value={value} />
-        <ol className="cf-progress__items">
+      <div className={className}>
+        <Bar max={max} value={value} />
+        <Items>
           {items}
-        </ol>
+        </Items>
       </div>
     );
   }
@@ -64,11 +151,12 @@ Progress.propTypes = {
       label: PropTypes.string.isRequired,
       disabled: PropTypes.bool.isRequired
     })
-  ).isRequired
+  ).isRequired,
+  className: PropTypes.string
 };
 
 Progress.defaultProps = {
   steps: []
 };
 
-export default Progress;
+export default createComponent(styles, Progress);
diff --git a/packages/cf-component-progress/src/ProgressTheme.js b/packages/cf-component-progress/src/ProgressTheme.js
@@ -0,0 +1 @@
+export default baseTheme => ({});
diff --git a/packages/cf-component-progress/src/index.js b/packages/cf-component-progress/src/index.js
@@ -1,3 +1,8 @@
-import Progress from './Progress';
+import ProgressUnstyled from './Progress';
+import ProgressTheme from './ProgressTheme';
 
-export default Progress;
+import { applyTheme } from 'cf-style-container';
+
+const Progress = applyTheme(ProgressUnstyled, ProgressTheme);
+
+export { Progress, ProgressUnstyled, ProgressTheme };
diff --git a/packages/cf-component-progress/test/Progress.js b/packages/cf-component-progress/test/Progress.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import Progress from '../../cf-component-progress/src/index';
+import { felaSnapshot } from 'cf-style-provider';
+import { Progress } from '../../cf-component-progress/src/index';
 import Link from '../../cf-component-link/src/index';
 
 test('should render', () => {
-  const component = renderer.create(
+  const snapshot = felaSnapshot(
     <Progress
       active="foo"
       onChange={() => {}}
@@ -15,5 +15,6 @@ test('should render', () => {
       ]}
     />
   );
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(snapshot.component).toMatchSnapshot();
+  expect(snapshot.styles).toMatchSnapshot();
 });