From 4e70e41c67258153ed962ff6ae090a41dcf6af46 Mon Sep 17 00:00:00 2001 From: Michael Lancaster Date: Tue, 3 Apr 2018 15:13:53 -0700 Subject: [PATCH] feat: implement badge component Implement badge component and it's variations Closes DCOS-21610 --- .../badge/__snapshots__/badge.test.tsx.snap | 22 +- components/badge/badge.test.tsx | 18 +- components/badge/badge.tsx | 10 +- components/badge/stories/badge.stories.tsx | 36 ++- components/badge/style.ts | 14 +- package-lock.json | 300 ++++++++++-------- shared/{style.ts => styles/core.ts} | 6 +- 7 files changed, 236 insertions(+), 170 deletions(-) rename shared/{style.ts => styles/core.ts} (93%) diff --git a/components/badge/__snapshots__/badge.test.tsx.snap b/components/badge/__snapshots__/badge.test.tsx.snap index edff0f945..07d2c55d6 100644 --- a/components/badge/__snapshots__/badge.test.tsx.snap +++ b/components/badge/__snapshots__/badge.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Badge danger 1`] = ` danger @@ -10,23 +10,31 @@ exports[`Badge danger 1`] = ` exports[`Badge default 1`] = ` default `; -exports[`Badge information 1`] = ` +exports[`Badge outline 1`] = ` - information + outline + +`; + +exports[`Badge primary 1`] = ` + + primary `; exports[`Badge success 1`] = ` success @@ -34,7 +42,7 @@ exports[`Badge success 1`] = ` exports[`Badge warning 1`] = ` warning diff --git a/components/badge/badge.test.tsx b/components/badge/badge.test.tsx index b4638553d..833384e1f 100644 --- a/components/badge/badge.test.tsx +++ b/components/badge/badge.test.tsx @@ -11,25 +11,31 @@ describe("Badge", () => { it("success", () => { expect(renderer - .create(success) + .create(success) .toJSON()).toMatchSnapshot() }); - it("information", () => { + it("primary", () => { expect(renderer - .create(information) + .create(primary) + .toJSON()).toMatchSnapshot() + }); + + it("danger", () => { + expect(renderer + .create(danger) .toJSON()).toMatchSnapshot() }); it("warning", () => { expect(renderer - .create(warning) + .create(warning) .toJSON()).toMatchSnapshot() }); - it("danger", () => { + it("outline", () => { expect(renderer - .create(danger) + .create(outline) .toJSON()).toMatchSnapshot() }); }); diff --git a/components/badge/badge.tsx b/components/badge/badge.tsx index 754e34eb2..2a98bdf5e 100644 --- a/components/badge/badge.tsx +++ b/components/badge/badge.tsx @@ -2,19 +2,19 @@ import * as React from "react"; import { badge } from "./style"; export interface IBadgeProps { - appearance?: string; - children?: React.ReactNode | string; + theme?: string; + children?: JSX.Element | string; } export class Badge extends React.PureComponent { public static defaultProps: Partial = { - appearance: "default" + theme: "default" }; public render() { - const { appearance, children } = this.props; + const { theme, children } = this.props; - return {children}; + return {children}; } } diff --git a/components/badge/stories/badge.stories.tsx b/components/badge/stories/badge.stories.tsx index c10cd789b..a61121102 100644 --- a/components/badge/stories/badge.stories.tsx +++ b/components/badge/stories/badge.stories.tsx @@ -1,14 +1,38 @@ import * as React from "react"; import { storiesOf } from "@storybook/react"; import { withReadme } from "storybook-readme"; -import Badge from "../badge"; +import { Badge } from "../../index"; const BadgeReadme = require("../README.md"); storiesOf("Badge", module) .addDecorator(withReadme([BadgeReadme])) - .addWithInfo("default", () => default) - .addWithInfo("success", () => success) - .addWithInfo("information", () => information) - .addWithInfo("warning", () => warning) - .addWithInfo("danger", () => danger) + .addWithInfo( + "Default", + () => Default + ) + .addWithInfo( + "Success", + "Represents something positive.", + () => Success + ) + .addWithInfo( + "Primary", + "Represents something more significant than a default.", + () => Primary + ) + .addWithInfo( + "Danger", + "Represents something in a danger or error state.", + () => Danger + ) + .addWithInfo( + "Warning", + "Represents something that we want to warn the user about but not quite extreme as a danger state.", + () => Warning + ) + .addWithInfo( + "Outline", + "Outline badges for when we want the density of the badge to be lighter e.g. when next to data in a table cell", + () => Outline + ) diff --git a/components/badge/style.ts b/components/badge/style.ts index 914dbe9a9..43f769f41 100644 --- a/components/badge/style.ts +++ b/components/badge/style.ts @@ -1,7 +1,7 @@ import { css } from "emotion"; -import { getColors, getFonts } from "../../shared/style"; +import { getColors, getFonts } from "../../shared/styles/core"; -const badgeAppearances = { +const badgeTheme = { "default": css` background-color: ${getColors().greyLight}; border-color: ${getColors().greyLight}; @@ -31,12 +31,18 @@ const badgeAppearances = { background-color: ${getColors().white}; border-color: ${getColors().greyLight}; color: ${getColors().greyDark}; + `, + "outline-primary": css` + background-color: ${getColors().white}; + border-color: ${getColors().purple}; + color: ${getColors().greyDark}; ` }; -export const badge = (appearance) => { +export const badge = (theme) => { return css` - ${badgeAppearances[appearance]}; + ${badgeTheme[theme]}; + box-sizing: border-box; border-width: 1px; border-style: solid; padding-left: 8px; diff --git a/package-lock.json b/package-lock.json index c00ca57de..b277e7355 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,12 +5,12 @@ "requires": true, "dependencies": { "@babel/code-frame": { - "version": "7.0.0-beta.42", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz", - "integrity": "sha512-L8i94FLSyaLQpRfDo/qqSm8Ndb44zMtXParXo0MebJICG1zoCCL4+GkzUOlB4BNTRSXXQdb3feam/qw7bKPipQ==", + "version": "7.0.0-beta.43", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.43.tgz", + "integrity": "sha512-6ChJOwmetdKGH9JSppRlZuS/CLKDByTfOs5zxQMCShz3Rc3sNwPkxkdgkY4J/H8rEIxdvbh6/m6JpKGUwPvPZA==", "dev": true, "requires": { - "@babel/highlight": "7.0.0-beta.42" + "@babel/highlight": "7.0.0-beta.43" } }, "@babel/helper-module-imports": { @@ -23,9 +23,9 @@ } }, "@babel/highlight": { - "version": "7.0.0-beta.42", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.42.tgz", - "integrity": "sha512-X3Ur/A/lIbbP8W0pmwgqtDXIxhQmxPaiwY9SKP7kF9wvZfjZRwMvbJE92ozUhF3UDK3DCKaV7oGqmI1rP/zqWA==", + "version": "7.0.0-beta.43", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.43.tgz", + "integrity": "sha512-8o+1OBarlusYwbJ3Warn01pmsXlnzCtKhA6uCmU4gyxWdZLY5kODCnI5rVf2ZoZcRyqg5C8J5DhiXHG4/rTwNA==", "dev": true, "requires": { "chalk": "2.3.1", @@ -238,8 +238,8 @@ "integrity": "sha512-UbGJue0PNpXu10oJidS1Y34WkiTNeoEDH8Vq7qzSiEYOpdq7Q/pg4GjWG/FiYuD9fREQ5grCiPcoKVih5j54Eg==", "dev": true, "requires": { - "@storybook/client-logger": "3.3.15", - "@storybook/components": "3.3.15", + "@storybook/client-logger": "3.4.0", + "@storybook/components": "3.4.0", "babel-runtime": "6.26.0", "global": "4.3.2", "marksy": "6.0.3", @@ -260,7 +260,7 @@ "global": "4.3.2", "insert-css": "2.0.0", "lodash.debounce": "4.0.8", - "moment": "2.21.0", + "moment": "2.22.0", "prop-types": "15.6.1", "react-color": "2.14.0", "react-datetime": "2.14.0", @@ -274,7 +274,7 @@ "integrity": "sha512-pD+/aOpGPcDQ/4h7UHA+nu3ye0w1KJ8GFz4MCX7a+38rYDUe1ePD5xmLT56zHCKqyKZgrrIoGZg/yEQjpQCJug==", "dev": true, "requires": { - "@storybook/components": "3.3.15", + "@storybook/components": "3.4.0", "global": "4.3.2", "prop-types": "15.6.1" } @@ -292,32 +292,32 @@ "dev": true }, "@storybook/channel-postmessage": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.3.15.tgz", - "integrity": "sha512-nQKO6gJzHbYyZDaUjMlIfPZNsZlgBoGnZCpn6idi/JWWe417mOxT0Cv6FUJQ0zWHz/E6Wjrn7/ms3MLV7aOpDA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.4.0.tgz", + "integrity": "sha512-HQldvfSp/LiqD8Ey3uavkmKqEQEmlLQW3Y+FWVzqNInYrONVDCf/oGbpqY6m9T9gKzXo7vrlSgDx9UYKeHE3Ww==", "dev": true, "requires": { - "@storybook/channels": "3.3.15", + "@storybook/channels": "3.4.0", "global": "4.3.2", "json-stringify-safe": "5.0.1" } }, "@storybook/channels": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.3.15.tgz", - "integrity": "sha512-iIkmkNAILaGie1zGBLFQlv+1PM1SRSaqM+IEgCpq3JHd4ACWSw9k3kGQsxeahcyM0c8+gONHjOK88Hp6qoZr4Q==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.4.0.tgz", + "integrity": "sha512-C3lBo33C91/yQjJjQuaRjdjh/xntQ5q+QhUlU1N4IdQxykHu455C3f8K/mWDAGK7MFF+x7Pq1OLQ5eoJgSd67g==", "dev": true }, "@storybook/client-logger": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.3.15.tgz", - "integrity": "sha512-+UWvVSr3KrnDUa1JXv8cdirzcM9jrjcthgWajmvU6TlBnzvSqF6oHLeDTGOcNPp4zGg12kSCAjB3dnNdVEkZOw==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.4.0.tgz", + "integrity": "sha512-7XhNeHdLyYsyxvm8g1eZeGqlT+85CRpDJZ55JkNuPikVsVpoXALCUCKC1heyUQ74qvMeTSbo8Ck2yOxb35Uyrg==", "dev": true }, "@storybook/components": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.3.15.tgz", - "integrity": "sha512-WgDh/gUPo18Buaf3JguXQx97tBehZzaXLcav3TBA37n20mOhprgADqpIu1tgmMKx3RVqMk57TtD0pNQuISqt0Q==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.4.0.tgz", + "integrity": "sha512-qpozgneXRGppAcD4Nx78nFTyRj6GlSrtLmAwuaRzM4oN0lYDBuEvDSkgeDYmNcQuHkOUf6hsCLJrl/M0KdvaSA==", "dev": true, "requires": { "glamor": "2.20.40", @@ -331,18 +331,17 @@ "integrity": "sha512-GD4OYJ8GsayVhIg306sfgcKDk9j8YfuSKIAWvdB/g7IDlw0pDgueONALVEEE2XWJtCwcsUyDtCYzXFgCBWLEjA==", "dev": true, "requires": { - "@storybook/react-komposer": "2.0.3", + "@storybook/react-komposer": "2.0.4", "@storybook/react-simple-di": "1.3.0", "babel-runtime": "6.26.0" } }, "@storybook/node-logger": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.3.15.tgz", - "integrity": "sha512-7d9lQptj2N7WIR4FXUWXRmSIjDS05xXFhvjoC4wMHnTxNQUOnJsVbiInj2E1qinYU3YWZIU/mD0Y5n5vyEq7QA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.4.0.tgz", + "integrity": "sha512-iC1z9ipoHxHGAZXdS6zu+Gxq+wMfmQialWcuExZvol+wdKq57syovoC/NOnFQIhVqYj38GOQH1xZnM8j9UuX7Q==", "dev": true, "requires": { - "chalk": "2.3.1", "npmlog": "4.1.2" } }, @@ -365,10 +364,10 @@ "@storybook/addon-actions": "3.3.14", "@storybook/addon-links": "3.3.14", "@storybook/addons": "3.3.14", - "@storybook/channel-postmessage": "3.3.15", - "@storybook/client-logger": "3.3.15", - "@storybook/node-logger": "3.3.15", - "@storybook/ui": "3.3.15", + "@storybook/channel-postmessage": "3.4.0", + "@storybook/client-logger": "3.4.0", + "@storybook/node-logger": "3.4.0", + "@storybook/ui": "3.4.0", "airbnb-js-shims": "1.4.1", "autoprefixer": "7.2.6", "babel-loader": "7.1.4", @@ -409,7 +408,7 @@ "qs": "6.5.1", "redux": "3.7.2", "request": "2.85.0", - "serve-favicon": "2.4.5", + "serve-favicon": "2.5.0", "shelljs": "0.7.8", "style-loader": "0.19.1", "uglifyjs-webpack-plugin": "1.2.4", @@ -430,9 +429,9 @@ } }, "@storybook/react-komposer": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/@storybook/react-komposer/-/react-komposer-2.0.3.tgz", - "integrity": "sha512-DjL/XwZLNx79Rc1y0dyjxme64eUSJeJvajCN587sVDsVZIgsPlDWwmaohOCkPhR8HNGrY89qoeFZZxFslT203w==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@storybook/react-komposer/-/react-komposer-2.0.4.tgz", + "integrity": "sha1-wsDUp12bSpwMa0bxSrBQ9FitS7A=", "dev": true, "requires": { "@storybook/react-stubber": "1.0.1", @@ -566,34 +565,32 @@ } }, "@storybook/ui": { - "version": "3.3.15", - "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.3.15.tgz", - "integrity": "sha512-p9r7BzmHg9Rmy6zXAsHiUXFYiLot+3MblTfcuU1F7Rc7l3zoZmA6RjIH2TO8DpqYLZiMB+hSFBcLSXfSYKjpdg==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.4.0.tgz", + "integrity": "sha512-fqVCno/Uo6yaohpDfjCx/Q+KjC93jy8+i+6ZSwEjJIDK+1HW1lrhqycv/vV4+OkXRwsG+y2GOw3MVPdXX3f1yA==", "dev": true, "requires": { - "@storybook/components": "3.3.15", + "@storybook/components": "3.4.0", "@storybook/mantra-core": "1.7.2", "@storybook/podda": "1.2.3", - "@storybook/react-komposer": "2.0.3", + "@storybook/react-komposer": "2.0.4", "babel-runtime": "6.26.0", "deep-equal": "1.0.1", - "events": "1.1.1", + "events": "2.0.0", "fuse.js": "3.2.0", "global": "4.3.2", - "json-stringify-safe": "5.0.1", "keycode": "2.2.0", "lodash.debounce": "4.0.8", "lodash.pick": "4.4.0", "lodash.sortby": "4.7.0", + "lodash.throttle": "4.1.1", "prop-types": "15.6.1", "qs": "6.5.1", "react-fuzzy": "0.5.2", "react-icons": "2.2.7", - "react-inspector": "2.2.2", "react-modal": "3.3.2", "react-split-pane": "0.1.77", - "react-treebeard": "2.1.0", - "redux": "3.7.2" + "react-treebeard": "2.1.0" } }, "@types/jest": { @@ -2641,7 +2638,7 @@ "content-type": "1.0.4", "debug": "2.6.9", "depd": "1.1.2", - "http-errors": "1.6.2", + "http-errors": "1.6.3", "iconv-lite": "0.4.19", "on-finished": "2.3.0", "qs": "6.5.1", @@ -3754,12 +3751,6 @@ "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", "dev": true }, - "content-type-parser": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/content-type-parser/-/content-type-parser-1.0.2.tgz", - "integrity": "sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==", - "dev": true - }, "conventional-changelog": { "version": "1.1.23", "resolved": "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-1.1.23.tgz", @@ -4732,6 +4723,17 @@ "assert-plus": "1.0.0" } }, + "data-urls": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.0.0.tgz", + "integrity": "sha512-ai40PPQR0Fn1lD2PPie79CibnlMN2AYiDhwFX/rZHVsxbs5kNJSjegqXIprhouGXlRdEnfybva7kqRGnB6mypA==", + "dev": true, + "requires": { + "abab": "1.0.4", + "whatwg-mimetype": "2.1.0", + "whatwg-url": "6.4.0" + } + }, "date-fns": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz", @@ -5544,9 +5546,9 @@ "dev": true }, "events": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz", - "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/events/-/events-2.0.0.tgz", + "integrity": "sha512-r/M5YkNg9zwI8QbSf7tsDWWJvO3PGwZXyG7GpFAxtMASnHL2eblFd7iHiGPtyGKKFPZ59S63NeX10Ws6WqGDcg==", "dev": true }, "eventsource": { @@ -5833,9 +5835,9 @@ } }, "external-editor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.1.0.tgz", - "integrity": "sha512-E44iT5QVOUJBKij4IIV3uvxuNlbKS38Tw1HiupxEIHPv9qtC2PrDYohbXV5U+1jnfIXttny8gUhj+oZvflFlzA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", + "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", "dev": true, "requires": { "chardet": "0.4.2", @@ -7902,25 +7904,24 @@ "requires": { "es6-templates": "0.2.3", "fastparse": "1.1.1", - "html-minifier": "3.5.12", + "html-minifier": "3.5.13", "loader-utils": "1.1.0", "object-assign": "4.1.1" } }, "html-minifier": { - "version": "3.5.12", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.12.tgz", - "integrity": "sha512-+N778qLf0RWBscD0TPGoYdeGNDZ0s76/0pQhY1/409EOudcENkm9IbSkk37RDyPdg/09GVHTKotU4ya93RF1Gg==", + "version": "3.5.13", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.13.tgz", + "integrity": "sha512-B7P99uf0LPQ5lslyhrAZAXE7Lk1tpiv52KVapKbeFhgqNMUI7JBd/fYLX55imu3Rz7sCTzZM6r/IBe4oT7qCjg==", "dev": true, "requires": { "camel-case": "3.0.0", "clean-css": "4.1.11", "commander": "2.15.1", "he": "1.1.1", - "ncname": "1.0.0", "param-case": "2.1.1", "relateurl": "0.2.7", - "uglify-js": "3.3.16" + "uglify-js": "3.3.18" } }, "html-tag-names": { @@ -7936,7 +7937,7 @@ "dev": true, "requires": { "bluebird": "3.5.1", - "html-minifier": "3.5.12", + "html-minifier": "3.5.13", "loader-utils": "0.2.17", "lodash": "4.17.5", "pretty-error": "2.1.1", @@ -8011,29 +8012,15 @@ "dev": true }, "http-errors": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", - "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { - "depd": "1.1.1", + "depd": "1.1.2", "inherits": "2.0.3", - "setprototypeof": "1.0.3", + "setprototypeof": "1.1.0", "statuses": "1.4.0" - }, - "dependencies": { - "depd": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", - "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=", - "dev": true - }, - "setprototypeof": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", - "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=", - "dev": true - } } }, "http-parser-js": { @@ -8302,7 +8289,7 @@ "chalk": "2.3.1", "cli-cursor": "2.1.0", "cli-width": "2.2.0", - "external-editor": "2.1.0", + "external-editor": "2.2.0", "figures": "2.0.0", "lodash": "4.17.5", "mute-stream": "0.0.7", @@ -8801,7 +8788,7 @@ "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", "requires": { "node-fetch": "1.7.3", - "whatwg-fetch": "2.0.3" + "whatwg-fetch": "2.0.4" } }, "isstream": { @@ -9243,7 +9230,7 @@ "requires": { "jest-mock": "22.4.3", "jest-util": "22.4.3", - "jsdom": "11.6.2" + "jsdom": "11.7.0" } }, "jest-environment-node": { @@ -9404,7 +9391,7 @@ "integrity": "sha512-iAMeKxhB3Se5xkSjU0NndLLCHtP4n+GtCqV0bISKA5dmOXQfEbdEmYiu2qpnWBDCQdEafNDDU6Q+l6oBMd/+BA==", "dev": true, "requires": { - "@babel/code-frame": "7.0.0-beta.42", + "@babel/code-frame": "7.0.0-beta.43", "chalk": "2.3.1", "micromatch": "2.3.11", "slash": "1.0.0", @@ -9963,19 +9950,18 @@ } }, "jsdom": { - "version": "11.6.2", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.6.2.tgz", - "integrity": "sha512-pAeZhpbSlUp5yQcS6cBQJwkbzmv4tWFaYxHbFVSxzXefqjvtRA851Z5N2P+TguVG9YeUDcgb8pdeVQRJh0XR3Q==", + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.7.0.tgz", + "integrity": "sha512-9NzSc4Iz4gN9p4uoPbBUzro21QdgL32swaWIaWS8eEVQ2I69fRJAy/MKyvlEIk0V7HtKgfMbbOKyTZUrzR2Hsw==", "dev": true, "requires": { "abab": "1.0.4", "acorn": "5.5.3", "acorn-globals": "4.1.0", "array-equal": "1.0.0", - "browser-process-hrtime": "0.1.2", - "content-type-parser": "1.0.2", "cssom": "0.3.2", "cssstyle": "0.2.37", + "data-urls": "1.0.0", "domexception": "1.0.1", "escodegen": "1.9.1", "html-encoding-sniffer": "1.0.2", @@ -9991,6 +9977,7 @@ "w3c-hr-time": "1.0.1", "webidl-conversions": "4.0.2", "whatwg-encoding": "1.0.3", + "whatwg-mimetype": "2.1.0", "whatwg-url": "6.4.0", "ws": "4.1.0", "xml-name-validator": "3.0.0" @@ -10009,9 +9996,9 @@ "dev": true }, "json-parse-better-errors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz", - "integrity": "sha512-xyQpxeWWMKyJps9CuGJYeng6ssI5bpqS9ltQpdVQ90t4ql6NdnxFKh95JcRt2cun/DjMVNrdjniLPuMA69xmCw==" + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", + "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==" }, "json-schema": { "version": "0.2.3", @@ -10522,6 +10509,12 @@ "lodash._reinterpolate": "3.0.0" } }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=", + "dev": true + }, "lodash.topairs": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.topairs/-/lodash.topairs-4.3.0.tgz", @@ -11209,9 +11202,9 @@ "dev": true }, "moment": { - "version": "2.21.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.21.0.tgz", - "integrity": "sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==", + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.0.tgz", + "integrity": "sha512-1muXCh8jb1N/gHRbn9VDUBr0GYb8A/aVcHlII9QSB68a50spqEVLIGN6KVmCOnSvJrUhC0edGgKU5ofnGXdYdg==", "dev": true }, "move-concurrently": { @@ -11309,15 +11302,6 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, - "ncname": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/ncname/-/ncname-1.0.0.tgz", - "integrity": "sha1-W1etGLHKCShk72Kwse2BlPODtxw=", - "dev": true, - "requires": { - "xml-char-classes": "1.0.0" - } - }, "negotiator": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", @@ -11425,6 +11409,12 @@ "vm-browserify": "0.0.4" }, "dependencies": { + "events": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz", + "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=", + "dev": true + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -15545,7 +15535,7 @@ "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", "requires": { "error-ex": "1.3.1", - "json-parse-better-errors": "1.0.1" + "json-parse-better-errors": "1.0.2" } }, "parse-passwd": { @@ -17969,6 +17959,32 @@ "http-errors": "1.6.2", "iconv-lite": "0.4.19", "unpipe": "1.0.0" + }, + "dependencies": { + "depd": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", + "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=", + "dev": true + }, + "http-errors": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", + "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", + "dev": true, + "requires": { + "depd": "1.1.1", + "inherits": "2.0.3", + "setprototypeof": "1.0.3", + "statuses": "1.4.0" + } + }, + "setprototypeof": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", + "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=", + "dev": true + } } }, "react": { @@ -18855,7 +18871,7 @@ "escape-html": "1.0.3", "etag": "1.8.1", "fresh": "0.5.2", - "http-errors": "1.6.2", + "http-errors": "1.6.3", "mime": "1.4.1", "ms": "2.0.0", "on-finished": "2.3.0", @@ -18870,16 +18886,24 @@ "dev": true }, "serve-favicon": { - "version": "2.4.5", - "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.4.5.tgz", - "integrity": "sha512-s7F8h2NrslMkG50KxvlGdj+ApSwaLex0vexuJ9iFf3GLTIp1ph/l1qZvRe9T9TJEYZgmq72ZwJ2VYiAEtChknw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz", + "integrity": "sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=", "dev": true, "requires": { "etag": "1.8.1", "fresh": "0.5.2", - "ms": "2.0.0", + "ms": "2.1.1", "parseurl": "1.3.2", "safe-buffer": "5.1.1" + }, + "dependencies": { + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + } } }, "serve-index": { @@ -18892,7 +18916,7 @@ "batch": "0.6.1", "debug": "2.6.9", "escape-html": "1.0.3", - "http-errors": "1.6.2", + "http-errors": "1.6.3", "mime-types": "2.1.18", "parseurl": "1.3.2" } @@ -20316,7 +20340,7 @@ "resolve": "1.6.0", "semver": "5.5.0", "tslib": "1.9.0", - "tsutils": "2.25.0" + "tsutils": "2.25.1" } }, "tslint-config-prettier": { @@ -20385,13 +20409,13 @@ "integrity": "sha512-ndS/iOOGrasATcf5YU3JxoIwPGVykjrKhzmlVsRdT1xzl/RbNg9n627rtAGbCjkQepyiaQYgxWQT5G/qUpQCaA==", "dev": true, "requires": { - "tsutils": "2.25.0" + "tsutils": "2.25.1" } }, "tsutils": { - "version": "2.25.0", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.25.0.tgz", - "integrity": "sha512-SPgUlOAUAe6fCyPi0QR4U0jRuDsHHKvzIR6/hHd0YR0bb8MzeLJgCagkPSmZeJjWImnpJ0xq6XHa9goTvMBBCQ==", + "version": "2.25.1", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.25.1.tgz", + "integrity": "sha512-xHiTER5XIRYlWbylk4vpGZSYo8FUTVn32bAxxM1rJopXs2DYG7lWp40LqNvM3iMNpXa50wmnC9bFXsPTV6xAiQ==", "dev": true, "requires": { "tslib": "1.9.0" @@ -20456,9 +20480,9 @@ "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" }, "uglify-js": { - "version": "3.3.16", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.16.tgz", - "integrity": "sha512-FMh5SRqJRGhv9BbaTffENIpDDQIoPDR8DBraunGORGhySArsXlw9++CN+BWzPBLpoI4RcSnpfGPnilTxWL3Vvg==", + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.18.tgz", + "integrity": "sha512-VhjIFv93KnTx/ntNi9yTBbfrsWnQnqUy02MT32uqU/5i2oEJ8GAEJ0AwYV206JeOmIzSjm41Ba0iXVKv6j7y9g==", "dev": true, "requires": { "commander": "2.15.1", @@ -21209,7 +21233,7 @@ "webpack-addons": "1.1.5", "webpack-fork-yeoman-generator": "1.1.1", "yargs": "9.0.1", - "yeoman-environment": "2.0.5" + "yeoman-environment": "2.0.6" }, "dependencies": { "ansi-regex": { @@ -21949,9 +21973,15 @@ } }, "whatwg-fetch": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", - "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", + "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" + }, + "whatwg-mimetype": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz", + "integrity": "sha512-FKxhYLytBQiUKjkYteN71fAUA3g6KpNXoho1isLiLSB3N1G4F35Q5vUxWfKFhBwi5IWF27VE6WxhrnnC+m0Mew==", + "dev": true }, "whatwg-url": { "version": "6.4.0", @@ -22058,12 +22088,6 @@ "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=", "dev": true }, - "xml-char-classes": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz", - "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=", - "dev": true - }, "xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", @@ -22241,9 +22265,9 @@ } }, "yeoman-environment": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.0.5.tgz", - "integrity": "sha512-6/W7/B54OPHJXob0n0+pmkwFsirC8cokuQkPSmT/D0lCcSxkKtg/BA6ZnjUBIwjuGqmw3DTrT4en++htaUju5g==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.0.6.tgz", + "integrity": "sha512-jzHBTTy8EPI4ImV8dpUMt+Q5zELkSU5xvGpndHcHudQ4tqN6YgIWaCGmRFl+HDchwRUkcgyjQ+n6/w5zlJBCPg==", "dev": true, "requires": { "chalk": "2.3.1", diff --git a/shared/style.ts b/shared/styles/core.ts similarity index 93% rename from shared/style.ts rename to shared/styles/core.ts index 92196f417..349546c44 100644 --- a/shared/style.ts +++ b/shared/styles/core.ts @@ -1,9 +1,7 @@ -// Shared core styles - /** * Return shared colors * - * @returns + * @returns color mapping */ export const getColors = () => { return { @@ -21,7 +19,7 @@ export const getColors = () => { /** * Return shared font families * - * @returns + * @returns font mapping */ export const getFonts = () => { return {