ストーリーの構成を更新

uzabase · Nov 23, 2024 · 04e1ca8 · 04e1ca8
1 parent 5c85a5e
commit 04e1ca8
Showing 1 changed file with 18 additions and 32 deletions.
diff --git a/stories/dropdownAction/sp-dropdown-action.story.ts b/stories/dropdownAction/sp-dropdown-action.story.ts
@@ -1,7 +1,7 @@
-import "../../src/components/dropdownAction/sp-dropdown-action";
-import type { Meta, StoryObj } from "@storybook/web-components";
 import "@sp-design/token/lib/speeda-tokens.css";
+import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
+import "../../src/components/dropdownAction/sp-dropdown-action";
 
 const meta: Meta = {
   component: "sp-dropdown-action",
@@ -12,52 +12,38 @@ export default meta;
 
 type Story = StoryObj;
 
-export const Basic: Story = {};
-
-export const WithItems: Story = {
+export const Basic: Story = {
   render: () => html`
     <sp-dropdown-action label="ダッシュボード新規作成">
-      <sp-dropdown-action-item
-        >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item
-      >
       <sp-dropdown-action-item @click=${() => alert("企業を作成")}>企業を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>業界を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>技術を作成</sp-dropdown-action-item>
+      <sp-dropdown-action-item @click=${() => alert("業界を作成")}>業界を作成</sp-dropdown-action-item>
     </sp-dropdown-action>
   `,
 };
 
-export const Disabled: Story = {
+export const LongText: Story = {
   render: () => html`
-    <sp-dropdown-action label="ダッシュボード新規作成" disabled>
-      <sp-dropdown-action-item>企業を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>業界を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>技術を作成</sp-dropdown-action-item>
-    </sp-dropdown-action>
-  `,
-};
-
-export const Open: Story = {
-  render: () => html`
-    <sp-dropdown-action label="ダッシュボード新規作成" open>
-      <sp-dropdown-action-item>企業を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>業界を作成</sp-dropdown-action-item>
-      <sp-dropdown-action-item>技術を作成</sp-dropdown-action-item>
+    <sp-dropdown-action label="ダッシュボード新規作成">
+      <sp-dropdown-action-item>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item>
     </sp-dropdown-action>
   `,
 };
 
 export const RightPosition: Story = {
   render: () => html`
     <div style="display: flex; justify-content: end">
-      <sp-dropdown-action label="ダッシュボード新規作成" oep position="right">
-        <sp-dropdown-action-item
-          >AAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item
-        >
-        <sp-dropdown-action-item>企業を作成</sp-dropdown-action-item>
-        <sp-dropdown-action-item>業界を作成</sp-dropdown-action-item>
-        <sp-dropdown-action-item>技術を作成</sp-dropdown-action-item>
+      <sp-dropdown-action label="ダッシュボード新規作成" open position="right">
+        <sp-dropdown-action-item>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</sp-dropdown-action-item>
       </sp-dropdown-action>
     </div>
   `,
 };
+
+export const Disabled: Story = {
+  render: () => html`
+    <sp-dropdown-action label="ダッシュボード新規作成" disabled>
+      <sp-dropdown-action-item>企業を作成</sp-dropdown-action-item>
+      <sp-dropdown-action-item>業界を作成</sp-dropdown-action-item>
+    </sp-dropdown-action>
+  `,
+};