diff --git a/.storybook/main.js b/.storybook/main.js index 0f67fd4e..d4db81b4 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,5 @@ module.exports = { stories: ['../**/*.stories.js'], - addons: ["@storybook/addon-actions/register", "@storybook/addon-links/register", "@storybook/addon-postcss"], + addons: ['storybook-addon-designs', '@storybook/addon-actions/register', '@storybook/addon-links/register', '@storybook/addon-postcss'], staticDirs: ['../assets'], }; diff --git a/package.json b/package.json index 19174758..a7c91c50 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,13 @@ "url": "https://github.com/metabrainz/design-system/issues" }, "homepage": "https://github.com/metabrainz/design-system#readme", - "keywords": [ "design-system", "metabrainz", "react", "storybook", "musicbrainz" ], + "keywords": [ + "design-system", + "metabrainz", + "react", + "storybook", + "musicbrainz" + ], "devDependencies": { "@babel/core": "^7.16.12", "@babel/eslint-parser": "^7.16.5", @@ -55,6 +61,7 @@ "react-dom": "^17.0.2", "sass": "^1.49.0", "sass-loader": "^7.1.0", + "storybook-addon-designs": "^6.2.1", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^5.67.0" diff --git a/stories/listenbrainz.stories.js b/stories/listenbrainz.stories.js new file mode 100644 index 00000000..73a897e7 --- /dev/null +++ b/stories/listenbrainz.stories.js @@ -0,0 +1,19 @@ +import {withDesign} from 'storybook-addon-designs'; +import React from 'react'; + +import {Button} from '../components'; + +export default { + component: Button, + decorators: [withDesign], + title: 'ListenBrainz', +}; + +export const lbRedesign = () => + +lbRedesign.parameters = { + design: { + type: 'figma', + url: 'https://www.figma.com/file/YRbCOtFHBez8XmMdCKbGta', + }, +}; diff --git a/yarn.lock b/yarn.lock index 2100ffeb..a086ee04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1300,6 +1300,22 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@figspec/components@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.0.tgz#b1ddf0593173157cb5e79e50073ca1491bb7c6dc" + integrity sha512-a8sgP0YLJ3H0g0pdZPYecxfp9JNVQUTaaU3xcSci8duHXTGkJ7X8QPPCBbyhB+MoxMxnsAh8GjkfZHEr9oIoPQ== + dependencies: + copy-to-clipboard "^3.0.0" + lit-element "^2.4.0" + lit-html "^1.1.1" + +"@figspec/react@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.0.tgz#226ff85e146038b284ddf1ddbc086d2d14fe370a" + integrity sha512-BkOu3RsKF5vCtPoqsc6Oeyxw4wr9GesFrB9/wDHFqgjzhWsw8erFxCsPxsjdlJD8d8OWVHoM6SWxAaGe/pLdxg== + dependencies: + "@figspec/components" "^1.0.0" + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" @@ -4090,7 +4106,7 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= -copy-to-clipboard@^3.3.1: +copy-to-clipboard@^3.0.0, copy-to-clipboard@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== @@ -6824,6 +6840,18 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +lit-element@^2.4.0: + version "2.5.1" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.1.tgz#3fa74b121a6cd22902409ae3859b7847d01aa6b6" + integrity sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ== + dependencies: + lit-html "^1.1.1" + +lit-html@^1.1.1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0" + integrity sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA== + loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" @@ -9584,6 +9612,13 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022" integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg== +storybook-addon-designs@^6.2.1: + version "6.2.1" + resolved "https://registry.yarnpkg.com/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz#47fd1a7a098cad027b3891bd72a7f9c1837d94a0" + integrity sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg== + dependencies: + "@figspec/react" "^1.0.0" + stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"