spoko-design-system 0.2.39 → 0.2.41

package/index.ts

@@ -22,7 +22,11 @@ export { default as ProductDetailsList } from './src/components/ProductDetailsLi
 export { default as FeaturesList } from './src/components/FeaturesList.vue';
 export { default as ProductCodes } from './src/components/ProductCodes.vue';
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
+export { default as ProductButton } from './src/components/Product/ProductButton.vue';
 
+export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
+export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';
+export { default as SubCategoryLink } from './src/components/Category/SubCategoryLink.vue';
 
 // Astro Components
 export { default as Copyright } from './src/components/Copyright.astro';
@@ -31,3 +35,24 @@ export { default as Faq } from './src/components/Faq.astro';
 export { default as FaqItem } from './src/components/FaqItem.astro';
 export { default as ProductNumber } from './src/components/Product/ProductNumber.astro';
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
+
+export { default as CategoriesCarousel } from './src/components/Category/CategoriesCarousel.astro';
+export { default as CategoriesSidebar } from './src/components/Category/CategoriesSidebar.astro';
+export { default as CategoryDetails } from './src/components/Category/CategoryDetails.astro';
+export { default as CategorySection } from './src/components/Category/CategorySection.astro';
+
+// Utils: Product
+export { default as getPriceFormatted } from './src/utils/product/getPriceFormatted';
+export { default as getProductChecklist } from './src/utils/product/getProductChecklist';
+
+// Utils: SEO
+export { default as getShorterDescription } from './src/utils/seo/getShorterDescription';
+
+// Utils: Text
+export { default as formatDate } from './src/utils/text/formatDate';
+export { default as formatLocaleNumber } from './src/utils/text/formatLocaleNumber';
+export { default as formatPad } from './src/utils/text/formatPad';
+export { default as getNumberFormatted } from './src/utils/text/getNumberFormatted';
+export { default as getTranslatedLink } from './src/utils/text/getTranslatedLink';
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -9,7 +9,8 @@
     ".": {
       "import": "./index.ts",
       "require": "./index.ts"
-    }
+    },
+    "./styles/*": "./src/styles/*"
   },
   "scripts": {
     "dev": "astro dev",

package/src/components/Category/CategoriesCarousel.astro

@@ -0,0 +1,101 @@
+---
+const { activeCategorySlug, locale, class: className } = Astro.props;
+
+import { getTranslatedLink } from "@utils/text/getTranslatedLink"
+import { getMainCategoryList } from "@utils/category/getMainCategoryList"
+import { Image } from 'astro:assets'
+
+import i18next, { t } from "i18next";
+const categories = await getMainCategoryList()
+const imgDomain = 'https://api.polo.blue/img/';
+
+const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0
+---
+<!-- <div class={`cat-menu ${className ? className : ''}`} 
+  data-pagefind-ignore
+  itemscope itemtype="https://schema.org/SiteNavigationElement"
+  transition:persist={`catcarousel${activeIndex}`}
+  transition:animate="none"
+> -->
+  <swiper-container 
+    class={`categories-carousel flex pb-1 sm:pb-0 bg-white cat-menu ${className ? className : ''}`}
+    data-pagefind-ignore
+    itemscope itemtype="https://schema.org/SiteNavigationElement"
+    transition:persist={`catcarousel${activeIndex}`}
+    transition:animate="none"
+    data-active={activeIndex}
+    initial-slide={activeIndex}
+    space-between="0"
+    slides-per-view="auto"
+    scrollbar="true"
+    draggable="true"
+    keyboard
+    free-mode
+    data-off-observer
+    run-callbacks-on-init="false"
+  >
+    {
+      categories.map((category, index) => (
+        <swiper-slide itemprop="hasPart" role="presentation"
+          class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active': ''}`}
+        >
+          <a href={getTranslatedLink(`/${category.slug}/`)}
+            class="carousel-item"
+          >
+            {
+              // itemprop="url" 
+              // role="menuitem"
+              // aria-label={ t(`cat.${category.slug}.name`) }
+            }
+
+              <Image 
+                src={`${imgDomain}${category.photo}`} 
+                alt={t(`cat.${category.slug}.desc`).split('. ', 1)[0]}
+                height="70"
+                width="70"
+                format="avif"
+                loading="eager"
+                onerror="this.style.display='none';"
+                class="cats-img"
+              />
+              <div class="swiper-lazy-preloader"></div>
+   
+            <div class="cat-name"
+              // itemprop="name"
+            >
+              { t(`cat.${category.slug}.name`) }
+            </div>
+          </a>
+        </swiper-slide>
+      ))
+    }
+
+  </swiper-container>
+<!-- </div> -->
+
+<style lang="scss">
+.active {
+  @apply bg-blue-700 text-white bg-opacity-100;
+
+  &:not(:hover) .cats-img {
+    filter: invert(100%);
+    // @apply filter-invert;
+  }
+  
+}
+
+.categories-carousel {
+  @apply overflow-hidden;
+
+  &.swiper-initialized {
+    .img-preloader {
+      display: none;
+    }
+  }
+}
+
+.swiper-slide {
+  @apply transition w-[calc(100%/3.55)] min-w-[calc(100%/3.55)] sm:w-35 sm:min-w-35 3xl:min-w-[calc(100%/12.5-4px)];
+}
+
+</style>

package/src/components/Category/CategoriesSidebar.astro

@@ -0,0 +1,187 @@
+---
+// import { Category } from 'types/index';
+import CategoryLink from "@components/Category/CategoryLink.vue"
+import SubCategoryLink from "@components/Category/SubCategoryLink.vue"
+
+
+// import { useTranslation } from "i18next-vue";
+// const { i18next, t } = useTranslation();
+
+import i18next, { t } from 'i18next';
+import { Icon } from 'astro-icon/components';
+import { isSidebarOpen } from '../../stores/info.js';
+import { useStore } from '@nanostores/vue';
+import { getCategoryList } from "@utils/category/getCategoryList"
+
+
+import { createSubCatLink, createSubSubCatLink} from "@utils/db"
+// import type { SubCategory } from 'types/index'
+
+
+// read the store value with the `useStore` hook
+const $isSidebarOpen = useStore(isSidebarOpen);
+const { catParameters, activeSubCategorySlug, activeSubSubCategorySlug, locale } = Astro.props;
+
+
+
+const isActiveSubCategory = (subCategorySlug: string) => {
+  getCategoryList(i18next.language) //  hack to create translations
+  return categories.activeSubCategory !== null && categories.activeSubCategory === subCategorySlug
+}
+
+// const hideSidebar = () => {
+//   sidebar.setMode(false)
+// }
+
+// const isActiveSubCategory = null
+
+// const sidebar = reactive({
+//   isShow: true
+// })
+
+const categories = {
+  activeCategory: catParameters.category,
+  activeSubCategory: activeSubCategorySlug ? activeSubCategorySlug : catParameters.category.children ? catParameters.category.children[0] : null,
+  activeSubSubCategory: null
+}
+
+const info = {
+  isMobile: false,
+}
+
+const isShowCatMobileMenu = false
+
+---
+
+<div data-pagefind-ignore id="sidebar" transition:name="sidebar" transition:animate="fade"
+
+class="
+sidebar mb-4 fixed top-0 ease delay-100 flex-col ml-0 overflow-hidden z-40 sm:z-0 md:(relative transition-all w-1/4 max-w-64 min-w-56 overflow-visible)" >
+  <!-- :class="showSidebar ? 'w-screen h-full-mobile md:h-auto' : 'h-0 w-0 fixed md:(h-auto -ml-64 static)'" -->
+  {  categories.activeSubCategory !== null && categories.activeCategory && categories.activeCategory.children &&  (
+    <div
+      class="subcat-menu bg-white  sm:border box-border sm:border-gray-200 dark:sm:border-gray-500 sm:border-l-0 md:sticky md:top-14 bg-white dark:bg-blue-901 z-10 sm:mb-2 h-full md:h-auto pb-3 h-sidebar max-h-sidebar sm:h-auto sm:max-h-auto"
+    >
+      <div class={`subcategories flex-col pb-3 ${categories.activeSubSubCategory !== null ? 'additional-subcategories' : ''}`} >
+        <div class="sidebar-title">
+          <span>{ t('heading.subcategories') }</span> 
+          <br>
+        </div>
+        <ul>
+          {
+            categories.activeCategory.children.map((subcategory) => (
+              <li class="border-b-1 border-gray-100 sm:border-none">
+                <CategoryLink
+                  active={isActiveSubCategory(subcategory.slug)}
+                  text={t(`cat.${categories.activeCategory.slug}.${subcategory.slug}.name`)}
+                  href={createSubCatLink(locale, catParameters.category.slug, subcategory.slug)}
+                />
+                {
+                  isActiveSubCategory(subcategory.slug) && (
+                    <div>
+                      { catParameters.category && catParameters.subcategory && catParameters.subcategory  &&  catParameters.subcategory && catParameters.subcategory.children && (
+                        <ul
+                          class="subcategories sm:pb-2"
+                        >
+                        {
+                            catParameters.subcategory.children.map((subsubcategory) => (
+                              <li
+                                class="border-t-1 border-gray-100 sm:border-none"
+                              >
+                                <SubCategoryLink
+                                  active={catParameters.subcategory && activeSubSubCategorySlug === subsubcategory.slug}
+                                  text={subsubcategory.name || `missing subsubcat name ${subsubcategory.slug}`}
+                                  href={createSubSubCatLink(locale, catParameters.category.slug, subcategory.slug, subsubcategory.slug)}
+                                />
+                              </li>
+                          ))
+                        }
+                        
+                        </ul>
+                      )
+                      }
+                    </div>
+                  )
+                }
+            </li>
+            ))
+          }
+        </ul>
+      </div>
+
+      
+      <button
+        class="absolute top-2.5 left-2 text-3xl w-9 h-9 hidden md:hidden"
+        onclick="toggleCatMenu()"
+        aria-label="Menu"
+      >
+        <Icon name="octicon:chevron-left-24" class=""  />
+      </button>
+      <button
+        class="absolute top-2.5 right-2 text-3xl w-9 h-9 md:hidden"
+        onclick="hideSidebar()"
+        aria-label="X"
+        >
+        <Icon name="octicon:x-24" class="" />
+      </button>
+
+    </div>
+  )
+}
+
+
+
+
+  <div id="ga-sidebar"></div>
+</div>
+
+<style lang="scss" scoped>
+
+.sidebar {
+
+  @media (max-width: 768px) {
+    &.show {
+      @apply w-screen h-full-mobile md:h-auto;
+    }
+
+    &:not(.show){
+      @apply h-0 w-0 fixed md:(h-auto -ml-64 static);
+    }
+  }
+
+  &.collapsed {
+    @apply md:max-w-0 md:min-w-0;
+  }
+
+}
+
+.subcategories {
+
+  .active {
+    // @apply bg-blue-700 text-white;
+    @apply bg-gray-200 sm:bg-white dark:(bg-blue-901 text-white) text-blue-600 font-600;
+
+    a {
+      color: inherit;
+    }
+  }
+
+  .s-active {
+    @apply bg-gray-100 sm:bg-white dark:(bg-blue-901 text-white) text-blue-600  border-gray-400;
+  }
+}
+
+.form-check-input {
+  @apply  appearance-none h-4 w-4 border border-gray-300 bg-white checked:bg-lightBlue-500 checked:border-lightBlue-500 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer;
+}
+
+.form-check-input:checked[type=checkbox] {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+</style>
+<script is:inline>
+  function hideSidebar() {
+    document.getElementById('sidebar').classList.remove("show");
+    document.body.classList.remove('overflow-hidden')
+  }
+  </script>

package/src/components/Category/CategoryDetails.astro

@@ -0,0 +1,82 @@
+---
+import CategorySidebarToggler from "@components/Category/CategorySidebarToggler.vue";
+import { Icon } from 'astro-icon/components';
+const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
+import { t } from "i18next";
+
+// Compute base URL for localization
+const baseURL = locale === 'en' ? '' : `/${locale}`;
+---
+
+<div ref="el"
+   class="flex flex-nowrap pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-gray-100 md:bg-white"
+   transition:name="category-details"
+   transition:animate="fade"
+>
+  <CategorySidebarToggler onclick="toggleSidebar()">
+    <Icon name="ant-design:menu-fold-outlined" class="toggler-btn hidden md:block" />
+    <Icon name="ant-design:menu-unfold-outlined" class="toggler-btn hidden" />
+    <Icon name="ant-design:menu-outlined" class="toggler-btn md:hidden" />
+  </CategorySidebarToggler>
+
+  <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
+      {subtitle ? (
+        <>
+          <a class="text-lg font-vw-headregular whitespace-nowrap block" href={`${baseURL}/${category.slug}/`}>
+            {category.name}
+            {titleSmall && <small>{titleSmall}</small>}
+          </a>
+          <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
+          {!subsubtitle ? (
+            <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
+              {subtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
+            </h1>
+          ) : (
+            <>
+              <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap ">
+                <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
+                  {subtitle}
+                </a>
+              </div>
+              <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
+              <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
+                {subsubtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
+              </h1>
+            </>
+          )}
+        </>
+      ) : (
+        <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
+          {category.name}
+          {titleSmall && <small>{titleSmall}</small>}
+          <span class="sr-only"> {t('catalog.extra-short')}</span>
+        </h1>
+      )}
+  </div>
+</div>
+
+<script is:inline>
+  function toggleSidebar() {
+    function handleToggle(x) {
+      const sidebar = document.getElementById('sidebar');
+      if (x.matches) { // Mobile view
+        document.body.classList.toggle('overflow-hidden');
+        sidebar.classList.toggle('show');
+      } else {
+        document.body.classList.remove('overflow-hidden');
+        sidebar.classList.toggle('collapsed');
+      }
+    }
+
+    var x = window.matchMedia("(max-width: 768px)");
+    handleToggle(x); // Call listener at runtime
+    x.addListener(handleToggle); // Attach listener for state changes
+  }
+</script>
+
+<style>
+  .category-toggler {
+    right: -1px;
+    bottom: -1px;
+  }
+</style>

package/src/components/Category/CategoryLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    default: null,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <a
+    class="category-link"
+    :class="!props.active ? '' : 'active'"
+  >
+    {{ props.text }}
+  </a>
+</template>

package/src/components/Category/CategorySection.astro

@@ -0,0 +1,70 @@
+---
+const { category, subcategory, subsubcategory, locale} = Astro.props;
+import { t } from "i18next";
+
+import ProductLink from "@components/Product/ProductLink.astro";
+import { Icon } from 'astro-icon/components';
+
+import { createSubCatLink, createSubSubCatLink } from "@utils/db";
+import { getCategoryProducts } from "@utils/category/getCategoryProducts"
+
+const category2search =  subsubcategory ? subsubcategory : (subcategory ? subcategory : category)
+const mainItemsCount = category2search.children ? 4 : 8
+const products = await getCategoryProducts(category2search.id, mainItemsCount);
+
+const getArray = async () => {
+  const arr: { name: string; id: number }[] = [];
+
+  if (category2search.children) {
+    for (const childCat of category2search.children) {
+      const output = await getCategoryProducts(childCat.id, 3);
+      arr.push(output);
+    }
+  } else {
+    null
+  }
+  return arr.flat(1)
+}
+
+const childrenProducts = await getArray()
+
+const categoryLink = subsubcategory ? createSubSubCatLink(locale, category.slug, subcategory.slug, subsubcategory.slug) : createSubCatLink(locale, category.slug, subcategory.slug);
+---
+<div class="category-section">
+  <div class="px-4 md:px-1.5 py-3 text-xl flex">
+    <a href={categoryLink} class="hover:underline">
+      <h2>{category2search.name}</h2>
+    </a>
+  </div>
+  <swiper-container slides-per-view="auto" space-between="0" class="flex w-full max-w-full"
+    itemscope itemtype="https://schema.org/ItemList"
+  >
+    {childrenProducts && childrenProducts.length > 0 && (
+      childrenProducts.map((product, index) => <swiper-slide class="category-tile product-link"><ProductLink class="w-full" productId={product.id} locale={locale} index={index+1} /></swiper-slide>)
+    )}
+    {products && products.length > 0 && (
+      products.map((product, index) => 
+      <swiper-slide class="category-tile product-link"><ProductLink class="w-full h-full" productId={product.id} locale={locale} index={index+1}/></swiper-slide>)
+    )}
+    <swiper-slide class="category-tile product-link pr-4 pb-4 sm:pb-1">
+          <a
+          href={categoryLink}
+          title={category2search.name}
+          class="uppercase flex items-center bg-white w-full sm:w-auto sm:h-full mt-0 p-8 aspect-ratio-[4/3] sm:aspect-auto mb-auto sm:mb-0 sm:text-sm">
+          {t("more")}
+          <Icon name="la:arrow-right" class="h-4 ml-2 text-blue-500" />
+        </a>
+    </swiper-slide>
+  </swiper-container>
+</div>
+
+<style lang="scss">
+  .category-section {
+    content-visibility: auto;
+
+    &:hover {
+      content-visibility: visible;
+    }
+  }
+  
+</style>

package/src/components/Category/CategorySidebarToggler.vue

@@ -0,0 +1,10 @@
+
+<template>
+  <button
+    class="category-toggler"
+    type="button"
+    aria-label="toggle menu"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/Category/SubCategoryLink.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  text: {
+    type: String,
+    default: null,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <a
+    v-if="!props.active"
+    class="w-full block text-base hover:(bg-gray-50 sm:bg-inherit) font-medium text-gray-300 pr-2 py-2 text-left pl-6 sm:(pr-3 text-sm w-auto) md:(py-0.5 pr-4)"
+  >
+    {{ props.text }}
+</a>
+  <div
+    v-else
+    class="w-full text-base hover:(bg-gray-50 sm:bg-inherit) font-medium pr-2 py-2 pl-6 sm:(w-auto pr-3 text-sm) md:(py-0.5 pr-4) s-active"
+  >
+    {{ props.text }}
+  </div>
+</template>

package/src/components/Product/ProductButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  shadow: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    class="product-button"
+    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/Product/ProductCodes.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  prcodes: {
+    type: Object as PropType<string[] | null>,
+    default: null,
+    required: true,
+  },
+  isPdp: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+
+const codes = props.prcodes || []
+const decodedCodes = codes ? codes.sort() : []
+
+const settings = {
+  prcodes: decodedCodes,
+}
+</script>
+
+<template>
+ 
+ <span
+    v-for="(prcode, index) in settings.prcodes"
+    :key="index"
+    class="not-last:mr-1"
+  >
+    <span data-pagefind-filter="PR-Code"
+      v-if="!String(prcode).includes('+')"
+      class="btn-prcode "
+      :class="`btn-prcode--${prcode}`"
+    >
+      {{ prcode }}
+    </span>
+    <span v-else >
+      <span v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" class="btn-prcode" :class="`btn-prcode--${splittedCode} ${isPdp ? ' btn-prcode--pdp' : ''}` " data-pagefind-filter="PR-Code">
+        {{ splittedCode }}
+      </span>
+    </span>
+  </span>
+
+</template>
+
+<style lang="scss" scoped>
+.btn-prcode {
+  @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-700 after:absolute after:w-4 text-center;
+
+  &--pdp {
+    @apply mb-1
+  }
+
+  &:before {
+    @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black  dark:bg-lightBlue-500;
+
+    display: none;
+    position: absolute;
+    text-align: center;
+    // bottom: 100%;
+    top: -10px;
+    transform: translateY(-50%) translateX(-50%);
+    left: 50%;
+    z-index: 50;
+  }
+
+  &:hover:before {
+    display:block;
+  }
+
+  &--2JK {
+    color: #f3881d;
+    &:before {
+      content: 'CROSS';
+    }
+  }
+
+  &--1LR,
+  &--1ZG,
+  &--1ZJ {
+     &:before {
+      content: '⌀ 256 mm';
+    }
+  }
+
+  &--1KD,
+  &--1ZP,
+  &--1ZR {
+    &:before {
+      content: '⌀ 310 mm';
+    }
+  }
+
+  &--1ZD,
+  &--1ZC,
+  &--1LN {
+    &:before {
+      content: '⌀ 288 mm; LUCAS';
+    }
+  }
+
+  &--2JZ {
+    @apply: text-lightBlue-500;
+    &:before {
+      content: 'Bluemotion';
+    }
+  }
+
+  &--7L6 {
+    @apply: text-lightBlue-500;
+    &:before {
+      content: 'Bluemotion (CFWA + start-stop)';
+    }
+  }
+
+  &--1KK,
+  &--1KT,
+  &--1KV,
+  &--1LV,
+  &--2EJ {
+    &:before {
+      content: '⌀ 230 mm';
+    }
+  }
+
+  &--2JE {
+    @apply text-lightBlue-700;
+
+    &:before {
+      content: 'BlueGT';
+    }
+  }
+
+  &--2JP {
+     &:before {
+      content: 'R-Line';
+    }
+  }
+
+  // WRC Street R
+  &--E5M, // emblems/stickers
+  &--1KD, //brakes
+  &--1ZP, //brakes
+  &--2JQ,//bumpers
+  &--TA2 { //engine parts
+    color: blue;
+    &:before {
+      content: 'R WRC Street';
+    }
+  }
+
+  // GTI
+  &--1KV,
+  &--1ZD,
+  &--1ZR,
+  &--0NH,
+  &--2JD {
+    color: red;
+     &:before {
+      content: 'GTI';
+    }
+  }
+
+}
+</style>

package/src/utils/product/getPriceFormatted.ts

@@ -0,0 +1,14 @@
+import i18next from "i18next";
+
+export const getPriceFormatted  = (product: any) => {
+    if (i18next.language === 'en') {
+      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur, )
+    }
+    if (i18next.language === 'pl') {
+      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln, )
+    }
+    else {
+      return 'no price'
+    }
+  }
+  

package/src/utils/product/getProductChecklist.ts

@@ -0,0 +1,15 @@
+import { t } from "i18next";
+
+export const getProductCheckList = (productDetails) => {
+    if (!productDetails || !productDetails.length) {
+        return null;
+    }
+
+    const list = productDetails.filter(item => item.icon);
+
+    if (!list.length) {
+        return null;
+    }
+
+    return list.map(detail => t(`detail.value.${detail.value}`));
+}

package/src/utils/seo/getShorterDescription.ts

@@ -0,0 +1,12 @@
+const MAX_DESCRIPTION_LENGTH = 150;
+
+export const getShorterDescription = (description: string | null, limit = MAX_DESCRIPTION_LENGTH) => {
+  function cutString(s: string, n: number) {
+    const text = s.replace(/(\n)/g, " ");
+    const cut = text.indexOf('. ', n);
+    return cut === -1 ? text : `${text.substring(0, cut)}.`;
+  }
+
+  return description ? cutString(description, limit) || '' : '';
+  
+}

package/src/utils/text/formatDate.ts

@@ -0,0 +1,6 @@
+/* Format date  */
+
+
+export function formatDate(date: Date ) {
+  return new Date(date);
+}

package/src/utils/text/formatLocaleNumber.ts

@@ -0,0 +1,7 @@
+/* Format numbers like details data: liters, measuring etc. */
+
+import i18next from "i18next";
+
+export function formatLocaleNumber(number: number ) {
+  return  i18next.language === 'en' ? String(number).replace(/,/g, '.') : String(number);
+}

package/src/utils/text/formatPad.ts

@@ -0,0 +1,12 @@
+export const formatPad = (num: number, size: number) => {
+  return String(num).padStart(size, '0');
+}
+
+// export const formatPad = (num: number, size: number) => {
+//   let productId = String(num)
+
+//   if (size < 10)
+//     while (productId.length < size) productId = `0${productId}`
+
+//   return productId
+// }

package/src/utils/text/getNumberFormatted.ts

@@ -0,0 +1,33 @@
+export const getNumberFormatted = (num, digits) => {
+  const lookup = [
+    { value: 1e18, symbol: "E" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e9, symbol: "G" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e3, symbol: "k" },
+    { value: 1, symbol: "" }
+  ];
+  const item = lookup.find(item => num >= item.value) || lookup[lookup.length - 1];
+  return (num / item.value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + item.symbol;
+}
+
+/*
+ * Tests
+ */
+// const tests = [
+//   { num: 0, digits: 1 },
+//   { num: 12, digits: 1 },
+//   { num: 1234, digits: 1 },
+//   { num: 100000000, digits: 1 },
+//   { num: 299792458, digits: 1 },
+//   { num: 759878, digits: 1 },
+//   { num: 759878, digits: 0 },
+//   { num: 123, digits: 1 },
+//   { num: 123.456, digits: 1 },
+//   { num: 123.456, digits: 2 },
+//   { num: 123.456, digits: 4 }
+// ];
+// tests.forEach(test => {
+//   console.log("getNumberFormatted(%f, %i) = %s", test.num, test.digits, getNumberFormatted(test.num, test.digits));
+// });

package/src/utils/text/getTranslatedLink.ts

@@ -0,0 +1,5 @@
+import i18next from "i18next";
+
+export const getTranslatedLink = ( link:string ) => {
+  return i18next.language === 'en' ? link : `/pl${link}`
+}