├── .babelrc ├── .github ├── pull_request_template.md └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── .storybook ├── addons.js ├── config.js ├── manager-head.html ├── static │ └── favicon.ico └── webpack.config.js ├── .stylelintrc ├── .testconfig ├── fileMocks.ts ├── testPolyfills.js └── testSetup.js ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE.md ├── README.md ├── definitions └── non-js-loaders.d.ts ├── examples └── webpack-4 │ ├── .gitignore │ ├── app.tsx │ ├── package.json │ ├── tsconfig.json │ └── webpack.config.js ├── integration-tests ├── jest.json └── tree-shake.test.ts ├── lerna.json ├── now.json ├── package-lock.json ├── package.json ├── src ├── components │ ├── buttonsIndicators │ │ └── button │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ ├── dataTables │ │ └── table │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ ├── formControls │ │ ├── checkbox │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── controlWrapper │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── input │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── radio │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── select │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── textarea │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── textareaClipboard │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ └── toggle │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ ├── icons │ │ ├── alert-circle.tsx │ │ ├── alert-message-o.tsx │ │ ├── arrow.tsx │ │ ├── block-l.tsx │ │ ├── block-r.tsx │ │ ├── block-s.tsx │ │ ├── bookmark-folder.tsx │ │ ├── bookmark-o.tsx │ │ ├── bookmark.tsx │ │ ├── bookmarkBook.tsx │ │ ├── carat-circle-o.tsx │ │ ├── carat-circle.tsx │ │ ├── carat-down-l.tsx │ │ ├── carat-down-r.tsx │ │ ├── carat-down-s.tsx │ │ ├── carat-strong.tsx │ │ ├── carat-triangle-down-l.tsx │ │ ├── carat-triangle-down-r.tsx │ │ ├── carat-triangle-down-s.tsx │ │ ├── carat-triangle-left-l.tsx │ │ ├── carat-triangle-left-r.tsx │ │ ├── carat-triangle-left-s.tsx │ │ ├── carat-triangle-right-l.tsx │ │ ├── carat-triangle-right-r.tsx │ │ ├── carat-triangle-right-s.tsx │ │ ├── carat-triangle-up-l.tsx │ │ ├── carat-triangle-up-r.tsx │ │ ├── carat-triangle-up-s.tsx │ │ ├── carat.tsx │ │ ├── check-circle.tsx │ │ ├── check.tsx │ │ ├── checkmark-circle-l.tsx │ │ ├── checkmark-circle-r.tsx │ │ ├── checkmark-circle-s.tsx │ │ ├── clipboard-o.tsx │ │ ├── clipboard.tsx │ │ ├── close-circle-o.tsx │ │ ├── close-circle.tsx │ │ ├── close.tsx │ │ ├── credit-card.tsx │ │ ├── download.tsx │ │ ├── edit-o.tsx │ │ ├── embed-o.tsx │ │ ├── emote-sad.tsx │ │ ├── emote-smile.tsx │ │ ├── fc-ads-megaphone.tsx │ │ ├── fc-ads-tokens.tsx │ │ ├── fc-auto-contribute.tsx │ │ ├── fc-logo-amazon.tsx │ │ ├── fc-logo-bat-grey.tsx │ │ ├── fc-logo-bat.tsx │ │ ├── fc-logo-bitcoin.tsx │ │ ├── fc-logo-blogger.tsx │ │ ├── fc-logo-ddg.tsx │ │ ├── fc-logo-ebay.tsx │ │ ├── fc-logo-ethereum.tsx │ │ ├── fc-logo-facebook.tsx │ │ ├── fc-logo-github.tsx │ │ ├── fc-logo-linkedin.tsx │ │ ├── fc-logo-litecoin.tsx │ │ ├── fc-logo-medium.tsx │ │ ├── fc-logo-reddit.tsx │ │ ├── fc-logo-soundcloud.tsx │ │ ├── fc-logo-stack-overflow.tsx │ │ ├── fc-logo-twitch.tsx │ │ ├── fc-logo-twitter.tsx │ │ ├── fc-logo-unsplash.tsx │ │ ├── fc-logo-uphold.tsx │ │ ├── fc-logo-vimeo.tsx │ │ ├── fc-logo-wikipedia.tsx │ │ ├── fc-logo-youtube.tsx │ │ ├── fc-monthly-contributions.tsx │ │ ├── fc-rewards-activate.tsx │ │ ├── fc-rewards-check.tsx │ │ ├── fc-rewards-send-tips.tsx │ │ ├── fc-rewards-wallet-check.tsx │ │ ├── fc-tips.tsx │ │ ├── folder.tsx │ │ ├── graph-o.tsx │ │ ├── heart-l.tsx │ │ ├── heart-r.tsx │ │ ├── heart-s.tsx │ │ ├── history.tsx │ │ ├── illustrative │ │ │ ├── gift.tsx │ │ │ ├── love.tsx │ │ │ └── megaphone.tsx │ │ ├── index.tsx │ │ ├── loader.tsx │ │ ├── logo-facebook.tsx │ │ ├── logo-twitter.tsx │ │ ├── logo-uphold.tsx │ │ ├── logo-youtube.tsx │ │ ├── more-vert-l.tsx │ │ ├── more-vert-r.tsx │ │ ├── more-vert-s.tsx │ │ ├── open-new.tsx │ │ ├── paper-airplane.tsx │ │ ├── payment-due.tsx │ │ ├── pin-o.tsx │ │ ├── pin.tsx │ │ ├── plus.tsx │ │ ├── print.tsx │ │ ├── recent-history.tsx │ │ ├── refresh.tsx │ │ ├── send.tsx │ │ ├── settings-advanced.tsx │ │ ├── settings.tsx │ │ ├── shield-alert-o.tsx │ │ ├── shield-alert.tsx │ │ ├── template.tsx │ │ ├── thumbs-up.tsx │ │ ├── thumbsdown-l.tsx │ │ ├── thumbsdown-r.tsx │ │ ├── thumbsdown-s.tsx │ │ ├── thumbsup-l.tsx │ │ ├── thumbsup-r.tsx │ │ ├── thumbsup-s.tsx │ │ ├── tor-lock.tsx │ │ ├── trash-o.tsx │ │ ├── trash.tsx │ │ ├── unverified-s.tsx │ │ ├── verified-s.tsx │ │ ├── wallet-add.tsx │ │ ├── wallet-backup.tsx │ │ ├── wallet-block.tsx │ │ ├── wallet-check.tsx │ │ ├── wallet-close.tsx │ │ ├── wallet-import.tsx │ │ ├── wallet-info.tsx │ │ ├── wallet-lock.tsx │ │ ├── wallet-manage.tsx │ │ ├── wallet-minus.tsx │ │ ├── wallet-open.tsx │ │ └── wallet-withdraw.tsx │ ├── index.ts │ ├── layout │ │ ├── card │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ ├── gridList │ │ │ ├── __snapshots__ │ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ │ └── tabs │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ ├── popupModals │ │ ├── alertBox │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ └── modal │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ ├── text │ │ └── heading │ │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ │ ├── index.tsx │ │ │ ├── spec.tsx │ │ │ └── style.ts │ └── tree-shake-evidence.tsx ├── helpers.test.ts ├── helpers.ts ├── index.ts ├── old │ ├── anchor │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── boxedContent │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── contentToggleArrow │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── dataBlock │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── defaultTheme.ts │ ├── headings │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── index.ts │ ├── mediaContent │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── page │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── paragraph │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── pushButton │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── selectOption │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── separator │ │ ├── index.tsx │ │ └── style.ts │ ├── switchButton │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── textLabel │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ ├── unstyledButton │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ └── v1 │ │ ├── icons │ │ └── arrowRight.tsx │ │ ├── image │ │ ├── index.tsx │ │ └── style.ts │ │ ├── newTheme.ts │ │ ├── panel │ │ ├── __snapshots__ │ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts │ │ └── pushButton │ │ ├── __snapshots__ │ │ └── spec.tsx.snap │ │ ├── index.tsx │ │ ├── spec.tsx │ │ └── style.ts └── theme │ ├── brave-dark.ts │ ├── brave-default.ts │ ├── colors │ └── index.tsx │ ├── index.tsx │ ├── theme-interface.ts │ └── util │ └── make-color.tsx ├── stories ├── assets │ ├── fonts │ │ ├── Poppins-v5 │ │ │ ├── Poppins_100_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_100_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_100_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_100_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_100_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_100_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_200_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_200_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_200_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_200_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_200_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_200_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_300_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_300_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_300_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_300_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_300_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_300_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_400_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_400_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_400_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_400_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_400_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_400_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_500_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_500_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_500_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_500_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_500_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_500_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_600_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_600_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_600_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_600_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_600_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_600_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_700_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_700_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_700_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_700_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_700_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_700_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_800_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_800_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_800_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_800_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_800_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_800_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_900_italic_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_900_italic_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ ├── Poppins_900_italic_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ │ ├── Poppins_900_normal_0d7e19fe5b51588a56ee51ac676b63d8_devanagari_v5.woff2 │ │ │ ├── Poppins_900_normal_78f97281f840d609aa7d345caef392c5_latin-ext_v5.woff2 │ │ │ └── Poppins_900_normal_bfa3a4d70cc392ea9c1260963baae6ed_latin_v5.woff2 │ │ └── poppins.css │ ├── img │ │ ├── fakeQRCodeImage.png │ │ └── fake_favicon.png │ └── locale.ts ├── components │ ├── buttonsIndicators.tsx │ ├── dataTables.tsx │ ├── formControls.tsx │ ├── icons │ │ ├── icons.tsx │ │ └── style.ts │ ├── layout.tsx │ ├── popupsModal.tsx │ ├── text.tsx │ └── theme.tsx └── storyUtils.tsx ├── tools ├── createComponent.js ├── icon-component-generator │ ├── README.md │ ├── index.js │ ├── package-lock.json │ ├── package.json │ ├── svgoConfig.js │ ├── template.js │ └── util │ │ ├── findFilesRecursive.js │ │ └── fixLint.js └── lib │ └── templates.js ├── tsconfig-jest.json ├── tsconfig-storybook.json ├── tsconfig.json ├── tslint.json └── ui-logo.svg /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react" 4 | ], 5 | "plugins": [ 6 | "@babel/plugin-proposal-object-rest-spread" 7 | ] 8 | } -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Changes 2 | 3 | ## Test plan 4 | 5 | 6 | ##### Link / storybook path to visual changes 7 | - 8 | 9 | 10 | ## Integration 11 | - [ ] Does this contain changes to src/components or src/ 12 | - [ ] Will you publish to npm immediately after this PR, or wait until sometime in the future? 13 | - [ ] Incompatible API change to something existing _(major version increase)_ 14 | - [ ] Adding new backwards-compatible functionality? _(minor version increase)_ 15 | - [ ] Fixing a bug backwards-compatibly? _(patch version increase)_ 16 | 17 | - [ ] Does this contain changes to src/features for brave-core? 18 | - [ ] Are there non backwards-compatible changes required for brave-core? **Do not merge until brave-core PR is approvable.** Link to brave-core PR: 19 | - [ ] Will you create brave-core PR to update to this commit after it is merged? 20 | - [ ] Wants uplift to brave-core feature branch? 21 | - When uplift-approved, merge to brave-core-0.VV.x feature branch 22 | - Create additional brave-core PRs for each feature branch to update commit 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log.* 5 | lerna-debug.log 6 | 7 | # Directory for instrumented libs generated by jscoverage/JSCover 8 | lib-cov 9 | 10 | # Coverage directory used by tools like istanbul 11 | coverage 12 | 13 | # Dependency directory 14 | node_modules 15 | examples/**/package-lock.json 16 | 17 | # Temp files 18 | .DS_Store 19 | .DS-Store 20 | 21 | # vim swap files 22 | *.swp 23 | 24 | # webstrom 25 | .idea 26 | 27 | # storybook 28 | .storybook/temp 29 | .storybook-out 30 | .out 31 | .cache 32 | 33 | # package 34 | package 35 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | // for docs see https://github.com/echoulen/storybook-addon-styled-component-theme 6 | import 'storybook-addon-styled-component-theme/dist/register' 7 | 8 | // for docs see https://www.npmjs.com/package/@storybook/addon-backgrounds 9 | import '@storybook/addon-backgrounds/register' 10 | 11 | // for docs see https://github.com/storybooks/storybook/tree/master/addons/actions 12 | import '@storybook/addon-actions/register' 13 | 14 | // for docs see https://github.com/storybooks/storybook/tree/master/addons/knobs 15 | import '@storybook/addon-knobs/register' 16 | 17 | // for docs see https://github.com/dump247/storybook-state 18 | import '@dump247/storybook-state/register' 19 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import 'emptykit.css' 2 | import { initLocale } from '../src/helpers' 3 | import { configure, addDecorator, addParameters } from '@storybook/react' 4 | import locales from '../stories/assets/locale' 5 | import DarkTheme from '../src/theme/brave-dark' 6 | import DefaultTheme from '../src/theme/brave-default' 7 | import { withThemesProvider } from 'storybook-addon-styled-component-theme' 8 | import '../stories/assets/fonts/poppins.css' 9 | 10 | addParameters({ 11 | backgrounds: [ 12 | { name: 'Neutral300', value: '#DEE2E6', default: true }, 13 | { name: 'Grey700', value: '#5E6175' }, 14 | { name: 'White', value: '#FFF' }, 15 | { name: 'Grey900', value: '#1E2029' } 16 | ] 17 | }) 18 | 19 | addParameters({ 20 | options: { 21 | name: 'Brave UI', 22 | panelPosition: 'right', 23 | showNav: true, 24 | showPanel: true, 25 | sortStoriesByKind: true 26 | } 27 | }) 28 | 29 | const themes = [DefaultTheme, DarkTheme] 30 | addDecorator(withThemesProvider(themes)) 31 | 32 | function loadStories () { 33 | initLocale(locales) 34 | const req = require.context('../stories', true, /\.tsx$/) 35 | req.keys().forEach(filename => req(filename)) 36 | } 37 | 38 | configure(loadStories, module) 39 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brave/brave-ui/4a76f0153255278d5a792bd9e9d1056ef0c602d0/.storybook/static/favicon.ico -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const createStyledComponentsTransformer = require('typescript-plugin-styled-components') 4 | .default 5 | 6 | function getStyledComponentDisplay (filename, bindingName) { 7 | return bindingName 8 | } 9 | 10 | // Export a function. Accept the base config as the only param. 11 | module.exports = async ({ config, mode }) => { 12 | // Make whatever fine-grained changes you need 13 | config.module.rules.push({ 14 | test: /\.(ts|tsx)$/, 15 | loader: require.resolve('awesome-typescript-loader'), 16 | options: { 17 | configFileName: path.resolve(__dirname, '..', 'tsconfig-storybook.json'), 18 | getCustomTransformers: () => ({ 19 | before: [ 20 | createStyledComponentsTransformer({ 21 | options: { 22 | getDisplayName: getStyledComponentDisplay 23 | } 24 | }) 25 | ] 26 | }) 27 | } 28 | }) 29 | 30 | config.resolve.extensions.push('.ts', '.tsx') 31 | return config 32 | } 33 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-recommended", 5 | "stylelint-config-styled-components" 6 | ], 7 | "rules": { 8 | "property-no-vendor-prefix": [true, { 9 | "ignoreProperties": ["background-clip", "padding-start", "padding-end", "appearance"] 10 | }], 11 | "selector-type-no-unknown": null, 12 | "no-descending-specificity": null 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.testconfig/fileMocks.ts: -------------------------------------------------------------------------------- 1 | const fileUrl = 'test-file-stub' 2 | export default fileUrl 3 | -------------------------------------------------------------------------------- /.testconfig/testPolyfills.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | // This mocks rAF to avoid React console.error 6 | // while running Jest tests 7 | global.requestAnimationFrame = function (cb) { 8 | return setTimeout(cb, 0) 9 | } 10 | -------------------------------------------------------------------------------- /.testconfig/testSetup.js: -------------------------------------------------------------------------------- 1 | /* This Source Code Form is subject to the terms of the Mozilla Public 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 | 5 | const Enzyme = require('enzyme') 6 | const EnzymeAdapter = require('enzyme-adapter-react-16') 7 | require('jest-styled-components') 8 | require('@testing-library/jest-dom') 9 | 10 | // Setup enzyme's react adapter 11 | Enzyme.configure({ adapter: new EnzymeAdapter() }) 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "14.16.0" 4 | dist: trusty 5 | cache: npm 6 | before_install: 7 | - npm --version 8 | branches: 9 | only: 10 | - master 11 | env: 12 | - TEST_SUITE=lint 13 | - TEST_SUITE=test-unit-all-ci 14 | - TEST_SUITE=test-security 15 | - TEST_SUITE=test-integration 16 | script: 17 | - npm run $TEST_SUITE 18 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "standard.enable": true, 3 | "standard.usePackageJson": true 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WARNING! This project is deprecated. Consider switching to https://github.com/brave/leo 2 | 3 |

4 | 5 |

6 | 7 | 8 |

9 | 10 | --- 11 | 12 | ## :wave: Welcome to Brave UI 13 | 14 | Here you will find a list of reusable React components used in most of Brave products. Brave UI's [component library](https://brave.github.io/brave-ui) can be found on Storybook. 15 | 16 | :exclamation:**Important:** We are still hacking a lot on this project, and therefore don't recommend that anyone use it yet. It's free to try and use at your own risk but bear in mind that components and APIs are very likely to change without notice. 17 | 18 | ### Installation 19 | 20 | ``` 21 | $ npm install 22 | ``` 23 | 24 | ### Using Brave UI 25 | 26 | ``` 27 | npm run storybook-start 28 | ``` 29 | 30 | ### Tests 31 | 32 | We use Jest for testing. Playground is available under the `stories/` folder. 33 | 34 | ``` 35 | npm run test-unit 36 | ``` 37 | 38 | ### License 39 | 40 | This project is licensed under the MPL-2.0. 41 | -------------------------------------------------------------------------------- /definitions/non-js-loaders.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | const url: any; 3 | export default url; 4 | } 5 | 6 | declare module "*.png" { 7 | const url: any; 8 | export default url; 9 | } 10 | 11 | declare module "*.jpg" { 12 | const url: any; 13 | export default url; 14 | } 15 | 16 | declare module "*.gif" { 17 | const url: any; 18 | export default url; 19 | } 20 | 21 | declare module "*.woff2" { 22 | const url: any; 23 | export default url; 24 | } 25 | 26 | declare module "*.css" { 27 | const url: any; 28 | export default url; 29 | } -------------------------------------------------------------------------------- /examples/webpack-4/.gitignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /examples/webpack-4/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import { Button } from '../../package' 5 | import { CheckCircleIcon } from '../../package/components/icons' 6 | 7 | // Actually use imported components, to provide a fair test 8 | render( 9 |
10 |
, 13 | document.querySelector('#test') 14 | ) 15 | -------------------------------------------------------------------------------- /examples/webpack-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-tree-shake", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --config webpack.config.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "react": "^16.6.0", 13 | "react-dom": "^16.6.0", 14 | "ts-loader": "^5.3.0", 15 | "typescript": "^3.1.6", 16 | "webpack": "^4.24.0", 17 | "webpack-cli": "^3.1.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/webpack-4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": [ 4 | "../../definitions", 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/webpack-4/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "production", 3 | devtool: 'source-map', 4 | entry: "./app.tsx", 5 | output: { 6 | filename: "bundle.js" 7 | }, 8 | resolve: { 9 | // Add `.ts` and `.tsx` as a resolvable extension. 10 | extensions: [".ts", ".tsx", ".js"] 11 | }, 12 | module: { 13 | rules: [ 14 | // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` 15 | { test: /\.tsx?$/, loader: "ts-loader" }, 16 | { 17 | test: /\.(woff|woff2|ttf|eot|svg|png|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 18 | loader: 'url-loader' 19 | } 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /integration-tests/jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "testMatch": [ 3 | "/**/*.test.*" 4 | ], 5 | "preset": "ts-jest/presets/js-with-babel" 6 | } -------------------------------------------------------------------------------- /integration-tests/tree-shake.test.ts: -------------------------------------------------------------------------------- 1 | /* global jest, expect, describe, it, afterEach */ 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | 6 | const evidence = require('../src/components/tree-shake-evidence').default 7 | const bundlePath = path.join(__dirname, '../examples/webpack-4/dist/bundle.js') 8 | 9 | describe('Tree shaking', () => { 10 | it('does not include unused export', async () => { 11 | const bundleContents = await new Promise((resolve, reject) => fs.readFile(bundlePath, (err: any, data: any) => { 12 | if (err) return reject(err) 13 | resolve(data.toString()) 14 | })) 15 | expect(bundleContents).toBeTruthy() 16 | expect(bundleContents).toEqual(expect.not.stringContaining(evidence.test)) 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0", 3 | "version": "0.38.0", 4 | "packages": [ 5 | "package/" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "name": "brave-ui", 4 | "builds": [ 5 | { 6 | "src": "package.json", 7 | "use": "@now/static-build", 8 | "config": 9 | { 10 | "distDir": ".storybook-out" 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/components/buttonsIndicators/button/spec.tsx: -------------------------------------------------------------------------------- 1 | /* global jest, expect, describe, it, afterEach */ 2 | import * as React from 'react' 3 | import { shallow } from 'enzyme' 4 | import { create } from 'react-test-renderer' 5 | import Button from './index' 6 | import { TestThemeProvider } from '../../../theme' 7 | 8 | describe('Button tests', () => { 9 | const baseComponent = (props?: object) =>