feat(text): inline styles

via glamorous; other props also went camel-case

BREAKING CHANGE inline styles will change public api

packages/text/index.js

@@ -1,3 +1,3 @@
-import React from './react'
+const React = require('./react')
 
-export default { React }
+module.exports = { React }

packages/text/package.json

@@ -3,8 +3,9 @@
   "version": "4.0.7",
   "description": "Design system component for text-related ui",
   "main": "index.js",
-  "style": "css/index.module.css",
   "scripts": {
+    "build": "babel src --out-dir dist --ignore spec.js",
+    "prepublish": "npm run build",
     "test": "echo \"Error: tests run in as a single design system suite\" && exit 1"
   },
   "keywords": [],
@@ -18,7 +19,10 @@
   "dependencies": {
     "@pluralsight/ps-design-system-core": "^2.1.6",
     "classnames": "^2.2.5",
-    "prop-types": "^15.5.10",
-    "react-styleable": "^3.1.0"
+    "glamorous": "^4.1.0",
+    "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1"
   }
 }

packages/text/react.js

@@ -0,0 +1,6 @@
+// TODO: how can I avoid doing this .default bit?
+module.exports = {
+  Heading: require('./dist/react/heading').default,
+  List: require('./dist/react/list'),
+  P: require('./dist/react/p').default
+}

packages/text/src/react/heading.js

@@ -0,0 +1,71 @@
+import classNames from 'classnames'
+import core from '@pluralsight/ps-design-system-core'
+import * as glamor from 'glamor'
+import React from 'react'
+
+const sizes = {
+  smallCaps: 'smallCaps',
+  medium: 'medium',
+  large: 'large',
+  xxLarge: 'xxLarge'
+}
+
+const styleSize = ({ size }) =>
+  ({
+    smallCaps: {
+      color: core.colors.gray02,
+      textTransform: 'uppercase',
+      fontSize: core.type.fontSizeXSmall,
+      letterSpacing: core.type.letterSpacingXSmall,
+      lineHeight: core.type.lineHeighTight,
+      fontWeight: core.type.fontWeightMedium
+    },
+    medium: {
+      fontSize: core.type.fontSizeMedium,
+      letterSpacing: core.type.letterSpacingMedium,
+      lineHeight: core.type.lineHeightStandard,
+      fontWeight: core.type.fontWeightMedium
+    },
+    large: {
+      fontSize: core.type.fontSizeLarge,
+      letterSpacing: core.type.letterSpacingLarge,
+      lineHeight: core.type.lineHeightStandard,
+      fontWeight: core.type.fontWeightMedium
+    },
+    xxLarge: {
+      fontSize: core.type.fontSizeXXLarge,
+      letterSpacing: core.type.letterSpacingXXLarge,
+      lineHeight: core.type.lineHeightHuge,
+      fontWeight: core.type.fontWeightLight
+    }
+  }[size])
+
+const formatClassName = props =>
+  classNames({
+    [glamor.css(
+      {
+        color: core.colors.white,
+        margin: `${core.layout.spacingMedium} 0`
+      },
+      styleSize(props)
+    )]: true,
+    [props.className]: props.className
+  })
+
+const rmChildren = ({ children, ...rest }) => rest
+
+const Heading = props =>
+  React.cloneElement(React.Children.only(props.children), {
+    ...rmChildren(props),
+    className: formatClassName(props)
+  })
+
+import PropTypes from 'prop-types'
+Heading.propTypes = {
+  size: PropTypes.oneOf(Object.keys(sizes))
+}
+Heading.defaultProps = {
+  size: sizes.large
+}
+Heading.sizes = sizes
+export default Heading

packages/text/src/react/list/index.js

@@ -0,0 +1,54 @@
+import core from '@pluralsight/ps-design-system-core'
+import * as glamor from 'glamor'
+import React from 'react'
+
+import ListItem from './list-item'
+
+const types = { bulleted: 'bulleted', numbered: 'numbered' }
+
+const styleType = ({ type }) =>
+  ({
+    bulleted: {
+      listStyle: 'inherit'
+    },
+    numbered: {
+      listStyle: 'inherit',
+      listStyleType: 'decimal'
+    }
+  }[type])
+
+const formatClassName = props =>
+  glamor.css(
+    {
+      listStyle: 'none',
+      marginLeft: 0,
+      color: core.colors.bone,
+      fontSize: core.type.fontSizeSmall,
+      lineHeight: core.type.lineHeightExtra
+    },
+    styleType(props)
+  )
+
+const getTagName = props => (props.type === 'numbered' ? 'ol' : 'ul')
+
+const rmNonHtmlProps = props => {
+  const { type, ...rest } = props
+  return rest
+}
+
+const List = props =>
+  React.createElement(
+    getTagName(props),
+    { ...rmNonHtmlProps(props), className: formatClassName(props) },
+    props.children
+  )
+
+import PropTypes from 'prop-types'
+List.propTypes = {
+  type: PropTypes.oneOf(Object.keys(types))
+}
+List.types = types
+
+// TODO: how to do this with es6 exports?!
+module.exports = List
+module.exports.Item = ListItem

packages/text/src/react/list/list-item.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default props =>
+  <li {...props}>
+    {props.children}
+  </li>

packages/text/src/react/p.js

@@ -0,0 +1,17 @@
+import classNames from 'classnames'
+import core from '@pluralsight/ps-design-system-core'
+import * as glamor from 'glamor'
+import React from 'react'
+
+const formatClassname = props =>
+  classNames({
+    [glamor.css({
+      color: core.colors.bone,
+      fontSize: core.type.fontSizeSmall,
+      margin: `${core.type.spacingSmall} 0`,
+      lineHeight: core.type.lineHeightStandard
+    })]: true,
+    [props.className]: props.className
+  })
+
+export default props => <p {...props} className={formatClassname(props)} />