diff --git a/.storybook/main.js b/.storybook/main.js index d9527f6d8..81387c7e6 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,6 +2,8 @@ const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); +const { generateIconNames } = require('../development/generate-icon-names'); + module.exports = { stories: [ '../ui/**/*.stories.js', @@ -19,6 +21,14 @@ module.exports = { staticDirs: ['../app', './images'], // Uses babel.config.js settings and prevents "Missing class properties transform" error babel: async (options) => ({ overrides: options.overrides }), + // Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/ + env: async (config) => { + return { + ...config, + // Creates the icon names environment variable for the component-library/icon/icon.js component + ICON_NAMES: await generateIconNames(), + }; + }, webpackFinal: async (config) => { config.context = process.cwd(); config.node = { diff --git a/app/images/icons/icon-add-outline.svg b/app/images/icons/icon-add-outline.svg new file mode 100644 index 000000000..74baee2f9 --- /dev/null +++ b/app/images/icons/icon-add-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-add-square-filled.svg b/app/images/icons/icon-add-square-filled.svg new file mode 100644 index 000000000..a4e9dea81 --- /dev/null +++ b/app/images/icons/icon-add-square-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-arrow-2-down.svg b/app/images/icons/icon-arrow-2-down.svg new file mode 100644 index 000000000..32c6cfca3 --- /dev/null +++ b/app/images/icons/icon-arrow-2-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-2-left.svg b/app/images/icons/icon-arrow-2-left.svg new file mode 100644 index 000000000..7baada3cb --- /dev/null +++ b/app/images/icons/icon-arrow-2-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-2-right.svg b/app/images/icons/icon-arrow-2-right.svg new file mode 100644 index 000000000..d36eb39e1 --- /dev/null +++ b/app/images/icons/icon-arrow-2-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-2-up.svg b/app/images/icons/icon-arrow-2-up.svg new file mode 100644 index 000000000..255d2a419 --- /dev/null +++ b/app/images/icons/icon-arrow-2-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-down.svg b/app/images/icons/icon-arrow-down.svg new file mode 100644 index 000000000..c69193890 --- /dev/null +++ b/app/images/icons/icon-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-arrow-left.svg b/app/images/icons/icon-arrow-left.svg new file mode 100644 index 000000000..4c27d4c94 --- /dev/null +++ b/app/images/icons/icon-arrow-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-right.svg b/app/images/icons/icon-arrow-right.svg new file mode 100644 index 000000000..35b692706 --- /dev/null +++ b/app/images/icons/icon-arrow-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-arrow-up.svg b/app/images/icons/icon-arrow-up.svg new file mode 100644 index 000000000..eadbd3f45 --- /dev/null +++ b/app/images/icons/icon-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-bank-filled.svg b/app/images/icons/icon-bank-filled.svg new file mode 100644 index 000000000..b76666c44 --- /dev/null +++ b/app/images/icons/icon-bank-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-bank-token-filled.svg b/app/images/icons/icon-bank-token-filled.svg new file mode 100644 index 000000000..99fd288cd --- /dev/null +++ b/app/images/icons/icon-bank-token-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-book-filled.svg b/app/images/icons/icon-book-filled.svg new file mode 100644 index 000000000..6e7386358 --- /dev/null +++ b/app/images/icons/icon-book-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-bookmark-filled.svg b/app/images/icons/icon-bookmark-filled.svg new file mode 100644 index 000000000..494baea6e --- /dev/null +++ b/app/images/icons/icon-bookmark-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-calculator-filled.svg b/app/images/icons/icon-calculator-filled.svg new file mode 100644 index 000000000..064209e03 --- /dev/null +++ b/app/images/icons/icon-calculator-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-card-filled.svg b/app/images/icons/icon-card-filled.svg new file mode 100644 index 000000000..2e20fa22c --- /dev/null +++ b/app/images/icons/icon-card-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-card-pos-filled.svg b/app/images/icons/icon-card-pos-filled.svg new file mode 100644 index 000000000..f0e0efaf0 --- /dev/null +++ b/app/images/icons/icon-card-pos-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-card-token-filled.svg b/app/images/icons/icon-card-token-filled.svg new file mode 100644 index 000000000..3a270944a --- /dev/null +++ b/app/images/icons/icon-card-token-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-category-filled.svg b/app/images/icons/icon-category-filled.svg new file mode 100644 index 000000000..8100a230f --- /dev/null +++ b/app/images/icons/icon-category-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-chart-filled.svg b/app/images/icons/icon-chart-filled.svg new file mode 100644 index 000000000..02c0f0c5d --- /dev/null +++ b/app/images/icons/icon-chart-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-check-box-off-outline.svg b/app/images/icons/icon-check-box-off-outline.svg new file mode 100644 index 000000000..629413aa4 --- /dev/null +++ b/app/images/icons/icon-check-box-off-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-check-box-on-filled.svg b/app/images/icons/icon-check-box-on-filled.svg new file mode 100644 index 000000000..40a7000cf --- /dev/null +++ b/app/images/icons/icon-check-box-on-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-check-circle-on-filled.svg b/app/images/icons/icon-check-circle-on-filled.svg new file mode 100644 index 000000000..7fce9feb8 --- /dev/null +++ b/app/images/icons/icon-check-circle-on-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-check-outline.svg b/app/images/icons/icon-check-outline.svg new file mode 100644 index 000000000..ba6edb151 --- /dev/null +++ b/app/images/icons/icon-check-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-clock-filled.svg b/app/images/icons/icon-clock-filled.svg new file mode 100644 index 000000000..797f78b63 --- /dev/null +++ b/app/images/icons/icon-clock-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-close-outline.svg b/app/images/icons/icon-close-outline.svg new file mode 100644 index 000000000..7bb91220b --- /dev/null +++ b/app/images/icons/icon-close-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-code-circle-filled.svg b/app/images/icons/icon-code-circle-filled.svg new file mode 100644 index 000000000..a9c166524 --- /dev/null +++ b/app/images/icons/icon-code-circle-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-coin-filled.svg b/app/images/icons/icon-coin-filled.svg new file mode 100644 index 000000000..994d75d02 --- /dev/null +++ b/app/images/icons/icon-coin-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-confirmation-filled.svg b/app/images/icons/icon-confirmation-filled.svg new file mode 100644 index 000000000..14d1a0a64 --- /dev/null +++ b/app/images/icons/icon-confirmation-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-connect-filled.svg b/app/images/icons/icon-connect-filled.svg new file mode 100644 index 000000000..b168a9bf9 --- /dev/null +++ b/app/images/icons/icon-connect-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-copy-filled.svg b/app/images/icons/icon-copy-filled.svg new file mode 100644 index 000000000..165a3821c --- /dev/null +++ b/app/images/icons/icon-copy-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-copy-success-filled.svg b/app/images/icons/icon-copy-success-filled.svg new file mode 100644 index 000000000..3e66bf870 --- /dev/null +++ b/app/images/icons/icon-copy-success-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-danger-filled.svg b/app/images/icons/icon-danger-filled.svg new file mode 100644 index 000000000..1c48c60e7 --- /dev/null +++ b/app/images/icons/icon-danger-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-dark-filled.svg b/app/images/icons/icon-dark-filled.svg new file mode 100644 index 000000000..9efd0e198 --- /dev/null +++ b/app/images/icons/icon-dark-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-data-filled.svg b/app/images/icons/icon-data-filled.svg new file mode 100644 index 000000000..1c8981364 --- /dev/null +++ b/app/images/icons/icon-data-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-diagram.svg b/app/images/icons/icon-diagram.svg new file mode 100644 index 000000000..beb5424ad --- /dev/null +++ b/app/images/icons/icon-diagram.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-document-code-filled.svg b/app/images/icons/icon-document-code-filled.svg new file mode 100644 index 000000000..e75e62899 --- /dev/null +++ b/app/images/icons/icon-document-code-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-edit-filled.svg b/app/images/icons/icon-edit-filled.svg new file mode 100644 index 000000000..2ac4730f9 --- /dev/null +++ b/app/images/icons/icon-edit-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-eraser-filled.svg b/app/images/icons/icon-eraser-filled.svg new file mode 100644 index 000000000..09d97823b --- /dev/null +++ b/app/images/icons/icon-eraser-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-expand-outline.svg b/app/images/icons/icon-expand-outline.svg new file mode 100644 index 000000000..04f08ed22 --- /dev/null +++ b/app/images/icons/icon-expand-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-explore-filled.svg b/app/images/icons/icon-explore-filled.svg new file mode 100644 index 000000000..1411dca10 --- /dev/null +++ b/app/images/icons/icon-explore-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-export.svg b/app/images/icons/icon-export.svg new file mode 100644 index 000000000..9782c1433 --- /dev/null +++ b/app/images/icons/icon-export.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-eye-filled.svg b/app/images/icons/icon-eye-filled.svg new file mode 100644 index 000000000..ee03c8c97 --- /dev/null +++ b/app/images/icons/icon-eye-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-eye-slash-filled.svg b/app/images/icons/icon-eye-slash-filled.svg new file mode 100644 index 000000000..438c00e87 --- /dev/null +++ b/app/images/icons/icon-eye-slash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-filter-outline.svg b/app/images/icons/icon-filter-outline.svg new file mode 100644 index 000000000..066ace471 --- /dev/null +++ b/app/images/icons/icon-filter-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-flag-filled.svg b/app/images/icons/icon-flag-filled.svg new file mode 100644 index 000000000..90a01f496 --- /dev/null +++ b/app/images/icons/icon-flag-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-flash-filled.svg b/app/images/icons/icon-flash-filled.svg new file mode 100644 index 000000000..9d9456505 --- /dev/null +++ b/app/images/icons/icon-flash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-flash-slash-filled.svg b/app/images/icons/icon-flash-slash-filled.svg new file mode 100644 index 000000000..8992d1ea9 --- /dev/null +++ b/app/images/icons/icon-flash-slash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-full-circle-filled.svg b/app/images/icons/icon-full-circle-filled.svg new file mode 100644 index 000000000..c99354607 --- /dev/null +++ b/app/images/icons/icon-full-circle-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-gas-filled.svg b/app/images/icons/icon-gas-filled.svg new file mode 100644 index 000000000..1d56ad926 --- /dev/null +++ b/app/images/icons/icon-gas-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-global-filled.svg b/app/images/icons/icon-global-filled.svg new file mode 100644 index 000000000..1396a3626 --- /dev/null +++ b/app/images/icons/icon-global-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-global-search-filled.svg b/app/images/icons/icon-global-search-filled.svg new file mode 100644 index 000000000..fa6d31b61 --- /dev/null +++ b/app/images/icons/icon-global-search-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-graph-filled.svg b/app/images/icons/icon-graph-filled.svg new file mode 100644 index 000000000..d13f7b6b6 --- /dev/null +++ b/app/images/icons/icon-graph-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-heart-filled.svg b/app/images/icons/icon-heart-filled.svg new file mode 100644 index 000000000..326e81966 --- /dev/null +++ b/app/images/icons/icon-heart-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-hierarchy-filled.svg b/app/images/icons/icon-hierarchy-filled.svg new file mode 100644 index 000000000..3fe5af751 --- /dev/null +++ b/app/images/icons/icon-hierarchy-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-home-filled.svg b/app/images/icons/icon-home-filled.svg new file mode 100644 index 000000000..8f4daf83c --- /dev/null +++ b/app/images/icons/icon-home-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-import.svg b/app/images/icons/icon-import.svg new file mode 100644 index 000000000..2995ff1a7 --- /dev/null +++ b/app/images/icons/icon-import.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-info-filled.svg b/app/images/icons/icon-info-filled.svg new file mode 100644 index 000000000..3a8c9add0 --- /dev/null +++ b/app/images/icons/icon-info-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-key-filled.svg b/app/images/icons/icon-key-filled.svg new file mode 100644 index 000000000..4e7a6e9ce --- /dev/null +++ b/app/images/icons/icon-key-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-light-filled.svg b/app/images/icons/icon-light-filled.svg new file mode 100644 index 000000000..aae9ffb17 --- /dev/null +++ b/app/images/icons/icon-light-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-link-outline.svg b/app/images/icons/icon-link-outline.svg new file mode 100644 index 000000000..027977d20 --- /dev/null +++ b/app/images/icons/icon-link-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-loading-filled.svg b/app/images/icons/icon-loading-filled.svg new file mode 100644 index 000000000..8c66c5192 --- /dev/null +++ b/app/images/icons/icon-loading-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-lock-circle-filled.svg b/app/images/icons/icon-lock-circle-filled.svg new file mode 100644 index 000000000..90333666c --- /dev/null +++ b/app/images/icons/icon-lock-circle-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-lock-filled.svg b/app/images/icons/icon-lock-filled.svg new file mode 100644 index 000000000..9b1a3247a --- /dev/null +++ b/app/images/icons/icon-lock-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-lock-slash-filled.svg b/app/images/icons/icon-lock-slash-filled.svg new file mode 100644 index 000000000..9e21d6b6e --- /dev/null +++ b/app/images/icons/icon-lock-slash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-login-outline.svg b/app/images/icons/icon-login-outline.svg new file mode 100644 index 000000000..378f0325e --- /dev/null +++ b/app/images/icons/icon-login-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-menu-outline.svg b/app/images/icons/icon-menu-outline.svg new file mode 100644 index 000000000..12005b088 --- /dev/null +++ b/app/images/icons/icon-menu-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-message-question-filled.svg b/app/images/icons/icon-message-question-filled.svg new file mode 100644 index 000000000..c32f1642a --- /dev/null +++ b/app/images/icons/icon-message-question-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-messages-filled.svg b/app/images/icons/icon-messages-filled.svg new file mode 100644 index 000000000..b8a2e820e --- /dev/null +++ b/app/images/icons/icon-messages-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-minus-outine.svg b/app/images/icons/icon-minus-outine.svg new file mode 100644 index 000000000..7688bbd7c --- /dev/null +++ b/app/images/icons/icon-minus-outine.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-minus-square-filled.svg b/app/images/icons/icon-minus-square-filled.svg new file mode 100644 index 000000000..40d8ba37d --- /dev/null +++ b/app/images/icons/icon-minus-square-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-mobile-filled.svg b/app/images/icons/icon-mobile-filled.svg new file mode 100644 index 000000000..bf0bd851f --- /dev/null +++ b/app/images/icons/icon-mobile-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-money-filled.svg b/app/images/icons/icon-money-filled.svg new file mode 100644 index 000000000..4b3fa8772 --- /dev/null +++ b/app/images/icons/icon-money-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-monitor-filled.svg b/app/images/icons/icon-monitor-filled.svg new file mode 100644 index 000000000..c7bf792f8 --- /dev/null +++ b/app/images/icons/icon-monitor-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-more-horizontal-outline.svg b/app/images/icons/icon-more-horizontal-outline.svg new file mode 100644 index 000000000..58eb2bc09 --- /dev/null +++ b/app/images/icons/icon-more-horizontal-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-more-vertical-outline.svg b/app/images/icons/icon-more-vertical-outline.svg new file mode 100644 index 000000000..4a867d550 --- /dev/null +++ b/app/images/icons/icon-more-vertical-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-notification-circle-filled.svg b/app/images/icons/icon-notification-circle-filled.svg new file mode 100644 index 000000000..c22cbffa7 --- /dev/null +++ b/app/images/icons/icon-notification-circle-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-notification-filled.svg b/app/images/icons/icon-notification-filled.svg new file mode 100644 index 000000000..8e2cbfa4f --- /dev/null +++ b/app/images/icons/icon-notification-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-password-check-filled.svg b/app/images/icons/icon-password-check-filled.svg new file mode 100644 index 000000000..01b532e7b --- /dev/null +++ b/app/images/icons/icon-password-check-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-people-filled.svg b/app/images/icons/icon-people-filled.svg new file mode 100644 index 000000000..5d353662f --- /dev/null +++ b/app/images/icons/icon-people-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-programming-arrows-filled.svg b/app/images/icons/icon-programming-arrows-filled.svg new file mode 100644 index 000000000..3da86b9ed --- /dev/null +++ b/app/images/icons/icon-programming-arrows-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-question-filled.svg b/app/images/icons/icon-question-filled.svg new file mode 100644 index 000000000..a47c9d7ee --- /dev/null +++ b/app/images/icons/icon-question-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-received-outline.svg b/app/images/icons/icon-received-outline.svg new file mode 100644 index 000000000..2b0b7d958 --- /dev/null +++ b/app/images/icons/icon-received-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-refresh.svg b/app/images/icons/icon-refresh.svg new file mode 100644 index 000000000..80585b1ea --- /dev/null +++ b/app/images/icons/icon-refresh.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-save.svg b/app/images/icons/icon-save.svg new file mode 100644 index 000000000..6dd6d94b2 --- /dev/null +++ b/app/images/icons/icon-save.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-scan-barcode-filled.svg b/app/images/icons/icon-scan-barcode-filled.svg new file mode 100644 index 000000000..c622b73f8 --- /dev/null +++ b/app/images/icons/icon-scan-barcode-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-scan-filled.svg b/app/images/icons/icon-scan-filled.svg new file mode 100644 index 000000000..9291a2f5e --- /dev/null +++ b/app/images/icons/icon-scan-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-scan-focus-outline.svg b/app/images/icons/icon-scan-focus-outline.svg new file mode 100644 index 000000000..1d9ba64de --- /dev/null +++ b/app/images/icons/icon-scan-focus-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-scroll-filled.svg b/app/images/icons/icon-scroll-filled.svg new file mode 100644 index 000000000..c8b0ad1f5 --- /dev/null +++ b/app/images/icons/icon-scroll-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-search-filled.svg b/app/images/icons/icon-search-filled.svg new file mode 100644 index 000000000..88b36fc08 --- /dev/null +++ b/app/images/icons/icon-search-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-security-card-filled.svg b/app/images/icons/icon-security-card-filled.svg new file mode 100644 index 000000000..daceaa640 --- /dev/null +++ b/app/images/icons/icon-security-card-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-cross-filled.svg b/app/images/icons/icon-security-cross-filled.svg new file mode 100644 index 000000000..89efa2d55 --- /dev/null +++ b/app/images/icons/icon-security-cross-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-key-filled.svg b/app/images/icons/icon-security-key-filled.svg new file mode 100644 index 000000000..6b38a6c04 --- /dev/null +++ b/app/images/icons/icon-security-key-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-search-filled.svg b/app/images/icons/icon-security-search-filled.svg new file mode 100644 index 000000000..e18f8cfcc --- /dev/null +++ b/app/images/icons/icon-security-search-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-slash-filled.svg b/app/images/icons/icon-security-slash-filled.svg new file mode 100644 index 000000000..4872ab7be --- /dev/null +++ b/app/images/icons/icon-security-slash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-tick-filled.svg b/app/images/icons/icon-security-tick-filled.svg new file mode 100644 index 000000000..ef85785c2 --- /dev/null +++ b/app/images/icons/icon-security-tick-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-security-time-filled.svg b/app/images/icons/icon-security-time-filled.svg new file mode 100644 index 000000000..429e4ab75 --- /dev/null +++ b/app/images/icons/icon-security-time-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-security-user-filled.svg b/app/images/icons/icon-security-user-filled.svg new file mode 100644 index 000000000..8ef1ad213 --- /dev/null +++ b/app/images/icons/icon-security-user-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-send-1-filled.svg b/app/images/icons/icon-send-1-filled.svg new file mode 100644 index 000000000..db41be77f --- /dev/null +++ b/app/images/icons/icon-send-1-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-send-2-outline.svg b/app/images/icons/icon-send-2-outline.svg new file mode 100644 index 000000000..bfea4b2e1 --- /dev/null +++ b/app/images/icons/icon-send-2-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-setting-filled.svg b/app/images/icons/icon-setting-filled.svg new file mode 100644 index 000000000..c0c03dbed --- /dev/null +++ b/app/images/icons/icon-setting-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-slash-filled.svg b/app/images/icons/icon-slash-filled.svg new file mode 100644 index 000000000..30a11f325 --- /dev/null +++ b/app/images/icons/icon-slash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-snaps-filled.svg b/app/images/icons/icon-snaps-filled.svg new file mode 100644 index 000000000..03ef5a1e3 --- /dev/null +++ b/app/images/icons/icon-snaps-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-snaps-mobile-filled.svg b/app/images/icons/icon-snaps-mobile-filled.svg new file mode 100644 index 000000000..49446ebd9 --- /dev/null +++ b/app/images/icons/icon-snaps-mobile-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-snaps-plus-filled.svg b/app/images/icons/icon-snaps-plus-filled.svg new file mode 100644 index 000000000..413e52fac --- /dev/null +++ b/app/images/icons/icon-snaps-plus-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-speedometer-filled.svg b/app/images/icons/icon-speedometer-filled.svg new file mode 100644 index 000000000..a14af2d6d --- /dev/null +++ b/app/images/icons/icon-speedometer-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-star.svg b/app/images/icons/icon-star.svg new file mode 100644 index 000000000..5e088fd8e --- /dev/null +++ b/app/images/icons/icon-star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-student-filled.svg b/app/images/icons/icon-student-filled.svg new file mode 100644 index 000000000..fd7eb9168 --- /dev/null +++ b/app/images/icons/icon-student-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/icon-swap-horizontal-outline.svg b/app/images/icons/icon-swap-horizontal-outline.svg new file mode 100644 index 000000000..61145d238 --- /dev/null +++ b/app/images/icons/icon-swap-horizontal-outline.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-swap-vertical-filled.svg b/app/images/icons/icon-swap-vertical-filled.svg new file mode 100644 index 000000000..4c3836289 --- /dev/null +++ b/app/images/icons/icon-swap-vertical-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-tag-filled.svg b/app/images/icons/icon-tag-filled.svg new file mode 100644 index 000000000..47329195e --- /dev/null +++ b/app/images/icons/icon-tag-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-tilde.svg b/app/images/icons/icon-tilde.svg new file mode 100644 index 000000000..e199dd54c --- /dev/null +++ b/app/images/icons/icon-tilde.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-timer-filled.svg b/app/images/icons/icon-timer-filled.svg new file mode 100644 index 000000000..62dd112f0 --- /dev/null +++ b/app/images/icons/icon-timer-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-trash-filled.svg b/app/images/icons/icon-trash-filled.svg new file mode 100644 index 000000000..df8eb8aaf --- /dev/null +++ b/app/images/icons/icon-trash-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-trend-down-filled.svg b/app/images/icons/icon-trend-down-filled.svg new file mode 100644 index 000000000..edbfaff68 --- /dev/null +++ b/app/images/icons/icon-trend-down-filled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/images/icons/icon-trend-up-filled.svg b/app/images/icons/icon-trend-up-filled.svg new file mode 100644 index 000000000..695dc6771 --- /dev/null +++ b/app/images/icons/icon-trend-up-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-user-circle-add-filled.svg b/app/images/icons/icon-user-circle-add-filled.svg new file mode 100644 index 000000000..d73ea8ebf --- /dev/null +++ b/app/images/icons/icon-user-circle-add-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-user-circle-filled.svg b/app/images/icons/icon-user-circle-filled.svg new file mode 100644 index 000000000..611d25d08 --- /dev/null +++ b/app/images/icons/icon-user-circle-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-user-cirlce-add-filled.svg b/app/images/icons/icon-user-cirlce-add-filled.svg new file mode 100644 index 000000000..01ffc6c9c --- /dev/null +++ b/app/images/icons/icon-user-cirlce-add-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-user-filled.svg b/app/images/icons/icon-user-filled.svg new file mode 100644 index 000000000..981a05537 --- /dev/null +++ b/app/images/icons/icon-user-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-wallet-card-filled.svg b/app/images/icons/icon-wallet-card-filled.svg new file mode 100644 index 000000000..5ae651f1a --- /dev/null +++ b/app/images/icons/icon-wallet-card-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-wallet-filled.svg b/app/images/icons/icon-wallet-filled.svg new file mode 100644 index 000000000..bca151054 --- /dev/null +++ b/app/images/icons/icon-wallet-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-wallet-money-filled.svg b/app/images/icons/icon-wallet-money-filled.svg new file mode 100644 index 000000000..f834605c0 --- /dev/null +++ b/app/images/icons/icon-wallet-money-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/images/icons/icon-warning-filled.svg b/app/images/icons/icon-warning-filled.svg new file mode 100644 index 000000000..fea0948f9 --- /dev/null +++ b/app/images/icons/icon-warning-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/development/build/scripts.js b/development/build/scripts.js index 5b89b372a..de5fd260c 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -29,6 +29,7 @@ const bifyModuleGroups = require('bify-module-groups'); const { streamFlatMap } = require('../stream-flat-map'); const { BuildType } = require('../lib/build-type'); +const { generateIconNames } = require('../generate-icon-names'); const { BUILD_TARGETS, ENVIRONMENT } = require('./constants'); const { getConfig, getProductionConfig } = require('./config'); const { @@ -1013,7 +1014,9 @@ async function getEnvironmentVariables({ buildTarget, buildType, version }) { const devMode = isDevBuild(buildTarget); const testing = isTestBuild(buildTarget); + const iconNames = await generateIconNames(); return { + ICON_NAMES: iconNames, COLLECTIBLES_V1: config.COLLECTIBLES_V1 === '1', CONF: devMode ? config : {}, IN_TEST: testing, diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js new file mode 100644 index 000000000..bbe49f653 --- /dev/null +++ b/development/generate-icon-names.js @@ -0,0 +1,47 @@ +/** + * Generate icon names + * + * Reads all the icon svg files in app/images/icons + * and returns an object of icon name key value pairs + * stored in the environment variable ICON_NAMES + * Used with the Icon component in ./ui/component-library/icon + */ +const fs = require('fs'); +const path = require('path'); + +const SVG_ICONS_FOLDER = './app/images/icons'; +const ASSET_EXT = '.svg'; + +const getIconNameKebabCase = (fileName) => + path.basename(fileName, ASSET_EXT).replace('icon-', ''); + +const getIconNameInSnakeCase = (fileName) => + path + .basename(fileName, ASSET_EXT) + .replace('icon-', '') + .replace(/-/gu, '_') + .toUpperCase(); + +const generateIconNames = async () => { + const iconNames = {}; + + const svgIconsFolderPath = path.join(__dirname, `../${SVG_ICONS_FOLDER}`); + + const fileList = await fs.promises.readdir(svgIconsFolderPath); + + const svgIconsFileList = fileList.filter( + (fileName) => path.extname(fileName) === ASSET_EXT, + ); + + svgIconsFileList.forEach( + (fileName) => + (iconNames[getIconNameInSnakeCase(fileName)] = + getIconNameKebabCase(fileName)), + ); + + console.log('ICON_NAMES env var successfully generated!'); + + return iconNames; +}; + +module.exports = { generateIconNames }; diff --git a/package.json b/package.json index da51aa459..4e754853f 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dist": "yarn build dist", "build": "yarn lavamoat:build", "build:dev": "node development/build/index.js", + "build:icons": "node ui/components/component-library/icon/scripts/generate-icon-names.js && node ui/components/component-library/icon/scripts/generate-icon-scss.js", "start:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://fake@sentry.io/0000000 yarn build testDev", "benchmark:chrome": "SELENIUM_BROWSER=chrome node test/e2e/benchmark.js", "mv3:stats:chrome": "SELENIUM_BROWSER=chrome ENABLE_MV3=true node test/e2e/mv3-perf-stats/index.js", diff --git a/ui/components/component-library/base-icon/README.mdx b/ui/components/component-library/base-icon/README.mdx deleted file mode 100644 index 519ebb745..000000000 --- a/ui/components/component-library/base-icon/README.mdx +++ /dev/null @@ -1,77 +0,0 @@ -import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; - -import { BaseIcon } from './base-icon'; - -### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components - -# BaseIcon - -The `BaseIcon` is the base component for all icons. It is used in conjunction with a script to create all icons it should not be used directly. - - - - - -## Props - -The `BaseIcon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props - - - -### Size - -Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `BaseIcon`. Defaults to `SIZES.SM` - -Possible sizes include: - -- `SIZES.XXS` 10px -- `SIZES.XS` 12px -- `SIZES.SM` 16px -- `SIZES.MD` 20px -- `SIZES.LG` 24px -- `SIZES.XL` 32px - - - - - -```jsx -import { SIZES } from '../../../helpers/constants/design-system'; -import { BaseIcon } from '../ui/component-library'; - - - - - - - -``` - -### Color - -Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of `BaseIcon`. Defaults to `COLORS.INHERIT` which will use the text color of the parent element. This is useful for inline icons. - - - - - -```jsx -import { COLORS } from '../../../helpers/constants/design-system'; -import { BaseIcon } from '../ui/component-library'; - - - - - - - - - - - - - - - - -``` diff --git a/ui/components/component-library/base-icon/base-icon.js b/ui/components/component-library/base-icon/base-icon.js deleted file mode 100644 index 966371410..000000000 --- a/ui/components/component-library/base-icon/base-icon.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import Box from '../../ui/box/box'; - -import { - SIZES, - COLORS, - ICON_COLORS, -} from '../../../helpers/constants/design-system'; - -export const BaseIcon = ({ - className, - size = SIZES.MD, - color = COLORS.INHERIT, - children, - ...props -}) => { - return ( - - {children} - - ); -}; - -BaseIcon.propTypes = { - /** - * The size of the BaseIcon. - * Possible values could be 'SIZES.XXS', 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL', - * Default value is 'SIZES.MD'. - */ - size: PropTypes.oneOf(Object.values(SIZES)), - /** - * The color of the icon. - * Defaults to COLORS.INHERIT. - */ - color: PropTypes.oneOf(Object.values(ICON_COLORS)), - /** - * An additional className to apply to the icon. - */ - className: PropTypes.string, - /** - * The to the icon. - */ - children: PropTypes.node, - /** - * BaseIcon accepts all the props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/component-library/base-icon/base-icon.stories.js b/ui/components/component-library/base-icon/base-icon.stories.js deleted file mode 100644 index 89c7ce245..000000000 --- a/ui/components/component-library/base-icon/base-icon.stories.js +++ /dev/null @@ -1,176 +0,0 @@ -import React from 'react'; -import { - SIZES, - ALIGN_ITEMS, - DISPLAY, - COLORS, - ICON_COLORS, -} from '../../../helpers/constants/design-system'; -import Box from '../../ui/box/box'; - -import { BaseIcon } from './base-icon'; -import README from './README.mdx'; - -const marginSizeControlOptions = [ - undefined, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 'auto', -]; - -export default { - title: 'Components/ComponentLibrary/BaseIcon', - id: __filename, - component: BaseIcon, - parameters: { - docs: { - page: README, - }, - }, - argTypes: { - size: { - control: 'select', - options: Object.values(SIZES), - }, - color: { - control: 'select', - options: Object.values(ICON_COLORS), - }, - className: { - control: 'text', - }, - marginTop: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginRight: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginBottom: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginLeft: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - }, - args: { - color: COLORS.INHERIT, - size: SIZES.MD, - children: ( - - ), - }, -}; - -export const DefaultStory = (args) => ; - -DefaultStory.storyName = 'Default'; - -export const Size = (args) => ( - - - - - - - - -); - -export const Color = (args) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/ui/components/component-library/base-icon/base-icon.test.js b/ui/components/component-library/base-icon/base-icon.test.js deleted file mode 100644 index 6ecda4ec7..000000000 --- a/ui/components/component-library/base-icon/base-icon.test.js +++ /dev/null @@ -1,64 +0,0 @@ -/* eslint-disable jest/require-top-level-describe */ -import { render } from '@testing-library/react'; -import React from 'react'; -import { SIZES, COLORS } from '../../../helpers/constants/design-system'; -import { BaseIcon } from './base-icon'; - -describe('BaseIcon', () => { - it('should render correctly', () => { - const { getByTestId, container } = render( - , - ); - expect(getByTestId('base-icon')).toBeDefined(); - expect(container.querySelector('svg')).toBeDefined(); - }); - it('should render with different size classes', () => { - const { getByTestId } = render( - <> - - - - - - - , - ); - expect(getByTestId('base-icon-xxs')).toHaveClass('base-icon--size-xxs'); - expect(getByTestId('base-icon-xs')).toHaveClass('base-icon--size-xs'); - expect(getByTestId('base-icon-sm')).toHaveClass('base-icon--size-sm'); - expect(getByTestId('base-icon-md')).toHaveClass('base-icon--size-md'); - expect(getByTestId('base-icon-lg')).toHaveClass('base-icon--size-lg'); - expect(getByTestId('base-icon-xl')).toHaveClass('base-icon--size-xl'); - }); - it('should render with icon colors', () => { - const { getByTestId } = render( - <> - - - - - , - ); - expect(getByTestId('base-icon-color-inherit')).toHaveClass( - 'box--color-inherit', - ); - expect(getByTestId('base-icon-color-default')).toHaveClass( - 'box--color-icon-default', - ); - expect(getByTestId('base-icon-color-alternative')).toHaveClass( - 'box--color-icon-alternative', - ); - expect(getByTestId('base-icon-color-muted')).toHaveClass( - 'box--color-icon-muted', - ); - }); -}); diff --git a/ui/components/component-library/base-icon/index.js b/ui/components/component-library/base-icon/index.js deleted file mode 100644 index f1ceeadd2..000000000 --- a/ui/components/component-library/base-icon/index.js +++ /dev/null @@ -1 +0,0 @@ -export { BaseIcon } from './base-icon'; diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss index 55b4f014b..09c0d7a28 100644 --- a/ui/components/component-library/component-library-components.scss +++ b/ui/components/component-library/component-library-components.scss @@ -2,5 +2,5 @@ @import 'avatar-network/avatar-network'; @import 'avatar-token/avatar-token'; @import 'base-avatar/base-avatar'; -@import 'base-icon/base-icon'; +@import 'icon/icon'; @import 'text/text'; diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx new file mode 100644 index 000000000..c2e9d4411 --- /dev/null +++ b/ui/components/component-library/icon/README.mdx @@ -0,0 +1,122 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import { Icon } from './icon'; + +# Icon + +The `Icon` component in conjunction with `ICON_NAMES` can be used for all icons in the extension + + + + + +## Props + +The `Icon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props + + + +### Name + +Use the `name` prop and the `ICON_NAMES` object to change the icon. + +Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use. + +```jsx +import { Icon, ICON_NAMES } from '../ui/component-library'; + + + + + +``` + + + + + +### Size + +Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM` + +Possible sizes include: + +- `SIZES.XXS` 10px +- `SIZES.XS` 12px +- `SIZES.SM` 16px +- `SIZES.MD` 20px +- `SIZES.LG` 24px +- `SIZES.XL` 32px + + + + + +```jsx +import { SIZES } from '../../../helpers/constants/design-system'; +import { Icon, ICON_NAMES } from '../ui/component-library'; + + + + + + + +``` + +### Color + +Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `COLORS.INHERIT` which will use the text color of the parent element. This is useful for inline icons. + + + + + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import { Icon, ICON_NAMES } from '../ui/component-library'; + + + + + + + + + + + + + + + + +``` + +### Adding a new icon + +To add a new icon the only thing you need to do is add the icon svg file to `app/images/icons`. To ensure that the icon is added correctly follow these steps: + +#### Step 1. + +Optimize the svg using [Fontastic](https://fontastic.me/). This will remove any unnecessary code from the svg. Your svg should only contain a single path. + +Example of a correctly optimized svg: + +``` + + + +``` + +If your svg **does not** contain a single path, you will need to get a designer to join all paths and outline strokes into a single path. + +#### Step 2. + +Add your optimized svg file to to `app/images/icons` and ensure the icon name starts with `icon-` e.g. `icon-add-square-filled.svg` + +#### Step 3. + +Run `yarn start` to generate the `ICON_NAMES` with your added icon. + +If you have any questions please reach out to the design system team in the [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) channel on slack. diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js new file mode 100644 index 000000000..3ea0780c8 --- /dev/null +++ b/ui/components/component-library/icon/icon.constants.js @@ -0,0 +1,11 @@ +/** + * The ICON_NAMES object contains all the possible icon names. + * It is generated using the generateIconNames script in development/generate-icon-names.js + * and stored in the environment variable ICON_NAMES + * To add a new icon, add the icon svg file to app/images/icons + * Ensure the svg has been optimized, is kebab case and starts with "icon-" + * See "Adding a new icon" in ./README.md for more details + */ + +/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring +export const ICON_NAMES = process.env.ICON_NAMES; diff --git a/ui/components/component-library/icon/icon.js b/ui/components/component-library/icon/icon.js new file mode 100644 index 000000000..bbc7edbba --- /dev/null +++ b/ui/components/component-library/icon/icon.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +import Box from '../../ui/box/box'; + +import { + SIZES, + COLORS, + ICON_COLORS, +} from '../../../helpers/constants/design-system'; + +export const Icon = ({ + name, + size = SIZES.MD, + color = COLORS.INHERIT, + className, + style, + ...props +}) => { + return ( + + ); +}; + +Icon.propTypes = { + /** + * The name of the icon to display. Should be one of ICON_NAMES + */ + name: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable + /** + * The size of the Icon. + * Possible values could be 'SIZES.XXS', 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL', + * Default value is 'SIZES.MD'. + */ + size: PropTypes.oneOf(Object.values(SIZES)), + /** + * The color of the icon. + * Defaults to COLORS.INHERIT. + */ + color: PropTypes.oneOf(Object.values(ICON_COLORS)), + /** + * An additional className to apply to the icon. + */ + className: PropTypes.string, + /** + * Addition style properties to apply to the icon. + * The Icon component uses inline styles to apply the icon's mask-image so be wary of overriding + */ + style: PropTypes.style, + /** + * Icon accepts all the props from Box + */ + ...Box.propTypes, +}; diff --git a/ui/components/component-library/base-icon/base-icon.scss b/ui/components/component-library/icon/icon.scss similarity index 55% rename from ui/components/component-library/base-icon/base-icon.scss rename to ui/components/component-library/icon/icon.scss index fd81cab65..05a53b772 100644 --- a/ui/components/component-library/base-icon/base-icon.scss +++ b/ui/components/component-library/icon/icon.scss @@ -1,6 +1,21 @@ -.base-icon { +.icon { --icon-size: var(--size, 16px); + font-size: var(--icon-size); + width: 1em; + height: 1em; + max-width: 1em; + flex: 0 0 1em; + display: inline-block; + background-color: currentColor; // inherits parent text color + mask-size: cover; + -webkit-mask-size: cover; + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-position: center; + + // Size &--size-xxs { --size: 10px; } @@ -24,10 +39,4 @@ &--size-xl { --size: 32px; } - - font-size: var(--icon-size); - width: 1em; - height: 1em; - display: inline-block; - fill: currentColor; } diff --git a/ui/components/component-library/icon/icon.stories.js b/ui/components/component-library/icon/icon.stories.js new file mode 100644 index 000000000..ff2244efa --- /dev/null +++ b/ui/components/component-library/icon/icon.stories.js @@ -0,0 +1,291 @@ +import React, { useState } from 'react'; +import { + SIZES, + ALIGN_ITEMS, + DISPLAY, + COLORS, + ICON_COLORS, + FLEX_DIRECTION, + JUSTIFY_CONTENT, + TEXT, +} from '../../../helpers/constants/design-system'; +import Box from '../../ui/box/box'; +import { Text } from '../text'; + +import { Icon } from './icon'; +import { ICON_NAMES } from './icon.constants'; + +import README from './README.mdx'; + +const marginSizeControlOptions = [ + undefined, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12, + 'auto', +]; + +export default { + title: 'Components/ComponentLibrary/Icon', + id: __filename, + component: Icon, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + name: { + control: 'select', + options: Object.values(ICON_NAMES), + }, + size: { + control: 'select', + options: Object.values(SIZES), + }, + color: { + control: 'select', + options: Object.values(ICON_COLORS), + }, + className: { + control: 'text', + }, + marginTop: { + options: marginSizeControlOptions, + control: 'select', + table: { category: 'box props' }, + }, + marginRight: { + options: marginSizeControlOptions, + control: 'select', + table: { category: 'box props' }, + }, + marginBottom: { + options: marginSizeControlOptions, + control: 'select', + table: { category: 'box props' }, + }, + marginLeft: { + options: marginSizeControlOptions, + control: 'select', + table: { category: 'box props' }, + }, + }, + args: { + name: ICON_NAMES.ADD_SQUARE_FILLED, + color: COLORS.INHERIT, + size: SIZES.MD, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; + +export const Name = (args) => { + const [search, setSearch] = useState(''); + const iconList = Object.keys(ICON_NAMES) + .filter( + (item) => + search === '' || + item.toLowerCase().includes(search.toLowerCase().replace(' ', '_')), + ) + .sort(); + + const handleSearch = (e) => { + setSearch(e.target.value); + }; + + return ( + <> + + Icon search + + + + + + + {iconList.length > 0 ? ( + <> + {iconList.map((item) => { + return ( + + + + + { + const tempEl = document.createElement('textarea'); + tempEl.value = item; + document.body.appendChild(tempEl); + tempEl.select(); + document.execCommand('copy'); + document.body.removeChild(tempEl); + }} + > + {item} + + + ); + })} + + ) : ( + + No matches. Please try again or ask in the{' '} + + #metamask-design-system + {' '} + channel on slack. + + )} + + + ); +}; + +export const Size = (args) => ( + + + + + + + + +); + +export const Color = (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/icon.test.js new file mode 100644 index 000000000..697b3a2b3 --- /dev/null +++ b/ui/components/component-library/icon/icon.test.js @@ -0,0 +1,130 @@ +/* eslint-disable jest/require-top-level-describe */ +import { render } from '@testing-library/react'; +import React from 'react'; +import { SIZES, COLORS } from '../../../helpers/constants/design-system'; +import { Icon } from './icon'; + +// Icon names are stored in the ICON_NAMES environment variable +// mocking the environment variable here +const MOCK_ICON_NAMES = { + ADD_SQUARE_FILLED: 'add-square-filled', + BANK_FILLED: 'bank-filled', + BOOKMARK_FILLED: 'bookmark-filled', + CALCULATOR_FILLED: 'calculator-filled', +}; + +describe('Icon', () => { + it('should render correctly', () => { + const { getByTestId, container } = render( + , + ); + expect(getByTestId('icon')).toBeDefined(); + expect(container.querySelector('svg')).toBeDefined(); + }); + it('should render with different icons using mask-image and image urls', () => { + const { getByTestId } = render( + <> + + + + + , + ); + expect( + window.getComputedStyle(getByTestId('icon-add-square-filled')).maskImage, + ).toBe(`url('/images/icons/icon-add-square-filled.svg`); + expect( + window.getComputedStyle(getByTestId('icon-bank-filled')).maskImage, + ).toBe(`url('/images/icons/icon-bank-filled.svg`); + expect( + window.getComputedStyle(getByTestId('icon-bookmark-filled')).maskImage, + ).toBe(`url('/images/icons/icon-bookmark-filled.svg`); + expect( + window.getComputedStyle(getByTestId('icon-calculator-filled')).maskImage, + ).toBe(`url('/images/icons/icon-calculator-filled.svg`); + }); + it('should render with different size classes', () => { + const { getByTestId } = render( + <> + + + + + + + , + ); + expect(getByTestId('icon-xxs')).toHaveClass('icon--size-xxs'); + expect(getByTestId('icon-xs')).toHaveClass('icon--size-xs'); + expect(getByTestId('icon-sm')).toHaveClass('icon--size-sm'); + expect(getByTestId('icon-md')).toHaveClass('icon--size-md'); + expect(getByTestId('icon-lg')).toHaveClass('icon--size-lg'); + expect(getByTestId('icon-xl')).toHaveClass('icon--size-xl'); + }); + it('should render with icon colors', () => { + const { getByTestId } = render( + <> + + + + , + ); + expect(getByTestId('icon-color-default')).toHaveClass( + 'box--color-icon-default', + ); + expect(getByTestId('icon-color-alternative')).toHaveClass( + 'box--color-icon-alternative', + ); + expect(getByTestId('icon-color-muted')).toHaveClass( + 'box--color-icon-muted', + ); + }); +}); diff --git a/ui/components/component-library/icon/index.js b/ui/components/component-library/icon/index.js new file mode 100644 index 000000000..97ac040b5 --- /dev/null +++ b/ui/components/component-library/icon/index.js @@ -0,0 +1,2 @@ +export { Icon } from './icon'; +export { ICON_NAMES } from './icon.constants';