docs(components): fixing up story book stories (#2073)

Teradata · Nov 8, 2023 · e499a5f · e499a5f
1 parent 9b5146f
commit e499a5f
Show file tree

Hide file tree

Showing 35 changed files with 125 additions and 132 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,5 +17,10 @@ module.exports = {
   features: {
     legacyMdx1: true, // 👈 Enables MDX v1 support
   },
+  docs: {
+    //👇 See the table below for the list of supported options
+    autodocs: true,
+    defaultName: 'Overview',
+  },
   staticDirs: [join(__dirname, './public')],
 };
diff --git a/libs/angular-dynamic-forms/project.json b/libs/angular-dynamic-forms/project.json
@@ -20,7 +20,14 @@
           "tsConfig": "libs/angular-dynamic-forms/tsconfig.lib.json"
         }
       },
-      "defaultConfiguration": "production"
+      "defaultConfiguration": "production",
+      "dependsOn": [
+        {
+          "projects": ["angular"],
+          "target": "build",
+          "params": "ignore"
+        }
+      ]
     },
     "test": {
       "executor": "@nrwl/jest:jest",

diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
@@ -1,4 +1,5 @@
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
+import '../data-table/data-table.stories.scss';
 
 import './app-shell';
 import '../action-ribbon/action-ribbon';
@@ -38,7 +39,7 @@ const updateActionRibbon = () => {
   }
 };
 
-const Template = ({ navClick, appName = '[App name]', sectionTitle = '' }) => {
+const Template = ({ appName = '[App name]', sectionTitle = '' }) => {
   document.addEventListener(
     'DOMContentLoaded',
     () => {

diff --git a/libs/components/src/button/button-overview.stories.mdx b/libs/components/src/button/button-overview.stories.mdx
@@ -1,9 +1,7 @@
-{/* button-overview.stories.mdx */}
-
 import { Canvas, DocsContainer, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Button/Overview"
+  title="Components/Button"
   parameters={{
     layout: 'fullscreen',
     previewTabs: {

diff --git a/libs/components/src/card/card.scss b/libs/components/src/card/card.scss
@@ -2,9 +2,17 @@
 
 @include card.core-styles;
 
+.mdc-typography--headline5 {
+  font-family: var(--mdc-typography-headline5-font-family);
+  font-size: var(--mdc-typography-headline5-font-size);
+  font-weight: var(--mdc-typography-headline5-font-weight);
+  line-height: var(--mdc-typography-headline5-line-height);
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
 .mdc-card__actions {
   color: var(--mdc-theme-text-primary-on-background);
-  justify-content:space-between;
+  justify-content: space-between;
 }
 
 .mdc-card__actions:first-of-type {
@@ -14,4 +22,4 @@
 
 .mdc-card.mdc-card--outlined {
   background-color: var(--mdc-theme-surface);
-}
+}
diff --git a/libs/components/src/card/cards.stories.js b/libs/components/src/card/cards.stories.js
@@ -1,5 +1,6 @@
 import './card';
 import tableContent from '../../stories/demos/table.content.html?raw';
+import '../data-table/data-table.stories.scss';
 
 export default {
   title: 'Components/Cards',

diff --git a/libs/components/src/code-snippet/code-snippet.stories.js b/libs/components/src/code-snippet/code-snippet.stories.js
@@ -1,4 +1,5 @@
 import './code-snippet';
+import '../dialog/dialog';
 import '../icon-button/icon-button';
 import '../button/button';
 

diff --git a/libs/components/src/data-table/data-table.stories.js b/libs/components/src/data-table/data-table.stories.js
@@ -1,3 +1,6 @@
+import '../icon/icon';
+import '../linear-progress/linear-progress';
+
 // Example Content
 import tableContent from '../../stories/demos/table.content.html?raw';
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';

diff --git a/libs/components/src/dialog/dialog-overview.stories.mdx b/libs/components/src/dialog/dialog-overview.stories.mdx
@@ -1,9 +1,7 @@
-{/* dialog-overview.stories.mdx */}
-
 import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Dialog/Overview"
+  title="Components/Dialog"
   parameters={{
     docs: {
       inlineStories: true,

diff --git a/libs/components/src/dialog/dialog.stories.js b/libs/components/src/dialog/dialog.stories.js
@@ -1,4 +1,5 @@
 import dialogComponent from '../../stories/demos/dialog.component';
+import './dialog';
 
 export default {
   title: 'Components/Dialog',

diff --git a/libs/components/src/empty-state/empty-state.stories.js b/libs/components/src/empty-state/empty-state.stories.js
@@ -3,7 +3,7 @@ import '../icon/icon';
 import '../card/card';
 
 export default {
-  title: 'Components/Empty State',
+  title: 'Components/Empty state',
   args: {
     headline: "You don't have access to this area",
     subtitle:

diff --git a/libs/components/src/expansion-panel/expansion-panel-overview.stories.mdx b/libs/components/src/expansion-panel/expansion-panel-overview.stories.mdx
@@ -1,10 +1,11 @@
-{/* expansion-panel-overview.stories.mdx */}
-
 import { Canvas, DocsContainer, Meta, Story } from '@storybook/addon-docs';
+import './expansion-panel';
+import './expansion-panel-item';
 import '../button/button';
+import incorrectExample from './expansion-panel-incorrect-example.png';
 
 <Meta
-  title="Components/Expansion-Panel/Overview"
+  title="Components/Expansion-Panel"
   parameters={{
     layout: 'fullscreen',
     previewTabs: {
@@ -19,9 +20,6 @@ import '../button/button';
   #story--example-button--text {
     margin-right: 8px;
   }
-  .sbdocs .docs-story {
-    background:black;
-  }
   .buttonFooter{
     display:flex; 
     align-items:center;

diff --git a/libs/components/src/icon-button/icon-button.stories.js b/libs/components/src/icon-button/icon-button.stories.js
@@ -15,11 +15,9 @@ export default {
   },
 };
 
-const Template = ({ disabled, icon, onClick }) => {
+const Template = ({ disabled, icon }) => {
   return `
-    <cv-icon-button id="myIconButton"
-      ${icon ? `icon="${icon}"` : null}
-      ${disabled ? `disabled` : null}>
+    <cv-icon-button icon="${icon}" ${disabled ? `disabled` : ``}>
     </cv-icon-button>`;
 };
 

diff --git a/libs/components/src/icon-checkbox/icon-checkbox.stories.js b/libs/components/src/icon-checkbox/icon-checkbox.stories.js
@@ -1,4 +1,5 @@
 import './icon-check-toggle';
+import '../icon/icon';
 
 export default {
   title: 'Components/Icon Checkbox',
@@ -11,68 +12,61 @@ export default {
 
 export const Template = ({ width, height, iconOnly }) => {
   return `
-    <div style="width:600px; display:flex; border:solid 1px var(--mdc-theme-border); padding: 16px 0px; justify-content: center; gap:16px;">
-      <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? ' iconOnly' : ''
-  }>
+  <cv-checkbox-icon  ${iconOnly ? ' iconOnly' : ''}>
         <cv-icon slot="icon">work</cv-icon>
         <div slot="text">Balanced</div>
         <div slot="text">Every week</div>
       </cv-checkbox-icon>
-      <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  }>
+      <cv-checkbox-icon  ${iconOnly ? 'iconOnly' : ''}>
         <cv-icon slot="icon">work</cv-icon>
         <div slot="text">Balanced</div>
         <div slot="text">Every week</div>
       </cv-checkbox-icon>
-    </div>
   `;
 };
 
-const GridExample = ({ width, height, iconOnly }) => {
+const GridExample = ({ iconOnly }) => {
   return `
-    <div class="mdc-layout-grid">
-      <div class="mdc-layout-grid__inner">
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
+  <div class="mdc-layout-grid">
+  <div class="mdc-layout-grid__inner">
+    <cv-checkbox-icon ${
+      iconOnly ? 'iconOnly' : ''
+    } class="mdc-layout-grid__cell">
           <cv-icon slot="icon">storage</cv-icon>
           <div slot="text">Data</div>
         </cv-checkbox-icon>
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
           <cv-icon slot="icon">description</cv-icon>
           <div slot="text">Files</div>
         </cv-checkbox-icon>
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
           <cv-icon slot="icon">bookmark</cv-icon>
           <div slot="text">Articles</div>
         </cv-checkbox-icon>
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
           <cv-icon slot="icon">folder</cv-icon>
           <div slot="text">Projects</div>
         </cv-checkbox-icon>
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
           <cv-icon slot="icon">assignment</cv-icon>
           <div slot="text">Notebooks</div>
         </cv-checkbox-icon>
-        <cv-checkbox-icon width=${width} height=${height} ${
-    iconOnly ? 'iconOnly' : ''
-  } class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
-          <cv-icon slot="icon" class="covalent-icon">script</cv-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon" >receipt_long</cv-icon>
           <div slot="text">Scripts</div>
         </cv-checkbox-icon>
-      </div>
-    </div>
-  
+        </div>
+        </div>
   `;
 };
 

diff --git a/libs/components/src/icon-radio/icon-radio.scss b/libs/components/src/icon-radio/icon-radio.scss
@@ -1,4 +1,6 @@
 :host {
+  --mdc-radio-unchecked-color: var(--mdc-theme-text-icon-on-background);
+
   .mdc-radio__background {
     position: absolute;
     top: 8px;

diff --git a/libs/components/src/list/list-overview.stories.mdx b/libs/components/src/list/list-overview.stories.mdx
@@ -1,9 +1,7 @@
-{/* button-overview.mdx */}
-
 import { Canvas, DocsContainer, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/List/Overview"
+  title="Components/List"
   parameters={{
     layout: 'fullscreen',
     previewTabs: {
@@ -40,7 +38,7 @@ A list item may contain:
       <span>Two-line list item</span>
       <span slot="secondary">Secondary line</span>
       <cv-icon slot="graphic">folder</cv-icon>
-      <cv-icon slot="meta">info</cv-icon>
+      <cv-icon slot="meta">help</cv-icon>
     </cv-list-item>
   </cv-list>
 </Canvas>

diff --git a/libs/components/src/side-sheet/side-sheet.stories.js b/libs/components/src/side-sheet/side-sheet.stories.js
@@ -2,6 +2,7 @@ import './side-sheet';
 import '../button/button';
 import { Active as ActiveStatusHeader } from '../status-header/status-header.stories';
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
+import '../data-table/data-table.stories.scss';
 
 export default {
   title: 'Components/Side sheet',

diff --git a/libs/components/src/snackbar/snackbar.scss b/libs/components/src/snackbar/snackbar.scss
@@ -1,7 +1,8 @@
 :host {
   --mdc-snackbar-action-color: var(--mdc-theme-text-primary-on-dark);
-
+  --mdc-theme-text-primary-on-background: var(--mdc-theme-text-primary-on-dark);
+
   ::slotted(cv-icon-button) {
-      color: var(--mdc-theme-text-icon-on-dark);
+    color: var(--mdc-theme-text-icon-on-dark);
   }
 }
diff --git a/libs/components/src/snackbar/snackbar.stories.js b/libs/components/src/snackbar/snackbar.stories.js
@@ -30,8 +30,9 @@ const Template = ({ label, leading, stacked }) => {
     <cv-snackbar
        class="my-snackbar"
        labelText="${label}"
-       ${leading ? 'leading' : null}
-       ${stacked ? 'stacked' : null}>
+       ${leading ? 'leading' : ''}
+       ${stacked ? 'stacked' : ''}
+       open>
       <cv-button slot="action">RETRY</cv-button>
       <cv-icon-button icon="close" slot="dismiss"></cv-icon-button>
     </cv-snackbar>`;

diff --git a/libs/components/src/status-header/status-header.stories.js b/libs/components/src/status-header/status-header.stories.js
@@ -1,5 +1,7 @@
 import './status-header';
 import './status-header-item';
+import '../icon/icon';
+import '../circular-progress/circular-progress';
 
 export default {
   title: 'Components/Status Header',
@@ -30,9 +32,14 @@ const renderIcon = (state, icon) => {
   }
 };
 
-const HeaderWithTabs = ({ state = 'neutral', status, title, icon }) => {
+const HeaderWithTabs = ({
+  state = 'neutral',
+  status = 'status',
+  title = 'title',
+  icon,
+}) => {
   return `
-    <cv-status-header state="${state}" statusText="${status}" statusHelper="Status" titleText="${title}">
+    <cv-status-header state="${state}" statusText="${status}" statusHelper="secondary text" titleText="${title}">
       ${renderIcon(state, icon)}
 
       <cv-icon-button slot="status-header-actions" icon="close" dialogAction="close" ></cv-icon-button>

diff --git a/libs/components/src/tab/tab-overview.stories.mdx b/libs/components/src/tab/tab-overview.stories.mdx
@@ -1,9 +1,7 @@
-{/* tabs-overview.stories.mdx */}
-
 import { Canvas, DocsContainer, Meta, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Tabs/Overview"
+  title="Components/Tabs"
   parameters={{
     layout: 'fullscreen',
     previewTabs: {

diff --git a/libs/components/src/text-lockup/text-lockup.stories.js b/libs/components/src/text-lockup/text-lockup.stories.js
@@ -4,7 +4,7 @@ import iconList from '../../../icons/material-codepoints.json';
 const MAT_ICON_LIST = Object.keys(iconList);
 
 export default {
-  title: 'Basics/Typography/Text lockup',
+  title: 'Components/Text lockup',
   argTypes: {
     scale: {
       options: ['large', 'small'],

diff --git a/libs/components/src/top-app-bar/top-app-bar.stories.js b/libs/components/src/top-app-bar/top-app-bar.stories.js
@@ -1,6 +1,7 @@
 import './top-app-bar';
 import './top-app-bar-fixed';
 import topAppBarComponent from '../../stories/demos/top-app-bar.component';
+import '../data-table/data-table.stories.scss';
 
 export default {
   title: 'Components/Top App Bar',

diff --git a/libs/components/src/typography/typography.stories.js b/libs/components/src/typography/typography.stories.js
@@ -1,7 +1,7 @@
 import './typography';
 
 export default {
-  title: 'Basics/Typography/Text',
+  title: 'Components/Text',
 };
 
 export const Basic = () => {