feat: implement VcTextArea design (#418)

* feat: implement VcTextArea design * style: refactoring * feat: rename vc-text-area to vc-textarea * refactor: textarea * feat: change vc-textarea props Co-authored-by: Artem Makarov <[email protected]>
VirtoCommerce · Jan 16, 2023 · ba666f6 · ba666f6
1 parent b6300a5
commit ba666f6
Show file tree

Hide file tree

Showing 18 changed files with 378 additions and 231 deletions.
diff --git a/client-app/core/composables/index.ts b/client-app/core/composables/index.ts
@@ -14,3 +14,4 @@ export { default as usePageHead } from "./usePageHead";
 export { default as useProductsRoutes } from "./useProductsRoutes";
 export { default as useRouteQueryParam } from "./useRouteQueryParam";
 export { default as useThemeContext } from "./useThemeContext";
+export { default as useComponentId } from "./useComponentId";
diff --git a/client-app/core/composables/useComponentId.ts b/client-app/core/composables/useComponentId.ts
@@ -0,0 +1,5 @@
+import { getCurrentInstance } from "vue";
+
+export default function useComponentId(prefix = "") {
+  return prefix + getCurrentInstance()!.uid;
+}
diff --git a/client-app/pages/account/edit-quote.vue b/client-app/pages/account/edit-quote.vue
@@ -15,16 +15,13 @@
         icon="document-text"
         content-classes="px-6 pb-1 pt-2 lg:px-7 lg:pb-2"
       >
-        <div class="text-base leading-5 font-bold lg:text-15">
-          {{ $t("pages.account.quote_details.remarks_field_label") }}
-        </div>
-
-        <VcTextArea
+        <VcTextarea
+          :label="$t('pages.account.quote_details.remarks_field_label')"
           v-model="quote.comment"
-          :is-disabled="fetching"
+          :disabled="fetching"
           :max-length="1000"
           :rows="4"
-          class="mt-2 py-2 px-3 text-15 leading-5 font-medium resize-none lg:mt-1"
+          no-resize
           counter
         />
       </VcSectionWidget>

diff --git a/client-app/pages/account/view-quote.vue b/client-app/pages/account/view-quote.vue
@@ -11,12 +11,7 @@
     <VcLayoutWithRightSidebar>
       <template #main>
         <!-- Quote products -->
-        <VcSectionWidget
-          :title="$t('pages.account.quote_details.products')"
-          icon="cube"
-          hide-desktop-title
-          content-classes="px-6 pt-3 pb-0 md:p-7"
-        >
+        <VcSectionWidget :title="$t('pages.account.quote_details.products')" icon="cube" hide-desktop-title>
           <QuoteLineItems :items="quote.items!" readonly />
         </VcSectionWidget>
 
@@ -41,10 +36,10 @@
 
         <VcCardWidget
           :title="$t('pages.account.quote_details.quote_data')"
-          hide-mobile-title
           class="-order-1 lg:order-none"
+          hide-mobile-title
         >
-          <div class="-mt-1 mb-1 space-y-1">
+          <div class="space-y-1">
             <div class="flex text-base">
               <span class="font-bold mr-2">{{ $t("pages.account.quote_details.created") }}:</span>
 
@@ -62,11 +57,11 @@
         </VcCardWidget>
 
         <VcCardWidget v-if="shippingAddress" :title="$t('pages.account.quote_details.shipping_address')" icon="cube">
-          <VcAddressInfo class="-mt-1" :address="shippingAddress!" />
+          <VcAddressInfo :address="shippingAddress!" />
         </VcCardWidget>
 
         <VcCardWidget v-if="billingAddress" :title="$t('pages.account.quote_details.billing_address')" icon="cash">
-          <VcAddressInfo class="-mt-1" :address="billingAddress!" />
+          <VcAddressInfo :address="billingAddress!" />
         </VcCardWidget>
       </template>
     </VcLayoutWithRightSidebar>

diff --git a/client-app/pages/cart.vue b/client-app/pages/cart.vue
@@ -436,14 +436,13 @@
             class="shadow-inner pb-8 lg:shadow"
           >
             <div class="mx-5 xl:ml-28 lg:ml-6 xl:mr-11 lg:mr-6">
-              <p class="font-extrabold text-base mb-1" v-t="'pages.checkout.extra_section.comment_label'" />
-
-              <VcTextArea
+              <VcTextarea
                 v-model="comment"
-                :is-disabled="loading || creatingOrder || creatingQuote"
+                :label="$t('pages.checkout.extra_section.comment_label')"
+                :disabled="loading || creatingOrder || creatingQuote"
                 :max-length="1000"
                 :rows="4"
-                class="resize-none"
+                no-resize
                 counter
               />
             </div>

diff --git a/client-app/pages/checkout/shipping.vue b/client-app/pages/checkout/shipping.vue
@@ -1,8 +1,8 @@
 <template>
   <VcSectionWidget :title="'Specify shipping details'" icon="truck"></VcSectionWidget>
 
-  <VcSectionWidget :title="'Order comment'" icon="document-text" content-classes="px-6 pb-1 pt-3 lg:px-7 lg:pb-2">
-    <VcTextArea :max-length="1000" :rows="4" class="py-2 px-3 text-15 leading-5 font-medium resize-none" counter />
+  <VcSectionWidget :title="'Order comment'" icon="document-text">
+    <VcTextarea label="Normal input" placeholder="Please enter value" :max-length="1000" :rows="4" counter />
   </VcSectionWidget>
 </template>
 

diff --git a/client-app/shared/bulk-order/components/copy-and-paste.vue b/client-app/shared/bulk-order/components/copy-and-paste.vue
@@ -10,11 +10,11 @@
 
       <p class="mb-2 text-sm text-gray-500" v-html="$t('shared.bulk_order.copy_n_paste.guide_message')"></p>
 
-      <VcTextArea
+      <VcTextarea
         v-model.trim="text"
-        :is-disabled="loading"
+        :disabled="loading"
         :placeholder="$t('shared.bulk_order.copy_n_paste.text_area_placeholder')"
-        class="resize-none min-h-[292px] xl:min-h-[312px]"
+        :rows="14"
       />
 
       <div class="flex flex-wrap justify-between gap-3 mt-5 mb-2 md:mt-2 md:mb-0">

diff --git a/client-app/shared/bulk-order/components/manually.vue b/client-app/shared/bulk-order/components/manually.vue
@@ -21,7 +21,7 @@
         <div class="w-1/3 xl:w-1/4 max-w-[164px] font-bold" v-t="'shared.bulk_order.manually.quantity_label'"></div>
       </div>
 
-      <div class="flex flex-col gap-y-5">
+      <div class="flex flex-col gap-y-4">
         <div v-for="(item, index) in items" :key="index" class="flex flex-row gap-x-5">
           <div class="w-full">
             <VcInput v-model.trim="item.productSku" :is-disabled="loading" placeholder="SKU" />
@@ -53,7 +53,7 @@
         </button>
       </div>
 
-      <div class="flex flex-row flex-wrap md:flex-nowrap justify-between gap-3 mt-5 mb-2 md:mb-0">
+      <div class="flex flex-row flex-wrap md:flex-nowrap justify-between gap-3 mt-6 mb-2 md:mb-0">
         <VcButton
           :is-disabled="!dirty || loading"
           @click="resetItems"

diff --git a/client-app/shared/company/components/invite-member-dialog.vue b/client-app/shared/company/components/invite-member-dialog.vue
@@ -9,7 +9,7 @@
       <p v-for="error in commonErrors" :key="error">{{ error }}</p>
     </VcAlert>
 
-    <form class="p-6 py-5 sm:p-5 sm:border-b h-full">
+    <form class="space-y-4 p-6 py-5 sm:p-5 sm:border-b h-full">
       <VcSelect
         v-model="roleId"
         :items="roles"
@@ -20,41 +20,30 @@
         text-field="normalizedName"
         value-field="id"
         size="lg"
-        class="mb-4"
         is-required
       />
 
-      <p>
-        <span class="font-bold text-gray-900">{{ $t("shared.account.invite_member_dialog.emails_label") }}</span>
-        <span class="text-[color:var(--color-danger)]">*</span>
-      </p>
-
-      <VcTextArea
+      <VcTextarea
         v-model.trim="emails"
+        :label="$t('shared.account.invite_member_dialog.emails_label')"
         :placeholder="$t('shared.account.invite_member_dialog.emails_placeholder')"
-        :is-disabled="loading"
-        :error-message="errors.emails"
-        class="max-h-36 block"
-        rows="2"
+        :disabled="loading"
+        :message="errors.emails"
+        :error="!!errors.emails"
+        :rows="2"
+        required
       />
 
-      <div class="mb-4 text-xs text-[color:var(--color-danger)]">{{ errors.emails }}</div>
-
-      <p>
-        <span class="font-bold text-gray-900">{{ $t("shared.account.invite_member_dialog.message_label") }}</span>
-      </p>
-
-      <VcTextArea
+      <VcTextarea
         v-model.trim="message"
+        :label="$t('shared.account.invite_member_dialog.message_label')"
         :placeholder="$t('shared.account.invite_member_dialog.message_placeholder')"
-        :is-disabled="loading"
+        :disabled="loading"
         :max-length="1000"
-        :error-message="errors.message"
+        :message="errors.message"
+        :error="!!errors.message"
         rows="3"
-        class="max-h-48 block"
       />
-
-      <div class="text-xs text-[color:var(--color-danger)]">{{ errors.message }}</div>
     </form>
 
     <template #actions="{ close }">

diff --git a/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue b/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="vc-card-widget">
-    <slot name="title" v-if="title">
-      <div
-        :class="[
-          'vc-card-widget__title',
-          {
-            'vc-section-widget__title--hide-mobile': hideMobileTitle,
-            'vc-section-widget__title--hide-desktop': hideDesktopTitle,
-          },
-        ]"
-      >
-        <div class="vc-card-widget__icon">
-          <VcHexagonIcon :icon="icon" />
-        </div>
-
-        <VcTypography variant="h3" weight="extrabold">
-          {{ title }}
-        </VcTypography>
+    <div
+      :class="[
+        'vc-card-widget__title',
+        {
+          'vc-card-widget__title--hide-mobile': hideMobileTitle || !title,
+          'vc-card-widget__title--hide-desktop': hideDesktopTitle || !title,
+        },
+      ]"
+    >
+      <div v-if="icon" class="vc-card-widget__icon">
+        <VcHexagonIcon :icon="icon" />
       </div>
-    </slot>
 
-    <div :class="contentClasses ?? 'vc-card-widget__content'">
+      <VcTypography variant="h3" weight="extrabold">
+        {{ title }}
+      </VcTypography>
+    </div>
+
+    <div class="vc-card-widget__content">
       <slot />
     </div>
   </div>
@@ -40,16 +38,13 @@ defineProps({
     type: String,
     default: "",
   },
-
-  contentClasses: {
-    type: String,
-    default: null,
-  },
 });
 </script>
 
 <style lang="scss">
 .vc-card-widget {
+  $hideMobileTitle: "";
+
   @apply relative bg-[color:var(--color-white)];
 
   @media (min-width: theme("screens.lg")) {
@@ -68,11 +63,13 @@ defineProps({
     @apply flex items-center gap-3 px-7 pt-6 pb-3;
 
     @media (min-width: theme("screens.lg")) {
-      @apply px-6 py-3;
+      @apply px-5 py-3 border-b;
     }
 
     &--hide-mobile {
-      @apply hidden lg:block;
+      $hideMobileTitle: &;
+
+      @apply hidden lg:flex;
     }
 
     &--hide-desktop {
@@ -88,7 +85,11 @@ defineProps({
     @apply px-7 pt-3 pb-7;
 
     @media (min-width: theme("screens.lg")) {
-      @apply px-6 pb-5 border-t;
+      @apply p-5;
+    }
+
+    #{$hideMobileTitle} ~ & {
+      @apply pt-7 lg:pt-5;
     }
   }
 }

diff --git a/client-app/ui-kit/components/atoms/icon/vc-icon.vue b/client-app/ui-kit/components/atoms/icon/vc-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg :class="[`vc-icon`, `vc-icon--size-${size}`]">
+  <svg :class="[`vc-icon`, `vc-icon--size--${size}`]">
     <use :href="`/static/icons/basic/${name}.svg#icon`"></use>
   </svg>
 </template>
@@ -24,20 +24,22 @@ defineProps({
 .vc-icon {
   @apply text-inherit;
 
-  &--size-xxs {
-    @apply w-2.5 h-2.5;
-  }
+  &--size {
+    &--xxs {
+      @apply w-2.5 h-2.5;
+    }
 
-  &--size-xs {
-    @apply w-3.5 h-3.5;
-  }
+    &--xs {
+      @apply w-3.5 h-3.5;
+    }
 
-  &--size-sm {
-    @apply w-5 h-5;
-  }
+    &--sm {
+      @apply w-5 h-5;
+    }
 
-  &--size-md {
-    @apply w-6 h-6;
+    &--md {
+      @apply w-6 h-6;
+    }
   }
 }
 </style>
diff --git a/client-app/ui-kit/components/atoms/index.ts b/client-app/ui-kit/components/atoms/index.ts
@@ -33,7 +33,7 @@ export { default as VcSection } from "./section/vc-section.vue";
 export { default as VcSectionWidget } from "./section-widget/vc-section-widget.vue";
 export { default as VcSelect } from "./select/vc-select.vue";
 export { default as VcTabs } from "./tabs/vc-tabs.vue";
-export { default as VcTextArea } from "./text-area/vc-text-area.vue";
+export { default as VcTextarea } from "./textarea/vc-textarea.vue";
 export { default as VcTooltip } from "./tooltip/vc-tooltip.vue";
 export { default as VcTotalDisplay } from "./total-display/vc-total-display.vue";
 export { default as VcTransitionScale } from "./transition-scale/vc-transition-scale.vue";