@storybook/components 5.2.1 → 5.2.5

package/dist/html.js

@@ -78,7 +78,7 @@ var components = Object.entries(rawComponents).reduce(function (acc, _ref) {
 
   return Object.assign({}, acc, _defineProperty({}, k.toLowerCase(), function (props) {
     return _react["default"].createElement(V, _extends({}, props, {
-      className: "sbdocs-".concat(k.toLowerCase())
+      className: "sbdocs sbdocs-".concat(k.toLowerCase())
     }));
   }));
 }, {});

package/dist/typography/DocumentFormatting.js

@@ -401,7 +401,8 @@ var codeCommon = function codeCommon(_ref15) {
     border: "1px solid ".concat(theme.color.mediumlight),
     backgroundColor: theme.color.lighter,
     borderRadius: '3px',
-    fontSize: theme.typography.size.s2 - 1
+    fontSize: theme.typography.size.s2 - 1,
+    color: theme.base === 'dark' && theme.color.darkest
   };
 };
 

package/dist/typography/DocumentWrapper.js

@@ -16,7 +16,7 @@ exports.DocumentWrapper = void 0;
 var _theming = require("@storybook/theming");
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    /* Custom styles atop GitHub base theme (see below) */\n    font-size: ", "px;\n    line-height: 1.6;\n\n    h1 {\n      font-size: ", "px;\n      font-weight: ", ";\n    }\n\n    h2 {\n      font-size: ", "px;\n      border-bottom: 1px solid ", ";\n    }\n\n    h3 {\n      font-size: ", "px;\n    }\n\n    h4 {\n      font-size: ", "px;\n    }\n\n    h5 {\n      font-size: ", "px;\n    }\n\n    h6 {\n      font-size: ", "px;\n      color: ", ";\n    }\n\n    /* Custom for SB SyntaxHighlighter */\n\n    pre:not(.hljs) {\n      background: transparent;\n      border: none;\n      border-radius: 0;\n      padding: 0;\n      margin: 0;\n    }\n\n    pre pre,\n    pre.hljs {\n      padding: 15px;\n      margin: 0;\n\n      white-space: pre-wrap;\n      color: inherit;\n\n      font-size: 13px;\n      line-height: 19px;\n\n      code {\n        color: inherit;\n        font-size: inherit;\n      }\n    }\n\n    pre code {\n      margin: 0;\n      padding: 0;\n      white-space: pre;\n      border: none;\n      background: transparent;\n    }\n\n    pre code,\n    pre tt {\n      background-color: transparent;\n      border: none;\n    }\n\n    /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */\n\n    body > *:first-of-type {\n      margin-top: 0 !important;\n    }\n\n    body > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    a {\n      color: ", ";\n      text-decoration: none;\n    }\n\n    a.absent {\n      color: #cc0000;\n    }\n\n    a.anchor {\n      display: block;\n      padding-left: 30px;\n      margin-left: -30px;\n      cursor: pointer;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin: 20px 0 10px;\n      padding: 0;\n      cursor: text;\n      position: relative;\n    }\n\n    h2:first-of-type,\n    h1:first-of-type,\n    h1:first-of-type + h2,\n    h3:first-of-type,\n    h4:first-of-type,\n    h5:first-of-type,\n    h6:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    h1:hover a.anchor,\n    h2:hover a.anchor,\n    h3:hover a.anchor,\n    h4:hover a.anchor,\n    h5:hover a.anchor,\n    h6:hover a.anchor {\n      text-decoration: none;\n    }\n\n    h1 tt,\n    h1 code {\n      font-size: inherit;\n    }\n\n    h2 tt,\n    h2 code {\n      font-size: inherit;\n    }\n\n    h3 tt,\n    h3 code {\n      font-size: inherit;\n    }\n\n    h4 tt,\n    h4 code {\n      font-size: inherit;\n    }\n\n    h5 tt,\n    h5 code {\n      font-size: inherit;\n    }\n\n    h6 tt,\n    h6 code {\n      font-size: inherit;\n    }\n\n    p,\n    blockquote,\n    ul,\n    ol,\n    dl,\n    li,\n    table,\n    pre {\n      margin: 15px 0;\n    }\n\n    hr {\n      border: 0 none;\n      color: ", ";\n      height: 4px;\n      padding: 0;\n    }\n\n    body > h2:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h1:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h1:first-of-type + h2 {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h3:first-of-type,\n    body > h4:first-of-type,\n    body > h5:first-of-type,\n    body > h6:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    a:first-of-type h1,\n    a:first-of-type h2,\n    a:first-of-type h3,\n    a:first-of-type h4,\n    a:first-of-type h5,\n    a:first-of-type h6 {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    h1 p,\n    h2 p,\n    h3 p,\n    h4 p,\n    h5 p,\n    h6 p {\n      margin-top: 0;\n    }\n\n    li p.first {\n      display: inline-block;\n    }\n\n    ul,\n    ol {\n      padding-left: 30px;\n    }\n\n    ul :first-of-type,\n    ol :first-of-type {\n      margin-top: 0;\n    }\n\n    ul :last-child,\n    ol :last-child {\n      margin-bottom: 0;\n    }\n\n    dl {\n      padding: 0;\n    }\n\n    dl dt {\n      font-size: 14px;\n      font-weight: bold;\n      font-style: italic;\n      padding: 0;\n      margin: 15px 0 5px;\n    }\n\n    dl dt:first-of-type {\n      padding: 0;\n    }\n\n    dl dt > :first-of-type {\n      margin-top: 0;\n    }\n\n    dl dt > :last-child {\n      margin-bottom: 0;\n    }\n\n    dl dd {\n      margin: 0 0 15px;\n      padding: 0 15px;\n    }\n\n    dl dd > :first-of-type {\n      margin-top: 0;\n    }\n\n    dl dd > :last-child {\n      margin-bottom: 0;\n    }\n\n    blockquote {\n      border-left: 4px solid ", ";\n      padding: 0 15px;\n      color: ", ";\n    }\n\n    blockquote > :first-of-type {\n      margin-top: 0;\n    }\n\n    blockquote > :last-child {\n      margin-bottom: 0;\n    }\n\n    table {\n      padding: 0;\n      border-collapse: collapse;\n    }\n    table tr {\n      border-top: 1px solid ", ";\n      background-color: white;\n      margin: 0;\n      padding: 0;\n    }\n\n    table tr:nth-of-type(2n) {\n      background-color: ", ";\n    }\n\n    table tr th {\n      font-weight: bold;\n      border: 1px solid ", ";\n      text-align: left;\n      margin: 0;\n      padding: 6px 13px;\n    }\n\n    table tr td {\n      border: 1px solid ", ";\n      text-align: left;\n      margin: 0;\n      padding: 6px 13px;\n    }\n\n    table tr th :first-of-type,\n    table tr td :first-of-type {\n      margin-top: 0;\n    }\n\n    table tr th :last-child,\n    table tr td :last-child {\n      margin-bottom: 0;\n    }\n\n    img {\n      max-width: 100%;\n    }\n\n    span.frame {\n      display: block;\n      overflow: hidden;\n    }\n\n    span.frame > span {\n      border: 1px solid ", ";\n      display: block;\n      float: left;\n      overflow: hidden;\n      margin: 13px 0 0;\n      padding: 7px;\n      width: auto;\n    }\n\n    span.frame span img {\n      display: block;\n      float: left;\n    }\n\n    span.frame span span {\n      clear: both;\n      color: ", ";\n      display: block;\n      padding: 5px 0 0;\n    }\n\n    span.align-center {\n      display: block;\n      overflow: hidden;\n      clear: both;\n    }\n\n    span.align-center > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px auto 0;\n      text-align: center;\n    }\n\n    span.align-center span img {\n      margin: 0 auto;\n      text-align: center;\n    }\n\n    span.align-right {\n      display: block;\n      overflow: hidden;\n      clear: both;\n    }\n\n    span.align-right > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px 0 0;\n      text-align: right;\n    }\n\n    span.align-right span img {\n      margin: 0;\n      text-align: right;\n    }\n\n    span.float-left {\n      display: block;\n      margin-right: 13px;\n      overflow: hidden;\n      float: left;\n    }\n\n    span.float-left span {\n      margin: 13px 0 0;\n    }\n\n    span.float-right {\n      display: block;\n      margin-left: 13px;\n      overflow: hidden;\n      float: right;\n    }\n\n    span.float-right > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px auto 0;\n      text-align: right;\n    }\n\n    code,\n    tt {\n      margin: 0 2px;\n      padding: 0 5px;\n      white-space: nowrap;\n      border: 1px solid ", ";\n      background-color: ", ";\n      border-radius: 3px;\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n    /* Custom styles atop GitHub base theme (see below) */\n    font-size: ", "px;\n    line-height: 1.6;\n\n    h1 {\n      font-size: ", "px;\n      font-weight: ", ";\n    }\n\n    h2 {\n      font-size: ", "px;\n      border-bottom: 1px solid ", ";\n    }\n\n    h3 {\n      font-size: ", "px;\n    }\n\n    h4 {\n      font-size: ", "px;\n    }\n\n    h5 {\n      font-size: ", "px;\n    }\n\n    h6 {\n      font-size: ", "px;\n      color: ", ";\n    }\n\n    /* Custom for SB SyntaxHighlighter */\n\n    pre:not(.hljs) {\n      background: transparent;\n      border: none;\n      border-radius: 0;\n      padding: 0;\n      margin: 0;\n    }\n\n    pre pre,\n    pre.hljs {\n      padding: 15px;\n      margin: 0;\n\n      white-space: pre-wrap;\n      color: inherit;\n\n      font-size: 13px;\n      line-height: 19px;\n\n      code {\n        color: inherit;\n        font-size: inherit;\n      }\n    }\n\n    pre code {\n      margin: 0;\n      padding: 0;\n      white-space: pre;\n      border: none;\n      background: transparent;\n    }\n\n    pre code,\n    pre tt {\n      background-color: transparent;\n      border: none;\n    }\n\n    /* GitHub inspired Markdown styles loosely from https://gist.github.com/tuzz/3331384 */\n\n    body > *:first-of-type {\n      margin-top: 0 !important;\n    }\n\n    body > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    a {\n      color: ", ";\n      text-decoration: none;\n    }\n\n    a.absent {\n      color: #cc0000;\n    }\n\n    a.anchor {\n      display: block;\n      padding-left: 30px;\n      margin-left: -30px;\n      cursor: pointer;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin: 20px 0 10px;\n      padding: 0;\n      cursor: text;\n      position: relative;\n    }\n\n    h2:first-of-type,\n    h1:first-of-type,\n    h1:first-of-type + h2,\n    h3:first-of-type,\n    h4:first-of-type,\n    h5:first-of-type,\n    h6:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    h1:hover a.anchor,\n    h2:hover a.anchor,\n    h3:hover a.anchor,\n    h4:hover a.anchor,\n    h5:hover a.anchor,\n    h6:hover a.anchor {\n      text-decoration: none;\n    }\n\n    h1 tt,\n    h1 code {\n      font-size: inherit;\n    }\n\n    h2 tt,\n    h2 code {\n      font-size: inherit;\n    }\n\n    h3 tt,\n    h3 code {\n      font-size: inherit;\n    }\n\n    h4 tt,\n    h4 code {\n      font-size: inherit;\n    }\n\n    h5 tt,\n    h5 code {\n      font-size: inherit;\n    }\n\n    h6 tt,\n    h6 code {\n      font-size: inherit;\n    }\n\n    p,\n    blockquote,\n    ul,\n    ol,\n    dl,\n    li,\n    table,\n    pre {\n      margin: 15px 0;\n    }\n\n    hr {\n      border: 0 none;\n      color: ", ";\n      height: 4px;\n      padding: 0;\n    }\n\n    body > h2:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h1:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h1:first-of-type + h2 {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    body > h3:first-of-type,\n    body > h4:first-of-type,\n    body > h5:first-of-type,\n    body > h6:first-of-type {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    a:first-of-type h1,\n    a:first-of-type h2,\n    a:first-of-type h3,\n    a:first-of-type h4,\n    a:first-of-type h5,\n    a:first-of-type h6 {\n      margin-top: 0;\n      padding-top: 0;\n    }\n\n    h1 p,\n    h2 p,\n    h3 p,\n    h4 p,\n    h5 p,\n    h6 p {\n      margin-top: 0;\n    }\n\n    li p.first {\n      display: inline-block;\n    }\n\n    ul,\n    ol {\n      padding-left: 30px;\n    }\n\n    ul :first-of-type,\n    ol :first-of-type {\n      margin-top: 0;\n    }\n\n    ul :last-child,\n    ol :last-child {\n      margin-bottom: 0;\n    }\n\n    dl {\n      padding: 0;\n    }\n\n    dl dt {\n      font-size: 14px;\n      font-weight: bold;\n      font-style: italic;\n      padding: 0;\n      margin: 15px 0 5px;\n    }\n\n    dl dt:first-of-type {\n      padding: 0;\n    }\n\n    dl dt > :first-of-type {\n      margin-top: 0;\n    }\n\n    dl dt > :last-child {\n      margin-bottom: 0;\n    }\n\n    dl dd {\n      margin: 0 0 15px;\n      padding: 0 15px;\n    }\n\n    dl dd > :first-of-type {\n      margin-top: 0;\n    }\n\n    dl dd > :last-child {\n      margin-bottom: 0;\n    }\n\n    blockquote {\n      border-left: 4px solid ", ";\n      padding: 0 15px;\n      color: ", ";\n    }\n\n    blockquote > :first-of-type {\n      margin-top: 0;\n    }\n\n    blockquote > :last-child {\n      margin-bottom: 0;\n    }\n\n    table {\n      padding: 0;\n      border-collapse: collapse;\n    }\n    table tr {\n      border-top: 1px solid ", ";\n      background-color: white;\n      margin: 0;\n      padding: 0;\n    }\n\n    table tr:nth-of-type(2n) {\n      background-color: ", ";\n    }\n\n    table tr th {\n      font-weight: bold;\n      border: 1px solid ", ";\n      text-align: left;\n      margin: 0;\n      padding: 6px 13px;\n    }\n\n    table tr td {\n      border: 1px solid ", ";\n      text-align: left;\n      margin: 0;\n      padding: 6px 13px;\n    }\n\n    table tr th :first-of-type,\n    table tr td :first-of-type {\n      margin-top: 0;\n    }\n\n    table tr th :last-child,\n    table tr td :last-child {\n      margin-bottom: 0;\n    }\n\n    img {\n      max-width: 100%;\n    }\n\n    span.frame {\n      display: block;\n      overflow: hidden;\n    }\n\n    span.frame > span {\n      border: 1px solid ", ";\n      display: block;\n      float: left;\n      overflow: hidden;\n      margin: 13px 0 0;\n      padding: 7px;\n      width: auto;\n    }\n\n    span.frame span img {\n      display: block;\n      float: left;\n    }\n\n    span.frame span span {\n      clear: both;\n      color: ", ";\n      display: block;\n      padding: 5px 0 0;\n    }\n\n    span.align-center {\n      display: block;\n      overflow: hidden;\n      clear: both;\n    }\n\n    span.align-center > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px auto 0;\n      text-align: center;\n    }\n\n    span.align-center span img {\n      margin: 0 auto;\n      text-align: center;\n    }\n\n    span.align-right {\n      display: block;\n      overflow: hidden;\n      clear: both;\n    }\n\n    span.align-right > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px 0 0;\n      text-align: right;\n    }\n\n    span.align-right span img {\n      margin: 0;\n      text-align: right;\n    }\n\n    span.float-left {\n      display: block;\n      margin-right: 13px;\n      overflow: hidden;\n      float: left;\n    }\n\n    span.float-left span {\n      margin: 13px 0 0;\n    }\n\n    span.float-right {\n      display: block;\n      margin-left: 13px;\n      overflow: hidden;\n      float: right;\n    }\n\n    span.float-right > span {\n      display: block;\n      overflow: hidden;\n      margin: 13px auto 0;\n      text-align: right;\n    }\n\n    code,\n    tt {\n      margin: 0 2px;\n      padding: 0 5px;\n      white-space: nowrap;\n      border: 1px solid ", ";\n      background-color: ", ";\n      border-radius: 3px;\n      color: ", ";\n    }\n  "]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -29,7 +29,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var DocumentWrapper = _theming.styled.div(function (_ref) {
   var theme = _ref.theme;
-  return (0, _theming.css)(_templateObject(), theme.typography.size.s2, theme.typography.size.l1, theme.typography.weight.black, theme.typography.size.m2, theme.appBorderColor, theme.typography.size.m1, theme.typography.size.s3, theme.typography.size.s2, theme.typography.size.s2, theme.color.dark, theme.color.secondary, theme.appBorderColor, theme.color.medium, theme.color.dark, theme.appBorderColor, theme.color.lighter, theme.appBorderColor, theme.appBorderColor, theme.color.medium, theme.color.darkest, theme.color.mediumlight, theme.color.lighter);
+  return (0, _theming.css)(_templateObject(), theme.typography.size.s2, theme.typography.size.l1, theme.typography.weight.black, theme.typography.size.m2, theme.appBorderColor, theme.typography.size.m1, theme.typography.size.s3, theme.typography.size.s2, theme.typography.size.s2, theme.color.dark, theme.color.secondary, theme.appBorderColor, theme.color.medium, theme.color.dark, theme.appBorderColor, theme.color.lighter, theme.appBorderColor, theme.appBorderColor, theme.color.medium, theme.color.darkest, theme.color.mediumlight, theme.color.lighter, theme.base === 'dark' && theme.color.darkest);
 });
 
 exports.DocumentWrapper = DocumentWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "5.2.1",
+  "version": "5.2.5",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -15,15 +15,22 @@
     "directory": "lib/components"
   },
   "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/client-logger": "5.2.1",
-    "@storybook/theming": "5.2.1",
+    "@storybook/client-logger": "5.2.5",
+    "@storybook/theming": "5.2.5",
     "@types/react-syntax-highlighter": "10.1.0",
+    "@types/react-textarea-autosize": "^4.3.3",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.1",
@@ -41,7 +48,6 @@
     "simplebar-react": "^1.0.0-alpha.6"
   },
   "devDependencies": {
-    "@types/react-textarea-autosize": "^4.3.3",
     "enzyme": "^3.9.0",
     "jest": "^24.7.1",
     "jest-enzyme": "^7.0.2"
@@ -53,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5497d2ea8d47c4573d245126e6f3f45bc176c12d"
+  "gitHead": "6e80db697f865f833cf3e250573a7ce36e0ee02a"
 }

package/src/ActionBar/ActionBar.stories.tsx

@@ -1,41 +0,0 @@
-import React, { ReactNode } from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { ActionBar } from './ActionBar';
-
-const action1 = action('action1');
-const action2 = action('action2');
-const action3 = action('action3');
-
-export default {
-  component: ActionBar,
-  title: 'Basics|ActionBar',
-  decorators: [
-    (storyFn: () => ReactNode) => (
-      <div
-        style={{
-          position: 'relative',
-          width: '300px',
-          height: '64px',
-          margin: '1rem',
-          background: 'papayawhip',
-          border: '1px solid rgba(0,0,0,.05)',
-        }}
-      >
-        {storyFn()}
-      </div>
-    ),
-  ],
-};
-
-export const singleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
-
-export const manyItems = () => (
-  <ActionBar
-    actionItems={[
-      { title: 'Action string', onClick: action1 },
-      { title: <div>Action node</div>, onClick: action2 },
-      { title: 'Long action string', onClick: action3 },
-    ]}
-  />
-);

package/src/ActionBar/ActionBar.tsx

@@ -1,75 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { styled } from '@storybook/theming';
-
-const Container = styled.div<{}>(({ theme }) => ({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  maxWidth: '100%',
-  display: 'flex',
-  background: theme.background.content,
-  zIndex: 1,
-}));
-
-export const ActionButton = styled.button<{ disabled: boolean }>(
-  ({ theme }) => ({
-    border: '0 none',
-    padding: '4px 10px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-
-    color: theme.color.defaultText,
-    background: theme.background.content,
-
-    fontSize: 12,
-    lineHeight: '16px',
-    fontFamily: theme.typography.fonts.base,
-    fontWeight: theme.typography.weight.bold,
-
-    borderTop: `1px solid ${theme.appBorderColor}`,
-    borderLeft: `1px solid ${theme.appBorderColor}`,
-    marginLeft: -1,
-
-    borderRadius: `4px 0 0 0`,
-
-    '&:not(:last-child)': { borderRight: `1px solid ${theme.appBorderColor}` },
-    '& + *': {
-      borderLeft: `1px solid ${theme.appBorderColor}`,
-      borderRadius: 0,
-    },
-
-    '&:focus': {
-      boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`,
-      outline: '0 none',
-    },
-  }),
-  ({ disabled }) =>
-    disabled && {
-      cursor: 'not-allowed',
-      opacity: 0.5,
-    }
-);
-ActionButton.displayName = 'ActionButton';
-
-export interface ActionItem {
-  title: string | JSX.Element;
-  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  disabled?: boolean;
-}
-
-export interface ActionBarProps {
-  actionItems: ActionItem[];
-}
-
-export const ActionBar: FunctionComponent<ActionBarProps> = ({ actionItems, ...props }) => (
-  <Container {...props}>
-    {actionItems.map(({ title, onClick, disabled }, index: number) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <ActionButton key={index} onClick={onClick} disabled={disabled}>
-        {title}
-      </ActionButton>
-    ))}
-  </Container>
-);

package/src/Badge/Badge.stories.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Badge } from './Badge';
-
-storiesOf('Basics|Badge', module).add('all badges', () => (
-  <div>
-    <Badge status="positive">Positive</Badge>
-    <Badge status="negative">Negative</Badge>
-    <Badge status="neutral">Neutral</Badge>
-  </div>
-));

package/src/Badge/Badge.tsx

@@ -1,68 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { styled, css } from '@storybook/theming';
-
-type BadgeWrapperProps = BadgeProps;
-
-const BadgeWrapper = styled.div<BadgeWrapperProps>`
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: ${props => props.theme.typography.weight.bold};
-
-  svg {
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
-    margin-top: -2px;
-
-    path {
-      fill: currentColor;
-    }
-  }
-
-  ${props =>
-    props.status === 'critical' &&
-    css`
-      color: ${props.theme.color.critical};
-      background: ${props.theme.background.critical};
-    `};
-
-  ${props =>
-    props.status === 'negative' &&
-    css`
-      color: ${props.theme.color.negative};
-      background: ${props.theme.background.negative};
-    `};
-
-  ${props =>
-    props.status === 'warning' &&
-    css`
-      color: ${props.theme.color.warning};
-      background: ${props.theme.background.warning};
-    `};
-
-  ${props =>
-    props.status === 'neutral' &&
-    css`
-      color: ${props.theme.color.dark};
-      background: ${props.theme.color.mediumlight};
-    `};
-
-  ${props =>
-    props.status === 'positive' &&
-    css`
-      color: ${props.theme.color.positive};
-      background: ${props.theme.background.positive};
-    `};
-`;
-
-export interface BadgeProps {
-  status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
-}
-
-export const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
-  return <BadgeWrapper {...props} />;
-};

package/src/Button/Button.stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button } from './Button';
-import { Icons } from '../icon/icon';
-
-import { Form } from '../form/index';
-
-const { Button: FormButton } = Form;
-
-storiesOf('Basics|Button', module).add('all buttons', () => (
-  <div>
-    <p>Button that is used for forms</p>
-    <FormButton>Form.Button</FormButton>
-    <br />
-    <p>Buttons that are used for everything else</p>
-    <Button primary>Primary</Button>
-    <Button secondary>Secondary</Button>
-    <Button outline containsIcon>
-      <Icons icon="link" />
-    </Button>
-    <br />
-    <Button outline>Outline</Button>
-    <Button outline primary>
-      Outline primary
-    </Button>
-    <Button outline secondary>
-      Outline secondary
-    </Button>
-    <Button primary disabled>
-      Disabled
-    </Button>
-    <br />
-    <Button primary small>
-      Primary
-    </Button>
-    <Button secondary small>
-      Secondary
-    </Button>
-    <Button outline small>
-      Outline
-    </Button>
-    <Button primary disabled small>
-      Disabled
-    </Button>
-    <Button outline small containsIcon>
-      <Icons icon="link" />
-    </Button>
-    <Button outline small>
-      <Icons icon="link" />
-      Link
-    </Button>
-  </div>
-));

package/src/Button/Button.tsx

@@ -1,256 +0,0 @@
-import React, { FunctionComponent, forwardRef } from 'react';
-import { styled, css } from '@storybook/theming';
-import { darken, lighten, rgba, transparentize } from 'polished';
-
-type ButtonWrapperProps = ButtonProps;
-
-const ButtonWrapper = styled.button<ButtonWrapperProps>`
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: ${props => (props.small ? '10px 16px' : '13px 20px')};
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: all 150ms ease-out;
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-
-
-  font-size: ${props =>
-    props.small ? props.theme.typography.size.s1 : props.theme.typography.size.s2 - 1}px;
-  font-weight: ${props => props.theme.typography.weight.bold};
-  line-height: 1;
-
-
-  svg {
-    display: inline-block;
-    height: ${props => (props.small ? '14' : '16')}px;
-    width: ${props => (props.small ? '14' : '16')}px;
-    vertical-align: top;
-    margin-right: ${props => (props.small ? '4' : '6')}px;
-    margin-top: ${props => (props.small ? '-1' : '-2')}px;
-    margin-bottom: ${props => (props.small ? '-1' : '-2')}px;
-
-    /* Necessary for js mouse events to not glitch out when hovering on svgs */
-    pointer-events: none;
-
-    path { fill: currentColor; }
-  }
-
-  ${props =>
-    props.disabled &&
-    css`
-      cursor: not-allowed !important;
-      opacity: 0.5;
-      &:hover {
-        transform: none;
-      }
-    `}
-
-  ${props =>
-    props.containsIcon &&
-    css`
-      svg {
-        display: block;
-        margin: 0;
-      }
-
-      ${props.small &&
-        css`
-          padding: 9px;
-        `}
-
-      ${!props.small &&
-        css`
-          padding: 12px;
-        `}
-    `}
-
-  /* Colored button for primary CTAs */
-  ${props =>
-    props.primary &&
-    css`
-      background: ${props.theme.color.primary};
-      color: ${props.theme.color.lightest};
-
-      &:hover {
-        background: ${darken(0.05, props.theme.color.primary)};
-      }
-      &:active {
-        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
-      }
-      &:focus {
-        box-shadow: ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px;
-      }
-      &:focus:hover {
-        box-shadow: ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;
-      }
-    `}
-
-
-  /* Colored button for secondary CTAs */
-  ${props =>
-    props.secondary &&
-    css`
-      background: ${props.theme.color.secondary};
-      color: ${props.theme.color.lightest};
-
-      &:hover {
-        background: ${darken(0.05, props.theme.color.secondary)};
-      }
-      &:active {
-        box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
-      }
-      &:focus {
-        box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px;
-      }
-      &:focus:hover {
-        box-shadow: ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;
-      }
-    `}
-
-  /* Button for tertiary CTAs and forms that responds to theme */
-  ${props =>
-    props.tertiary &&
-    css`
-      background: ${props.theme.base === 'light'
-        ? darken(0.02, props.theme.input.background)
-        : lighten(0.02, props.theme.input.background)};
-      color: ${props.theme.input.color};
-      box-shadow: ${props.theme.input.border} 0 0 0 1px inset;
-      border-radius: ${props.theme.input.borderRadius}px;
-
-      &:hover {
-        background: ${props.theme.base === 'light'
-          ? darken(0.05, props.theme.input.background)
-          : lighten(0.05, props.theme.input.background)};
-        ${props.inForm
-          ? ''
-          : 'box-shadow: rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'}
-      }
-      &:active {
-        background: ${props.theme.base === 'light'
-          ? props.theme.input.background
-          : props.theme.input.background};
-      }
-      &:focus {
-        box-shadow: ${rgba(props.theme.color.secondary, 0.4)} 0 0 0 1px inset;
-      }
-    `}
-
-  /* Button that's outlined */
-  ${props =>
-    props.outline &&
-    css`
-      box-shadow: ${transparentize(0.8, props.theme.color.defaultText)} 0 0 0 1px inset;
-      color: ${transparentize(0.3, props.theme.color.defaultText)};
-      background: transparent;
-
-      &:hover {
-        box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 1px inset;
-      }
-
-      &:active {
-        box-shadow: ${transparentize(0.5, props.theme.color.defaultText)} 0 0 0 2px inset;
-        color: ${transparentize(0, props.theme.color.defaultText)};
-      }
-
-      ${props.primary &&
-        css`
-          box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-          color: ${props.theme.color.primary};
-
-          svg path {
-            fill: ${props.theme.color.primary};
-          }
-
-          &:hover {
-            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-            background: transparent;
-          }
-
-          &:active {
-            background: ${props.theme.color.primary};
-            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset;
-            color: ${props.theme.color.lightest};
-          }
-          &:focus {
-            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset,
-              ${rgba(props.theme.color.primary, 0.4)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${props.theme.color.primary} 0 0 0 1px inset,
-              ${rgba(props.theme.color.primary, 0.2)} 0 8px 18px 0px;
-          }
-        `};
-
-      ${props.secondary &&
-        css`
-          box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-          color: ${props.theme.color.secondary};
-
-          &:hover {
-            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-            background: transparent;
-          }
-
-          &:active {
-            background: ${props.theme.color.secondary};
-            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset;
-            color: ${props.theme.color.lightest};
-          }
-          &:focus {
-            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset,
-              ${rgba(props.theme.color.secondary, 0.4)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${props.theme.color.secondary} 0 0 0 1px inset,
-              ${rgba(props.theme.color.secondary, 0.2)} 0 8px 18px 0px;
-          }
-        `};
-    `}
-`;
-
-const ButtonLink = ButtonWrapper.withComponent('a');
-
-export interface ButtonProps {
-  isLink?: boolean;
-  primary?: boolean;
-  secondary?: boolean;
-  tertiary?: boolean;
-  inForm?: boolean;
-  disabled?: boolean;
-  small?: boolean;
-  outline?: boolean;
-  containsIcon?: boolean;
-}
-
-export const Button = Object.assign(
-  forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
-    if (isLink) {
-      return (
-        <ButtonLink {...props} ref={ref}>
-          {children}
-        </ButtonLink>
-      );
-    }
-    return (
-      <ButtonWrapper {...props} ref={ref}>
-        {children}
-      </ButtonWrapper>
-    );
-  }),
-  {
-    defaultProps: {
-      isLink: false,
-    },
-  }
-);