feat: implement vc-shape component

client-app/assets/styles/_colors.scss

@@ -8,8 +8,8 @@
 
 --price-color: var(--color-price, var(--color-success-600));
 
---hexagon-icon-bg-color: var(--color-hexagon-icon-bg, var(--color-secondary-500));
---hexagon-icon-color: var(--color-hexagon-icon, var(--color-additional-50));
+--shape-icon-bg-color: var(--color-shape-icon-bg, var(--color-secondary-500));
+--shape-icon-color: var(--color-shape-icon, var(--color-additional-50));
 
 --empty-list-icon: var(--color-empty-list-icon, var(--color-primary-500));
 
@@ -52,4 +52,6 @@
 --vc-radio-button-focus-color: var(--focus-color);
 --vc-product-title-link-color: var(--link-color);
 --vc-product-title-link-hover-color: var(--link-hover-color);
+--vc-shape-icon-bg-color: var(--shape-icon-bg-color);
+--vc-shape-icon-color: var(--shape-icon-color);
 }

client-app/public/config/presets/black-gold.json

@@ -106,8 +106,8 @@
 
   "color_price": "#cd9a3a",
 
-  "color_hexagon_icon_bg": "#e0c287",
-  "color_hexagon_icon": "#ffffff",
+  "color_shape_icon_bg": "#e0c287",
+  "color_shape_icon": "#ffffff",
 
   "color_empty_list_icon": "#d8b167",
 

client-app/public/config/presets/purple-pink.json

@@ -106,8 +106,8 @@
 
   "color_price": "#901f50",
 
-  "color_hexagon_icon_bg": "#c9b8ed",
-  "color_hexagon_icon": "#ffffff",
+  "color_shape_icon_bg": "#c9b8ed",
+  "color_shape_icon": "#ffffff",
 
   "color_empty_list_icon": "#d84786",
 

client-app/public/config/presets/watermelon.json

@@ -106,8 +106,8 @@
 
   "color_price": "#43875f",
 
-  "color_hexagon_icon_bg": "#ed6665",
-  "color_hexagon_icon": "#ffffff",
+  "color_shape_icon_bg": "#ed6665",
+  "color_shape_icon": "#ffffff",
 
   "color_empty_list_icon": "#aeb85f",
 

client-app/shared/catalog/components/product-titled-block.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <div class="flex items-center gap-2">
-      <VcHexagonIcon :icon="icon" />
+      <VcShape :icon="icon" />
 
       <h2 class="text-xl font-bold uppercase text-neutral-950">{{ title }}</h2>
     </div>

client-app/ui-kit/components/atoms/index.ts

@@ -11,7 +11,6 @@ export { default as VcDateSelector } from "./date-selector/vc-date-selector.vue"
 export { default as VcDialog } from "./dialog/vc-dialog.vue";
 export { default as VcEmptyView } from "./empty-view/vc-empty-view.vue";
 export { default as VcExpansionPanels } from "./expansion-panels/vc-expansion-panels.vue";
-export { default as VcHexagonIcon } from "./hexagon-icon/vc-hexagon-icon.vue";
 export { default as VcIcon } from "./icon/vc-icon.vue";
 export { default as VcImage } from "./image/vc-image.vue";
 export { default as VcInfinityScrollLoader } from "./infinity-scroll-loader/vc-infinity-scroll-loader.vue";

client-app/ui-kit/components/atoms/types.d.ts

@@ -20,7 +20,6 @@ declare module "vue" {
     VcExpansionPanels: typeof Components.VcExpansionPanels;
     VcInputDetails: typeof Components.VcInputDetails;
     VcIcon: typeof Components.VcIcon;
-    VcHexagonIcon: typeof Components.VcHexagonIcon;
     VcImage: typeof Components.VcImage;
     VcInfinityScrollLoader: typeof Components.VcInfinityScrollLoader;
     VcLabel: typeof Components.VcLabel;

client-app/ui-kit/components/molecules/index.ts

@@ -37,6 +37,7 @@ export { default as VcProductPrice } from "./product-price/vc-product-price.vue"
 export { default as VcProductTotal } from "./product-total/vc-product-total.vue";
 export { default as VcRating } from "./rating/vc-rating.vue";
 export { default as VcSelect } from "./select/vc-select.vue";
+export { default as VcShape } from "./shape/vc-shape.vue";
 export { default as VcSteps } from "./steps/vc-steps.vue";
 export { default as VcTextarea } from "./textarea/vc-textarea.vue";
 export { default as VcVendor } from "./vendor/vc-vendor.vue";

client-app/ui-kit/components/molecules/shape/vc-shape.stories.ts

@@ -0,0 +1,39 @@
+import { VcShape } from "..";
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Components/Molecules/VcShape",
+  component: VcShape,
+} as Meta<typeof VcShape>;
+
+const Template: StoryFn<typeof VcShape> = (args) => ({
+  components: { VcShape },
+  setup: () => ({ args }),
+  template: '<VcShape v-bind="args" />',
+});
+
+export const Basic = Template.bind({});
+
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: "adjustments",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  icon: "adjustments",
+  size: "100px",
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  img: "/static/images/home/main-banner.webp",
+  size: "300px",
+};
+
+export const ImageIcon = Template.bind({});
+ImageIcon.args = {
+  img: "/static/images/home/main-banner.webp",
+  size: "300px",
+  icon: "adjustments",
+};

client-app/ui-kit/components/molecules/shape/vc-shape.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="vc-shape" :style="style">
+    <slot>
+      <VcIcon v-if="icon" :name="icon" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+interface IProps {
+  size?: number | string;
+  icon?: string;
+  img?: string;
+  mask?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  size: "2.5rem",
+  mask: "polygon",
+});
+
+const iconUrl = ref<string>("");
+
+const loadIcon = async (name?: string) => {
+  const module = (await import(`@/assets/icons/basic/${name}.svg?url`)) as { default: string };
+  iconUrl.value = module.default || "";
+};
+
+const _size = computed(() => (typeof props.size === "number" ? `${props.size}px` : props.size));
+
+const style = computed(() => ({
+  width: _size.value,
+  height: _size.value,
+  backgroundImage: props.img ? `url(${props.img})` : "none",
+  maskImage: iconUrl.value && iconUrl.value !== "null" ? `url(${iconUrl.value})` : "none",
+}));
+
+watch(
+  () => props.mask,
+  (newIconName: string) => {
+    void loadIcon(newIconName);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss">
+.vc-shape {
+  --size: var(--vc-shape-icon-size, 2.5rem);
+  --bg-color: var(--vc-shape-icon-bg-color, theme("colors.secondary.500"));
+  --vc-icon-color: var(--vc-shape-icon-color, theme("colors.additional.50"));
+  --vc-icon-size: 50%;
+
+  @apply relative flex items-center justify-center size-[--size] bg-[--bg-color] bg-cover bg-center;
+
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+</style>

client-app/ui-kit/components/molecules/types.d.ts

@@ -22,6 +22,7 @@ declare module "vue" {
     VcExpansionPanel: typeof Components.VcExpansionPanel;
     VcFileUploader: typeof Components.VcFileUploader;
     VcFile: typeof Components.VcFile;
+    VcShape: typeof Components.VcShape;
     VcInput: typeof Components.VcInput;
     VcItemPrice: typeof Components.VcItemPrice;
     VcItemPriceCatalog: typeof Components.VcItemPriceCatalog;
@@ -43,6 +44,7 @@ declare module "vue" {
     VcProductTotal: typeof Components.VcProductTotal;
     // @deprecated
     VcSelect: typeof Components.VcSelect;
+    VcShape: typeof Components.VcShape;
     VcSteps: typeof Components.VcSteps;
     VcTextarea: typeof Components.VcTextarea;
     VcRating: typeof Components.VcRating;

client-app/ui-kit/components/molecules/widget/vc-widget.vue

@@ -21,7 +21,7 @@
           <slot name="header" v-bind="{ collapsible, collapsed: _collapsed }">
             <span v-if="prependIcon || $slots.prepend" class="vc-widget__prepend-append">
               <slot name="prepend">
-                <VcHexagonIcon v-if="prependIcon" :icon="prependIcon" />
+                <VcShape v-if="prependIcon" :icon="prependIcon" />
               </slot>
             </span>
 

package.json

@@ -70,6 +70,7 @@
     "utility-types": "^3.11.0",
     "uuid": "^10.0.0",
     "vee-validate": "~4.13.1",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.12",
     "vue-html-secure": "^1.0.10",
     "vue-i18n": "^9.14.1",

vite.config.ts

@@ -6,6 +6,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 import { defineConfig, loadEnv, splitVendorChunkPlugin } from "vite";
 import { checker } from "vite-plugin-checker";
 import mkcert from "vite-plugin-mkcert";
+import svgLoader from "vite-svg-loader";
 import type { ProxyOptions, UserConfig, PluginOption } from "vite";
 
 function getProxy(target: ProxyOptions["target"], options: Omit<ProxyOptions, "target"> = {}): ProxyOptions {
@@ -41,6 +42,7 @@ export default defineConfig(({ command, mode }): UserConfig => {
             certFileName: "public.pem",
           })
         : undefined,
+      svgLoader(),
       vue(),
       graphql() as PluginOption,
       isServe