Stories rework: VaDropdown (#4044)

* refactor(storybook): Rework VaDropdown stories (#3676) * refactor(storybook): Review touches for VaAspectRatio.stories.ts (#3676) * refactor(storybook): Review touches for VaDropdown.stories.ts (#3676)
epicmaxco · Dec 8, 2023 · a5439fa · a5439fa
1 parent 00cce4d
commit a5439fa
Show file tree

Hide file tree

Showing 4 changed files with 479 additions and 392 deletions.
diff --git a/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.stories.ts b/packages/ui/src/components/va-aspect-ratio/VaAspectRatio.stories.ts
@@ -9,8 +9,8 @@ export default {
 export const Default = () => ({
   components: { VaAspectRatio },
   template: `
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="w-48 border-dashed border-2"
       :ratio="1/1"
     >
       Content
@@ -22,15 +22,15 @@ export const Ratio = () => ({
   components: { VaAspectRatio },
   template: `
     [1/1]
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="w-48 border-dashed border-2"
       :ratio="1/1"
     >
       Content
     </va-aspect-ratio>
     [16/9]
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="w-48 border-dashed border-2"
       :ratio="16/9"
     >
       Content
@@ -42,16 +42,16 @@ export const contentHeightAndWidth = () => ({
   components: { VaAspectRatio },
   template: `
     [200/200]
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="w-48 border-dashed border-2"
       :content-width="200"
       :content-height="200"
     >
       Content
     </va-aspect-ratio>
     [1280/720]
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="w-48 border-dashed border-2"
       :content-width="1280"
       :content-height="720"
     >
@@ -63,21 +63,13 @@ export const contentHeightAndWidth = () => ({
 export const maxWidth = () => ({
   components: { VaAspectRatio },
   template: `
-    [200]
-    <va-aspect-ratio 
-      :style="{ width: '500px', border: '1px solid black' }"
+    <va-aspect-ratio
+      class="border-dashed border-2"
+      style="width: 500px"
       :max-width="200"
       :ratio="16/9"
     >
-      Content
-    </va-aspect-ratio>
-    [500]
-    <va-aspect-ratio 
-      :style="{ width: '500px', border: '1px solid black' }"
-      :max-width="500"
-      :ratio="16/9"
-    >
-      Content
+      Max width 200px
     </va-aspect-ratio>
   `,
 })