added typography

.storybook/webpack.config.es6.js

@@ -18,6 +18,8 @@ module.exports = storybookBaseConfig => {
  },
  ]
 
+ console.log('storybookBaseConfig', storybookBaseConfig.resolve)
+
  // Return the altered config
  return {
  ...storybookBaseConfig,
@@ -39,6 +41,9 @@ module.exports = storybookBaseConfig => {
  '../node_modules/react-dom/dist/react-dom.js',
  ),
  },
+ // Unsure if this is the rigth way of doing it, but to make stories work
+ // with unpublished/local packages this checks in packages before node_modules
+ modules: [path.join(__dirname, '../packages'), 'node_modules'],
  },
  module: {
  ...storybookBaseConfig.module,

package.json

@@ -39,6 +39,7 @@
  "dependencies": {
  "prop-types": "^15.5.10",
  "react": "^15.6.1",
- "react-dom": "^15.6.1"
+ "react-dom": "^15.6.1",
+ "ui-box": "^0.3.4"
  }
 }

packages/evergreen-colors/package.json

@@ -2,7 +2,7 @@
  "name": "evergreen-colors",
  "version": "1.0.0",
  "description": "Colors",
- "main": "lib/colors.json",
+ "main": "src/colors.json",
  "keywords": [
  "evergreen",
  "segment",
@@ -13,6 +13,6 @@
  "author": "Segment",
  "license": "MIT",
  "devDependencies": {
- "ui-box": "^0.3.2"
+ "ui-box": "^0.3.4"
  }
 }

packages/evergreen-colors/yarn.lock

@@ -124,9 +124,9 @@ ua-parser-js@^0.7.9:
  version "0.7.14"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
-ui-box@^0.3.2:
- version "0.3.2"
- resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-0.3.2.tgz#08024821088341962297da6edffd00927da7f466"
+ui-box@^0.3.4:
+ version "0.3.4"
+ resolved "https://registry.yarnpkg.com/ui-box/-/ui-box-0.3.4.tgz#2ae577b80430f94c4326a596fcfe5362166a10d5"
  dependencies:
  classnames "^2.2.5"
  glamor "^2.20.22"

packages/evergreen-typography/package.json

@@ -0,0 +1,29 @@
+{
+ "name": "evergreen-typography",
+ "version": "1.0.0",
+ "description": "React components: Text, Paragraph, Heading, Code, Pre, Label, Small, Strong",
+ "main": "lib/index.js",
+ "keywords": [
+ "evergreen",
+ "segment",
+ "ui",
+ "react",
+ "Text",
+ "Paragraph",
+ "Heading",
+ "Code",
+ "Pre",
+ "Label",
+ "Small",
+ "Strong"
+ ],
+ "author": "Segment",
+ "license": "MIT",
+ "peerDependencies": {
+ "prop-types": "^15.0.0",
+ "react": "^0.14.0 || ^15.0.0"
+ },
+ "dependencies": {
+ "ui-box": "^0.3.4"
+ }
+}

packages/evergreen-typography/src/components/Code.js

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Pre extends PureComponent {
+ static defaultProps = {
+ is: 'code',
+ fontFamily: 'mono',
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Heading.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Heading extends PureComponent {
+ static defaultProps = {
+ is: 'h2',
+ color: 'dark',
+ fontFamily: 'display',
+ marginTop: 0,
+ marginBottom: '1em',
+ textStyleTransformation: ({ fontWeight, ...textStyle }) => ({
+ ...textStyle,
+ fontWeight: fontWeight + 100,
+ }),
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Label.js

@@ -0,0 +1,12 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Label extends PureComponent {
+ static defaultProps = {
+ is: 'label',
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Paragraph.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Paragraph extends PureComponent {
+ static defaultProps = {
+ is: 'p',
+ marginTop: 0,
+ marginBottom: '1em',
+ textStyleTransformation: ({ lineHeight, ...textStyle }) => ({
+ ...textStyle,
+ // Multiply line height by 1.1
+ lineHeight: `${Math.round(parseFloat(lineHeight, 10) * 1.1)}px`,
+ }),
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Pre.js

@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Pre extends PureComponent {
+ static defaultProps = {
+ is: 'pre',
+ fontFamily: 'mono',
+ marginTop: 0,
+ marginBottom: 'standard',
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Small.js

@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Small extends PureComponent {
+ static defaultProps = {
+ is: 'small',
+ textStyleTransformation: ({ fontSize, ...textStyle }) => ({
+ ...textStyle,
+ fontSize: `${Math.round(parseInt(fontSize, 10) * 0.8)}px`,
+ }),
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Strong.js

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class Strong extends PureComponent {
+ static defaultProps = {
+ is: 'strong',
+ fontWeight: 600,
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/SubHeading.js

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react'
+import Text from './Text'
+
+export default class SubHeading extends PureComponent {
+ static defaultProps = {
+ is: 'h3',
+ color: 'dark',
+ fontFamily: 'display',
+ marginTop: 0,
+ marginBottom: '1em',
+ textStyleTransformation: ({ fontWeight, ...textStyle }) => ({
+ ...textStyle,
+ fontWeight: fontWeight - 100,
+ }),
+ }
+
+ render() {
+ return <Text {...this.props} />
+ }
+}

packages/evergreen-typography/src/components/Text.js

@@ -0,0 +1,41 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Box from 'ui-box'
+import FontFamilies from '../styles/font-families'
+import TextStyles from '../styles/text-styles'
+import TextColors from '../styles/text-colors'
+
+export default class Text extends PureComponent {
+ static propTypes = {
+ size: PropTypes.oneOf(Object.keys(TextStyles).map(Number)).isRequired,
+ color: PropTypes.string,
+ fontFamily: PropTypes.oneOf(Object.keys(FontFamilies)).isRequired,
+ textStyleTransformation: PropTypes.func.isRequired,
+ }
+
+ static defaultProps = {
+ is: 'span',
+ size: 500,
+ color: 'default',
+ fontFamily: 'ui',
+ textStyleTransformation: textStyle => textStyle,
+ }
+
+ render() {
+ const {
+ size,
+ color,
+ fontFamily,
+ textStyleTransformation,
+ ...props
+ } = this.props
+ return (
+ <Box
+ color={TextColors[color] || color}
+ fontFamily={FontFamilies[fontFamily] || fontFamily}
+ {...textStyleTransformation(TextStyles[size])}
+ {...props}
+ />
+ )
+ }
+}

packages/evergreen-typography/src/index.js

@@ -0,0 +1,12 @@
+export { default as Text } from './components/Text'
+export { default as Paragraph } from './components/Paragraph'
+export { default as Heading } from './components/Heading'
+export { default as SubHeading } from './components/SubHeading'
+export { default as Code } from './components/Code'
+export { default as Pre } from './components/Pre'
+export { default as Label } from './components/Label'
+export { default as Small } from './components/Small'
+export { default as Strong } from './components/Strong'
+export { default as TextStyles } from './styles/text-styles'
+export { default as FontFamilies } from './styles/font-families'
+export { default as TextColors } from './styles/text-colors'

packages/evergreen-typography/src/styles/font-families.js

@@ -0,0 +1,5 @@
+export default {
+ display: `"SF UI Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+ ui: `"SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+ mono: `"SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace`,
+}

packages/evergreen-typography/src/styles/text-colors.js

@@ -0,0 +1,11 @@
+import colors from 'evergreen-colors'
+
+export default {
+ dark: colors.neutral['800'],
+ default: colors.neutral['500'],
+ muted: colors.neutral['300A'],
+ extraMuted: colors.neutral['200A'],
+ white: colors.white['500'],
+ whiteMuted: colors.white['300A'],
+ whiteExtraMuted: colors.white['200A'],
+}

packages/evergreen-typography/src/styles/text-styles.js

@@ -0,0 +1,52 @@
+export default {
+ '800': {
+ fontSize: '29px',
+ fontWeight: 400,
+ lineHeight: '32px',
+ letterSpacing: '-0.2px',
+ },
+ '700': {
+ fontSize: '28px',
+ fontWeight: 400,
+ lineHeight: '28px',
+ letterSpacing: '-0.2px',
+ },
+ '600': {
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '24px',
+ letterSpacing: '-0.05px',
+ },
+ '500': {
+ fontSize: '16px',
+ fontWeight: 400,
+ lineHeight: '24px',
+ letterSpacing: '-0.05px',
+ },
+ '400': {
+ fontSize: '14px',
+ fontWeight: 400,
+ lineHeight: '22px',
+ letterSpacing: '-0.05px',
+ },
+ '300': {
+ fontSize: '12px',
+ fontWeight: 400,
+ lineHeight: '16px',
+ letterSpacing: '0',
+ },
+ '200': {
+ fontSize: '11px',
+ fontWeight: 400,
+ lineHeight: '16px',
+ letterSpacing: '0.3px',
+ textTransform: 'uppercase',
+ },
+ '100': {
+ fontSize: '10px',
+ fontWeight: 400,
+ lineHeight: '16px',
+ letterSpacing: '0.3px',
+ textTransform: 'uppercase',
+ },
+}