docs(Storybook): update storybook to use carbon styles (#7866)

* docs(Storybook): update storybook to use carbon styles

* chore(yarn): dedupe

* chore(storybook): add welcome page

* docs(storybook): regroup components

* chore(image): compress image size

packages/react/.storybook/Container.js

@@ -10,7 +10,7 @@ import './polyfills';
 
 import React, { useEffect } from 'react';
 
-function Container({ story }) {
+function Container({ story, id }) {
   useEffect(() => {
     const originalDirection = document.documentElement.dir;
     if (process.env.CARBON_REACT_STORYBOOK_USE_RTL === 'true') {
@@ -28,6 +28,7 @@ function Container({ story }) {
   return (
     <React.StrictMode>
       <div
+        className={id.toLowerCase()}
         data-floating-menu-container
         role="main"
         style={{

packages/react/.storybook/Welcome/Welcome.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import bg from './carbon_bg.png';
+import './welcome.scss';
+import PackageInfo from './../../package.json';
+
+export const Welcome = () => {
+  return (
+    <div
+      className="welcome__container"
+      style={{
+        background: `url(${bg}) no-repeat center center fixed`,
+        backgroundSize: 'cover',
+      }}>
+      <h2 className="welcome__heading">Carbon Components</h2>
+      <h4 className="welcome__heading welcome__heading--subtitle">{`React v${PackageInfo.version}`}</h4>
+    </div>
+  );
+};

packages/react/.storybook/Welcome/Welcome.stories.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+import { Welcome as Intro } from './Welcome';
+
+export default {
+  title: ' Getting Started/ Welcome',
+  component: Intro,
+};
+
+export const Welcome = () => <Intro />;

packages/react/.storybook/Welcome/welcome.scss

@@ -0,0 +1,22 @@
+@import '~carbon-components/scss/globals/scss/typography';
+
+.container-welcome {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+}
+
+.welcome__container {
+  width: 100vw;
+  height: 100vh;
+  padding: 3rem;
+}
+
+.welcome__heading {
+  @include type-style('productive-heading-07');
+
+  color: $inverse-01;
+}
+
+.welcome__heading--subtitle {
+  font-weight: 600;
+}

packages/react/.storybook/main.js

@@ -9,5 +9,9 @@
 
 module.exports = {
   addons: ['storybook-preset-carbon'],
-  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
+  stories: [
+    './Welcome/Welcome.stories.js',
+    '../src/**/*-story.js',
+    '../src/**/*.stories.mdx',
+  ],
 };

packages/react/.storybook/manager-head.html

@@ -1,19 +1,55 @@
-<meta name="keywords" content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js">
-<meta name="description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js"
+/>
+<meta
+  name="description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
 
 <!-- Open Graph -->
-<meta property="og:title" content="Carbon Components React">
-<meta property="og:site_name" content="Carbon Components React">
-<meta property="og:description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
-<meta property="og:image" content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719">
-<meta property="og:url" content="http://react.carbondesignsystem.com">
+<meta property="og:title" content="Carbon Components React" />
+<meta property="og:site_name" content="Carbon Components React" />
+<meta
+  property="og:description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719"
+/>
+<meta property="og:url" content="http://react.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
 
 <!-- Social -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image:alt" content="Carbon Design System">
-<meta name="twitter:site" content="@_carbondesign">
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
 
 <!-- Storybook override -->
 <script>
-  document.title = 'Carbon Components React';
+  setTimeout(function () {
+    document.title = 'Carbon Components React';
+  }, 1000);
 </script>
+
+<!-- Style overrides -->
+<style>
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  .simplebar-content form span {
+    font-weight: 600;
+  }
+
+  .simplebar-content a button {
+    color: #161616;
+  }
+
+  .simplebar-content .sidebar-item.selected {
+    color: #161616;
+  }
+</style>

packages/react/.storybook/manager.js

@@ -4,6 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});
 
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow

packages/react/.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<!-- <link
+  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600&display=swap"
+  rel="stylesheet"
+/> -->
+<style>
+  .sbdocs-li {
+    list-style: circle;
+  }
+
+  .sbdocs-wrapper .sbdocs-a {
+    color: #0f62fe;
+  }
+
+  .sbdocs-wrapper .sbdocs-a:hover {
+    color: #0353e9;
+  }
+
+  .sbdocs-wrapper .sbdocs-h2 {
+    margin-bottom: 0;
+    padding-bottom: 12px;
+  }
+</style>

packages/react/.storybook/preview.js

@@ -12,12 +12,14 @@ import { themes } from '@storybook/theming';
 import { configureActions } from '@storybook/addon-actions';
 import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from './shared';
 import Container from './Container';
-import PackageInfo from './../package.json';
+import carbonTheme from './theme';
 
 const customPropertyPrefix = 'cds';
 
 addParameters({
   options: {
+    theme: carbonTheme,
+    showRoots: true,
     /**
      * We sort our stories by default alphabetically, however there are specific
      * keywords that will be sorted further down the sidebar, including
@@ -39,6 +41,7 @@ addParameters({
       // determine order later on.
       const UNKNOWN_KEYWORD = 3;
       const keywords = new Map([
+        ['welcome', 0],
         ['default', 1],
         ['usage', 2],
         ['playground', 4],
@@ -85,12 +88,6 @@ addParameters({
       // two ids
       return idA.localeCompare(idB);
     },
-    theme: {
-      ...themes.light,
-      brandTitle: `Carbon Components React v${PackageInfo.version}`,
-      brandUrl:
-        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
-    },
   },
 });
 
@@ -99,7 +96,11 @@ configureActions({
   limit: 10,
 });
 
-addDecorator((story) => <Container story={story} />);
+addDecorator((story, i) => {
+  return (
+    <Container id={`container-${story().type?.displayName}`} story={story} />
+  );
+});
 
 addons.getChannel().on(CARBON_CURRENT_THEME, (theme) => {
   document.documentElement.setAttribute('storybook-carbon-theme', theme);

packages/react/.storybook/styles.scss

@@ -104,7 +104,3 @@ $prefix: 'bx';
     }
   }
 }
-
-.sbdocs-li {
-  list-style: circle;
-}

packages/react/.storybook/theme.js

@@ -0,0 +1,51 @@
+import { create } from '@storybook/theming';
+import { g10 } from '@carbon/themes';
+import PackageInfo from './../package.json';
+
+const {
+  field01,
+  interactive01,
+  selectedUI,
+  text01,
+  inverse01,
+  ui01,
+  ui03,
+  ui04,
+  uiBackground,
+} = g10;
+
+export default create({
+  base: 'light',
+
+  colorPrimary: interactive01,
+  colorSecondary: selectedUI,
+
+  // UI
+  appBg: uiBackground,
+  appContentBg: ui01,
+  appBorderColor: ui03,
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: '"IBM Plex Sans", sans-serif',
+  fontCode: '"IBM Plex Mono", monospace',
+
+  // Text colors
+  textColor: text01,
+  textInverseColor: inverse01,
+
+  // Toolbar default and active colors
+  barTextColor: text01,
+  barSelectedColor: interactive01,
+  barBg: uiBackground,
+
+  // Form colors
+  inputBg: field01,
+  inputBorder: ui03,
+  inputTextColor: text01,
+  inputBorderRadius: 0,
+
+  brandTitle: `Carbon Components React v${PackageInfo.version}`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
+});

packages/react/package.json

@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "yarn clean && node scripts/build.js && rollup -c",
-    "build-storybook": "cross-env NODE_ENV=production build-storybook",
+    "build-storybook": "cross-env NODE_ENV=production build-storybook -s ./.storybook/assets",
     "clean": "rimraf es lib umd storybook-static build react-docgen.json",
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
     "start": "yarn storybook",
-    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000",
+    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280"
   },
   "peerDependencies": {
@@ -82,7 +82,7 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/theming": "^6.1.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",

packages/react/src/components/Accordion/Accordion-story.js

@@ -25,7 +25,7 @@ import Button from '../Button';
 import mdx from './Accordion.mdx';
 
 export default {
-  title: 'Accordion',
+  title: 'Components/Accordion',
   component: Accordion,
   subcomponents: {
     AccordionItem,

packages/react/src/components/AspectRatio/AspectRatio-story.js

@@ -14,7 +14,7 @@ import { AspectRatio } from './';
 import mdx from './AspectRatio.mdx';
 
 export default {
-  title: 'AspectRatio',
+  title: 'Components/AspectRatio',
   component: AspectRatio,
   decorators: [
     withKnobs,

packages/react/src/components/Breadcrumb/Breadcrumb-story.js

@@ -14,7 +14,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 import mdx from './Breadcrumb.mdx';
 
 export default {
-  title: 'Breadcrumb',
+  title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: {
     BreadcrumbItem,

packages/react/src/components/Button/Button-story.js

@@ -117,7 +117,7 @@ const props = {
 };
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   decorators: [withKnobs],
   parameters: {
     component: Button,

packages/react/src/components/Checkbox/Checkbox-story.js

@@ -17,7 +17,7 @@ import mdx from './Checkbox.mdx';
 const { prefix } = settings;
 
 export default {
-  title: 'Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
   subcomponents: {
     CheckboxSkeleton,

packages/react/src/components/CodeSnippet/CodeSnippet-story.js

@@ -13,7 +13,7 @@ import CodeSnippetSkeleton from './CodeSnippet.Skeleton';
 import mdx from './CodeSnippet.mdx';
 
 export default {
-  title: 'CodeSnippet',
+  title: 'Components/CodeSnippet',
   component: CodeSnippet,
   decorators: [withKnobs],
   parameters: {