feat: update vc-product-card component (#1416)

## Description

## References
### Jira-link:
<!-- Put link to your task in Jira here -->
https://virtocommerce.atlassian.net/browse/VCST-2011
### Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.9.0-pr-1416-275f-275fd7f5.zip

client-app/shared/cart/components/add-to-cart.vue

@@ -18,11 +18,9 @@
     @update:model-value="onInput"
     @update:cart-item-quantity="onChange"
     @update:validation="onValidationUpdate"
-  />
-
-  <div v-if="$slots.default" class="vc-add-to-cart__badges">
+  >
     <slot />
-  </div>
+  </VcAddToCart>
 </template>
 
 <script setup lang="ts">

client-app/shared/catalog/components/product-card-list.vue

@@ -174,6 +174,8 @@ const price = computed(() => (props.product.hasVariations ? props.product.minVar
 
 <style scoped lang="scss">
 .vc-product-card-list {
+  @apply @container;
+
   grid-template-columns: 72px 1fr;
   grid-template-areas:
     "mobile-left name"

client-app/ui-kit/components/atoms/product-actions/vc-product-actions.vue

@@ -31,7 +31,7 @@ withDefaults(defineProps<IProps>(), {
     &--horizontal {
       --vc-icon-size: 1.25rem;
 
-      @media (min-width: theme("screens.md")) {
+      @container (min-width: theme("containers.xl")) {
         --vc-icon-size: 1rem;
       }
     }

client-app/ui-kit/components/atoms/product-title/vc-product-title.vue

@@ -17,7 +17,7 @@
       class="vc-product-title__text"
       @click="$emit('click', $event)"
     >
-      <slot />
+      <slot>{{ title }}</slot>
     </component>
   </div>
 </template>

client-app/ui-kit/components/atoms/property/vc-property.vue

@@ -10,14 +10,15 @@
     <div class="vc-property__label">{{ label }}</div>
     <div class="vc-property__dots"></div>
     <div class="vc-property__value">
-      <slot />
+      <slot>{{ value }}</slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 interface IProps {
   label: string;
+  value?: string | number | boolean | null | undefined;
   disabled?: boolean;
 }
 

client-app/ui-kit/components/molecules/product-price/vc-product-price.vue

@@ -2,8 +2,9 @@
   <div
     :class="[
       'vc-product-price',
-      `vc-product-price--align--${align}`,
       {
+        'vc-product-price--align--start': align === 'start',
+        'vc-product-price--align--end': align === 'end',
         'vc-product-price--single-line': singleLine,
         'vc-product-price--truncate': truncate,
         'vc-product-price--disabled': disabled,
@@ -38,9 +39,7 @@ interface IProps {
   disabled?: boolean;
 }
 
-withDefaults(defineProps<IProps>(), {
-  align: "start",
-});
+defineProps<IProps>();
 </script>
 
 <style lang="scss">
@@ -53,11 +52,11 @@ withDefaults(defineProps<IProps>(), {
 
   &--align {
     &--start {
-      @apply items-start text-start;
+      @apply justify-start text-start;
     }
 
     &--end {
-      @apply items-end text-end;
+      @apply justify-end text-end;
     }
   }
 

client-app/ui-kit/components/organisms/product-card/vc-product-card.stories.ts

@@ -1,7 +1,7 @@
 import { getMoney } from "@/ui-kit/mocks";
 import { VcProductCard, VcProductImage, VcAddToCart } from "..";
-import { VcProductVendor, VcProductProperties, VcProductTitle } from "../../atoms";
-import { VcChip, VcProductPrice } from "../../molecules";
+import { VcProductVendor, VcProductProperties, VcProductTitle, VcProductActions } from "../../atoms";
+import { VcChip, VcProductPrice, VcProductActionsButton } from "../../molecules";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
@@ -49,6 +49,17 @@ const availabilityData = {
   availableQuantity: 999999,
 };
 
+const actions = {
+  withBackground: true,
+  direction: "vertical",
+};
+
+const actionsButton = {
+  icon: "compare",
+  tooltipText: "Add to compare",
+  active: true,
+};
+
 const BasicTemplate: StoryFn<typeof VcProductCard> = (args) => ({
   components: { VcProductCard },
   setup: () => ({ args, title }),
@@ -125,14 +136,16 @@ ImageVendorPriceList.args = {
 const FullTemplate: StoryFn<typeof VcProductCard> = (args) => ({
   components: {
     VcProductCard,
+    VcProductActions,
+    VcProductActionsButton,
     VcProductImage,
     VcProductTitle,
     VcProductVendor,
     VcProductProperties,
     VcAddToCart,
     VcChip,
   },
-  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData }),
+  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
   template: `<VcProductCard v-bind="args">
     <VcProductImage v-bind="image" />
 
@@ -151,6 +164,11 @@ const FullTemplate: StoryFn<typeof VcProductCard> = (args) => ({
       <VcChip v-bind="chip1">1230 in Stock</VcChip>
       <VcChip v-bind="chip2">23 in Cart</VcChip>
     </VcAddToCart>
+
+    <VcProductActions v-bind="args.viewMode === 'grid' ? actions : {}">
+      <VcProductActionsButton />
+      <VcProductActionsButton v-bind="actionsButton" />
+    </VcProductActions>
   </VcProductCard>`,
 });
 
@@ -163,3 +181,97 @@ export const FullList = FullTemplate.bind({});
 FullList.args = {
   viewMode: "list",
 };
+
+const FullGridTemplateRecommended: StoryFn<typeof VcProductCard> = (args) => ({
+  components: {
+    VcProductCard,
+    VcProductActions,
+    VcProductActionsButton,
+    VcProductImage,
+    VcProductTitle,
+    VcProductVendor,
+    VcProductProperties,
+    VcAddToCart,
+    VcChip,
+  },
+  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
+  template: `<VcProductCard v-bind="args">
+    <template #media>
+      <VcProductImage v-bind="image" />
+
+      <VcProductActions v-bind="actions">
+        <VcProductActionsButton />
+        <VcProductActionsButton v-bind="actionsButton" />
+      </VcProductActions>
+    </template>
+
+    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+    <VcProductVendor>Product Vendor</VcProductVendor>
+
+    <VcProductProperties>
+      <VcProperty label="Label">Value</VcProperty>
+      <VcProperty label="Label">Value</VcProperty>
+      <VcProperty label="Label">Value</VcProperty>
+    </VcProductProperties>
+
+    <VcAddToCart v-bind="availabilityData">
+      <VcChip v-bind="chip1">1230 in Stock</VcChip>
+      <VcChip v-bind="chip2">23 in Cart</VcChip>
+    </VcAddToCart>
+
+    <VcProductPrice v-bind="price" />
+  </VcProductCard>`,
+});
+
+export const FullCardRecommendedWay = FullGridTemplateRecommended.bind({});
+FullCardRecommendedWay.args = {
+  viewMode: "grid",
+};
+
+const FullListTemplateRecommended: StoryFn<typeof VcProductCard> = (args) => ({
+  components: {
+    VcProductCard,
+    VcProductActions,
+    VcProductActionsButton,
+    VcProductImage,
+    VcProductTitle,
+    VcProductVendor,
+    VcProductProperties,
+    VcAddToCart,
+    VcChip,
+  },
+  setup: () => ({ args, title, price, chip1, chip2, image, availabilityData, actions, actionsButton }),
+  template: `<VcProductCard v-bind="args">
+    <template #media>
+      <VcProductImage v-bind="image" />
+
+      <VcProductActions>
+        <VcProductActionsButton />
+        <VcProductActionsButton v-bind="actionsButton" />
+      </VcProductActions>
+    </template>
+
+    <VcProductTitle v-bind="title">Product title Product title</VcProductTitle>
+
+    <VcProductVendor>Product Vendor</VcProductVendor>
+
+    <VcProductProperties>
+      <VcProperty label="Label">Value</VcProperty>
+      <VcProperty label="Label">Value</VcProperty>
+      <VcProperty label="Label">Value</VcProperty>
+    </VcProductProperties>
+
+    <VcAddToCart v-bind="availabilityData">
+      <VcChip v-bind="chip1">1230 in Stock</VcChip>
+      <VcChip v-bind="chip2">23 in Cart</VcChip>
+    </VcAddToCart>
+
+    <VcProductPrice v-bind="{ ...price, singleLine: false }" />
+  </VcProductCard>`,
+});
+
+export const FullListRecommendedWay = FullListTemplateRecommended.bind({});
+FullListRecommendedWay.args = {
+  viewMode: "list",
+};