@hackclub/design-system - npm Package Compare versions

Comparing version 0.0.1-14 to 0.0.1-15

.storybook/AAA.js

@@ -23,4 +23,4 @@ import React, { Fragment } from 'react'
     <Flag href="https://hackclub.com" />
-    <Heading.h1 f={5}>Welcome!</Heading.h1>
-    <Text f={3} my={2}>
+    <Heading.h1 fontSize={5}>Welcome!</Heading.h1>
+    <Text fontSize={3} my={2}>
       This is{' '}
@@ -27,0 +27,0 @@ <Link href="https://hackclub.com" underline children="Hack Club" />

.storybook/BlockLink.js

@@ -13,3 +13,6 @@ import React from 'react'
     <BlockLink href="https://hackclub.com" target="_blank">
-      <BackgroundImage src="https://hackclub.com/lah_2.jpg" width="640px">
+      <BackgroundImage
+        src="https://hackclub.com/social-photo_2.jpg'"
+        width={640}
+      >
         <Box p={4}>
@@ -16,0 +19,0 @@ <Text align="center" color="white">

.storybook/Button.js

@@ -30,12 +30,12 @@ import React from 'react'
     <Flex align="baseline" wrap>
-      <Button mr={2} f={1}>
+      <Button mr={2} fontSize={1}>
         Size 1
       </Button>
-      <Button bg="accent" mr={2} f={2}>
+      <Button bg="accent" mr={2} fontSize={2}>
         Size 2
       </Button>
-      <Button bg="info" mr={2} f={3}>
+      <Button bg="info" mr={2} fontSize={3}>
         Size 3
       </Button>
-      <Button bg="accent" inverted mr={2} f={4}>
+      <Button bg="accent" inverted mr={2} fontSize={4}>
         Size 4
@@ -45,3 +45,3 @@ </Button>
   ))
-  .add('Width', () => <Button w={1}>Full Width</Button>)
+  .add('Width', () => <Button width={1}>Full Width</Button>)
   .add('Disabled', () => <Button disabled>Disabled</Button>)
@@ -48,0 +48,0 @@ .add('Scale', () => <Button scale>Scale</Button>)

.storybook/Colors.js

@@ -12,3 +12,3 @@ import React from 'react'
 
-const Chip = props => <Box w={1} p={5} {...props} />
+const Chip = props => <Box width={1} p={5} {...props} />
 
@@ -33,3 +33,3 @@ const Pre = styled(Text.withComponent('pre'))`
   <div>
-    <Heading.h1 p={3} f={[4, 5]}>
+    <Heading.h1 p={3} fontSize={[4, 5]}>
       Color Palette
@@ -36,0 +36,0 @@ </Heading.h1>

.storybook/Image.js

@@ -8,3 +8,3 @@ import React from 'react'
 const props = {
-  src: 'https://hackclub.com/lah_1.jpg',
+  src: 'https://hackclub.com/social-photo_2.jpg',
   alt: 'Smiling students at a hackathon'
@@ -11,0 +11,0 @@ }

.storybook/LargeButton.js

@@ -28,3 +28,3 @@ import React from 'react'
   ))
-  .add('Width', () => <LargeButton w={1}>Full Width</LargeButton>)
+  .add('Width', () => <LargeButton width={1}>Full Width</LargeButton>)
   .add('Disabled', () => <LargeButton disabled>Disabled</LargeButton>)

dist/Button.js

@@ -22,6 +22,2 @@ 'use strict';
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _styledSystem = require('styled-system');
-
 var _propTypes = require('prop-types');
@@ -28,0 +24,0 @@

dist/Container.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _theme = require('./theme');
-
-var _theme2 = _interopRequireDefault(_theme);
-
 var _propTypes = require('prop-types');
@@ -41,2 +37,3 @@
 Container.defaultProps = {
+  width: 1,
   maxWidth: 72,
@@ -43,0 +40,0 @@ mx: 'auto'

dist/Heading.js

@@ -33,3 +33,3 @@ 'use strict';
   regular: true,
-  f: 5,
+  fontSize: 5,
   m: 0
@@ -41,3 +41,3 @@ };
   bold: true,
-  f: 6,
+  fontSize: 6,
   m: 0
@@ -49,3 +49,3 @@ };
   bold: true,
-  f: 5,
+  fontSize: 5,
   m: 0
@@ -57,3 +57,3 @@ };
   bold: true,
-  f: 4,
+  fontSize: 4,
   m: 0
@@ -65,3 +65,3 @@ };
   regular: true,
-  f: 3,
+  fontSize: 3,
   m: 0
@@ -73,3 +73,3 @@ };
   bold: true,
-  f: 2,
+  fontSize: 2,
   m: 0
@@ -82,3 +82,3 @@ };
   caps: true,
-  f: 0,
+  fontSize: 0,
   m: 0
@@ -85,0 +85,0 @@ };

dist/index.js

@@ -232,11 +232,2 @@ 'use strict';
 
-var _Truncate = require('./Truncate');
-
-Object.defineProperty(exports, 'Truncate', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Truncate).default;
-  }
-});
-
 var _theme = require('./theme');
@@ -243,0 +234,0 @@

dist/Input.js

@@ -74,3 +74,3 @@ 'use strict';
   theme: _theme2.default,
-  w: 1,
+  width: 1,
   m: 0,
@@ -77,0 +77,0 @@ py: 1,

dist/Label.js

@@ -42,5 +42,5 @@ 'use strict';
   fontSize: 2,
-  w: 1
+  width: 1
 };
 
 exports.default = Label;

dist/LargeButton.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
 var _Button = require('./Button');
@@ -15,0 +11,0 @@

dist/Link.js

@@ -12,6 +12,2 @@ 'use strict';
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
 var _Text = require('./Text');
@@ -25,2 +21,4 @@
 
+var _styledComponents = require('styled-components');
+
 var _theme = require('./theme');
@@ -27,0 +25,0 @@

dist/Loading.js

@@ -40,3 +40,3 @@ 'use strict';
     Base,
-    _extends({ 'aria-role': 'presentation', 'aria-label': 'Loading' }, props),
+    _extends({ role: 'presentation', 'aria-label': 'Loading' }, props),
     _react2.default.createElement(Inner, null),
@@ -43,0 +43,0 @@ _react2.default.createElement(Inner, null)

dist/OutlineButton.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
 var _LargeButton = require('./LargeButton');
@@ -15,0 +11,0 @@

dist/Slider.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _styledComponents = require('styled-components');
@@ -26,6 +22,2 @@
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,3 +41,3 @@
   theme: _theme2.default,
-  w: 1,
+  width: 1,
   bg: 'smoke',
@@ -52,0 +44,0 @@ color: 'primary'

dist/Text.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.bold = exports.regular = exports.caps = undefined;
+exports.maxWidth = exports.bold = exports.regular = exports.caps = undefined;
 
@@ -43,2 +43,7 @@ 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 maxWidth = exports.maxWidth = function maxWidth(_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth && { maxWidth: maxWidth + 'rem' };
+};
+
 var Base = function Base(props) {
@@ -49,3 +54,3 @@ var next = (0, _theme.filterProps)(props);
 
-var Text = (0, _styledComponents2.default)(Base)([], _styledSystem.fontSize, _styledSystem.space, _styledSystem.color, caps, _styledSystem.textAlign, bold, regular, _styledSystem.fontWeight);
+var Text = (0, _styledComponents2.default)(Base)([], _styledSystem.fontSize, _styledSystem.space, _styledSystem.color, caps, _styledSystem.textAlign, bold, regular, _styledSystem.fontWeight, maxWidth);
 
@@ -57,3 +62,4 @@ Text.displayName = 'Text';
   regular: _propTypes2.default.bool,
-  bold: _propTypes2.default.bool
+  bold: _propTypes2.default.bool,
+  maxWidth: _propTypes2.default.number
 }, _styledSystem.propTypes.fontSize, _styledSystem.propTypes.fontWeight, _styledSystem.propTypes.textAlign, _styledSystem.propTypes.space, _styledSystem.propTypes.color);
@@ -60,0 +66,0 @@

dist/ThemeProvider.js

@@ -10,3 +10,3 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff2\')\n        format(\'woff2\');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff2\')\n        format(\'woff2\');\n    font-weight: bold;\n    font-style: normal;\n    font-display: swap;\n  }\n'], ['\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff2\')\n        format(\'woff2\');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff2\')\n        format(\'woff2\');\n    font-weight: bold;\n    font-style: normal;\n    font-display: swap;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n'], ['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n\n  pre,\n  code,\n  kbd {\n    font-family: ', ';\n  }\n'], ['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n\n  pre,\n  code,\n  kbd {\n    font-family: ', ';\n  }\n']);
 
@@ -35,3 +35,3 @@ var _react = require('react');
 
-(0, _styledComponents.injectGlobal)(_templateObject2, _theme2.default.fontSizes[2], _theme2.default.font);
+(0, _styledComponents.injectGlobal)(_templateObject2, _theme2.default.fontSizes[2], _theme2.default.font, _theme2.default.mono);
 
@@ -38,0 +38,0 @@ var ThemeProvider = function ThemeProvider(_ref) {

LICENSE.md

 # The MIT License (MIT)
 
-Copyright (c) 2017 Hackclub.com
+Copyright (c) 2017–2019 hackclub.com
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
   "name": "@hackclub/design-system",
-  "version": "0.0.1-14",
+  "version": "0.0.1-15",
   "description": "Hack Club Design System",
@@ -10,5 +10,4 @@ "main": "dist/index.js",
     "build": "rm -rf .site && build-storybook -c .storybook -o .site",
-    "start": "serve .site -p 9000",
     "deploy": "storybook-to-ghpages",
-    "fmt": "prettier {.storybook,src}/**/*.js --single-quote --no-semi --write",
+    "fmt": "npx prettier {.storybook,src}/**/*.js --single-quote --no-semi --write",
     "coverage": "jest --coverage && serve coverage -o",
@@ -20,10 +19,8 @@ "test": "jest"
   "dependencies": {
-    "@hackclub/icons": "^0.0.1",
-    "clean-tag": "^1.0.4",
+    "@hackclub/icons": "^0.0.2",
     "lodash": "^4.17.11",
-    "palx": "1.0.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1",
-    "serve": "^10.0.1",
+    "palx": "1.0.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "styled-components": "^3.4.9",
@@ -35,3 +32,3 @@ "styled-system": "1.1.7"
     "@storybook/react": "^3.4.11",
-    "@storybook/storybook-deployer": "^2.3.0",
+    "@storybook/storybook-deployer": "^2.8.1",
     "babel-cli": "^6.26.0",
@@ -43,8 +40,7 @@ "babel-core": "^6.26.3",
     "babel-preset-stage-0": "^6.24.1",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "jest": "^23.6.0",
-    "jest-styled-components": "^6.2.0",
-    "prettier": "^1.14.2",
-    "react-test-renderer": "^16.5.1"
+    "jest-styled-components": "^6.3.1",
+    "react-test-renderer": "^16.8.6"
   },
@@ -51,0 +47,0 @@ "jest": {

README.md

@@ -17,6 +17,6 @@ # Hack Club Design System
 
-* [Getting Started](docs/GettingStarted.md)
-* [Contributing](docs/Contributing.md)
-* [Theme](docs/Theme.md)
-* [ThemeProvider](docs/ThemeProvider.md)
+- [Getting Started](docs/GettingStarted.md)
+- [Contributing](docs/Contributing.md)
+- [Theme](docs/Theme.md)
+- [ThemeProvider](docs/ThemeProvider.md)
 
@@ -27,16 +27,16 @@ ## Goals
 
-* Speed up design and development velocity
-* Help create consistent, beautiful, and usable UI in our various websites
-* Promote best practices for accessibility and responsive web design
+- Speed up design and development velocity
+- Help create consistent, beautiful, and usable UI in our various websites
+- Promote best practices for accessibility and responsive web design
 
 We hope to accomplish these goals by:
 
-* Reducing the number of decisions needed when iterating on UI
-* Reducing the amount of code duplication in our apps
-* Serving as the standard for hackclub.com’s visual language
-* Providing easy-to-use and extensible components for anyone to consume
+- Reducing the number of decisions needed when iterating on UI
+- Reducing the amount of code duplication in our apps
+- Serving as the standard for hackclub.com’s visual language
+- Providing easy-to-use and extensible components for anyone to consume
 
 [pcln]: https://github.com/pricelinelabs/design-system
-[site]: https://hackclub.github.io/design-system/
+[site]: https://design.hackclub.com/
 
 [MIT License](LICENSE.md)

No alert changes

Improved metrics

Dependency count

8

decreased by-20%

Dev dependency count

14

decreased by-6.67%

Worsened metrics

Total package byte prevSize

3552656

decreased by-0.13%

Number of package files

94

decreased by-1.05%

Lines of code

3695

decreased by-0.96%

Dependency changes

• + Added@hackclub/icons@0.0.2(transitive)

• + Addedpalx@1.0.1(transitive)

• - Removedclean-tag@^1.0.4

• - Removedserve@^10.0.1

• - Removed@hackclub/icons@0.0.1(transitive)

• - Removed@styled-system/background@5.1.2(transitive)

• - Removed@styled-system/border@5.1.5(transitive)

• - Removed@styled-system/color@5.1.2(transitive)

• - Removed@styled-system/core@5.1.2(transitive)

• - Removed@styled-system/css@5.1.5(transitive)

• - Removed@styled-system/flexbox@5.1.2(transitive)

• - Removed@styled-system/grid@5.1.2(transitive)

• - Removed@styled-system/layout@5.1.2(transitive)

• - Removed@styled-system/position@5.1.2(transitive)

• - Removed@styled-system/shadow@5.1.2(transitive)

• - Removed@styled-system/space@5.1.2(transitive)

• - Removed@styled-system/typography@5.1.2(transitive)

• - Removed@styled-system/variant@5.1.5(transitive)

• - Removed@zeit/schemas@2.6.0(transitive)

• - Removedaccepts@1.3.8(transitive)

• - Removedajv@6.5.3(transitive)

• - Removedansi-align@2.0.0(transitive)

• - Removedansi-regex@3.0.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedarch@2.2.0(transitive)

• - Removedarg@2.0.0(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedboxen@1.3.0(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedbytes@3.0.0(transitive)

• - Removedcamelcase@4.1.0(transitive)

• - Removedchalk@2.4.1(transitive)

• - Removedclean-tag@1.1.0(transitive)

• - Removedcli-boxes@1.0.0(transitive)

• - Removedclipboardy@1.2.3(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcompressible@2.0.18(transitive)

• - Removedcompression@1.7.3(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcontent-disposition@0.5.2(transitive)

• - Removedcross-spawn@5.1.0(transitive)

• - Removeddebug@2.6.9(transitive)

• - Removeddeep-extend@0.6.0(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedexeca@0.7.00.8.0(transitive)

• - Removedfast-deep-equal@2.0.1(transitive)

• - Removedfast-json-stable-stringify@2.1.0(transitive)

• - Removedfast-url-parser@1.1.3(transitive)

• - Removedget-stream@3.0.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhtml-tags@2.0.0(transitive)

• - Removedini@1.3.8(transitive)

• - Removedis-fullwidth-code-point@2.0.0(transitive)

• - Removedisexe@2.0.0(transitive)

• - Removedjson-schema-traverse@0.4.1(transitive)

• - Removedlru-cache@4.1.5(transitive)

• - Removedmime-db@1.33.01.52.0(transitive)

• - Removedmime-types@2.1.182.1.35(transitive)

• - Removedminimatch@3.0.4(transitive)

• - Removedms@2.0.0(transitive)

• - Removednegotiator@0.6.3(transitive)

• - Removednpm-run-path@2.0.2(transitive)

• - Removedon-headers@1.0.2(transitive)

• - Removedp-finally@1.0.0(transitive)

• - Removedpalx@1.0.2(transitive)

• - Removedpath-is-inside@1.0.2(transitive)

• - Removedpath-key@2.0.1(transitive)

• - Removedpath-to-regexp@2.2.1(transitive)

• - Removedpseudomap@1.0.2(transitive)

• - Removedpunycode@1.4.12.3.1(transitive)

• - Removedrange-parser@1.2.0(transitive)

• - Removedrc@1.2.8(transitive)

• - Removedregistry-auth-token@3.3.2(transitive)

• - Removedregistry-url@3.1.0(transitive)

• - Removedsafe-buffer@5.1.2(transitive)

• - Removedserve@10.1.2(transitive)

• - Removedserve-handler@5.0.8(transitive)

• - Removedshebang-command@1.2.0(transitive)

• - Removedshebang-regex@1.0.0(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedstring-width@2.1.1(transitive)

• - Removedstrip-ansi@4.0.0(transitive)

• - Removedstrip-eof@1.0.0(transitive)

• - Removedstrip-json-comments@2.0.1(transitive)

• - Removedstyled-system@5.1.5(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedterm-size@1.2.0(transitive)

• - Removedupdate-check@1.5.2(transitive)

• - Removeduri-js@4.4.1(transitive)

• - Removedvary@1.1.2(transitive)

• - Removedwhich@1.3.1(transitive)

• - Removedwidest-line@2.0.1(transitive)

• - Removedyallist@2.1.2(transitive)

• Updated@hackclub/icons@^0.0.2

• Updatedpalx@1.0.1

• Updatedprop-types@^15.7.2

• Updatedreact@^16.8.6

• Updatedreact-dom@^16.8.6