diff --git a/.storybook/main.js b/.storybook/main.js index b5b94f0ae..52a50c232 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -22,6 +22,16 @@ module.exports = { } ], webpackFinal: async config => { + // Remove default SVG processing from default config. + // @see https://github.com/storybookjs/storybook/issues/5708#issuecomment-515384927 + config.module.rules = config.module.rules.map(data => { + if (/svg\|/.test(String(data.test))) { + data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/; + } + return data; + }); + + // Push new rules config.module.rules.push( { test: /\.twig$/, @@ -31,6 +41,11 @@ module.exports = { // Import Theo design tokens as JS objects test: /\.ya?ml$/, use: resolve(__dirname, './theo-loader.js') + }, + { + // Optimize and process SVGs as React elements for use in documentation + test: /\.svg$/, + use: '@svgr/webpack' } ); diff --git a/.svgo.yml b/.svgo.yml new file mode 100644 index 000000000..19893f7be --- /dev/null +++ b/.svgo.yml @@ -0,0 +1,3 @@ +multipass: true +plugins: + - removeViewBox: false diff --git a/package-lock.json b/package-lock.json index ec63d875b..b9e825989 100644 --- a/package-lock.json +++ b/package-lock.json @@ -768,6 +768,15 @@ "@babel/helper-plugin-utils": "^7.8.3" } }, + "@babel/plugin-transform-react-display-name": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz", + "integrity": "sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3" + } + }, "@babel/plugin-transform-react-jsx": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz", @@ -779,6 +788,26 @@ "@babel/plugin-syntax-jsx": "^7.8.3" } }, + "@babel/plugin-transform-react-jsx-self": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz", + "integrity": "sha512-01OT7s5oa0XTLf2I8XGsL8+KqV9lx3EZV+jxn/L2LQ97CGKila2YMroTkCEIE0HV/FF7CMSRsIAybopdN9NTdg==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-syntax-jsx": "^7.8.3" + } + }, + "@babel/plugin-transform-react-jsx-source": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz", + "integrity": "sha512-PLMgdMGuVDtRS/SzjNEQYUT8f4z1xb2BAT54vM1X5efkVuYBf5WyGUMbpmARcfq3NaglIwz08UVQK4HHHbC6ag==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-syntax-jsx": "^7.8.3" + } + }, "@babel/plugin-transform-regenerator": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz", @@ -940,6 +969,19 @@ "@babel/plugin-transform-flow-strip-types": "^7.8.3" } }, + "@babel/preset-react": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.8.3.tgz", + "integrity": "sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-transform-react-display-name": "^7.8.3", + "@babel/plugin-transform-react-jsx": "^7.8.3", + "@babel/plugin-transform-react-jsx-self": "^7.8.3", + "@babel/plugin-transform-react-jsx-source": "^7.8.3" + } + }, "@babel/preset-typescript": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz", @@ -2051,6 +2093,129 @@ } } }, + "@svgr/babel-plugin-add-jsx-attribute": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.0.1.tgz", + "integrity": "sha512-av76JbSudaN2CUOGuKQp5BVqLFidtojg4ApRTg1PBOVsskXK2ORwKnBYhIu0JLA6ynmuNDprlHNCD6IwLiYidw==", + "dev": true + }, + "@svgr/babel-plugin-remove-jsx-attribute": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.0.1.tgz", + "integrity": "sha512-oXyByaDQEK4Ut/eC75698MDKnaadbWmp/LS2w22cZAaoObCkkiwYYgZTZ+bvb3moo//AxvKkBtNrlz6+xBb9ZQ==", + "dev": true + }, + "@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz", + "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==", + "dev": true + }, + "@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz", + "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==", + "dev": true + }, + "@svgr/babel-plugin-svg-dynamic-title": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.0.1.tgz", + "integrity": "sha512-IbFiDBvq5WpANPndjEom1Y9k1pHCNfJs87jCN1Lt8NEA7yrNVPSoAjBVmmfi0aVBERfp8IT/lgjn2a/S85lXGg==", + "dev": true + }, + "@svgr/babel-plugin-svg-em-dimensions": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.0.1.tgz", + "integrity": "sha512-7kL9LtqCm1ca+zAbBsrD4ME3EQeVcRxkdrf2GsbKPgkzWJ+399vS4VqCP462+WvFRbG13jSwpNCrvhekdyvXsA==", + "dev": true + }, + "@svgr/babel-plugin-transform-react-native-svg": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.0.1.tgz", + "integrity": "sha512-ITG1jJ0zHQ4yft6ISQqlMW4fHIzsrSB/FmrMxAcJtkTjh9M2/9M8wfKxQya9NnTfZ5WMSlQjXMQNZmGQsuxRrw==", + "dev": true + }, + "@svgr/babel-plugin-transform-svg-component": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.2.0.tgz", + "integrity": "sha512-t4dq0cNr7c8cuUu1Cwehai/0iXO3dV5876r2QRaLdgQF3C6XOK2vdTvNOwcJ3uRa92revSC3kGL8v8WgJrecRg==", + "dev": true + }, + "@svgr/babel-preset": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.2.0.tgz", + "integrity": "sha512-sr7486h+SddMU1VgFrajXx/Ws0a1QPzX4wUBM1LgG2PHeZpnm+fQs2MXQNdnfoXRwo7C5mH2I4QDiRVR/49BEg==", + "dev": true, + "requires": { + "@svgr/babel-plugin-add-jsx-attribute": "^5.0.1", + "@svgr/babel-plugin-remove-jsx-attribute": "^5.0.1", + "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1", + "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1", + "@svgr/babel-plugin-svg-dynamic-title": "^5.0.1", + "@svgr/babel-plugin-svg-em-dimensions": "^5.0.1", + "@svgr/babel-plugin-transform-react-native-svg": "^5.0.1", + "@svgr/babel-plugin-transform-svg-component": "^5.2.0" + } + }, + "@svgr/core": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.2.0.tgz", + "integrity": "sha512-vuODnJ0owj/oFi2bzskuSEk6TGuYoMV9hmvBhGuE1QktzMAAjOr0LnvUN5u2eGB6ilGdI7yqUKrZtQ0Tw44mrA==", + "dev": true, + "requires": { + "@svgr/plugin-jsx": "^5.2.0", + "camelcase": "^5.3.1", + "cosmiconfig": "^6.0.0" + } + }, + "@svgr/hast-util-to-babel-ast": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.0.1.tgz", + "integrity": "sha512-G7UHNPNhLyDK5p6RJvSh4TRpHszTxG8jPp5lAxC6Ez6O6rj1plEAjrCDdYj50mvilUuT9IKjqn87F8+agpKaSw==", + "dev": true, + "requires": { + "@babel/types": "^7.4.4" + } + }, + "@svgr/plugin-jsx": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.2.0.tgz", + "integrity": "sha512-z1HWitE5sCNgaXqBGrmCnnnvR/BRTq9B/lsgZ+T8OWABzZHhezqjjDUvkyyyBb3Y+0xExWg5aTh2jxqk7GR9tg==", + "dev": true, + "requires": { + "@babel/core": "^7.7.5", + "@svgr/babel-preset": "^5.2.0", + "@svgr/hast-util-to-babel-ast": "^5.0.1", + "svg-parser": "^2.0.2" + } + }, + "@svgr/plugin-svgo": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.2.0.tgz", + "integrity": "sha512-cyqWx026uO3heGG/55j5zfJLtS5sl0dWYawN1JotOqpJDyyR7rraTsnydpwwsOoz0YpESjVjAkXOAfd41lBY9Q==", + "dev": true, + "requires": { + "cosmiconfig": "^6.0.0", + "merge-deep": "^3.0.2", + "svgo": "^1.2.2" + } + }, + "@svgr/webpack": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.2.0.tgz", + "integrity": "sha512-y9tMjTtqrvC998aCOgsEP8pb+bdg2RR1v8i+sjT31m4Xb8HGd905K7/GdSwEMM2nlTFbxSUQPZRRvfaJwAvghA==", + "dev": true, + "requires": { + "@babel/core": "^7.4.5", + "@babel/plugin-transform-react-constant-elements": "^7.0.0", + "@babel/preset-env": "^7.4.5", + "@babel/preset-react": "^7.0.0", + "@svgr/core": "^5.2.0", + "@svgr/plugin-jsx": "^5.2.0", + "@svgr/plugin-svgo": "^5.2.0", + "loader-utils": "^1.2.3" + } + }, "@types/babel-types": { "version": "7.0.7", "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.7.tgz", @@ -2133,6 +2298,12 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", "dev": true }, + "@types/q": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", + "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==", + "dev": true + }, "@types/reach__router": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.0.tgz", @@ -4514,6 +4685,17 @@ } } }, + "coa": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", + "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==", + "dev": true, + "requires": { + "@types/q": "^1.5.1", + "chalk": "^2.4.1", + "q": "^1.1.2" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -4952,6 +5134,30 @@ "nth-check": "~1.0.1" } }, + "css-select-base-adapter": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", + "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", + "dev": true + }, + "css-tree": { + "version": "1.0.0-alpha.37", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", + "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==", + "dev": true, + "requires": { + "mdn-data": "2.0.4", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -4964,6 +5170,15 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csso": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz", + "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==", + "dev": true, + "requires": { + "css-tree": "1.0.0-alpha.37" + } + }, "csstype": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz", @@ -7088,8 +7303,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -7110,14 +7324,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7132,20 +7344,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7262,8 +7471,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7275,7 +7483,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7290,7 +7497,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7298,14 +7504,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7324,7 +7528,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7414,8 +7617,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7427,7 +7629,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7513,8 +7714,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7550,7 +7750,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7570,7 +7769,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7614,14 +7812,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -10121,6 +10317,12 @@ "integrity": "sha512-P+gdtssCoHOX+eJUrrC30Sixqao86ZPlVjR5NEAoy0U79Pfxb1Y0Gntei0+GrnQD4T04X9xA8tcugp90cSmNow==", "dev": true }, + "mdn-data": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", + "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", + "dev": true + }, "mdurl": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", @@ -10158,6 +10360,94 @@ "readable-stream": "^2.0.1" } }, + "merge-deep": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz", + "integrity": "sha512-T7qC8kg4Zoti1cFd8Cr0M+qaZfOwjlPDEdZIIPPB2JZctjaPM4fX+i7HOId69tAti2fvO6X5ldfYUONDODsrkA==", + "dev": true, + "requires": { + "arr-union": "^3.1.0", + "clone-deep": "^0.2.4", + "kind-of": "^3.0.2" + }, + "dependencies": { + "clone-deep": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", + "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=", + "dev": true, + "requires": { + "for-own": "^0.1.3", + "is-plain-object": "^2.0.1", + "kind-of": "^3.0.2", + "lazy-cache": "^1.0.3", + "shallow-clone": "^0.1.2" + } + }, + "for-own": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz", + "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=", + "dev": true, + "requires": { + "for-in": "^1.0.1" + } + }, + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + }, + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", + "dev": true + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + }, + "shallow-clone": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz", + "integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=", + "dev": true, + "requires": { + "is-extendable": "^0.1.1", + "kind-of": "^2.0.1", + "lazy-cache": "^0.2.3", + "mixin-object": "^2.0.1" + }, + "dependencies": { + "kind-of": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", + "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=", + "dev": true, + "requires": { + "is-buffer": "^1.0.2" + } + }, + "lazy-cache": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz", + "integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=", + "dev": true + } + } + } + } + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -10404,6 +10694,24 @@ } } }, + "mixin-object": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz", + "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=", + "dev": true, + "requires": { + "for-in": "^0.1.3", + "is-extendable": "^0.1.1" + }, + "dependencies": { + "for-in": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz", + "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=", + "dev": true + } + } + }, "mkdirp": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", @@ -11733,6 +12041,12 @@ "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", "dev": true }, + "q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", + "dev": true + }, "qs": { "version": "6.9.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.1.tgz", @@ -12983,6 +13297,12 @@ } } }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", + "dev": true + }, "scheduler": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", @@ -13822,6 +14142,63 @@ "has-flag": "^3.0.0" } }, + "svg-parser": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.3.tgz", + "integrity": "sha512-fnCWiifNhK8i2Z7b9R5tbNahpxrRdAaQbnoxKlT2KrSCj9Kq/yBSgulCRgBJRhy1dPnSY5slg5ehPUnzpEcHlg==", + "dev": true + }, + "svgo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", + "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "coa": "^2.0.2", + "css-select": "^2.0.0", + "css-select-base-adapter": "^0.1.1", + "css-tree": "1.0.0-alpha.37", + "csso": "^4.0.2", + "js-yaml": "^3.13.1", + "mkdirp": "~0.5.1", + "object.values": "^1.1.0", + "sax": "~1.2.4", + "stable": "^0.1.8", + "unquote": "~1.1.1", + "util.promisify": "~1.0.0" + }, + "dependencies": { + "css-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", + "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==", + "dev": true, + "requires": { + "boolbase": "^1.0.0", + "css-what": "^3.2.1", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + } + }, + "css-what": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", + "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==", + "dev": true + }, + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dev": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + } + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", diff --git a/package.json b/package.json index da19cd2a3..8f4ca95ae 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@storybook/addon-viewport": "^5.3.13", "@storybook/html": "^5.3.13", "@storybook/preset-scss": "^1.0.2", + "@svgr/webpack": "^5.2.0", "babel-loader": "^8.0.6", "css-loader": "^3.4.2", "eslint": "^6.8.0", diff --git a/src/assets/icons/alistapart.svg b/src/assets/icons/alistapart.svg new file mode 100644 index 000000000..9fdcb7ff8 --- /dev/null +++ b/src/assets/icons/alistapart.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg new file mode 100644 index 000000000..527bab618 --- /dev/null +++ b/src/assets/icons/arrow-down.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg new file mode 100644 index 000000000..2e2d82e83 --- /dev/null +++ b/src/assets/icons/arrow-left.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg new file mode 100644 index 000000000..0dee34c88 --- /dev/null +++ b/src/assets/icons/arrow-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/arrow-up.svg b/src/assets/icons/arrow-up.svg new file mode 100644 index 000000000..f3e9dc816 --- /dev/null +++ b/src/assets/icons/arrow-up.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/attachment.svg b/src/assets/icons/attachment.svg new file mode 100644 index 000000000..3a4d71aeb --- /dev/null +++ b/src/assets/icons/attachment.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 000000000..c536aa9cb --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 000000000..1149a5e54 --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/cloud-four.svg b/src/assets/icons/cloud-four.svg new file mode 100644 index 000000000..320d84d8a --- /dev/null +++ b/src/assets/icons/cloud-four.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/dot.svg b/src/assets/icons/dot.svg new file mode 100644 index 000000000..4f605c0da --- /dev/null +++ b/src/assets/icons/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/envelope.svg b/src/assets/icons/envelope.svg new file mode 100644 index 000000000..856ab76fe --- /dev/null +++ b/src/assets/icons/envelope.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/facebook.svg b/src/assets/icons/facebook.svg new file mode 100644 index 000000000..034a08722 --- /dev/null +++ b/src/assets/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/flickr.svg b/src/assets/icons/flickr.svg new file mode 100644 index 000000000..ba8203be1 --- /dev/null +++ b/src/assets/icons/flickr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 000000000..8a0c69046 --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg new file mode 100644 index 000000000..2de9711fd --- /dev/null +++ b/src/assets/icons/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/instagram.svg b/src/assets/icons/instagram.svg new file mode 100644 index 000000000..482b7c644 --- /dev/null +++ b/src/assets/icons/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/lanyrd.svg b/src/assets/icons/lanyrd.svg new file mode 100644 index 000000000..dd948b90b --- /dev/null +++ b/src/assets/icons/lanyrd.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg new file mode 100644 index 000000000..b31c97801 --- /dev/null +++ b/src/assets/icons/link.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg new file mode 100644 index 000000000..6b02fc6d0 --- /dev/null +++ b/src/assets/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/notification.svg b/src/assets/icons/notification.svg new file mode 100644 index 000000000..16dbc400c --- /dev/null +++ b/src/assets/icons/notification.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/notifications-off.svg b/src/assets/icons/notifications-off.svg new file mode 100644 index 000000000..fc04b5f62 --- /dev/null +++ b/src/assets/icons/notifications-off.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/notifications.svg b/src/assets/icons/notifications.svg new file mode 100644 index 000000000..567c6ae2e --- /dev/null +++ b/src/assets/icons/notifications.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg new file mode 100644 index 000000000..88b9ee851 --- /dev/null +++ b/src/assets/icons/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/reply.svg b/src/assets/icons/reply.svg new file mode 100644 index 000000000..08b37be35 --- /dev/null +++ b/src/assets/icons/reply.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/return.svg b/src/assets/icons/return.svg new file mode 100644 index 000000000..4861de70e --- /dev/null +++ b/src/assets/icons/return.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 000000000..635a7dbcb --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/smashingmagazine.svg b/src/assets/icons/smashingmagazine.svg new file mode 100644 index 000000000..eb95ba9a6 --- /dev/null +++ b/src/assets/icons/smashingmagazine.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/speakerdeck.svg b/src/assets/icons/speakerdeck.svg new file mode 100644 index 000000000..f815ca219 --- /dev/null +++ b/src/assets/icons/speakerdeck.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/twitter.svg b/src/assets/icons/twitter.svg new file mode 100644 index 000000000..142595661 --- /dev/null +++ b/src/assets/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icons.stories.mdx b/src/icons/icons.stories.mdx new file mode 100644 index 000000000..25c6c693a --- /dev/null +++ b/src/icons/icons.stories.mdx @@ -0,0 +1,19 @@ +import { Meta, IconGallery, IconItem, Story, Preview } from '@storybook/addon-docs/blocks'; +import { extname, relative } from 'path'; +// Import whole directory of icons together +// @see https://webpack.js.org/guides/dependency-management/#context-module-api +const iconDir = require.context('../assets/icons', true, /\.svg$/); +const iconElements = iconDir.keys().map(key => { + const Icon = iconDir(key).default; + // Retains subdirectory if we want to organize with those in the future + const name = relative('.', key).replace(extname(key), ''); + return ; +}); + + + +# Icons + +Our icons are designed to be compact yet friendly. They embrace bold shapes, rounded corners and circular caps. They work well adjacent to text, but should rarely be used on their own to convey meaning. + +{iconElements}