From fde18dec0c67d4548c6d7493a7320788f8e263be Mon Sep 17 00:00:00 2001 From: witmicko Date: Fri, 10 Mar 2023 17:47:01 +0000 Subject: [PATCH] link component (#17897) Added externlalLink to ButtonLink Co-authored-by: George Marshall --- .depcheckrc.yml | 2 + .storybook/main.js | 1 + lavamoat/browserify/desktop/policy.json | 16 +-- lavamoat/browserify/flask/policy.json | 16 +-- lavamoat/build-system/policy.json | 48 ++++----- package.json | 2 + .../component-library/button-base/README.mdx | 14 +++ .../__snapshots__/button-base.test.js.snap | 18 ++++ .../button-base/button-base.js | 9 ++ .../button-base/button-base.stories.js | 9 ++ .../button-base/button-base.test.js | 33 ++++++- .../component-library/button-link/README.mdx | 18 ++++ .../button-link/button-link.stories.js | 12 +++ yarn.lock | 97 +++++++++++++++++++ 14 files changed, 254 insertions(+), 41 deletions(-) diff --git a/.depcheckrc.yml b/.depcheckrc.yml index 74b3c13be..a67a8263e 100644 --- a/.depcheckrc.yml +++ b/.depcheckrc.yml @@ -46,6 +46,8 @@ ignores: - '@storybook/builder-webpack5' - '@storybook/manager-webpack5' - 'storybook-dark-mode' + - '@whitespace/storybook-addon-html' + - 'react-syntax-highlighter' - 'style-loader' - 'css-loader' - 'sass-loader' diff --git a/.storybook/main.js b/.storybook/main.js index 5e84a6e27..d14c65f90 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -23,6 +23,7 @@ module.exports = { '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', + '@whitespace/storybook-addon-html' ], staticDirs: ['../app', './images'], // Uses babel.config.js settings and prevents "Missing class properties transform" error diff --git a/lavamoat/browserify/desktop/policy.json b/lavamoat/browserify/desktop/policy.json index 28e091b82..00325bca9 100644 --- a/lavamoat/browserify/desktop/policy.json +++ b/lavamoat/browserify/desktop/policy.json @@ -4302,18 +4302,13 @@ "packages": { "react-markdown>remark-parse>mdast-util-from-markdown>mdast-util-to-string": true, "react-markdown>remark-parse>mdast-util-from-markdown>micromark": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true, - "react-markdown>vfile>unist-util-stringify-position": true + "react-markdown>vfile>unist-util-stringify-position": true, + "react-syntax-highlighter>refractor>parse-entities": true } }, "react-markdown>remark-parse>mdast-util-from-markdown>micromark": { "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true - } - }, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": { - "globals": { - "document.createElement": true + "react-syntax-highlighter>refractor>parse-entities": true } }, "react-markdown>remark-rehype": { @@ -4532,6 +4527,11 @@ "react": true } }, + "react-syntax-highlighter>refractor>parse-entities": { + "globals": { + "document.createElement": true + } + }, "react-tippy": { "globals": { "Element": true, diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json index 28e091b82..00325bca9 100644 --- a/lavamoat/browserify/flask/policy.json +++ b/lavamoat/browserify/flask/policy.json @@ -4302,18 +4302,13 @@ "packages": { "react-markdown>remark-parse>mdast-util-from-markdown>mdast-util-to-string": true, "react-markdown>remark-parse>mdast-util-from-markdown>micromark": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true, - "react-markdown>vfile>unist-util-stringify-position": true + "react-markdown>vfile>unist-util-stringify-position": true, + "react-syntax-highlighter>refractor>parse-entities": true } }, "react-markdown>remark-parse>mdast-util-from-markdown>micromark": { "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true - } - }, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": { - "globals": { - "document.createElement": true + "react-syntax-highlighter>refractor>parse-entities": true } }, "react-markdown>remark-rehype": { @@ -4532,6 +4527,11 @@ "react": true } }, + "react-syntax-highlighter>refractor>parse-entities": { + "globals": { + "document.createElement": true + } + }, "react-tippy": { "globals": { "Element": true, diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json index 492fb362f..871dcc172 100644 --- a/lavamoat/build-system/policy.json +++ b/lavamoat/build-system/policy.json @@ -6562,22 +6562,6 @@ "define": true } }, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": { - "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>character-entities": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>character-entities-legacy": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>character-reference-invalid": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>is-alphanumerical": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>is-hexadecimal": true, - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-decimal": true - } - }, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>is-alphanumerical": { - "packages": { - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-alphabetical": true, - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-decimal": true - } - }, "react-markdown>unified": { "packages": { "jsdom>request>extend": true, @@ -6620,6 +6604,22 @@ "react-markdown>vfile>unist-util-stringify-position": true } }, + "react-syntax-highlighter>refractor>parse-entities": { + "packages": { + "react-syntax-highlighter>refractor>parse-entities>character-entities": true, + "react-syntax-highlighter>refractor>parse-entities>character-entities-legacy": true, + "react-syntax-highlighter>refractor>parse-entities>character-reference-invalid": true, + "react-syntax-highlighter>refractor>parse-entities>is-alphanumerical": true, + "react-syntax-highlighter>refractor>parse-entities>is-decimal": true, + "react-syntax-highlighter>refractor>parse-entities>is-hexadecimal": true + } + }, + "react-syntax-highlighter>refractor>parse-entities>is-alphanumerical": { + "packages": { + "react-syntax-highlighter>refractor>parse-entities>is-decimal": true, + "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-alphabetical": true + } + }, "readable-stream": { "builtin": { "events.EventEmitter": true, @@ -6964,11 +6964,11 @@ }, "stylelint>@stylelint/postcss-markdown>remark>remark-parse": { "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true, + "react-syntax-highlighter>refractor>parse-entities": true, + "react-syntax-highlighter>refractor>parse-entities>is-decimal": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>ccount": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>collapse-white-space": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-alphabetical": true, - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-decimal": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-whitespace-character": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-word-character": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>markdown-escapes": true, @@ -6995,9 +6995,9 @@ }, "stylelint>@stylelint/postcss-markdown>remark>remark-stringify": { "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities": true, + "react-syntax-highlighter>refractor>parse-entities": true, + "react-syntax-highlighter>refractor>parse-entities>is-decimal": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>ccount": true, - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-decimal": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-whitespace-character": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>markdown-escapes": true, "stylelint>@stylelint/postcss-markdown>remark>remark-parse>repeat-string": true, @@ -7023,10 +7023,10 @@ }, "stylelint>@stylelint/postcss-markdown>remark>remark-stringify>stringify-entities": { "packages": { - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>character-entities-legacy": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>is-alphanumerical": true, - "react-markdown>remark-parse>mdast-util-from-markdown>parse-entities>is-hexadecimal": true, - "stylelint>@stylelint/postcss-markdown>remark>remark-parse>is-decimal": true, + "react-syntax-highlighter>refractor>parse-entities>character-entities-legacy": true, + "react-syntax-highlighter>refractor>parse-entities>is-alphanumerical": true, + "react-syntax-highlighter>refractor>parse-entities>is-decimal": true, + "react-syntax-highlighter>refractor>parse-entities>is-hexadecimal": true, "stylelint>@stylelint/postcss-markdown>remark>remark-stringify>stringify-entities>character-entities-html4": true } }, diff --git a/package.json b/package.json index 49e8cdaa6..bb4f10ac0 100644 --- a/package.json +++ b/package.json @@ -421,6 +421,7 @@ "@types/yargs": "^17.0.8", "@typescript-eslint/eslint-plugin": "^5.30.7", "@typescript-eslint/parser": "^5.30.7", + "@whitespace/storybook-addon-html": "^5.1.1", "addons-linter": "^5.2.0", "babelify": "^10.0.0", "bify-module-groups": "^2.0.0", @@ -504,6 +505,7 @@ "pumpify": "^2.0.1", "randomcolor": "^0.5.4", "react-devtools": "^4.11.0", + "react-syntax-highlighter": "^15.5.0", "read-installed": "^4.0.3", "redux-mock-store": "^1.5.4", "remote-redux-devtools": "^0.5.16", diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx index ad7669b05..239032379 100644 --- a/ui/components/component-library/button-base/README.mdx +++ b/ui/components/component-library/button-base/README.mdx @@ -98,6 +98,20 @@ import { ButtonBase } from '../../component-library'; Anchor Element; ``` +### External link + +When an `externalLink` prop is passed it will change the element to an anchor(`a`) tag and add the `target="_blank"` and `rel="noopener noreferrer"` attributes. + + + +```jsx +import { ButtonBase } from '../../component-library'; + + + Anchor element with external link +; +``` + ### Disabled Use the boolean `disabled` prop to disable button diff --git a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap index fc9a3a459..6dc5bfbcf 100644 --- a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap +++ b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap @@ -1,5 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = ` +
+ + + Button Base + + +
+`; + exports[`ButtonBase should render button element correctly and match snapshot 1`] = `