feat(popover): Small code adjustments

carbon-design-system · Jan 17, 2024 · 769081e · 769081e
1 parent 76d58be
commit 769081e
Showing 1 changed file with 38 additions and 39 deletions.
diff --git a/packages/carbon-web-components/src/components/popover/popover.stories.ts b/packages/carbon-web-components/src/components/popover/popover.stories.ts
@@ -58,45 +58,6 @@ const controls = {
   },
 };
 
-export const Playground = {
-  name: 'Playground',
-  argTypes: controls,
-  args: {
-    caret: true,
-    highContrast: false,
-    align: POPOVER_ALIGNMENT.BOTTOM,
-    dropShadow: true,
-    open: true,
-  },
-
-  decorators: [
-    (story) => html`<div class="mt-10 flex justify-center">${story()}</div>`,
-  ],
-  render: (args) => {
-    return html`
-      <style>
-        ${styles}
-      </style>
-      <cds-popover
-        ?open=${args.open}
-        ?caret=${args.caret}
-        ?highContrast=${args.highContrast}
-        align=${args.align}
-        ?dropShadow=${args.dropShadow}>
-        <div class="playground-trigger">${Checkbox16()}</div>
-        <cds-popover-content>
-          <div class="p-3">
-            <p class="popover-title">Available storage</p>
-            <p class="popover-details">
-              This server has 150 GB of block storage remaining.
-            </p>
-          </div>
-        </cds-popover-content>
-      </cds-popover>
-    `;
-  },
-};
-
 export const TabTip = {
   name: 'TabTip',
   render: () => {
@@ -206,6 +167,44 @@ export const TabTip = {
   },
 };
 
+export const Playground = {
+  argTypes: controls,
+  args: {
+    caret: true,
+    highContrast: false,
+    align: POPOVER_ALIGNMENT.BOTTOM,
+    dropShadow: true,
+    open: true,
+  },
+
+  decorators: [
+    (story) => html`<div class="mt-10 flex justify-center">${story()}</div>`,
+  ],
+  render: (args) => {
+    return html`
+      <style>
+        ${styles}
+      </style>
+      <cds-popover
+        ?open=${args.open}
+        ?caret=${args.caret}
+        ?highContrast=${args.highContrast}
+        align=${args.align}
+        ?dropShadow=${args.dropShadow}>
+        <div class="playground-trigger">${Checkbox16()}</div>
+        <cds-popover-content>
+          <div class="p-3">
+            <p class="popover-title">Available storage</p>
+            <p class="popover-details">
+              This server has 150 GB of block storage remaining.
+            </p>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+    `;
+  },
+};
+
 const meta = {
   title: 'Components/Popover',
   parameters: {