buttons implemented

segmentio · Sep 6, 2017 · 11f9b42 · 11f9b42
1 parent ec0e6c4
commit 11f9b42
Show file tree

Hide file tree

Showing 13 changed files with 643 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -21,10 +21,12 @@
  "file-loader": "^0.11.2",
  "fs-extra": "^4.0.0",
  "lerna": "^2.0.0",
+ "linklocal": "^2.8.1",
  "prettier": "^1.5.3",
  "url-loader": "^0.5.9"
  },
  "scripts": {
+ "linklocal": "lerna exec linklocal",
  "dev": "npm run build:watch & npm run storybook",
  "create-package": "babel-node tools/create-package",
  "create-package:components": "babel-node tools/create-package-components",

diff --git a/packages/evergreen-buttons/package.json b/packages/evergreen-buttons/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "evergreen-buttons",
+ "version": "1.0.0",
+ "description": "React components: Button",
+ "main": "lib/index.js",
+ "keywords": [
+ "evergreen",
+ "segment",
+ "ui",
+ "react",
+ "Button",
+ "ButtonAppearances"
+ ],
+ "author": "Segment",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^0.14.0 || ^15.0.0",
+ "prop-types": "^15.0.0"
+ },
+ "dependencies": {
+ "ui-box": "^0.3.5",
+ "evergreen-colors": "^1.0.0",
+ "evergreen-typography": "^1.0.0"
+ }
+}
diff --git a/packages/evergreen-buttons/src/components/Button.js b/packages/evergreen-buttons/src/components/Button.js
@@ -0,0 +1,66 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Text, TextStyles } from 'evergreen-typography'
+import ButtonAppearances from '../styles/button-appearances'
+
+const getTextStyleForButton = ({ height }) => {
+ // HACK: add padding top to visually align in center
+ if (height <= 24) return { ...TextStyles['200'], paddingTop: 1 }
+ if (height <= 28) return TextStyles['300']
+ if (height <= 32) return TextStyles['300']
+ if (height <= 36) return TextStyles['400']
+ if (height <= 40) return TextStyles['400']
+ if (height <= 48) return TextStyles['500']
+ if (height <= 56) return TextStyles['700']
+ return TextStyles['800']
+}
+
+export default class Button extends PureComponent {
+ static propTypes = {
+ ...Text.propTypes,
+ appearance: PropTypes.oneOf(Object.keys(ButtonAppearances)).isRequired,
+ }
+
+ static defaultProps = {
+ is: 'button',
+ appearance: 'default',
+ paddingTop: 0,
+ paddingBottom: 0,
+ display: 'inline-block',
+ height: 32,
+ fontFamily: 'ui',
+ fontWeight: 500,
+ }
+
+ render() {
+ const {
+ appearance,
+ css,
+ height,
+ paddingRight,
+ paddingLeft,
+ paddingTop,
+ paddingBottom,
+ ...props
+ } = this.props
+ const appearanceStyle = ButtonAppearances[appearance]
+ const textStyle = getTextStyleForButton({ height })
+
+ return (
+ <Text
+ paddingTop={paddingTop}
+ paddingBottom={paddingBottom}
+ paddingRight={paddingRight || Math.round(height / 2)}
+ paddingLeft={paddingLeft || Math.round(height / 2)}
+ {...textStyle}
+ css={{
+ ...css,
+ ...appearanceStyle,
+ }}
+ height={height}
+ lineHeight={`${height}px`}
+ {...props}
+ />
+ )
+ }
+}
diff --git a/packages/evergreen-buttons/src/index.js b/packages/evergreen-buttons/src/index.js
@@ -0,0 +1,2 @@
+export { default as Button } from './components/Button'
+export { default as ButtonAppearances } from './styles/button-appearances'
diff --git a/packages/evergreen-buttons/src/styles/button-appearances.js b/packages/evergreen-buttons/src/styles/button-appearances.js
@@ -0,0 +1,142 @@
+import colors from 'evergreen-colors'
+
+const baseStyle = {
+ WebkitFontSmoothing: 'antialiased',
+ boxSizing: 'border-box',
+ textDecoration: 'none',
+ transition: 'box-shadow 80ms ease-in-out',
+ WebkitAppearance: 'none',
+ borderRadius: 5,
+ border: 'none',
+ outline: 'none',
+ cursor: 'pointer',
+ '[disabled], [data-disabled]': {
+ pointerEvents: 'none',
+ opacity: 0.8,
+ backgroundImage: 'none',
+ backgroundColor: colors.neutral['10A'],
+ boxShadow: 'none',
+ color: colors.neutral['300A'],
+ },
+}
+
+const ButtonAppearances = {
+ default: {
+ ...baseStyle,
+ backgroundColor: 'white',
+ backgroundImage: `linear-gradient(to top, ${colors.neutral['5A']}, white)`,
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '20A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['10A']}`,
+ ':hover': {
+ backgroundImage: `linear-gradient(to top, ${colors.neutral[
+ '7A'
+ ]}, ${colors.neutral['3A']} )`,
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '40A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['15A']}`,
+ },
+ ':focus': {
+ boxShadow: `0 0 0 2px ${colors.blue['20A']}, inset 0 0 0 1px ${colors
+ .neutral['70A']}, inset 0 -1px 1px 0 ${colors.neutral['10A']}`,
+ },
+ ':active': {
+ color: colors.blue['1000'],
+ backgroundImage: 'none',
+ backgroundColor: colors.blue['10A'],
+ boxShadow: `inset 0 0 0 1px ${colors.blue['80A']}`,
+ },
+ },
+ blue: {
+ ...baseStyle,
+ backgroundColor: colors.blue['500'],
+ color: 'white',
+ backgroundImage: `linear-gradient(to top, ${colors.blue['600']}, ${colors
+ .blue['400']})`,
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ ':hover': {
+ backgroundImage: `linear-gradient(to top, ${colors.blue['700']}, ${colors
+ .blue['500']})`,
+ },
+ ':focus': {
+ boxShadow: `0 0 0 2px ${colors.blue['50A']}, inset 0 0 0 1px ${colors
+ .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ },
+ ':active': {
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ backgroundImage: `linear-gradient(to top, ${colors.blue['800']}, ${colors
+ .blue['900']})`,
+ },
+ },
+ green: {
+ ...baseStyle,
+ backgroundColor: colors.green['500'],
+ color: 'white',
+ backgroundImage: `linear-gradient(to top, ${colors.green['600']}, ${colors
+ .green['500']})`,
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ ':hover': {
+ backgroundImage: `linear-gradient(to top, ${colors.green['700']}, ${colors
+ .green['600']})`,
+ },
+ ':focus': {
+ boxShadow: `0 0 0 2px ${colors.green['100A']}, inset 0 0 0 1px ${colors
+ .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ },
+ ':active': {
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ backgroundImage: `linear-gradient(to top, ${colors.green['800']}, ${colors
+ .green['900']})`,
+ },
+ },
+ red: {
+ ...baseStyle,
+ backgroundColor: colors.green['500'],
+ color: 'white',
+ backgroundImage: `linear-gradient(to top, ${colors.red['600']}, ${colors
+ .red['500']})`,
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ ':hover': {
+ backgroundImage: `linear-gradient(to top, ${colors.red['700']}, ${colors
+ .red['600']})`,
+ },
+ ':focus': {
+ boxShadow: `0 0 0 2px ${colors.red['100A']}, inset 0 0 0 1px ${colors
+ .neutral['30A']}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ },
+ ':active': {
+ boxShadow: `inset 0 0 0 1px ${colors.neutral[
+ '30A'
+ ]}, inset 0 -1px 1px 0 ${colors.neutral['30A']}`,
+ backgroundImage: `linear-gradient(to top, ${colors.red['800']}, ${colors
+ .red['900']})`,
+ },
+ },
+ ghost: {
+ ...baseStyle,
+ backgroundColor: 'white',
+ ':hover': {
+ backgroundColor: colors.neutral['7A'],
+ },
+ ':focus': {
+ boxShadow: `0 0 0 2px ${colors.blue['50A']}`,
+ },
+ ':active': {
+ color: colors.blue['1000'],
+ boxShadow: 'none',
+ backgroundColor: colors.blue['10A'],
+ },
+ },
+}
+
+export default ButtonAppearances
diff --git a/packages/evergreen-buttons/stories/index.stories.js b/packages/evergreen-buttons/stories/index.stories.js
@@ -0,0 +1,99 @@
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import { Button, ButtonAppearances } from '../src/'
+
+const baseStyles = {
+ margin: 16,
+}
+
+storiesOf('buttons', module).add('Button', () =>
+ <div>
+ {Object.keys(ButtonAppearances).map(appearance =>
+ <div>
+ <Button appearance={appearance} {...baseStyles}>
+ {appearance}
+ </Button>
+ <Button disabled appearance={appearance} {...baseStyles}>
+ {appearance}
+ </Button>
+ <Button appearance={appearance} {...baseStyles} height={48}>
+ {appearance} 48
+ </Button>
+ <Button appearance={appearance} {...baseStyles} height={40}>
+ {appearance} 40
+ </Button>
+ <Button appearance={appearance} {...baseStyles} height={36}>
+ {appearance} 36
+ </Button>
+ <Button appearance={appearance} {...baseStyles} height={28}>
+ {appearance} 28
+ </Button>
+ <Button appearance={appearance} {...baseStyles} height={24}>
+ {appearance} 24
+ </Button>
+ </div>,
+ )}
+
+ {Object.keys(ButtonAppearances).map(appearance =>
+ <div>
+ <Button is="a" href="#" appearance={appearance} {...baseStyles}>
+ {appearance}
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ disabled
+ appearance={appearance}
+ {...baseStyles}
+ >
+ {appearance}
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ appearance={appearance}
+ {...baseStyles}
+ height={48}
+ >
+ {appearance} 48
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ appearance={appearance}
+ {...baseStyles}
+ height={40}
+ >
+ {appearance} 40
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ appearance={appearance}
+ {...baseStyles}
+ height={36}
+ >
+ {appearance} 36
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ appearance={appearance}
+ {...baseStyles}
+ height={28}
+ >
+ {appearance} 28
+ </Button>
+ <Button
+ is="a"
+ href="#"
+ appearance={appearance}
+ {...baseStyles}
+ height={24}
+ >
+ {appearance} 24
+ </Button>
+ </div>,
+ )}
+ </div>,
+)