Update cf-component-label to use Fela (#103)

* Updated the component as per new discussions

* Fixed spaces in LabelTheme

* Added new colors to color palette

* Updated snapshots

packages/cf-component-label/example/basic/component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Label from 'cf-component-label';
+import { Label } from 'cf-component-label';
 
 const LabelComponent = () => (
  <p>

packages/cf-component-label/package.json

@@ -10,6 +10,10 @@
  "publishConfig": {
  "registry": "http://registry.npmjs.org/"
  },
+ "dependencies": {
+ "cf-style-container": "^1.0.0",
+ "polished": "^1.0.2"
+ },
  "peerDependencies": {
  "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
  }

packages/cf-component-label/src/Label.js

@@ -1,13 +1,35 @@
 import React, { PropTypes } from 'react';
+import { createComponent } from 'cf-style-container';
+
+const styles = props => {
+ const theme = props.theme;
+ return {
+ borderRadius: theme.borderRadius,
+ color: theme.color,
+ display: theme.display,
+ fontSize: theme.fontSize,
+ fontWeight: theme.fontWeight,
+ lineHeight: theme.lineHeight,
+ paddingTop: theme.paddingTop,
+ paddingRight: theme.paddingRight,
+ paddingBottom: theme.paddingBottom,
+ paddingLeft: theme.paddingLeft,
+ textTransform: theme.textTransform,
+ userSelect: theme.userSelect,
+ verticalAlign: theme.verticalAlign,
+ '-webkit-text-stroke': theme.webkitTextStroke,
+ whiteSpace: theme.whiteSpace,
+ backgroundColor: theme[`${props.type}BackgroundColor`]
+ };
+};
 
 class Label extends React.Component {
  render() {
- return React.createElement(
- this.props.tagName,
- {
- className: 'cf-label cf-label--' + this.props.type
- },
- this.props.children
+ const { children, className } = this.props;
+ return (
+ <span className={className}>
+ {children}
+ </span>
  );
  }
 }
@@ -20,12 +42,7 @@ Label.propTypes = {
  'warning',
  'error'
  ]).isRequired,
- tagName: PropTypes.string,
  children: PropTypes.node
 };
 
-Label.defaultProps = {
- tagName: 'span'
-};
-
-export default Label;
+export default createComponent(styles, Label);

packages/cf-component-label/src/LabelTheme.js

@@ -0,0 +1,27 @@
+import { rem } from 'polished';
+
+export default baseTheme => {
+ return {
+ borderRadius: baseTheme.borderRadius,
+ color: baseTheme.colorWhite,
+ display: 'inline-block',
+ fontSize: `${(parseFloat(baseTheme.fontSize) - 2) / parseFloat(baseTheme.fontSize)}rem`,
+ fontWeight: baseTheme.weightSemiBold,
+ lineHeight: baseTheme.rem,
+ paddingTop: '0.26667em',
+ paddingRight: '0.4em',
+ paddingBottom: '0.26667em',
+ paddingLeft: '0.4em',
+ textTransform: 'uppercase',
+ userSelect: 'none',
+ verticalAlign: 'baseline',
+ webkitTextStroke: 0,
+ whiteSpace: 'nowrap',
+
+ defaultBackgroundColor: baseTheme.color.cement,
+ infoBackgroundColor: baseTheme.color.marine,
+ successBackgroundColor: baseTheme.color.grass,
+ warningBackgroundColor: baseTheme.color.tangerine,
+ errorBackgroundColor: baseTheme.color.apple
+ };
+};

packages/cf-component-label/src/index.js

@@ -1,3 +1,8 @@
-import Label from './Label';
+import LabelUnstyled from './Label';
+import LabelTheme from './LabelTheme';
 
-export default Label;
+import { applyTheme } from 'cf-style-container';
+
+const Label = applyTheme(LabelUnstyled, LabelTheme);
+
+export { Label, LabelTheme, LabelUnstyled };

packages/cf-component-label/test/Label.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Label from '../../cf-component-label/src/index';
+import felaTestContext from '../../../felaTestContext';
+import { Label } from '../../cf-component-label/src/index';
 
 test('should render', () => {
- const component = renderer.create(<Label type="default">A Label</Label>);
- expect(component.toJSON()).toMatchSnapshot();
-});
-
-test('should render with custom tagName', () => {
  const component = renderer.create(
- <Label type="default" tagName="small">A Label</Label>
+ felaTestContext(<Label type="default">A Label</Label>)
  );
  expect(component.toJSON()).toMatchSnapshot();
 });

packages/cf-component-label/test/__snapshots__/Label.js.snap

@@ -2,16 +2,8 @@
 
 exports[`should render 1`] = `
 <span
- className="cf-label cf-label--default"
+ className="cf-1srpxdy"
 >
  A Label
 </span>
 `;
-
-exports[`should render with custom tagName 1`] = `
-<small
- className="cf-label cf-label--default"
->
- A Label
-</small>
-`;

packages/cf-style-const/src/variables.js

@@ -15,6 +15,7 @@ export default {
  eight: 'linear-gradient(left, #85CBA8, #FFDB6F)'
  },
  color: {
+ //Style guide colors
  rain: '#408BC9',
  sky: '#76C4E2',
  dew: '#85CBA8',
@@ -26,7 +27,13 @@ export default {
  night: '#404041',
  dusk: '#4D4D4F',
  storm: '#808285',
- hail: '#BCBEC0'
+ hail: '#BCBEC0',
+ //current colors
+ cement:'#7D7D7D',
+ grass:'#9BCA3E',
+ marine:'#2F7BBF',
+ tangerine:'#FF7900',
+ apple:'#BD2527'
  },
  fontSize: '16px',
  boxShadow: '0 0 20px 0 rgba(136,136,136,0.50)',