feat(tag/tooltip): cwc storybook controls (carbon-design-system#11381)

web-components/packages/carbon-web-components/.storybook/main.ts

@@ -44,6 +44,10 @@ const stories = glob.sync(
     '../src/**/skip-to-content.stories.ts',
     '../src/**/slider.mdx',
     '../src/**/slider.stories.ts',
+    '../src/**/tag.mdx',
+    '../src/**/tag.stories.ts',
+    '../src/**/tooltip.mdx',
+    '../src/**/tooltip.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

web-components/packages/carbon-web-components/src/components/tag/tag-story.mdx → web-components/packages/carbon-web-components/src/components/tag/tag.mdx

@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as TagStories from './tag.stories';
+
+<Meta of={TagStories} /> 
 
 # Tag
 
@@ -69,21 +72,12 @@ function App() {
     html`  <cds-tag filter type="gray" title="Clear selection">This is a tag ${Download16({ slot: 'icon' })}</cds-tag>`
   );
 }
-
+```
 
 ## `<cds-tag>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-tag disabled>`) and `false` means not setting the attribute (e.g.
 `<cds-tag>` without `disabled` attribute).
 
-<Props of="cds-tag" />
-
-## `<cds-filter-tag>` attributes and properties
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<cds-filter-tag disabled>`) and `false` means not setting the attribute (e.g.
-`<cds-filter-tag>` without `disabled` attribute).
-
-<Props of="cds-filter-tag" />
-```
+<ArgsTable of="cds-tag" />

web-components/packages/carbon-web-components/src/components/tag/tag.stories.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * 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 { html } from 'lit';
+import { TAG_SIZE } from './tag';
+import './index';
+import storyDocs from './tag.mdx';
+
+const sizes = {
+  [`Medium size (${TAG_SIZE.MEDIUM})`]: TAG_SIZE.MEDIUM,
+  [`Small size (${TAG_SIZE.SMALL})`]: TAG_SIZE.SMALL,
+};
+
+const types = [
+  'red',
+  'magenta',
+  'purple',
+  'blue',
+  'cyan',
+  'teal',
+  'green',
+  'gray',
+  'cool-gray',
+  'warm-gray',
+  'high-contrast',
+  'outline',
+];
+
+const defaultArgs = {
+  disabled: false,
+  filter: false,
+  title: 'Clear filter',
+  size: TAG_SIZE.MEDIUM,
+};
+
+const controls = {
+  disabled: {
+    control: 'boolean',
+    description: 'Specify if the Tag is disabled',
+  },
+  filter: {
+    control: 'boolean',
+    description: 'Determine if Tag is a filter/chip',
+  },
+  size: {
+    control: 'select',
+    description:
+      'Specify the size of the Tag. Currently supports either sm or "md" (default) sizes.',
+    options: sizes,
+  },
+  title: {
+    control: 'text',
+    description: 'Text to show on clear filters',
+  },
+  type: {
+    control: 'select',
+    description: 'Specify the type of the Tag.',
+    options: types,
+  },
+};
+
+export const Default = {
+  render: () =>
+    html`${types.map((e) => html`<cds-tag type="${e}">Tag content</cds-tag>`)}`,
+};
+
+export const Playground = {
+  argTypes: controls,
+  args: defaultArgs,
+  render: ({ filter, size, type, title, disabled }) => html`
+    <cds-tag
+      ?filter="${filter}"
+      size="${size}"
+      type="${type}"
+      title="${title}"
+      ?disabled="${disabled}">
+      Tag content
+    </cds-tag>
+  `,
+};
+
+const meta = {
+  title: 'Components/Tag',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;

web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss

@@ -29,7 +29,6 @@
   justify-content: center;
   width: $spacing-07;
   height: $spacing-07;
-  border: 1px solid theme.$border-subtle;
 }
 
 .sb-tooltip-trigger svg {

web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx → web-components/packages/carbon-web-components/src/components/tooltip/tooltip.mdx

@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 
 # Tooltip
@@ -60,4 +60,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-tooltip open>`) and `false` means not setting the attribute (e.g.
 `<cds-tooltip>` without `open` attribute).
 
-<Props of="cds-tooltip" />
+<ArgsTable of="cds-tooltip" />