@hackclub/design-system - npm Package Compare versions

Comparing version 0.0.1-9 to 0.0.1-10

.storybook/BackgroundImage.js

@@ -6,4 +6,7 @@ import React from 'react'
 
-const image =
-  'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'
+const props = {
+  src:
+    'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
+  'aria-label': 'Wooden desk with tools and chair'
+}
 
@@ -17,3 +20,3 @@ storiesOf('BackgroundImage', module)
     })(() => (
-      <BackgroundImage image={image} width={256}>
+      <BackgroundImage {...props} width={256}>
         <Text fontSize={6} bold align="center" color="white" p={4}>
@@ -25,19 +28,22 @@ Hello
   )
-  .add('Fixed Height', () => (
-    <BackgroundImage height={256} image={image} width={512}>
-      <Box p={4}>
-        <Text fontSize={6} bold align="center" color="white">
-          Hello
-        </Text>
-      </Box>
+  .add('Fixed height', () => (
+    <BackgroundImage height={256} width={512} {...props}>
+      <Text fontSize={6} bold align="center" color="white" p={4}>
+        Height
+      </Text>
     </BackgroundImage>
   ))
   .add('Responsive', () => (
-    <BackgroundImage width={[128, 256, 512]} height={256} image={image}>
-      <Box p={4}>
-        <Text fontSize={6} bold align="center" color="white">
-          Hello
-        </Text>
-      </Box>
+    <BackgroundImage width={[128, 256, 512]} height="256px" {...props}>
+      <Text fontSize={6} bold align="center" color="white" p={4}>
+        Hello
+      </Text>
     </BackgroundImage>
   ))
+  .add('Scale', () => (
+    <BackgroundImage height="512px" scale {...props}>
+      <Text fontSize={6} bold align="center" color="white" p={4}>
+        Hover
+      </Text>
+    </BackgroundImage>
+  ))

.storybook/Button.js

 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
-import { Button } from '../src'
+import { Button, Flex } from '../src'
 
@@ -15,3 +15,3 @@ storiesOf('Button', module)
   .add('Colors', () => (
-    <div>
+    <Flex wrap>
       <Button mr={2}>Button</Button>
@@ -27,5 +27,32 @@ <Button bg="accent" mr={2}>
       </Button>
-    </div>
+    </Flex>
   ))
+  .add('Font size', () => (
+    <Flex align="baseline" wrap>
+      <Button mr={2} f={1}>
+        Size 1
+      </Button>
+      <Button bg="accent" mr={2} f={2}>
+        Size 2
+      </Button>
+      <Button bg="info" mr={2} f={3}>
+        Size 3
+      </Button>
+      <Button bg="accent" inverted mr={2} f={4}>
+        Size 4
+      </Button>
+    </Flex>
+  ))
   .add('Width', () => <Button w={1}>Full Width</Button>)
   .add('Disabled', () => <Button disabled>Disabled</Button>)
+  .add('Scale', () => <Button scale>Scale</Button>)
+  .add('Chevrons', () => (
+    <Flex wrap>
+      <Button bg="info" mr={3} chevronLeft>
+        Back
+      </Button>
+      <Button bg="success" chevronRight>
+        Forward
+      </Button>
+    </Flex>
+  ))

.storybook/config.js

 import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
-import { injectGlobal } from 'styled-components'
 import { ThemeProvider, Box } from '../src'
 
-injectGlobal([], {
-  '*': {
-    boxSizing: 'border-box'
-  },
-  body: {
-    lineHeight: 1.5,
-    margin: 0
-  }
-})
-
 addDecorator(story => (
-  <ThemeProvider>
+  <ThemeProvider webfonts>
     <Box p={3}>{story()}</Box>
@@ -19,0 +8,0 @@ </ThemeProvider>

.storybook/Divider.js

@@ -6,6 +6,2 @@ import React from 'react'
 
-const ColumnFlex = Flex.extend`
-  flex-direction: column;
-`
-
 storiesOf('Divider', module)
@@ -15,4 +11,3 @@ .add(
     withInfo({
-      text:
-        'Styled <hr /> with settings for padding, margin, width, and borderColor',
+      text: 'Styled <hr /> with settings for padding, margin, width, and color',
       inline: true
@@ -22,7 +17,8 @@ })(() => <Divider />)
   .add('Margin', () => <Divider m={3} />)
-  .add('Width', () => <Divider p={3} width={1 / 2} />)
-  .add('Pixel Width', () => <Divider width={256} />)
-  .add('VW Width', () => <Divider width="50vw" />)
-  .add('Border Color', () => <Divider m={3} borderColor="accent" />)
-  .add('Directional Margin', () => (
+  .add('Width', () => <Divider m={3} width={1 / 2} />)
+  .add('Pixel width', () => <Divider width={256} />)
+  .add('VW width', () => <Divider width="50vw" />)
+  .add('Color', () => <Divider m={3} color="accent" />)
+  .add('Height', () => <Divider m={3} color="accent" height="4px" />)
+  .add('Directional margin', () => (
     <div>
@@ -37,4 +33,4 @@ <Divider mt={3} />
   ))
-  .add('Inside Column Flex', () => (
-    <ColumnFlex>
+  .add('Inside flex column', () => (
+    <Flex flexDirection="column">
       <Divider />
@@ -45,3 +41,3 @@ <Divider ml={4} mr={4} />
       <Divider mx={2} />
-    </ColumnFlex>
+    </Flex>
   ))

.storybook/Icon.js

 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
-import { Icon, Flex, Box, Heading, Text } from '../src'
-import icons from '../icons.js'
+import { Icon } from '../src'
 
-const Grid = Box.extend`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 96px);
-  grid-gap: 1rem;
-`
-
-storiesOf('Icon', module)
-  .add(
-    'Icon component',
-    withInfo({
-      inline: true,
-      text: 'Google’s Material Design icons as stylable components.'
-    })(() => <Icon color="primary" size={48} m={2} name="flag" />)
-  )
-  .add('All icons', () => (
-    <Box p={3} m={-3} color="white" bg="blue.5">
-      <Heading.h1 f={[4, 5]} mb={3}>
-        All Icons
-      </Heading.h1>
-      <Grid>
-        {Object.keys(icons).map(name => (
-          <Box key={name}>
-            <Icon name={name} size={48} />
-            <Text m={0} fontSize={0}>
-              {name}
-            </Text>
-          </Box>
-        ))}
-      </Grid>
-    </Box>
-  ))
-  .add('Color', () => (
-    <Flex align="center">
-      <Icon color="red.5" size={48} m={2} name="favorite" />
-      <Icon color="blue.5" size={48} m={2} name="build" />
-      <Icon color="green.5" size={48} m={2} name="check_box" />
-    </Flex>
-  ))
+storiesOf('Icon', module).add(
+  'Icon component',
+  withInfo({
+    inline: true,
+    text: 'A wrapper component for using icons from different iconsets.'
+  })(() => <Icon set="md" name="flag" color="primary" size={48} />)
+)

.storybook/IconButton.js

@@ -16,4 +16,12 @@ import React, { Fragment } from 'react'
   )
-  .add('Plus button', () => (
+  .add('Rectangular button', () => (
     <IconButton
+      name="send"
+      bg="info"
+      color="white"
+      onClick={action('clicked')}
+    />
+  ))
+  .add('Circular button', () => (
+    <IconButton
       name="add"
@@ -26,3 +34,3 @@ bg="success"
   ))
-  .add('Disabled close button', () => (
+  .add('Disabled circular buttons', () => (
     <Fragment>
@@ -29,0 +37,0 @@ <IconButton

.storybook/Image.js

@@ -6,3 +6,7 @@ import React from 'react'
 
-const description = 'A low-level layout component that renders an image'
+const text = 'A low-level layout component that renders an image'
+const props = {
+  src: 'https://hackclub.com/lah_1.jpg',
+  alt: 'Smiling students at a hackathon'
+}
 
@@ -13,5 +17,5 @@ storiesOf('Image', module)
     withInfo({
-      text: description,
+      text,
       inline: true
-    })(() => <Image src="https://hackclub.com/about_hacking.jpg" />)
+    })(() => <Image {...props} />)
   )
@@ -21,4 +25,4 @@
     <Box width={1 / 2}>
-      <Image src="https://hackclub.com/about_hacking.jpg" />
+      <Image {...props} />
     </Box>
   ))

dist/BackgroundImage.js

@@ -8,15 +8,31 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  [
-    '\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ',
-    ';\n  ',
-    ' ',
-    ';\n'
-  ],
-  [
-    '\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ',
-    ';\n  ',
-    ' ',
-    ';\n'
-  ]
-)
+    [
+      '\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ',
+      ';\n  ',
+      ' ',
+      ';\n\n  ',
+      ';\n'
+    ],
+    [
+      '\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ',
+      ';\n  ',
+      ' ',
+      ';\n\n  ',
+      ';\n'
+    ]
+  ),
+  _templateObject2 = _taggedTemplateLiteral(
+    [
+      '\n    overflow: hidden;\n    transition: ',
+      ' background-size;\n    will-change: background-size;\n    background-size: auto 100%;\n    &:hover {\n      background-size: auto ',
+      '%;\n    }\n    ',
+      ' {\n      transition: none;\n      background-size: cover !important;\n    }\n  '
+    ],
+    [
+      '\n    overflow: hidden;\n    transition: ',
+      ' background-size;\n    will-change: background-size;\n    background-size: auto 100%;\n    &:hover {\n      background-size: auto ',
+      '%;\n    }\n    ',
+      ' {\n      transition: none;\n      background-size: cover !important;\n    }\n  '
+    ]
+  )
 
@@ -35,2 +51,4 @@ var _Box = require('./Box')
 
+var _styledComponents = require('styled-components')
+
 function _interopRequireDefault(obj) {
@@ -46,8 +64,8 @@ return obj && obj.__esModule ? obj : { default: obj }
 
-var image = function image(props) {
-  return props.image ? { backgroundImage: 'url(' + props.image + ')' } : null
+var src = function src(props) {
+  return props.src && { backgroundImage: 'url(' + props.src + ')' }
 }
 
 var height = function height(props) {
-  return props.height ? { height: props.height } : null
+  return props.height && { height: props.height }
 }
@@ -60,4 +78,21 @@
   },
-  image,
-  height
+  src,
+  height,
+  function(props) {
+    return (
+      props.scale &&
+      (0, _styledComponents.css)(
+        _templateObject2,
+        function(props) {
+          return props.theme.transition
+        },
+        function(props) {
+          return props.theme.scaleFactor * 100
+        },
+        function(props) {
+          return props.theme.mediaQueries.reduceMotion
+        }
+      )
+    )
+  }
 )
@@ -69,3 +104,7 @@
   /** background-image url */
-  image: _propTypes2.default.string
+  src: _propTypes2.default.string.isRequired,
+  /** add hover animation */
+  scale: _propTypes2.default.bool,
+  /** accessible label */
+  'aria-label': _propTypes2.default.string.isRequired
 }
@@ -72,0 +111,0 @@

dist/Button.js

@@ -8,23 +8,53 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  [
-    '\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ',
-    ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: .125s box-shadow ease-out;\n  box-shadow: 0 2px 12px ',
-    ';\n  border-radius: ',
-    ';\n  border-width: 0;\n  border-style: solid;\n\n  ',
-    ';\n\n  &:hover, &:focus {\n    outline: 0;\n    box-shadow: 0 2px 12px 2px ',
-    ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 4px 16px 2px ',
-    ';\n  }\n\n  ',
-    ';\n'
-  ],
-  [
-    '\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ',
-    ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: .125s box-shadow ease-out;\n  box-shadow: 0 2px 12px ',
-    ';\n  border-radius: ',
-    ';\n  border-width: 0;\n  border-style: solid;\n\n  ',
-    ';\n\n  &:hover, &:focus {\n    outline: 0;\n    box-shadow: 0 2px 12px 2px ',
-    ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 4px 16px 2px ',
-    ';\n  }\n\n  ',
-    ';\n'
-  ]
-)
+    [
+      '\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ',
+      ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ',
+      ' box-shadow;\n  box-shadow: 0 2px 4px ',
+      ';\n  border-radius: ',
+      ';\n  border-width: 0;\n  border-style: solid;\n\n  ',
+      ';\n\n  &:hover, &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px ',
+      ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px ',
+      ';\n  }\n\n  ',
+      ';\n\n  ',
+      ';\n\n  ',
+      ';\n  ',
+      ';\n'
+    ],
+    [
+      '\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ',
+      ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ',
+      ' box-shadow;\n  box-shadow: 0 2px 4px ',
+      ';\n  border-radius: ',
+      ';\n  border-width: 0;\n  border-style: solid;\n\n  ',
+      ';\n\n  &:hover, &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px ',
+      ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px ',
+      ';\n  }\n\n  ',
+      ';\n\n  ',
+      ';\n\n  ',
+      ';\n  ',
+      ';\n'
+    ]
+  ),
+  _templateObject2 = _taggedTemplateLiteral(
+    [
+      '\n      transition: ',
+      ' all;\n      will-change: transform;\n      transform: scale(1);\n      &:hover,\n      &:focus {\n        transform: scale(',
+      ');\n      }\n      ',
+      ' {\n        transform: none !important;\n      }\n    '
+    ],
+    [
+      '\n      transition: ',
+      ' all;\n      will-change: transform;\n      transform: scale(1);\n      &:hover,\n      &:focus {\n        transform: scale(',
+      ');\n      }\n      ',
+      ' {\n        transform: none !important;\n      }\n    '
+    ]
+  ),
+  _templateObject3 = _taggedTemplateLiteral(
+    ["\n      &:before {\n        content: '\xAB ';\n      }\n    "],
+    ["\n      &:before {\n        content: '\xAB ';\n      }\n    "]
+  ),
+  _templateObject4 = _taggedTemplateLiteral(
+    ["\n      &:after {\n        content: ' \xBB';\n      }\n    "],
+    ["\n      &:after {\n        content: ' \xBB';\n      }\n    "]
+  )
 
@@ -63,2 +93,5 @@ var _styledComponents = require('styled-components')
   function(props) {
+    return props.theme.transition
+  },
+  function(props) {
     return props.theme.shadowColor
@@ -70,21 +103,44 @@ },
   function(props) {
+    return (
+      props.inverted && {
+        backgroundColor: (0, _theme.cx)(props.color),
+        color: (0, _theme.cx)(props.bg)
+      }
+    )
+  },
+  function(props) {
     return props.inverted
-      ? {
-          backgroundColor: props.theme.colors[props.color],
-          color: props.theme.colors[props.bg]
-        }
-      : null
+      ? props.theme.shadowColor
+      : (0, _theme.hexa)(props.bg, 0.25)
   },
   function(props) {
-    return !props.inverted && props.bg === 'primary'
-      ? 'rgba(228,45,66,.25)'
-      : props.theme.shadowColor
+    return props.inverted
+      ? props.theme.shadowColor
+      : (0, _theme.hexa)(props.bg, 0.25)
   },
   function(props) {
-    return !props.inverted && props.bg === 'primary'
-      ? 'rgba(228,45,66,.375)'
-      : props.theme.shadowColor
+    return props.disabled && { opacity: 0.25, cursor: 'not-allowed' }
   },
   function(props) {
-    return props.disabled ? 'opacity: 0.25' : null
+    return (
+      props.scale &&
+      (0, _styledComponents.css)(
+        _templateObject2,
+        function(props) {
+          return props.theme.transition
+        },
+        function(props) {
+          return props.theme.scaleFactor
+        },
+        function(props) {
+          return props.theme.mediaQueries.reduceMotion
+        }
+      )
+    )
+  },
+  function(props) {
+    return props.chevronLeft && (0, _styledComponents.css)(_templateObject3)
+  },
+  function(props) {
+    return props.chevronRight && (0, _styledComponents.css)(_templateObject4)
   }
@@ -96,3 +152,10 @@ )
 Button.propTypes = {
-  inverted: _propTypes2.default.bool
+  /** flip colors */
+  inverted: _propTypes2.default.bool,
+  /** add hover/focus animation */
+  scale: _propTypes2.default.bool,
+  /** add left text arrows */
+  chevronLeft: _propTypes2.default.bool,
+  /** add right text arrows */
+  chevronRight: _propTypes2.default.bool
 }
@@ -104,3 +167,2 @@
   color: 'white',
-  inverted: false,
   f: 3,
@@ -107,0 +169,0 @@ m: 0,

dist/Divider.js

@@ -7,23 +7,13 @@ 'use strict'
 
-var _extends =
-  Object.assign ||
-  function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i]
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key]
-        }
-      }
-    }
-    return target
-  }
-
 var _templateObject = _taggedTemplateLiteral(
   [
-    '\n  border: 0;\n  border-bottom-style: solid;\n  border-bottom-width: 2px;\n  ',
+    '\n  height: ',
+    ';\n  border: 0;\n  border-radius: ',
+    ';\n  background-color: ',
     ';\n'
   ],
   [
-    '\n  border: 0;\n  border-bottom-style: solid;\n  border-bottom-width: 2px;\n  ',
+    '\n  height: ',
+    ';\n  border: 0;\n  border-radius: ',
+    ';\n  background-color: ',
     ';\n'
@@ -33,4 +23,2 @@ ]
 
-var _styledSystem = require('styled-system')
-
 var _Box = require('./Box')
@@ -40,2 +28,8 @@
 
+var _propTypes = require('prop-types')
+
+var _propTypes2 = _interopRequireDefault(_propTypes)
+
+var _theme = require('./theme')
+
 function _interopRequireDefault(obj) {
@@ -51,5 +45,16 @@ return obj && obj.__esModule ? obj : { default: obj }
 
-var Divider = _Box2.default
-  .withComponent('hr')
-  .extend(_templateObject, _styledSystem.borderColor)
+var Divider = _Box2.default.withComponent('hr').extend(
+  _templateObject,
+  function(props) {
+    return props.height
+  },
+  function(props) {
+    return props.theme.pill
+  },
+  function(props) {
+    return (0, _theme.cx)(
+      props.color || props.borderColor || props.bg || 'smoke'
+    )
+  }
+)
 
@@ -59,8 +64,11 @@ Divider.displayName = 'Divider'
 Divider.defaultProps = {
-  borderColor: 'smoke',
+  height: '3px',
   mx: 0
 }
 
-Divider.propTypes = _extends({}, _styledSystem.propTypes.borderColor)
+Divider.propTypes = {
+  height: _propTypes2.default.string,
+  color: _propTypes2.default.string
+}
 
 exports.default = Divider

dist/Field.js

@@ -23,8 +23,4 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  [
-    "\n  font-weight: normal;\n  text-transform: lowercase;\n  &:before { content: '\u2014 '; }\n"
-  ],
-  [
-    "\n  font-weight: normal;\n  text-transform: lowercase;\n  &:before { content: '\u2014 '; }\n"
-  ]
+  ["\n  font-weight: normal;\n  &:before { content: '\u2014 '; }\n"],
+  ["\n  font-weight: normal;\n  &:before { content: '\u2014 '; }\n"]
 )
@@ -31,0 +27,0 @@

dist/Icon.js

@@ -7,21 +7,2 @@ 'use strict'
 
-var _extends =
-  Object.assign ||
-  function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i]
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key]
-        }
-      }
-    }
-    return target
-  }
-
-var _templateObject = _taggedTemplateLiteral(
-  ['\n  flex: none;\n  ', ' ', ';\n'],
-  ['\n  flex: none;\n  ', ' ', ';\n']
-)
-
 var _react = require('react')
@@ -31,8 +12,6 @@
 
-var _styledComponents = require('styled-components')
+var _MDIcon = require('./MDIcon')
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents)
+var _MDIcon2 = _interopRequireDefault(_MDIcon)
 
-var _styledSystem = require('styled-system')
-
 var _propTypes = require('prop-types')
@@ -42,6 +21,2 @@
 
-var _icons = require('../icons.js')
-
-var _icons2 = _interopRequireDefault(_icons)
-
 function _interopRequireDefault(obj) {
@@ -51,8 +26,2 @@ return obj && obj.__esModule ? obj : { default: obj }
 
-function _taggedTemplateLiteral(strings, raw) {
-  return Object.freeze(
-    Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })
-  )
-}
-
 function _objectWithoutProperties(obj, keys) {
@@ -68,43 +37,22 @@ var target = {}
 
-var Base = function Base(_ref) {
-  var name = _ref.name,
-    size = _ref.size,
-    props = _objectWithoutProperties(_ref, ['name', 'size'])
+var Icon = function Icon(_ref) {
+  var set = _ref.set,
+    props = _objectWithoutProperties(_ref, ['set'])
 
-  var path = _icons2.default[name]
-  if (!path) return false
-
-  return _react2.default.createElement(
-    'svg',
-    _extends({}, props, {
-      viewBox: '0 0 24 24',
-      width: size,
-      height: size,
-      fill: 'currentcolor'
-    }),
-    _react2.default.createElement('path', { d: path })
-  )
+  var Component = {
+    md: _MDIcon2.default
+  }[set]
+  return _react2.default.createElement(Component, props)
 }
 
-var Icon = (0, _styledComponents2.default)(Base)(
-  _templateObject,
-  _styledSystem.space,
-  _styledSystem.color
-)
-
 Icon.displayName = 'Icon'
 
-Icon.defaultProps = {
-  name: 'check',
-  size: 24
+Icon.propTypes = {
+  set: _propTypes2.default.oneOf(['md'])
 }
 
-Icon.propTypes = {
-  name: _propTypes2.default.oneOf(Object.keys(_icons2.default)).isRequired,
-  size: _propTypes2.default.oneOfType([
-    _propTypes2.default.string,
-    _propTypes2.default.number
-  ])
+Icon.defaultProps = {
+  set: 'md'
 }
 
 exports.default = Icon

dist/IconButton.js

@@ -67,12 +67,11 @@ 'use strict'
 var Base = _Button2.default.button.extend(_templateObject, function(props) {
-  return props.circle
-    ? { padding: props.theme.space[props.p || 2] + 'px' }
-    : { borderRadius: props.theme.radius }
+  return props.circle && { padding: props.theme.space[props.p || 2] + 'px' }
 })
 
 var IconButton = function IconButton(_ref) {
-  var name = _ref.name,
+  var set = _ref.set,
+    name = _ref.name,
     size = _ref.size,
     color = _ref.color,
-    props = _objectWithoutProperties(_ref, ['name', 'size', 'color'])
+    props = _objectWithoutProperties(_ref, ['set', 'name', 'size', 'color'])
 
@@ -84,2 +83,3 @@ return _react2.default.createElement(
         children: _react2.default.createElement(_Icon2.default, {
+          set: set,
           name: name,
@@ -98,2 +98,3 @@ size: size,
 IconButton.propTypes = {
+  set: _propTypes2.default.oneOf(['md']),
   name: _propTypes2.default.string,
@@ -106,2 +107,3 @@ onClick: _propTypes2.default.func,
   theme: _theme2.default,
+  set: 'md',
   bg: 'transparent',
@@ -108,0 +110,0 @@ circle: false

dist/Image.js

@@ -16,2 +16,6 @@ 'use strict'
 
+var _propTypes = require('prop-types')
+
+var _propTypes2 = _interopRequireDefault(_propTypes)
+
 function _interopRequireDefault(obj) {
@@ -31,2 +35,6 @@ return obj && obj.__esModule ? obj : { default: obj }
 
+Image.propTypes = {
+  alt: _propTypes2.default.string.isRequired
+}
+
 exports.default = Image

dist/index.js

@@ -178,11 +178,20 @@ 'use strict'
 
-var _Module = require('./Module')
+var _Loading = require('./Loading')
 
-Object.defineProperty(exports, 'Module', {
+Object.defineProperty(exports, 'Loading', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Module).default
+    return _interopRequireDefault(_Loading).default
   }
 })
 
+var _MDIcon = require('./MDIcon')
+
+Object.defineProperty(exports, 'MDIcon', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_MDIcon).default
+  }
+})
+
 var _OutlineButton = require('./OutlineButton')
@@ -189,0 +198,0 @@

dist/Input.js

@@ -26,3 +26,4 @@ 'use strict'
     ';\n  border-width: 1px;\n  border-style: solid;\n  border-color: ',
-    ';\n  transition: 0.125s box-shadow ease-out;\n\n  ::placeholder {\n    color: ',
+    ';\n  transition: ',
+    ' box-shadow;\n\n  ::placeholder {\n    color: ',
     ';\n  }\n\n  ::-ms-clear {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ',
@@ -40,3 +41,4 @@ ';\n    box-shadow: 0 0 0 2px ',
     ';\n  border-width: 1px;\n  border-style: solid;\n  border-color: ',
-    ';\n  transition: 0.125s box-shadow ease-out;\n\n  ::placeholder {\n    color: ',
+    ';\n  transition: ',
+    ' box-shadow;\n\n  ::placeholder {\n    color: ',
     ';\n  }\n\n  ::-ms-clear {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ',
@@ -102,2 +104,5 @@ ';\n    box-shadow: 0 0 0 2px ',
   function(props) {
+    return props.theme.transition
+  },
+  function(props) {
     return props.theme.colors.grey
@@ -104,0 +109,0 @@ },

dist/LargeButton.js

@@ -7,3 +7,16 @@ 'use strict'
 
-var _templateObject = _taggedTemplateLiteral([''], [''])
+var _templateObject = _taggedTemplateLiteral(
+  [
+    '\n  box-shadow: 0 2px 12px ',
+    ';\n\n  &:hover,\n  &:focus {\n    box-shadow: 0 2px 12px 2px\n      ',
+    ';\n  }\n\n  &:active {\n    box-shadow: 0 4px 16px 2px\n      ',
+    ';\n  }\n'
+  ],
+  [
+    '\n  box-shadow: 0 2px 12px ',
+    ';\n\n  &:hover,\n  &:focus {\n    box-shadow: 0 2px 12px 2px\n      ',
+    ';\n  }\n\n  &:active {\n    box-shadow: 0 4px 16px 2px\n      ',
+    ';\n  }\n'
+  ]
+)
 
@@ -32,3 +45,18 @@ var _propTypes = require('prop-types')
 
-var LargeButton = _Button2.default.extend(_templateObject)
+var LargeButton = _Button2.default.extend(
+  _templateObject,
+  function(props) {
+    return props.theme.shadowColor
+  },
+  function(props) {
+    return props.inverted
+      ? props.theme.shadowColor
+      : (0, _theme.hexa)(props.bg, 0.25)
+  },
+  function(props) {
+    return props.inverted
+      ? props.theme.shadowColor
+      : (0, _theme.hexa)(props.bg, 0.25)
+  }
+)
 
@@ -41,3 +69,2 @@ LargeButton.displayName = 'LargeButton'
   color: 'white',
-  inverted: false,
   f: [2, 3],
@@ -44,0 +71,0 @@ py: 3,

dist/Link.js

@@ -49,6 +49,5 @@ 'use strict'
   theme: _theme2.default,
-  color: 'info',
-  underline: false
+  color: 'info'
 }
 
 exports.default = Link

dist/theme.js

@@ -6,3 +6,3 @@ 'use strict'
 })
-exports.filterProps = exports.boxShadows = exports.baseShadow = exports.shadowColor = exports.pill = exports.radius = exports.radii = exports.fontWeights = exports.bold = exports.regular = exports.fontSizes = exports.mono = exports.font = exports.space = exports.mediaQueries = exports.breakpoints = exports.cx = exports.colors = exports.brand = exports.grays = exports.palette = undefined
+exports.filterProps = exports.hexa = exports.boxShadows = exports.baseShadow = exports.shadowColor = exports.radius = exports.radii = exports.pill = exports.transition = exports.scaleFactor = exports.fontWeights = exports.bold = exports.regular = exports.fontSizes = exports.mono = exports.font = exports.space = exports.mediaQueries = exports.breakpoints = exports.cx = exports.colors = exports.brand = exports.grays = exports.palette = undefined
 
@@ -79,8 +79,14 @@ var _extends =
 
+var aliases = ['sm', 'md', 'lg', 'xl']
 var breakpoints = (exports.breakpoints = [32, 48, 64, 80])
 
-var mediaQueries = (exports.mediaQueries = breakpoints.map(createMediaQuery))
+var mediaQueries = (exports.mediaQueries = _extends(
+  {},
+  breakpoints.map(createMediaQuery),
+  {
+    reduceMotion: '@media (prefers-reduced-motion: reduce)',
+    reduceTransparency: '@media (prefers-reduced-transparency: reduce)'
+  }
+))
 
-var aliases = ['sm', 'md', 'lg', 'xl']
-
 addAliases(breakpoints, aliases)
@@ -91,3 +97,6 @@ addAliases(mediaQueries, aliases)
 
-var font = (exports.font = 'Averta,"Avenir Next","Segoe UI",Roboto,sans-serif')
+var emoji = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
+var font = (exports.font =
+  'Averta,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,' +
+  emoji)
 var mono = (exports.mono = 'SFMono-Regular,"Roboto Mono",Menlo,monospace')
@@ -101,11 +110,11 @@
 // styled-system's `fontWeight` function can hook into the `fontWeights` object
-var fontWeights = (exports.fontWeights = {
-  regular: regular,
-  bold: bold
+var fontWeights = (exports.fontWeights = { regular: regular, bold: bold })
 
-  // styled-system’s `borderRadius` function can hook into the `radii` object/array
-})
-var radii = (exports.radii = ['0px', '4px', '8px', '16px', '9999px'])
+var scaleFactor = (exports.scaleFactor = 17 / 16)
+var transition = (exports.transition = '0.125s ease-out')
+
+// styled-system’s `borderRadius` function can hook into the `radii` object/array
+var pill = (exports.pill = '9999px')
+var radii = (exports.radii = ['0px', '4px', '8px', '16px', pill])
 var radius = (exports.radius = '4px')
-var pill = (exports.pill = radii[4])
 
@@ -121,2 +130,16 @@ var shadowColor = (exports.shadowColor = 'rgba(0,0,0,0.16)')
 
+var hexa = (exports.hexa = function hexa(color, alpha) {
+  var hex = cx(color)
+  if (!(0, _lodash.includes)(hex, '#')) return shadowColor
+  var r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16)
+
+  if (alpha >= 0) {
+    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'
+  } else {
+    return 'rgb(' + r + ', ' + g + ', ' + b + ')'
+  }
+})
+
 var filterProps = (exports.filterProps = function filterProps(props) {
@@ -161,7 +184,10 @@ return (0, _lodash.omit)((0, _styledSystem.removeProps)(props), [
   pill: pill,
+  scaleFactor: scaleFactor,
+  transition: transition,
   boxShadows: boxShadows,
   shadowColor: shadowColor,
-  cx: cx
+  cx: cx,
+  hexa: hexa
 }
 
 exports.default = theme

dist/ThemeProvider.js

@@ -22,11 +22,21 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  [
-    '\n* { box-sizing: border-box; }\nbody {\n  margin: 0;\n  font-family: ',
-    ";\n  line-height: 1.5;\n}\n\n@font-face {\n  font-family: Averta;\n  font-style: normal;\n  font-weight: 400;\n  font-display: optional;\n  src: url(//hackclub.com/fonts/averta-regular.woff2) format('woff2'), url(//hackclub.com/fonts/averta-regular.woff) format('woff');\n  unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n}\n@font-face {\n  font-family: Averta;\n  font-style: normal;\n  font-weight: 700;\n  font-display: optional;\n  src: url(//hackclub.com/fonts/averta-bold.woff2) format('woff2'), url(//hackclub.com/fonts/averta-bold.woff) format('woff');\n  unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n}\n"
-  ],
-  [
-    '\n* { box-sizing: border-box; }\nbody {\n  margin: 0;\n  font-family: ',
-    ";\n  line-height: 1.5;\n}\n\n@font-face {\n  font-family: Averta;\n  font-style: normal;\n  font-weight: 400;\n  font-display: optional;\n  src: url(//hackclub.com/fonts/averta-regular.woff2) format('woff2'), url(//hackclub.com/fonts/averta-regular.woff) format('woff');\n  unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n}\n@font-face {\n  font-family: Averta;\n  font-style: normal;\n  font-weight: 700;\n  font-display: optional;\n  src: url(//hackclub.com/fonts/averta-bold.woff2) format('woff2'), url(//hackclub.com/fonts/averta-bold.woff) format('woff');\n  unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n}\n"
-  ]
-)
+    [
+      "\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-regular.woff2) format('woff2'),\n      url(//hackclub.com/fonts/averta-regular.woff) format('woff');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 700;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-bold.woff2) format('woff2'),\n      url(//hackclub.com/fonts/averta-bold.woff) format('woff');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n"
+    ],
+    [
+      "\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-regular.woff2) format('woff2'),\n      url(//hackclub.com/fonts/averta-regular.woff) format('woff');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 700;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-bold.woff2) format('woff2'),\n      url(//hackclub.com/fonts/averta-bold.woff) format('woff');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n"
+    ]
+  ),
+  _templateObject2 = _taggedTemplateLiteral(
+    [
+      '\n* {\n  box-sizing: border-box;\n  font-weight: inherit;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\nhtml,\nbody {\n  min-height: 100%;\n  min-width: 100%;\n}\n\nbody {\n  padding: 0;\n  margin: 0;\n  font-size: ',
+      'px;\n  font-family: ',
+      ';\n  line-height: 1.5;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n  width: 100vw;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n}\n\na {\n  color: currentColor;\n  text-decoration: none;\n}\n\ntextarea {\n  resize: none;\n}\n'
+    ],
+    [
+      '\n* {\n  box-sizing: border-box;\n  font-weight: inherit;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\nhtml,\nbody {\n  min-height: 100%;\n  min-width: 100%;\n}\n\nbody {\n  padding: 0;\n  margin: 0;\n  font-size: ',
+      'px;\n  font-family: ',
+      ';\n  line-height: 1.5;\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n  width: 100vw;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n}\n\na {\n  color: currentColor;\n  text-decoration: none;\n}\n\ntextarea {\n  resize: none;\n}\n'
+    ]
+  )
 
@@ -39,4 +49,6 @@ var _react = require('react')
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents)
+var _propTypes = require('prop-types')
 
+var _propTypes2 = _interopRequireDefault(_propTypes)
+
 var _theme = require('./theme')
@@ -50,2 +62,12 @@
 
+function _objectWithoutProperties(obj, keys) {
+  var target = {}
+  for (var i in obj) {
+    if (keys.indexOf(i) >= 0) continue
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue
+    target[i] = obj[i]
+  }
+  return target
+}
+
 function _taggedTemplateLiteral(strings, raw) {
@@ -57,5 +79,16 @@ return Object.freeze(
 
-;(0, _styledComponents.injectGlobal)(_templateObject, _theme2.default.font)
+var fontsCss = (0, _styledComponents.css)(_templateObject)
 
-var ThemeProvider = function ThemeProvider(props) {
+;(0, _styledComponents.injectGlobal)(
+  _templateObject2,
+  _theme2.default.fontSizes[2],
+  _theme2.default.font
+)
+
+var ThemeProvider = function ThemeProvider(_ref) {
+  var theme = _ref.theme,
+    webfonts = _ref.webfonts,
+    props = _objectWithoutProperties(_ref, ['theme', 'webfonts'])
+
+  if (webfonts) (0, _styledComponents.injectGlobal)([], fontsCss)
   return _react2.default.createElement(
@@ -65,3 +98,3 @@ _styledComponents.ThemeProvider,
       {
-        theme: _theme2.default
+        theme: theme
       },
@@ -80,2 +113,12 @@ props,
 
+ThemeProvider.propTypes = {
+  theme: _propTypes2.default.object,
+  webfonts: _propTypes2.default.bool
+}
+
+ThemeProvider.defaultProps = {
+  theme: _theme2.default,
+  webfonts: false
+}
+
 exports.default = ThemeProvider

package.json

 {
   "name": "@hackclub/design-system",
-  "version": "0.0.1-9",
+  "version": "0.0.1-10",
   "description": "Hack Club Design System",
   "main": "dist/index.js",
   "scripts": {
-    "prepare": "npm run icons && babel src -d dist --ignore __tests__ && npm run fmt",
+    "prepare": "yarn run icons && babel src -d dist --ignore __tests__ && yarn run fmt",
     "dev": "start-storybook -p 9000 -c .storybook",
@@ -20,18 +20,18 @@ "build": "rm -rf .site && build-storybook -c .storybook -o .site",
   "dependencies": {
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.10",
     "palx": "1.0.2",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "serve": "^6.4.9",
-    "styled-components": "^3.1.6",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "serve": "^6.5.6",
+    "styled-components": "^3.2.6",
     "styled-system": "^1.1.4"
   },
   "devDependencies": {
-    "@storybook/addon-info": "v3.3.12",
-    "@storybook/react": "v3.3.12",
-    "@storybook/storybook-deployer": "^2.2.0",
+    "@storybook/addon-info": "v3.4.3",
+    "@storybook/react": "v3.4.3",
+    "@storybook/storybook-deployer": "^2.3.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^22.1.0",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^22.4.3",
     "babel-preset-env": "^1.6.1",
@@ -42,7 +42,7 @@ "babel-preset-react": "^6.24.1",
     "enzyme-adapter-react-16": "^1.1.1",
-    "jest": "^22.1.4",
-    "jest-styled-components": "^4.11.0-0",
+    "jest": "^22.4.3",
+    "jest-styled-components": "^5.0.1",
     "material-design-icons": "^3.0.1",
-    "prettier": "^1.10.2",
-    "react-test-renderer": "^16.2.0"
+    "prettier": "^1.12.1",
+    "react-test-renderer": "^16.3.2"
   },
@@ -49,0 +49,0 @@ "jest": {

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3286804

increased by461.88%

Number of package files

90

increased by40.63%

Lines of code

4348

increased by37.94%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedlodash@^4.17.10

• Updatedprop-types@^15.6.1

• Updatedreact@^16.3.2

• Updatedreact-dom@^16.3.2

• Updatedserve@^6.5.6

• Updatedstyled-components@^3.2.6