@hackclub/design-system - npm Package Compare versions

Comparing version 0.0.1-2 to 0.0.1-3

.storybook/Button.js

@@ -11,3 +11,3 @@ import React from 'react'
       inline: true,
-      text: 'Use the <Button /> components to render a primitive button.'
+      text: 'Use the <Button /> component to render a primitive button.'
     })(() => <Button>Button</Button>)
@@ -14,0 +14,0 @@ )

.storybook/IconButton.js

 import React from 'react'
 import { storiesOf, action } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { IconButton } from '../src'
 
 storiesOf('IconButton', module)
-  .add('Close Button', () => (
-    <IconButton name="close" color="error" onClick={action('clicked')} />
+  .add(
+    'IconButton component',
+    withInfo({
+      inline: true,
+      text: 'Use the <IconButton /> component to render a primitive button.'
+    })(() => (
+      <IconButton name="close" color="error" onClick={action('clicked')} />
+    ))
+  )
+  .add('Plus button', () => (
+    <IconButton
+      name="add"
+      bg="success"
+      color="white"
+      circle
+      onClick={action('clicked')}
+    />
   ))
-  .add('Disabled Close Button', () => (
+  .add('Disabled close button', () => (
     <IconButton
@@ -11,0 +27,0 @@ disabled

.storybook/Input.js

@@ -12,3 +12,3 @@ import React from 'react'
       text:
-        'Simple styled input component that accepts a color and whether or not to show an error container.'
+        'Simple styled input component that accepts a color and optionally, an error message.'
     })(() => <Input my={3} id="hello" />)
@@ -15,0 +15,0 @@ )

dist/Avatar.js

@@ -9,3 +9,3 @@ 'use strict'
   [
-    '\n  border-radius: 1024px;\n  display: inline-block;\n  width: ',
+    '\n  border-radius: 9999px;\n  display: inline-block;\n  width: ',
     ';\n  height: ',
@@ -15,3 +15,3 @@ ';\n'
   [
-    '\n  border-radius: 1024px;\n  display: inline-block;\n  width: ',
+    '\n  border-radius: 9999px;\n  display: inline-block;\n  width: ',
     ';\n  height: ',
@@ -18,0 +18,0 @@ ';\n'

dist/IconButton.js

@@ -22,8 +22,4 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  [
-    '\n  padding: 0 !important;\n  background-color: transparent !important;\n  box-shadow: none !important;\n\n  &:hover {\n    background-color: transparent;\n    box-shadow: none !important;\n  }\n'
-  ],
-  [
-    '\n  padding: 0 !important;\n  background-color: transparent !important;\n  box-shadow: none !important;\n\n  &:hover {\n    background-color: transparent;\n    box-shadow: none !important;\n  }\n'
-  ]
+  ['\n  box-shadow: none !important;\n  line-height: 0 !important;\n  ', ';\n'],
+  ['\n  box-shadow: none !important;\n  line-height: 0 !important;\n  ', ';\n']
 )
@@ -35,6 +31,2 @@
 
-var _styledComponents = require('styled-components')
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents)
-
 var _Icon = require('./Icon')
@@ -52,2 +44,6 @@
 
+var _theme = require('./theme')
+
+var _theme2 = _interopRequireDefault(_theme)
+
 function _interopRequireDefault(obj) {
@@ -73,5 +69,10 @@ return obj && obj.__esModule ? obj : { default: obj }
 
-var Base = (0, _styledComponents2.default)(_Button2.default.button)(
-  _templateObject
-)
+var Base = _Button2.default.button.extend(_templateObject, function(props) {
+  return props.circle
+    ? {
+        borderRadius: '9999px',
+        padding: props.theme.space[props.p || 2] + 'px'
+      }
+    : null
+})
 
@@ -102,6 +103,13 @@ var IconButton = function IconButton(_ref) {
 IconButton.propTypes = {
+  name: _propTypes2.default.string,
   onClick: _propTypes2.default.func,
-  title: _propTypes2.default.string
+  circle: _propTypes2.default.bool
 }
 
+IconButton.defaultProps = {
+  theme: _theme2.default,
+  bg: 'transparent',
+  circle: false
+}
+
 exports.default = IconButton

dist/Label.js

@@ -58,6 +58,7 @@ 'use strict'
   {},
+  _styledSystem.propTypes.color,
+  _styledSystem.propTypes.fontSize,
+  _styledSystem.propTypes.fontWeight,
   _styledSystem.propTypes.space,
-  _styledSystem.propTypes.fontSize,
-  _styledSystem.propTypes.color,
-  _styledSystem.propTypes.fontWeight
+  _styledSystem.propTypes.width
 )
@@ -67,5 +68,4 @@
   theme: _theme2.default,
+  color: 'black',
   fontSize: 2,
-  fontWeight: 'bold',
-  color: 'black',
   w: 1
@@ -72,0 +72,0 @@ }

dist/Module.js

@@ -91,6 +91,5 @@ 'use strict'
       null,
-      _react2.default.createElement(_Heading2.default, {
+      _react2.default.createElement(_Heading2.default.h2, {
         my: 1,
         fontSize: 3,
-        bold: true,
         children: heading
@@ -97,0 +96,0 @@ }),

dist/Text.js

@@ -23,4 +23,4 @@ 'use strict'
 var _templateObject = _taggedTemplateLiteral(
-  ['\n  ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n'],
-  ['\n  ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n']
+  ['\n  ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n'],
+  ['\n  ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';\n']
 )
@@ -72,4 +72,5 @@
   caps,
+  bold,
   regular,
-  bold,
+  _styledSystem.fontWeight,
   align
@@ -80,5 +81,9 @@ )
 
+var alignTypes = ['left', 'center', 'right', 'justify']
 Text.propTypes = _extends(
   {
-    align: _propTypes2.default.oneOf(['left', 'center', 'right', 'justify']),
+    align: _propTypes2.default.oneOf(
+      alignTypes,
+      _propTypes2.default.arrayOf(alignTypes)
+    ),
     caps: _propTypes2.default.bool,
@@ -89,2 +94,3 @@ regular: _propTypes2.default.bool,
   _styledSystem.propTypes.fontSize,
+  _styledSystem.propTypes.fontWeight,
   _styledSystem.propTypes.space,
@@ -91,0 +97,0 @@ _styledSystem.propTypes.color

package.json

 {
   "name": "@hackclub/design-system",
-  "version": "0.0.1-2",
+  "version": "0.0.1-3",
   "description": "Hack Club Design System",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

3270173

increased by0.02%

Lines of code

3890

increased by0.73%

No dependency changes