chore(merge): resolve merge conflict

carbon-design-system · Jan 5, 2024 · 97993b4 · 97993b4
2 parents fe8f0b2 + deff5b2
commit 97993b4
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 127 deletions.
diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 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 type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
@@ -15,6 +24,8 @@ const stories = glob.sync(
     '../src/**/link.stories.ts',
     '../src/**/file-uploader.mdx',
     '../src/**/file-uploader.stories.ts',
+    '../src/**/overflow-menu.mdx',
+    '../src/**/overflow-menu.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts
diff --git a/...nts/overflow-menu/overflow-menu-story.mdx → ...omponents/overflow-menu/overflow-menu.mdx b/...nts/overflow-menu/overflow-menu-story.mdx → ...omponents/overflow-menu/overflow-menu.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as OverflowMenuStories from './overflow-menu.stories';
+
+<Meta of={OverflowMenuStories} />
 
 # Overflow menu
 
@@ -24,8 +27,8 @@ import '@carbon/web-components/es/components/overflow-menu/index.js';
 import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
 ```
 
-<Description markdown={`${cdnJs({ components: ['overflow-menu'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['overflow-menu'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -50,16 +53,16 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-overflow-menu open>`) and `false` means not setting the attribute (e.g.
 `<cds-overflow-menu>` without `open` attribute).
 
-<Props of="cds-overflow-menu" />
+<ArgsTable of="cds-overflow-menu" />
 
 ## `<cds-overflow-menu-body>` attributes and properties
 
-<Props of="cds-overflow-menu-body" />
+<ArgsTable of="cds-overflow-menu-body" />
 
 ## `<cds-overflow-menu-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-overflow-menu-item disabled>`) and `false` means not setting the attribute
 (e.g. `<cds-overflow-menu-item>` without `disabled` attribute).
 
-<Props of="cds-overflow-menu-item" />
+<ArgsTable of="cds-overflow-menu-item" />
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.stories.ts
@@ -0,0 +1,146 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 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 { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { OVERFLOW_MENU_SIZE } from './overflow-menu';
+import './overflow-menu-body';
+import './overflow-menu-item';
+import storyDocs from './overflow-menu.mdx';
+import { prefix } from '../../globals/settings';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import Filter16 from '@carbon/icons/lib/filter/16';
+
+const sizes = {
+  [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL,
+  [`Medium size (default) (${OVERFLOW_MENU_SIZE.MEDIUM})`]:
+    OVERFLOW_MENU_SIZE.MEDIUM,
+  [`Lg size (${OVERFLOW_MENU_SIZE.LARGE})`]: OVERFLOW_MENU_SIZE.LARGE,
+};
+
+const args = {
+  flipped: false,
+  iconDescription: 'Options',
+  open: false,
+  index: 1,
+  size: OVERFLOW_MENU_SIZE.MEDIUM,
+};
+
+const argTypes = {
+  flipped: {
+    control: 'boolean',
+    description: '<code>true</code> if the menu alignment should be flipped.',
+  },
+  iconDescription: {
+    control: 'text',
+    description: 'The icon description.',
+  },
+  open: {
+    control: 'boolean',
+    description: '<code>true</code> if the menu should be open.\n',
+  },
+  index: {
+    control: 'number',
+    description: 'The index for the item which should be focused in the menu.',
+  },
+  size: {
+    control: 'select',
+    description:
+      'Specify the size of the OverflowMenu. Currently supports either <code>sm</code>, <code>md</code> (default) or <code></code>lg</code> as an option.',
+    options: sizes,
+  },
+};
+
+export const Default = {
+  render: () => {
+    return html`
+      <cds-overflow-menu>
+        ${OverflowMenuVertical16({
+          class: `${prefix}--overflow-menu__icon`,
+          slot: 'icon',
+        })}
+        <span slot="tooltip-content"> Options </span>
+        <cds-overflow-menu-body>
+          <cds-overflow-menu-item>Stop app</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Restart app</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Rename app</cds-overflow-menu-item>
+          <cds-overflow-menu-item disabled
+            >Clone and move app</cds-overflow-menu-item
+          >
+          <cds-overflow-menu-item
+            >Edit routes and access</cds-overflow-menu-item
+          >
+          <cds-overflow-menu-item divider danger
+            >Delete app</cds-overflow-menu-item
+          >
+        </cds-overflow-menu-body>
+      </cds-overflow-menu>
+    `;
+  },
+};
+
+export const RenderCustomIcon = {
+  render: () => {
+    return html`
+      <cds-overflow-menu>
+        ${Filter16({
+          class: `${prefix}--overflow-menu__icon`,
+          slot: 'icon',
+        })}
+        <span slot="tooltip-content">Options</span>
+        <cds-overflow-menu-body>
+          <cds-overflow-menu-item>Filter A</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Filter B</cds-overflow-menu-item>
+        </cds-overflow-menu-body>
+      </cds-overflow-menu>
+    `;
+  },
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { flipped, iconDescription, open, index, size } = args ?? {};
+    return html`
+      <cds-overflow-menu ?open="${open}" size="${size}" index=${index}>
+        ${OverflowMenuVertical16({
+          class: `${prefix}--overflow-menu__icon`,
+          slot: 'icon',
+        })}
+        <span slot="tooltip-content"> ${iconDescription} </span>
+        <cds-overflow-menu-body ?flipped="${ifDefined(flipped)}">
+          <cds-overflow-menu-item>Stop app</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Restart app</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Rename app</cds-overflow-menu-item>
+          <cds-overflow-menu-item disabled
+            >Clone and move app</cds-overflow-menu-item
+          >
+          <cds-overflow-menu-item
+            >Edit routes and access</cds-overflow-menu-item
+          >
+          <cds-overflow-menu-item divider danger
+            >Delete app</cds-overflow-menu-item
+          >
+        </cds-overflow-menu-body>
+      </cds-overflow-menu>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Overflow Menu',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts b/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -10,7 +10,7 @@
 import { render } from 'lit';
 
 import CDSOverflowMenu from '../../src/components/overflow-menu/overflow-menu';
-import { Playground } from '../../src/components/overflow-menu/overflow-menu-story';
+import { Playground } from '../../src/components/overflow-menu/overflow-menu.stories';
 
 const template = (props?) =>
   Playground({