@carbon/ibm-products-web-components 0.3.0 → 0.4.0

package/src/components/tearsheet/tearsheet.stories.ts

@@ -16,6 +16,7 @@ import {
 import './index';
 import '@carbon/web-components/es/components/tabs/index.js';
 import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/dropdown/index.js';
 import '@carbon/web-components/es/components/progress-indicator/index.js';
 import '@carbon/web-components/es/components/progress-bar/index.js';
 import '@carbon/web-components/es/components/button/index.js';
@@ -25,10 +26,15 @@ import { prefix } from '../../globals/settings';
 
 import styles from './story-styles.scss?lit';
 import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+
 const toggleButton = () => {
   document.querySelector(`${prefix}-tearsheet`)?.toggleAttribute('open');
 };
 
+const cancelButton = () => {
+  document.querySelector(`${prefix}-tearsheet`)?.removeAttribute('open');
+};
+
 const widths = {
   // 'default (narrow)': null,
   [`Narrow (${TEARSHEET_WIDTH.NARROW})`]: TEARSHEET_WIDTH.NARROW,
@@ -205,7 +211,7 @@ const headerActions = {
 const getActionToolbarItems = (index) => {
   switch (index) {
     case 1:
-      return html`<cds-dropdown slot="header-actions">
+      return html`<cds-dropdown slot="header-actions" value="option 1">
         ${['option 1', 'option 2', 'option 3', 'option 4'].map(
           (option) => html` <cds-dropdown-item value="${option}"
             >${option}</cds-dropdown-item
@@ -250,7 +256,12 @@ const actionItems = {
 
 const toActions = (kinds: BUTTON_KIND[]) => {
   return kinds?.map((kind) => {
-    return html`<cds-button key=${kind} slot="actions" kind=${kind}>
+    return html`<cds-button
+      key=${kind}
+      slot="actions"
+      kind=${kind}
+      @click=${kind === 'ghost' && cancelButton}
+    >
       ${kind.charAt(0).toUpperCase() + kind.slice(1)}
     </cds-button>`;
   });
@@ -359,21 +370,21 @@ const getSlug = (index) => {
 
 export const Default = {
   args: {
-    actionItems: getActionItems(4),
-    headerActions: getActionToolbarItems(0),
-    content: getContent(2),
-    label: getLabel(1),
+    actionItems: 4,
+    headerActions: 0,
+    content: 2,
+    label: 1,
     open: false,
     influencerWidth: TEARSHEET_INFLUENCER_WIDTH.NARROW,
     influencerPlacement: TEARSHEET_INFLUENCER_PLACEMENT.LEFT,
-    influencer: getInfluencer(0),
+    influencer: 0,
     preventCloseOnClickOutside: false,
     selectorInitialFocus: '',
     width: TEARSHEET_WIDTH.WIDE,
-    slug: getSlug(0),
+    slug: 0,
     description: 'Description used to describe the flow if need be.',
     title: 'Title used to designate the overarching flow of the tearsheet.',
-    headerNavigation: getNavigation(0),
+    headerNavigation: 0,
   },
   argTypes: {
     actionItems: {
@@ -465,10 +476,10 @@ export const Default = {
         width=${args.width}
       >
         <!-- default slotted content -->
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">${args.title}</span>` : ''}
@@ -479,19 +490,19 @@ export const Default = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
     `;
   },
@@ -501,7 +512,7 @@ export const WithNavigation = {
   ...Default,
   args: {
     ...Default.args,
-    headerNavigation: getNavigation(1),
+    headerNavigation: 1,
   },
 };
 
@@ -509,7 +520,7 @@ export const WithInfluencer = {
   ...Default,
   args: {
     ...Default.args,
-    influencer: getInfluencer(2),
+    influencer: 2,
   },
 };
 
@@ -517,8 +528,8 @@ export const WithAllHeaderItemsAndInfluencer = {
   ...Default,
   args: {
     ...Default.args,
-    headerActions: getActionToolbarItems(2),
-    influencer: getInfluencer(2),
+    headerActions: 2,
+    influencer: 2,
   },
 };
 
@@ -581,10 +592,10 @@ export const StackingTemplate = {
         <cds-button @click="${() => toggleButton('two')}"
           >Toggle tearsheet two</cds-button
         >
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">One ${args.title}</span>` : ''}
@@ -595,19 +606,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
       <c4p-tearsheet
         data-index="two"
@@ -624,10 +635,10 @@ export const StackingTemplate = {
         <cds-button @click="${() => toggleButton('three')}"
           >Toggle tearsheet three</cds-button
         >
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">Two ${args.title}</span>` : ''}
@@ -638,19 +649,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
       <c4p-tearsheet
         data-index="three"
@@ -664,10 +675,10 @@ export const StackingTemplate = {
         width=${args.width}
       >
         <!-- default slotted content -->
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">Three ${args.title}</span>` : ''}
@@ -678,19 +689,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
     `;
   },

package/src/components/tearsheet/tearsheet.ts

@@ -314,7 +314,7 @@ class CDSTearsheet extends HostListenerMixin(LitElement) {
 
     this._hasSlug = childItems.length > 0;
     if (this._hasSlug) {
-      childItems[0].setAttribute('size', 'lg');
+      childItems[0].setAttribute('size', 'sm');
       this.setAttribute('slug', '');
     } else {
       this.removeAttribute('slug');

package/src/globals/internal/storybook-cdn.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * 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 packageJson from '../../../package.json';
+
+/* eslint-disable max-len */
+
+/**
+ *
+ */
+/**
+ * Renders the component(s) script tag content and returns back the string
+ *
+ * @param {Array} components array of component names
+ * @param {string} tag tag folder
+ */
+function _renderScript(components, tag) {
+  let scripts = '';
+  components.forEach((component) => {
+    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js"></script>\n`;
+  });
+  return scripts;
+}
+
+/**
+ * This is the markdown block for JS via CDN
+ *
+ * @param {Array} components array of components to render
+ * @param components.components components to render
+ */
+export const cdnJs = ({ components }) => {
+  return `
+### JS (via CDN)
+
+ > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues.
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+
+ #### Right-to-left (RTL) versions
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+   `;
+};
+
+/**
+ * This is the markdown block for CSS via CDN
+ */
+export const cdnCss = () => {
+  return `
+### Carbon CDN style helpers (optional)
+
+There are optional CDN artifacts available that can assist with global Carbon
+styles in lieu of including into your specific application bundle.
+
+[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\n\n
+  `;
+};

package/tasks/build.js

@@ -22,6 +22,7 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import path from 'path';
 import postcss from 'postcss';
 import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
 
 import * as packageJson from '../package.json' assert { type: 'json' };
 
@@ -125,6 +126,7 @@ function getRollupConfig(input, rootDir, outDir, iconInput) {
         targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }],
         flatten: false,
       }),
+      [json()],
       nodeResolve({
         browser: true,
         mainFields: ['jsnext', 'module', 'main'],