diff --git a/packages/cf-component-progress/README.md b/packages/cf-component-progress/README.md index 8aacb86e..e34df60e 100644 --- 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 index 1bd74e4d..8fc6e0de 100644 --- 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 ( -
  • + {step.label} -
    • + ); }); return ( -
    - -
      +
      + + {items} -
    +
    ); } @@ -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 new file mode 100644 index 00000000..74d096c7 --- /dev/null +++ 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 index ce798039..136a87ba 100644 --- 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 index feb5e869..63bc542e 100644 --- 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( {}} @@ -15,5 +15,6 @@ test('should render', () => { ]} /> ); - expect(component.toJSON()).toMatchSnapshot(); + expect(snapshot.component).toMatchSnapshot(); + expect(snapshot.styles).toMatchSnapshot(); }); diff --git a/packages/cf-component-progress/test/__snapshots__/Progress.js.snap b/packages/cf-component-progress/test/__snapshots__/Progress.js.snap index 956da786..c97aa0f9 100644 --- a/packages/cf-component-progress/test/__snapshots__/Progress.js.snap +++ b/packages/cf-component-progress/test/__snapshots__/Progress.js.snap @@ -2,23 +2,21 @@ exports[`should render 1`] = `
    `; + +exports[`should render 2`] = ` +" +.a { + position: relative +} + +.b { + display: block +} + +.c { + width: 100% +} + +.d { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none +} + +.e::-webkit-progress-bar { + background-color: #ebebeb +} + +.f::-webkit-progress-bar { + color: #ebebeb +} + +.g::-webkit-progress-value { + background-color: #2F7BBF +} + +.h::-webkit-progress-value { + color: #2F7BBF +} + +.i::-webkit-progress-value { + transition: width 500ms ease; + -webkit-transition: width 500ms ease; + -moz-transition: width 500ms ease +} + +.j::-moz-progress-bar { + background-color: #2F7BBF +} + +.k::-moz-progress-bar { + color: #2F7BBF +} + +.l { + list-style: none +} + +.m::after { + clear: both +} + +.n::after { + content: \\"\\" +} + +.o::after { + display: table +} + +.p { + margin: 0px +} + +.q { + padding: 0px +} + +.r { + width: 33.3333% +} + +.s { + float: left +} + +.t { + height: auto +} + +.u { + padding-top: 7.5px +} + +.v { + color: #2F7BBF +} + +.w { + font-size: 0.86667em +} + +.x { + text-align: center +} + +.y { + cursor: pointer +} + +.z::before { + content: none +} + +.ab > .cf-link { + display: block +} + +.ac > .cf-link { + color: inherit +} + +.ad > .cf-link { + cursor: pointer +} + +.ah { + color: #7c7c7c +} + +.aj { + color: #dedede +} + +.ak { + cursor: default +} + +@media (min-width: 47.2em) { + .ae { + display: block + } + + .af { + width: auto !important + } + + .ag { + float: none + } + + .ai { + display: none + } +} +" +`;