Update introduction for CL (#729)

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",

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",

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"
   }

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<BadgeComponent> = (args: BadgeComponent) => ({

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<ButtonComponent> = (args: ButtonComponent) => ({
   props: args,
   template: `
@@ -22,7 +25,6 @@ const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
 });
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/angular/writing-stories/args
 Primary.args = {
   buttonType: "primary",
 };

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<CalloutComponent> = (args: CalloutComponent) => ({

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.
+The Bitwarden Component Library is a collection of reusable low level components which empowers designers and
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+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.
+**Role out status:** we are currently in the process of transitioning the Web Vault to utilize the component library
-View their code in the `src/stories` directory to learn how they work.
+and the other clients will follow once this work is completed.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
 
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
+  <a className="link-item" href="https://tailwindcss.com/" target="_blank">
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
     <span>
-      <strong>Presets for popular tools</strong>
+      <strong>Tailwind</strong>
-      Easy setup for TypeScript, SCSS and more.
+      The component library CSS is powered by the Tailwind CSS framework
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
     </span>
   </a>
   <a
@@ -148,16 +125,4 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
 </div>