Create a RecommendedBadge component (#7958)
* Create a RecommendedBadge component * Update story and add RTL support * Add target="_blank" * Add icon and attempt to style * Fix version of storybook-addon-rtl * fix lint * Fix test * Address review comments * Update hover text * fix lint * Make normal and hover colors more different from one another
This commit is contained in:
Bob Silverberg
GitHub
Родитель
bef189e94d
Коммит
81bb3c9370
|
|
@ -362,6 +362,7 @@
|
|||
"shelljs": "^0.8.0",
|
||||
"sinon": "^7.0.0",
|
||||
"snyk": "^1.124.1",
|
||||
"storybook-addon-rtl": "^0.2.2",
|
||||
"style-loader": "^0.23.0",
|
||||
"stylelint": "^10.0.0",
|
||||
"stylelint-config-standard": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><title>Group 16 Copy 2</title><g fill="#FFFFFF" fill-rule="nonzero"><path d="M11.45 0H.55C.25 0 0 .22 0 .5V3c0 1.1.98 2 2.18 2h.05a3.67 3.67 0 0 0 3.22 2.96V9.5h1.1V7.96A3.67 3.67 0 0 0 9.77 5h.05C11.02 5 12 4.1 12 3V.5c0-.28-.24-.5-.55-.5zM1.1 3V1h1.1v3c-.61 0-1.1-.45-1.1-1zm9.82 0c0 .55-.49 1-1.1 1V1h1.1v2zM7.1 10H4.9c-2.72 0-2.72 2-2.72 2h7.64s0-2-2.73-2z"/></g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 436 B |
|
|
@ -327,3 +327,10 @@
|
|||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.Icon-recommended {
|
||||
@include icon($name: 'recommended');
|
||||
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/* @flow */
|
||||
import * as React from 'react';
|
||||
import { compose } from 'redux';
|
||||
|
||||
import translate from 'core/i18n/translate';
|
||||
import Icon from 'ui/components/Icon';
|
||||
import type { I18nType } from 'core/types/i18n';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
type Props = {};
|
||||
|
||||
type InternalProps = {|
|
||||
i18n: I18nType,
|
||||
|};
|
||||
|
||||
export const RecommendedBadgeBase = (props: InternalProps) => {
|
||||
const { i18n } = props;
|
||||
|
||||
const label = i18n.gettext('Recommended');
|
||||
return (
|
||||
<div className="RecommendedBadge">
|
||||
<a
|
||||
className="RecommendedBadge-link"
|
||||
href="https://support.mozilla.org/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title={i18n.gettext(
|
||||
'Recommended extensions are vetted for exceptional security and performance.',
|
||||
)}
|
||||
>
|
||||
<span className="RecommendedBadge-icon">
|
||||
<Icon alt={label} name="recommended" />
|
||||
</span>
|
||||
<span className="RecommendedBadge-label">{label}</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RecommendedBadge: React.ComponentType<Props> = compose(translate())(
|
||||
RecommendedBadgeBase,
|
||||
);
|
||||
|
||||
export default RecommendedBadge;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@import '~ui/css/styles';
|
||||
|
||||
$recommended-text-color: $orange-70;
|
||||
$recommended-hover-color: $orange-50;
|
||||
|
||||
.RecommendedBadge {
|
||||
align-items: center;
|
||||
color: $recommended-text-color;
|
||||
display: flex;
|
||||
font-size: $font-size-m-smaller;
|
||||
margin-bottom: 6px;
|
||||
|
||||
@include respond-to(large) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $recommended-text-color;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:focus,
|
||||
a:hover {
|
||||
border-color: $recommended-hover-color;
|
||||
color: $recommended-hover-color;
|
||||
|
||||
.RecommendedBadge-icon {
|
||||
background-color: $recommended-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.RecommendedBadge-link {
|
||||
@include padding-end(10px);
|
||||
|
||||
border: 1px solid $recommended-text-color;
|
||||
border-radius: 20px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.RecommendedBadge-icon {
|
||||
@include margin-end(6px);
|
||||
@include padding-end(0);
|
||||
@include padding-start(4px);
|
||||
|
||||
background-color: $recommended-text-color;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 2px;
|
||||
width: 22px;
|
||||
}
|
||||
|
|
@ -8,3 +8,4 @@ import './setup/styles.scss';
|
|||
import './ui/Badge';
|
||||
import './ui/Button';
|
||||
import './ui/Rating';
|
||||
import './ui/RecommendedBadge';
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
import '@storybook/addon-options/register';
|
||||
import 'storybook-addon-rtl/register';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { configure, setAddon, addDecorator } from '@storybook/react';
|
||||
import { setDefaults } from '@storybook/addon-info';
|
||||
import { withOptions } from '@storybook/addon-options';
|
||||
import { initializeRTL } from 'storybook-addon-rtl';
|
||||
import chaptersAddon, {
|
||||
setDefaults as setAddonChaptersDefaults,
|
||||
} from 'react-storybook-addon-chapters';
|
||||
|
|
@ -27,7 +28,7 @@ addDecorator(
|
|||
name: 'Mozilla Addons frontend',
|
||||
url: 'https://github.com/mozilla/addons-frontend',
|
||||
// Hide empty panel for now.
|
||||
showAddonPanel: false,
|
||||
showAddonPanel: true,
|
||||
}),
|
||||
);
|
||||
|
||||
|
|
@ -46,4 +47,6 @@ function loadStories() {
|
|||
require('./../index');
|
||||
}
|
||||
|
||||
initializeRTL();
|
||||
|
||||
configure(loadStories, module);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
/* @flow */
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { fakeI18n } from 'tests/unit/helpers';
|
||||
|
||||
import RecommendedBadge from 'ui/components/RecommendedBadge';
|
||||
|
||||
storiesOf('RecommendedBadge', module).add('default', () => (
|
||||
<RecommendedBadge i18n={fakeI18n({ includeJedSpy: false })} />
|
||||
));
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { fakeI18n, shallowUntilTarget } from 'tests/unit/helpers';
|
||||
import RecommendedBadge, {
|
||||
RecommendedBadgeBase,
|
||||
} from 'ui/components/RecommendedBadge';
|
||||
import Icon from 'ui/components/Icon';
|
||||
|
||||
describe(__filename, () => {
|
||||
it('renders a badge', () => {
|
||||
const root = shallowUntilTarget(
|
||||
<RecommendedBadge i18n={fakeI18n()} />,
|
||||
RecommendedBadgeBase,
|
||||
);
|
||||
const label = 'Recommended';
|
||||
|
||||
expect(root.find(Icon)).toHaveProp('alt', label);
|
||||
expect(root.find('.RecommendedBadge-label')).toIncludeText(label);
|
||||
});
|
||||
});
|
||||
71
yarn.lock
71
yarn.lock
|
|
@ -1187,7 +1187,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
|
||||
integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
|
||||
|
||||
"@emotion/is-prop-valid@0.7.3":
|
||||
"@emotion/is-prop-valid@0.7.3", "@emotion/is-prop-valid@^0.7.3":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
|
||||
integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
|
||||
|
|
@ -1294,7 +1294,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
|
||||
integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
|
||||
|
||||
"@emotion/unitless@0.7.3":
|
||||
"@emotion/unitless@0.7.3", "@emotion/unitless@^0.7.0":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
|
||||
integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
|
||||
|
|
@ -3266,7 +3266,6 @@ babel-eslint@^9.0.0:
|
|||
|
||||
"babel-gettext-extractor@github:mozilla/babel-gettext-extractor#babel-7":
|
||||
version "4.0.0"
|
||||
uid "78ff104e669edb731e979e36fbf4fe261a569924"
|
||||
resolved "https://codeload.github.com/mozilla/babel-gettext-extractor/tar.gz/78ff104e669edb731e979e36fbf4fe261a569924"
|
||||
dependencies:
|
||||
"@babel/core" "^7.0.0"
|
||||
|
|
@ -3502,6 +3501,16 @@ babel-plugin-react-docgen@^2.0.0, babel-plugin-react-docgen@^2.0.2:
|
|||
react-docgen "^3.0.0"
|
||||
recast "^0.14.7"
|
||||
|
||||
"babel-plugin-styled-components@>= 1":
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
|
||||
integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
|
||||
dependencies:
|
||||
"@babel/helper-annotate-as-pure" "^7.0.0"
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
lodash "^4.17.10"
|
||||
|
||||
babel-plugin-syntax-jsx@^6.18.0:
|
||||
version "6.18.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
|
||||
|
|
@ -4207,7 +4216,7 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
|
|||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
|
||||
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
|
||||
|
||||
camelize@1.0.0:
|
||||
camelize@1.0.0, camelize@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
|
||||
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
|
||||
|
|
@ -5144,6 +5153,11 @@ css-animation@^1.3.2:
|
|||
babel-runtime "6.x"
|
||||
component-classes "^1.2.5"
|
||||
|
||||
css-color-keywords@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
|
||||
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
|
||||
|
||||
css-color-names@0.0.4, css-color-names@^0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
|
||||
|
|
@ -5226,6 +5240,15 @@ css-selector-tokenizer@^0.7.0:
|
|||
fastparse "^1.1.1"
|
||||
regexpu-core "^1.0.0"
|
||||
|
||||
css-to-react-native@^2.2.2:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.0.tgz#bf80d24ec4a08e430306ef429c0586e6ed5485f7"
|
||||
integrity sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==
|
||||
dependencies:
|
||||
camelize "^1.0.0"
|
||||
css-color-keywords "^1.0.0"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
css-tree@1.0.0-alpha.28:
|
||||
version "1.0.0-alpha.28"
|
||||
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
|
||||
|
|
@ -10130,6 +10153,11 @@ mem@^4.0.0:
|
|||
mimic-fn "^2.0.0"
|
||||
p-is-promise "^2.0.0"
|
||||
|
||||
memoize-one@^5.0.0:
|
||||
version "5.0.4"
|
||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
|
||||
integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
|
||||
|
||||
memoizerific@^1.11.3:
|
||||
version "1.11.3"
|
||||
resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
|
||||
|
|
@ -14867,6 +14895,14 @@ stealthy-require@^1.1.1:
|
|||
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
|
||||
integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
|
||||
|
||||
storybook-addon-rtl@0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/storybook-addon-rtl/-/storybook-addon-rtl-0.2.2.tgz#5e5dabeb35f021b540b6d9cb03cfc4b34732f23d"
|
||||
integrity sha512-vTXX2qKyIzH6amknJHPQFQf6LDPUEu8UwYqQVU0JlYrfjgrsMb/KKhk47iTjrR6eHCtDBOmJJt9lPWr1uTqmuA==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
styled-components "^4.1.3"
|
||||
|
||||
stream-browserify@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
|
||||
|
|
@ -15108,6 +15144,23 @@ style-search@^0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
|
||||
integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
|
||||
|
||||
styled-components@^4.1.3:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.2.0.tgz#811fbbec4d64c7189f6c7482b9eb6fefa7fefef7"
|
||||
integrity sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
"@emotion/is-prop-valid" "^0.7.3"
|
||||
"@emotion/unitless" "^0.7.0"
|
||||
babel-plugin-styled-components ">= 1"
|
||||
css-to-react-native "^2.2.2"
|
||||
memoize-one "^5.0.0"
|
||||
prop-types "^15.5.4"
|
||||
react-is "^16.6.0"
|
||||
stylis "^3.5.0"
|
||||
stylis-rule-sheet "^0.0.10"
|
||||
supports-color "^5.5.0"
|
||||
|
||||
stylehacks@^4.0.0:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
|
||||
|
|
@ -15261,6 +15314,16 @@ stylelint@^9.0.0:
|
|||
svg-tags "^1.0.0"
|
||||
table "^5.0.0"
|
||||
|
||||
stylis-rule-sheet@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
|
||||
integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
|
||||
|
||||
stylis@^3.5.0:
|
||||
version "3.5.4"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
|
||||
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
|
||||
|
||||
sugarss@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче