feat(empty): resizing image proportions (#317)

* feat(empty): update design and features Signed-off-by: skdud4659 <[email protected]> * feat(empty): update event Signed-off-by: skdud4659 <[email protected]> * style(empty): apply typography Signed-off-by: skdud4659 <[email protected]> * feat(empty): resizing image proportions Signed-off-by: skdud4659 <[email protected]> --------- Signed-off-by: skdud4659 <[email protected]>
cloudforet-io · Feb 27, 2023 · 2ad14dc · 2ad14dc
1 parent 37bd281
commit 2ad14dc
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 31 deletions.
diff --git a/src/data-display/empty/PEmpty.stories.mdx b/src/data-display/empty/PEmpty.stories.mdx
@@ -53,7 +53,7 @@ export const Template = (args, {argTypes}) => ({
                     show-image
                     image-size="sm"
                 >
-                    No Items
+                    No Data
                 </p-empty>
                 </div>
             `,
@@ -76,19 +76,19 @@ export const Template = (args, {argTypes}) => ({
                         show-image
                         image-size="sm"
                     >
-                        No Items
+                        No Data
                     </p-empty>
                     <p-empty
                         show-image
                         image-size="md"
                     >
-                        No Items
+                        No Data
                     </p-empty>
                     <p-empty
                         show-image
                         image-size="lg"
                     >
-                        No Items
+                        No Data
                     </p-empty>
                 </div>
             `,
@@ -108,16 +108,16 @@ export const Template = (args, {argTypes}) => ({
             template: `
                 <div class="flex justify-evenly h-full w-full overflow p-8">
                 <p-empty
-                    title="No Items"
+                    title="No Data"
                 >
-                    No Items
+                    No Data
                 </p-empty>
                 <p-empty
                     show-image
                     image-size="sm"
-                    title="No Items"
+                    title="No Data"
                 >
-                    No Items
+                    No Data
                 </p-empty>
                 </div>
             `,
@@ -139,14 +139,14 @@ export const Template = (args, {argTypes}) => ({
                 <p-empty
                     show-button
                 >
-                    No Items
+                    No Data
                 </p-empty>
                 <p-empty
                     show-image
                     image-size="sm"
                     show-button
                 >
-                    No Items
+                    No Data
                 </p-empty>
                 </div>
             `,

diff --git a/src/data-display/empty/PEmpty.vue b/src/data-display/empty/PEmpty.vue
@@ -1,30 +1,39 @@
 <template>
     <div class="p-empty">
-        <slot name="image">
-            <img v-if="props.showImage"
-                 alt="empty-default-image"
-                 class="image-wrapper"
-                 :class="props.imageSize"
-                 :src="imgGhost"
-            >
-        </slot>
+        <div v-if="props.showImage"
+             class="image-wrapper"
+             :class="props.imageSize"
+        >
+            <slot name="image">
+                <img
+                    alt="empty-default-image"
+                    :src="imgGhost"
+                >
+            </slot>
+        </div>
         <div class="contents-wrapper">
             <p v-if="props.title"
                class="title"
             >
                 {{ props.title }}
             </p>
-            <slot name="default" />
+            <p class="description">
+                <slot name="default" />
+            </p>
+        </div>
+        <div
+            v-if="props.showButton"
+            class="button-wrapper"
+        >
+            <slot name="button">
+                <p-button
+                    :style-type="props.buttonStyleType"
+                    @click.stop="handleClickButton"
+                >
+                    {{ props.buttonTitle }}
+                </p-button>
+            </slot>
         </div>
-        <slot name="button">
-            <p-button v-if="props.showButton"
-                      class="button-wrapper"
-                      :style-type="props.buttonStyleType"
-                      @click.stop="handleClickButton"
-            >
-                {{ props.buttonTitle }}
-            </p-button>
-        </slot>
     </div>
 </template>
 
@@ -71,23 +80,43 @@ const handleClickButton = () => {
         &.sm {
             width: 5rem;
             height: 5rem;
+            > img {
+                width: 5rem;
+                height: 5rem;
+            }
         }
         &.md {
             width: 8rem;
             height: 8rem;
+            > img {
+                width: 8rem;
+                height: 8rem;
+            }
+        }
+        &.lg {
+            width: 12rem;
+            height: 12rem;
+            > img {
+                width: 12rem;
+                height: 12rem;
+            }
         }
     }
     .contents-wrapper {
+        @apply text-paragraph-md;
         text-align: center;
 
-        @apply text-label-md;
-
         .title {
             @apply font-bold text-violet-300;
         }
     }
     .button-wrapper {
         margin-top: 1rem;
+        .p-button {
+            min-width: auto;
+            width: fit-content;
+            max-width: 100%;
+        }
     }
 }
 </style>
diff --git a/src/data-display/empty/story-helper.ts b/src/data-display/empty/story-helper.ts
@@ -119,7 +119,7 @@ export const getEmptyArgTypes = (): ArgTypes => ({
         name: 'default',
         type: { name: 'string' },
         description: 'Slot for contents of empty',
-        defaultValue: 'No Items',
+        defaultValue: 'No Data',
         table: {
             type: {
                 summary: null,