refactor(storybook): Removed tailwind from VaDropdown stories (#3676)

Author: Fsss126

packages/ui/.storybook/assets/global.scss

@@ -0,0 +1,3 @@
+:root {
+  --border-dashed: 1px dashed black;
+}

packages/ui/.storybook/storybook-main.scss

@@ -6,4 +6,5 @@
 //@import "../components/vuestic-sass/global/normalize.scss";
 @import './assets/icons/icons.scss';
 @import './assets/fonts.scss';
+@import './assets/global';
 @import url('https://unpkg.com/[email protected]/dist/tailwind.min.css');

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
+      :style="{ width: '200px', border: 'var(--border-dashed)' }"
       :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
+      :style="{ width: '200px', border: 'var(--border-dashed)' }"
       :ratio="1/1"
     >
       Content
     </va-aspect-ratio>
     [16/9]
-    <va-aspect-ratio 
-      :style="{ width: '200px', border: '1px solid black' }"
+    <va-aspect-ratio
+      :style="{ width: '200px', border: 'var(--border-dashed)' }"
       :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
+      :style="{ width: '200px', border: 'var(--border-dashed)' }"
       :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
+      :style="{ width: '200px', border: 'var(--border-dashed)' }"
       :content-width="1280"
       :content-height="720"
     >
@@ -64,16 +64,16 @@ export const maxWidth = () => ({
   components: { VaAspectRatio },
   template: `
     [200]
-    <va-aspect-ratio 
-      :style="{ width: '500px', border: '1px solid black' }"
+    <va-aspect-ratio
+      :style="{ width: '500px', border: 'var(--border-dashed)' }"
       :max-width="200"
       :ratio="16/9"
     >
       Content
     </va-aspect-ratio>
     [500]
-    <va-aspect-ratio 
-      :style="{ width: '500px', border: '1px solid black' }"
+    <va-aspect-ratio
+      :style="{ width: '500px', border: 'var(--border-dashed)' }"
       :max-width="500"
       :ratio="16/9"
     >

packages/ui/src/components/va-dropdown/VaDropdown.stories.ts

@@ -179,7 +179,7 @@ export const Cursor = () => ({
           cursor
       >
         <template #anchor>
-          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
+          <div style="width: 8rem; height: 8rem; border: var(--border-dashed)">
             Right click
           </div>
         </template>
@@ -204,7 +204,7 @@ export const CursorWithTarget = () => ({
       >
         <template #anchor>
           <div
-              class="w-32 h-32 border-2 border-gray-1000 border-dashed"
+              style="width: 8rem; height: 8rem; border: var(--border-dashed)"
               ref="cursorTarget"
           >
             Right click
@@ -219,7 +219,7 @@ export const AnchorSelector = () => ({
   components: { VaDropdown },
   template: `
       <div
-          class="border-2 border-gray-1000 border-dashed"
+          style="border: var(--border-dashed)"
           id="anchor-selector"
       >
         Click me
@@ -239,9 +239,9 @@ export const InnerAnchorSelector = () => ({
           inner-anchor-selector="#inner-anchor-selector"
       >
         <template #anchor>
-          <div class="border-2 border-gray-1000 border-dashed">
+          <div style="border: var(--border-dashed)">
             <div
-                class="border-2 border-gray-1000 border-dashed m-4"
+                style="margin: 1rem; border: var(--border-dashed)"
                 id="inner-anchor-selector"
             >
               Click me
@@ -306,7 +306,7 @@ export const Autoplacement: StoryFn = () => ({
               :target="autoplacementTargetRef"
           >
             <template #anchor>
-              <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+              <div style="width: 6rem; height: 6rem; border: var(--border-dashed)">
               </div>
             </template>
             Dropdown
@@ -337,7 +337,7 @@ export const AutoplacementWithHeight: StoryFn = () => ({
               :target="autoplacementTargetRef"
           >
             <template #anchor>
-              <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+              <div style="width: 6rem; height: 6rem; border: var(--border-dashed)">
               </div>
             </template>
             <va-dropdown-content>
@@ -365,15 +365,15 @@ export const StickToEdges: StoryFn = () => ({
           ref="autoplacementTargetRef"
           v-scroll-to-middle-x
       >
-        <div style="height: 100%;width: 200%;display: grid;place-items: center;">
+        <div style="height: 100%; width: 200%; display: grid; place-items: center;">
           <va-dropdown
               :model-value="true"
               :stateful="false"
               :target="autoplacementTargetRef"
               stick-to-edges
           >
             <template #anchor>
-              <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+              <div style="width: 6rem; height: 6rem; border: var(--border-dashed)">
               </div>
             </template>
             <div>