Merge branch 'feat/cwc-sb8-merge-main' of https://github.com/annawen1…

…/carbon-for-ibm-dotcom into feat/cwc-sb8-merge-main
annawen1 · Apr 29, 2024 · 73015fa · 73015fa
2 parents 799eecb + dad9467
commit 73015fa
Show file tree

Hide file tree

Showing 16 changed files with 632 additions and 676 deletions.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss
@@ -13,9 +13,9 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/button' as *;
-@use '@carbon/styles/scss/components/checkbox';
-@use '../../../../carbon-web-components/src/components/modal/modal';
-@use '../../../../carbon-web-components/scss/components/accordion/accordion';
+@use '@carbon/styles/scss/components/checkbox' as *;
+@use '@carbon/web-components/scss/components/modal/modal' as *;
+@use '@carbon/web-components/scss/scss/components/accordion/accordion' as *;
 @use '../../globals/vars' as *;
 
 @mixin filter-panel {

diff --git a/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss
@@ -9,7 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
-@use '../../../../carbon-web-components/src/components/modal/modal' as *;
+@use '@carbon/web-components/scss/components/modal/modal' as *;
 @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 @mixin leaving-ibm {

diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
@@ -16,7 +16,7 @@
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;
-@use '../../../../carbon-web-components/src/components/tabs/tabs';
+@use '@carbon/web-components/scss/components/tabs/tabs' as *;
 
 @mixin tabs-extended {
   :host(#{$c4d-prefix}-tabs-extended),

diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
@@ -18,8 +18,19 @@ const stories = glob.sync(
     // '../docs/**/*.mdx',
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    // '../src/**/back-to-top.mdx',
+    // '../src/**/back-to-top.stories.ts',
     '../src/**/button.mdx',
     '../src/**/button.stories.ts',
+    '../src/**/button-group.mdx',
+    '../src/**/button-group.stories.ts',
+    '../src/**/card.mdx',
+    '../src/**/card.stories.ts',
+    '../src/**/carousel.mdx',
+    '../src/**/carousel.stories.ts',
+    '../src/**/card-in-card.mdx',
+    '../src/**/card-in-card.stories.ts',
+
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/...tton-group/__stories__/README.stories.mdx → ...button-group/__stories__/button-group.mdx b/...tton-group/__stories__/README.stories.mdx → ...button-group/__stories__/button-group.mdx
@@ -1,13 +1,9 @@
-import {
-  Preview,
-  Props,
-  Description,
-  Story,
-} from '@storybook/addon-docs/blocks';
-import '../button-group';
-import '../button-group-item';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import contributing from '../../../../../../docs/contributing-license.md?raw';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import * as ButtonGroupStories from './button-group.stories';
+
+<Meta of={ButtonGroupStories} />
 
 # Button Group
 
@@ -63,11 +59,11 @@ import '@carbon/web-components/es/icons/arrow--right/20.js';
 
 ## Props
 
-<Props of="c4d-button-group" />
+<ArgTypes of="c4d-button-group" />
 
 ### `<c4d-button-group-item>`
 
-<Props of="c4d-button-group-item" />
+<ArgTypes of="c4d-button-group-item" />
 
 ## Stable selectors
 
@@ -80,4 +76,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | `<c4d-button-group>`      | `data-autoid="c4d--button-group"`      | Component   |
 | `<c4d-button-group-item>` | `data-autoid="c4d--button-group-item"` | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts b/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
@@ -7,36 +7,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { number, select, text } from '@storybook/addon-knobs';
 import { html } from 'lit';
-import readme from './README.stories.mdx';
 import '../index';
 import { CTA_TYPE } from '../../cta/defs';
 
 import {
   hrefsForType,
   typeOptions,
-  types,
 } from '../../cta/__stories__/ctaTypeConfig';
 
-export const Default = (args) => {
-  const { buttons } = args?.ButtonGroup ?? {};
-  return html`
+
+const defaultArgs = {
+    length: 2,
+    ctaType: 'local'
+}
+
+let controls = {
+  length: {
+    control: 'number',
+    description: 'Number of buttons'
+  },
+  ctaType: {
+    control: 'select',
+    description: 'CTA type (cta-type)',
+    options: typeOptions
+  },
+};
+
+
+export const Default = {
+  args: defaultArgs,
+  argTypes: controls,
+  render: ({ length, ctaType}) => {
+    return html`
     <c4d-video-cta-container>
       <c4d-button-group>
-        ${buttons.map(
-          (elem) => html`
-            <c4d-button-group-item
-              href="${hrefsForType[elem.ctaType]}"
-              cta-type="${elem.ctaType}"
+
+        ${Array.from({length}).map((e, index) =>
+          html`
+          <c4d-button-group-item
+              href="${hrefsForType[ctaType]}"
+              cta-type="${ctaType}"
               download="IBM_Annual_Report_2019.pdf"
-              >${elem.copy}</c4d-button-group-item
+              >Button ${index+ 1}</c4d-button-group-item
             >
-          `
-        )}
+          `)}
       </c4d-button-group>
     </c4d-video-cta-container>
-  `;
+  `}
 };
 
 export default {
@@ -53,22 +71,7 @@ export default {
     `,
   ],
   parameters: {
-    ...readme.parameters,
     hasStoryPadding: true,
-    knobs: {
-      ButtonGroup: () => ({
-        buttons: Array.from({
-          length: number('Number of buttons', 2, {}),
-        }).map((_, i) => ({
-          copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-          ctaType: select(
-            `CTA type (cta-type) ${i + 1}`,
-            typeOptions,
-            types[CTA_TYPE.LOCAL]
-          ),
-        })),
-      }),
-    },
     propsSet: {
       default: {
         ButtonGroup: {

diff --git a/packages/web-components/src/components/button/__stories__/button.stories.ts b/packages/web-components/src/components/button/__stories__/button.stories.ts
@@ -95,6 +95,11 @@ export const Default = {
 
 const meta = {
   title: 'Components/Button',
+  parameters: {
+    controls: {
+      exclude:/href|copy/g
+    }
+  },
 };
 
 export default meta;
diff --git a/...rd-in-card/__stories__/README.stories.mdx → ...card-in-card/__stories__/card-in-card.mdx b/...rd-in-card/__stories__/README.stories.mdx → ...card-in-card/__stories__/card-in-card.mdx
@@ -1,11 +1,9 @@
-import {
-  Preview,
-  Props,
-  Description,
-  Story,
-} from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import contributing from '../../../../../../docs/contributing-license.md?raw';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import * as CardInCard from './card-in-card.stories';
+
+<Meta of={CardInCard} />
 
 # Card in Card
 
@@ -96,7 +94,7 @@ attribute to `card-in-card`.
 
 ## Props
 
-<Props of="c4d-card-in-card" />
+<ArgTypes of="c4d-card-in-card" />
 
 ## Stable selectors
 
@@ -108,4 +106,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | ----------------------- | --------------------------------- | ----------- |
 | `<c4d-card-in-card>`    | `data-autoid="c4d--card-in-card"` | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts
@@ -14,18 +14,57 @@ import '../../cta/card-cta-footer';
 import '../../cta/video-cta-container';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean } from '@storybook/addon-knobs';
 
 import imgXlg16x9 from '../../../../.storybook/storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
 import imgMd16x9 from '../../../../.storybook/storybook-images/assets/960/fpo--16x9--960x540--005.jpg';
 import imgSm4x3 from '../../../../.storybook/storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
 
-import readme from './README.stories.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+const defaultArgs = {
+  video: false,
+  alt: 'Image alt text',
+  defaultSrc: imgSm4x3,
+  heading: 'Standard Bank Group prepares to embrace Africa’s AI opportunity',
+  href: 'https://example.com',
+  eyebrow: 'Label'
+};
+
+const controls = {
+  video: {
+    control: 'boolean',
+    description: 'Video'
+  },
+  alt: {
+    control: 'text',
+    description: 'Image alt text (alt)',
+    if: { arg: 'video', eq: false }
+  },
+  defaultSrc: {
+    control: 'text',
+    description: 'Image src (defaultSrc)',
+    if: { arg: 'video', eq: false }
+  },
+  heading: {
+    control: 'text',
+    description: 'Card Heading (heading)',
+    if: { arg: 'video', eq: false }
+  },
+  href: {
+    control: 'text',
+    description: 'Card Href (href)',
+    if: { arg: 'video', eq: false }
+  },
+  eyebrow: {
+    control: 'text',
+    description: 'Card Eyebrow (eyebrow)'
+  }
+};
+
+
+export const Default = {
+  args: defaultArgs,
+  argTypes: controls,
+  render: ( {video, eyebrow, heading, defaultSrc, alt, href }) => {
 
-export const Default = (args) => {
-  const { video, eyebrow, heading, defaultSrc, alt, href } =
-    args?.['c4d-card-in-card'] ?? {};
   if (video) {
     const card = document.querySelector('c4d-card') as any;
     const videoCopy = card?.videoTitle;
@@ -58,7 +97,8 @@ export const Default = (args) => {
       <c4d-card-footer></c4d-card-footer>
     </c4d-card-in-card>
   `;
-};
+}
+}
 
 export default {
   title: 'Components/Card in card',
@@ -72,48 +112,9 @@ export default {
     `,
   ],
   parameters: {
-    ...readme.parameters,
     hasStoryPadding: true,
-    knobs: {
-      'c4d-card-in-card': () => {
-        const video = boolean('video', false);
-        const alt = video
-          ? undefined
-          : textNullable('Image alt text (alt):', 'Image alt text');
-        const defaultSrc = video
-          ? undefined
-          : textNullable('Image src (defaultSrc):', imgSm4x3);
-        const heading = video
-          ? undefined
-          : textNullable(
-              'Card Heading (heading):',
-              'Standard Bank Group prepares to embrace Africa’s AI opportunity'
-            );
-        const href = video
-          ? undefined
-          : textNullable('Card Href (href):', 'https://example.com');
-        return {
-          video,
-          alt,
-          defaultSrc,
-          heading,
-          href,
-          eyebrow: textNullable('Card Eyebrow (eyebrow):', 'Label'),
-        };
-      },
-    },
-    propsSet: {
-      default: {
-        'c4d-card-in-card': {
-          video: false,
-          alt: 'Image alt text',
-          defaultSrc: imgSm4x3,
-          heading:
-            'Standard Bank Group prepares to embrace Africa’s AI opportunity',
-          href: 'https://example.com',
-          eyebrow: 'Label',
-        },
-      },
-    },
+    controls: {
+      exclude:/defaultSrc|eyebrow|heading|href|copy|alt/g
+    }
   },
 };
diff --git a/...rc/components/card/__stories__/README.mdx → .../src/components/card/__stories__/card.mdx b/...rc/components/card/__stories__/README.mdx → .../src/components/card/__stories__/card.mdx
@@ -1,4 +1,4 @@
-import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import contributing from '../../../../../../docs/contributing-license.md?raw';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 import * as CardStories from './card.stories';
@@ -247,7 +247,7 @@ General note:
 
 ## Props
 
-<ArgsTable of="c4d-card" />
+<ArgTypes of="c4d-card" />
 
 ## Stable selectors