docs(storybook): regroup components

carbon-design-system · Feb 24, 2021 · e65f137 · e65f137
1 parent 25d6cdb
commit e65f137
Show file tree

Hide file tree

Showing 68 changed files with 119 additions and 81 deletions.
diff --git a/packages/react/.storybook/Container.js b/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={{

diff --git a/packages/react/.storybook/Welcome/Welcome.js b/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>
+  );
+};
diff --git a/...t/.storybook/WelcomePage/Welcome-story.js → ...act/.storybook/Welcome/Welcome.stories.js b/...t/.storybook/WelcomePage/Welcome-story.js → ...act/.storybook/Welcome/Welcome.stories.js
@@ -11,7 +11,7 @@ import React from 'react';
 import { Welcome as Intro } from './Welcome';
 
 export default {
-  title: ' Welcome',
+  title: ' Getting Started/ Welcome',
   component: Intro,
 };
 

diff --git a/...eact/.storybook/WelcomePage/carbon_bg.png → ...es/react/.storybook/Welcome/carbon_bg.png b/...eact/.storybook/WelcomePage/carbon_bg.png → ...es/react/.storybook/Welcome/carbon_bg.png
diff --git a/packages/react/.storybook/Welcome/welcome.scss b/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;
+}
diff --git a/packages/react/.storybook/WelcomePage/Welcome.js b/packages/react/.storybook/WelcomePage/Welcome.js
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -10,7 +10,7 @@
 module.exports = {
   addons: ['storybook-preset-carbon'],
   stories: [
-    './WelcomePage/Welcome-story.js',
+    './Welcome/Welcome.stories.js',
     '../src/**/*-story.js',
     '../src/**/*.stories.mdx',
   ],

diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -19,6 +19,7 @@ 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
@@ -68,8 +69,6 @@ addParameters({
         if (idB.includes(keyword)) {
           matches.set(idB, weight);
         }
-
-        console.log(idA);
       }
 
       // If we have matches for either id, then we will compare the ids based on
@@ -97,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);

diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.js b/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,

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/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,

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -116,7 +116,7 @@ const props = {
 };
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   decorators: [withKnobs],
   parameters: {
     component: Button,

diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/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,

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/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: {

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -52,7 +52,7 @@ const directions = {
 };
 
 export default {
-  title: 'ComboBox',
+  title: 'Components/ComboBox',
   component: ComboBox,
   parameters: {
     docs: {

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -184,7 +184,7 @@ const scrollingContent = (
 );
 
 export default {
-  title: 'ComposedModal',
+  title: 'Components/ComposedModal',
   decorators: [withKnobs],
   parameters: {
     component: ComposedModal,

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -42,7 +42,7 @@ const props = {
 };
 
 export default {
-  title: 'ContentSwitcher',
+  title: 'Components/ContentSwitcher',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/CopyButton/CopyButton-story.js b/packages/react/src/components/CopyButton/CopyButton-story.js
@@ -26,7 +26,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'CopyButton',
+  title: 'Components/CopyButton',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js b/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js
@@ -26,7 +26,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Filtering',
+  title: 'Components/DataTable/Filtering',
   component: DataTable,
   subcomponents: {
     TableToolbar,

diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
@@ -21,7 +21,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Selection',
+  title: 'Components/DataTable/Selection',
   component: DataTable,
   subcomponents: {
     TableSelectAll,

diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js b/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js
@@ -19,7 +19,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Sorting',
+  title: 'Components/DataTable/Sorting',
   component: DataTable,
   subcomponents: {
     Table,

diff --git a/...react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js b/...react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
@@ -37,7 +37,7 @@ import DataTable, {
 import { batchActionClick, rows, headers } from '../shared';
 
 export default {
-  title: 'DataTable/Development',
+  title: 'Components/DataTable/Development',
 };
 
 export const Example = (props) => {

diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -24,7 +24,7 @@ import { rows, headers } from '../shared';
 import mdx from '../../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Expansion',
+  title: 'Components/DataTable/Expansion',
   component: DataTable,
   subcomponents: {
     TableExpandHeader,

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
@@ -31,24 +31,24 @@ const props = () => ({
 });
 
 export default {
-  title: 'DataTableSkeleton',
+  title: 'Components/DataTable',
   decorators: [withKnobs],
 
   parameters: {
     component: DataTableSkeleton,
   },
 };
 
-export const Default = () => (
+export const Skeleton = () => (
   <div style={{ width: '800px' }}>
     <DataTableSkeleton {...props()} />
     <br />
   </div>
 );
 
-Default.storyName = 'default';
+Skeleton.storyName = 'default';
 
-Default.parameters = {
+Skeleton.parameters = {
   info: {
     text: `
         Skeleton states are used as a progressive loading state while the user waits for content to load.

diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js
@@ -81,7 +81,7 @@ const props = {
 };
 
 export default {
-  title: 'DatePicker',
+  title: 'Components/DatePicker',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -81,7 +81,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Dropdown',
+  title: 'Components/Dropdown',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
@@ -11,7 +11,7 @@ import { ErrorBoundary, ErrorBoundaryContext } from './';
 import Button from '../Button';
 
 export default {
-  title: 'ErrorBoundary',
+  title: 'Components/ErrorBoundary',
 
   parameters: {
     component: ErrorBoundary,

diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -140,7 +140,7 @@ const props = {
 };
 
 export default {
-  title: 'FileUploader',
+  title: 'Components/FileUploader',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/FluidForm/FluidForm-story.js b/packages/react/src/components/FluidForm/FluidForm-story.js
@@ -37,7 +37,7 @@ const InvalidPasswordProps = {
 };
 
 export default {
-  title: 'FluidForm',
+  title: 'Experimental/FluidForm',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/Form/Form-story.js b/packages/react/src/components/Form/Form-story.js
@@ -135,7 +135,7 @@ const buttonEvents = {
 RadioButton.displayName = 'RadioButton';
 
 export default {
-  title: 'Form',
+  title: 'Components/Form',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/FormLabel/FormLabel-story.js b/packages/react/src/components/FormLabel/FormLabel-story.js
@@ -12,7 +12,7 @@ import Tooltip from '../Tooltip';
 import mdx from './FormLabel.mdx';
 
 export default {
-  title: 'FormLabel',
+  title: 'Components/FormLabel',
 
   parameters: {
     component: FormLabel,

diff --git a/packages/react/src/components/Grid/Grid-story.js b/packages/react/src/components/Grid/Grid-story.js
@@ -4,7 +4,7 @@ import { Grid, Row, Column } from './';
 import mdx from './Grid.mdx';
 
 export default {
-  title: 'Grid',
+  title: 'Components/Grid',
   component: Grid,
   subcomponents: {
     Row,

diff --git a/packages/react/src/components/Icon/Icon-story.js b/packages/react/src/components/Icon/Icon-story.js
@@ -64,7 +64,7 @@ const propsSkeleton2 = {
 };
 
 export default {
-  title: 'Icon',
+  title: 'Deprecated/Icon',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -34,7 +34,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'InlineLoading',
+  title: 'Components/InlineLoading',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
@@ -31,7 +31,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Link',
+  title: 'Components/Link',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/Loading/Loading-story.js b/packages/react/src/components/Loading/Loading-story.js
@@ -18,7 +18,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Loading',
+  title: 'Components/Loading',
   decorators: [withKnobs],
 
   parameters: {

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -127,7 +127,7 @@ const props = {
 };
 
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   decorators: [withKnobs],
   parameters: {
     component: Modal,