Update cf-component-label to use Fela

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)',