From 22fc47e448f58e985c7bbb243b4ad16cc2032103 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 25 Feb 2020 14:45:31 -0800 Subject: [PATCH 1/2] Restore and display icons --- .storybook/main.js | 15 + .svgo.yml | 3 + package-lock.json | 437 +++++++++++++++++++++++-- package.json | 1 + src/assets/icons/alistapart.svg | 3 + src/assets/icons/arrow-down.svg | 6 + src/assets/icons/arrow-left.svg | 6 + src/assets/icons/arrow-right.svg | 6 + src/assets/icons/arrow-up.svg | 6 + src/assets/icons/attachment.svg | 3 + src/assets/icons/check.svg | 3 + src/assets/icons/close.svg | 6 + src/assets/icons/cloud-four.svg | 5 + src/assets/icons/dot.svg | 3 + src/assets/icons/envelope.svg | 4 + src/assets/icons/facebook.svg | 3 + src/assets/icons/flickr.svg | 3 + src/assets/icons/github.svg | 3 + src/assets/icons/heart.svg | 3 + src/assets/icons/instagram.svg | 5 + src/assets/icons/lanyrd.svg | 3 + src/assets/icons/link.svg | 6 + src/assets/icons/linkedin.svg | 3 + src/assets/icons/notification.svg | 4 + src/assets/icons/notifications-off.svg | 5 + src/assets/icons/notifications.svg | 4 + src/assets/icons/plus.svg | 6 + src/assets/icons/reply.svg | 6 + src/assets/icons/return.svg | 6 + src/assets/icons/search.svg | 6 + src/assets/icons/smashingmagazine.svg | 4 + src/assets/icons/speakerdeck.svg | 3 + src/assets/icons/twitter.svg | 3 + src/icons/icons.stories.mdx | 16 + 34 files changed, 569 insertions(+), 30 deletions(-) create mode 100644 .svgo.yml create mode 100644 src/assets/icons/alistapart.svg create mode 100644 src/assets/icons/arrow-down.svg create mode 100644 src/assets/icons/arrow-left.svg create mode 100644 src/assets/icons/arrow-right.svg create mode 100644 src/assets/icons/arrow-up.svg create mode 100644 src/assets/icons/attachment.svg create mode 100644 src/assets/icons/check.svg create mode 100644 src/assets/icons/close.svg create mode 100644 src/assets/icons/cloud-four.svg create mode 100644 src/assets/icons/dot.svg create mode 100644 src/assets/icons/envelope.svg create mode 100644 src/assets/icons/facebook.svg create mode 100644 src/assets/icons/flickr.svg create mode 100644 src/assets/icons/github.svg create mode 100644 src/assets/icons/heart.svg create mode 100644 src/assets/icons/instagram.svg create mode 100644 src/assets/icons/lanyrd.svg create mode 100644 src/assets/icons/link.svg create mode 100644 src/assets/icons/linkedin.svg create mode 100644 src/assets/icons/notification.svg create mode 100644 src/assets/icons/notifications-off.svg create mode 100644 src/assets/icons/notifications.svg create mode 100644 src/assets/icons/plus.svg create mode 100644 src/assets/icons/reply.svg create mode 100644 src/assets/icons/return.svg create mode 100644 src/assets/icons/search.svg create mode 100644 src/assets/icons/smashingmagazine.svg create mode 100644 src/assets/icons/speakerdeck.svg create mode 100644 src/assets/icons/twitter.svg create mode 100644 src/icons/icons.stories.mdx 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..9e6eb8c06 --- /dev/null +++ b/src/icons/icons.stories.mdx @@ -0,0 +1,16 @@ +import { Meta, IconGallery, IconItem, Story, Preview } from '@storybook/addon-docs/blocks'; +import { basename } from 'path'; +const iconDir = require.context('../assets/icons', true, /\.svg$/); +const iconElements = iconDir.keys().map(key => { + const Icon = iconDir(key).default; + const name = basename(key, '.svg'); + return ; +}); + + + +# Icons + +The quick brown fox jumped over the lazy dog. + +{iconElements} From d28125960351edfc1ba208b94e8637087e4c73d5 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Tue, 25 Feb 2020 15:08:07 -0800 Subject: [PATCH 2/2] Improve documentation --- src/icons/icons.stories.mdx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/icons/icons.stories.mdx b/src/icons/icons.stories.mdx index 9e6eb8c06..25c6c693a 100644 --- a/src/icons/icons.stories.mdx +++ b/src/icons/icons.stories.mdx @@ -1,9 +1,12 @@ import { Meta, IconGallery, IconItem, Story, Preview } from '@storybook/addon-docs/blocks'; -import { basename } from 'path'; +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; - const name = basename(key, '.svg'); + // Retains subdirectory if we want to organize with those in the future + const name = relative('.', key).replace(extname(key), ''); return ; }); @@ -11,6 +14,6 @@ const iconElements = iconDir.keys().map(key => { # Icons -The quick brown fox jumped over the lazy dog. +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}