diff --git a/components/.storybook/main.js b/components/.storybook/main.js index ed4cd08e..bcc8fad8 100644 --- a/components/.storybook/main.js +++ b/components/.storybook/main.js @@ -1,6 +1,11 @@ module.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-a11y", + "storybook-addon-designs", + ], framework: "@storybook/angular", core: { builder: "webpack5", diff --git a/components/package-lock.json b/components/package-lock.json index bf65bcd0..5064c216 100644 --- a/components/package-lock.json +++ b/components/package-lock.json @@ -47,6 +47,7 @@ "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "postcss": "^8.4.6", + "storybook-addon-designs": "^6.2.1", "tailwindcss": "^3.0.18", "typescript": "~4.3.5" } @@ -4036,6 +4037,29 @@ "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", "dev": true }, + "node_modules/@figspec/components": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.0.tgz", + "integrity": "sha512-a8sgP0YLJ3H0g0pdZPYecxfp9JNVQUTaaU3xcSci8duHXTGkJ7X8QPPCBbyhB+MoxMxnsAh8GjkfZHEr9oIoPQ==", + "dev": true, + "dependencies": { + "copy-to-clipboard": "^3.0.0", + "lit-element": "^2.4.0", + "lit-html": "^1.1.1" + } + }, + "node_modules/@figspec/react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.0.tgz", + "integrity": "sha512-BkOu3RsKF5vCtPoqsc6Oeyxw4wr9GesFrB9/wDHFqgjzhWsw8erFxCsPxsjdlJD8d8OWVHoM6SWxAaGe/pLdxg==", + "dev": true, + "dependencies": { + "@figspec/components": "^1.0.0" + }, + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0" + } + }, "node_modules/@foliojs-fork/fontkit": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz", @@ -22451,6 +22475,21 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/lit-element": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", + "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==", + "dev": true, + "dependencies": { + "lit-html": "^1.1.1" + } + }, + "node_modules/lit-html": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", + "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==", + "dev": true + }, "node_modules/loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -30454,6 +30493,15 @@ "integrity": "sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==", "dev": true }, + "node_modules/storybook-addon-designs": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz", + "integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==", + "dev": true, + "dependencies": { + "@figspec/react": "^1.0.0" + } + }, "node_modules/stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -37238,6 +37286,26 @@ "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", "dev": true }, + "@figspec/components": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.0.tgz", + "integrity": "sha512-a8sgP0YLJ3H0g0pdZPYecxfp9JNVQUTaaU3xcSci8duHXTGkJ7X8QPPCBbyhB+MoxMxnsAh8GjkfZHEr9oIoPQ==", + "dev": true, + "requires": { + "copy-to-clipboard": "^3.0.0", + "lit-element": "^2.4.0", + "lit-html": "^1.1.1" + } + }, + "@figspec/react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.0.tgz", + "integrity": "sha512-BkOu3RsKF5vCtPoqsc6Oeyxw4wr9GesFrB9/wDHFqgjzhWsw8erFxCsPxsjdlJD8d8OWVHoM6SWxAaGe/pLdxg==", + "dev": true, + "requires": { + "@figspec/components": "^1.0.0" + } + }, "@foliojs-fork/fontkit": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz", @@ -51668,6 +51736,21 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lit-element": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", + "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==", + "dev": true, + "requires": { + "lit-html": "^1.1.1" + } + }, + "lit-html": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", + "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==", + "dev": true + }, "loader-runner": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz", @@ -57893,6 +57976,15 @@ "integrity": "sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==", "dev": true }, + "storybook-addon-designs": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz", + "integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==", + "dev": true, + "requires": { + "@figspec/react": "^1.0.0" + } + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", diff --git a/components/package.json b/components/package.json index 7b43f9d7..42682325 100644 --- a/components/package.json +++ b/components/package.json @@ -53,6 +53,7 @@ "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "postcss": "^8.4.6", + "storybook-addon-designs": "^6.2.1", "tailwindcss": "^3.0.18", "typescript": "~4.3.5" } diff --git a/components/src/badge/badge.stories.ts b/components/src/badge/badge.stories.ts index 6af7c3b8..71344dfb 100644 --- a/components/src/badge/badge.stories.ts +++ b/components/src/badge/badge.stories.ts @@ -8,6 +8,12 @@ export default { args: { type: "primary", }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A16956", + }, + }, } as Meta; const Template: Story = (args: BadgeComponent) => ({ diff --git a/components/src/button/button.stories.ts b/components/src/button/button.stories.ts index 03816326..24f6e9f9 100644 --- a/components/src/button/button.stories.ts +++ b/components/src/button/button.stories.ts @@ -2,17 +2,20 @@ import { Meta, Story } from "@storybook/angular"; import { ButtonComponent } from "./button.component"; -// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export export default { title: "Jslib/Button", component: ButtonComponent, args: { buttonType: "primary", }, - // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A16733", + }, + }, } as Meta; -// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args const Template: Story = (args: ButtonComponent) => ({ props: args, template: ` @@ -22,7 +25,6 @@ const Template: Story = (args: ButtonComponent) => ({ }); export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/angular/writing-stories/args Primary.args = { buttonType: "primary", }; diff --git a/components/src/callout/callout.stories.ts b/components/src/callout/callout.stories.ts index b6307144..d2cb0f69 100644 --- a/components/src/callout/callout.stories.ts +++ b/components/src/callout/callout.stories.ts @@ -27,6 +27,12 @@ export default { args: { type: "warning", }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17484", + }, + }, } as Meta; const Template: Story = (args: CalloutComponent) => ({ diff --git a/components/src/stories/Introduction.stories.mdx b/components/src/stories/Introduction.stories.mdx index 5b798704..7b175b41 100644 --- a/components/src/stories/Introduction.stories.mdx +++ b/components/src/stories/Introduction.stories.mdx @@ -18,7 +18,7 @@ import { Meta } from "@storybook/addon-docs"; .link-list { display: grid; grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; + grid-template-rows: 1fr; row-gap: 10px; } @@ -81,44 +81,21 @@ import { Meta } from "@storybook/addon-docs"; # Bitwarden Component Library -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. +The Bitwarden Component Library is a collection of reusable low level components which empowers designers and +developers to work more efficiently. The primary goal is to ensure a consistent design and behavior across the +different clients and platforms. Currently the primary focus is the web based clients, namely _web_, _browser_ and +_desktop_. -Browse example stories now by navigating to them in the sidebar. -View their code in the `src/stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. +**Role out status:** we are currently in the process of transitioning the Web Vault to utilize the component library +and the other clients will follow once this work is completed.
Configure
- + - Presets for popular tools - Easy setup for TypeScript, SCSS and more. - - - - - Build configuration - How to customize webpack and Babel - - - - - Styling - How to load and configure CSS libraries + Tailwind + The component library CSS is powered by the Tailwind CSS framework - - - GitHub project - View the source and add issues - - - - - Discord chat - Chat with maintainers and the community - -