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.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.
-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.
 
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </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"
-  >
+  <a className="link-item" href="https://tailwindcss.com/" target="_blank">
     <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
+      <strong>Tailwind</strong>
+      The component library CSS is powered by the Tailwind CSS framework
     </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>