From 4e857c0befd628eb73369e26f7838c39b6ce0cd0 Mon Sep 17 00:00:00 2001
From: Alexandra Petrova <aleksandra.petrova@smile2impress.com>
Date: Wed, 29 Nov 2023 19:19:46 +0300
Subject: [PATCH] refactor(storybook): Review touches for
 VaAspectRatio.stories.ts (#3676)

---
 .../va-aspect-ratio/VaAspectRatio.stories.ts  | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 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
index f3cbcda5a2..0ced9ca533 100644
--- 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>
   `,
 })