spoko-design-system 0.0.1 → 0.0.2

package/src/components/Breadcrumbs.vue

@@ -1,111 +1,108 @@
-<script setup lang="ts">
-
-export interface Breadcrumb {
-  name: string,
-  path: string
-}
-
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  showBack: {
-    type: Boolean,
-    required: false,
-  },
-  textBack: {
-    type: String,
-    required: false,
-    default: 'Back'
-  },
-  showHome: {
-    type: Boolean,
-    required: false,
-  },
-  breadcrumbs: {
-    type: Object as PropType<Breadcrumb[]>,
-    required: true
-  },
-  locale: {
-    type: String,
-    required: false,
-    default: 'en'
-  },
-  productNumber: {
-    type: String,
-    required: false,
-    default: null
-  }
-
-})
-
-const isLast = (index: Number) => {
-  return index === props.breadcrumbs.length - 1
-}
-</script>
-
-<template>
-  <nav>
-    <ul class="breadcrumbs flex items-center p-0 leading-none	">
-      <li v-if="props.showBack" class="breadcrumb-item flex">
-        <button class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap px-3 my-auto"
-          :title="props.textBack" onclick="history.back()"
-          i-bx-bx-arrow-back />
-      </li>
-    </ul>
-    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
-      itemtype="https://schema.org/BreadcrumbList">
-      <li v-if="props.showHome" class="breadcrumb-item flex">
-        <a href="/" class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
-          title="t('button.home')" itemprop="item" i-carbon-home>
-        </a>
-        <meta itemprop="position" content="1">
-      </li>
-      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
-        itemscope itemtype="https://schema.org/ListItem">
-        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-2 sm:py-1 px-1" itemprop="item" :title="`Polo 6R ${crumb.name}`">
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
-        </a>
-        <a v-else :href="crumb.path"
-          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-2 sm:py-1 px-1" :title="`Polo 6R ${crumb.name} ${productNumber}`">
-          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
-        </a>
-        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<style lang="scss" scoped>
-.breadcrumbs {
-  list-style: none;
-  font-size: 0.875rem;
-}
-
-.breadcrumb-item {
-
-  &+.breadcrumb-item:before {
-    @apply py-2 sm:py-1 px-1;
-    display: inline-block;
-    padding-right: .5rem;
-    color: #bdbdbd;
-    content: "/";
-  }
-
-  b {
-    @apply hidden sm:inline font-normal;
-  }
-}
-
-.breadcrumb-link {
-  border: 0;
-  cursor: pointer;
-
-  &--disabled {
-    cursor: default;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+
+export interface Breadcrumb {
+  name: string,
+  path: string
+}
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    required: false,
+  },
+  textBack: {
+    type: String,
+    required: false,
+    default: 'Back'
+  },
+  showHome: {
+    type: Boolean,
+    required: false,
+  },
+  breadcrumbs: {
+    type: Object as PropType<Breadcrumb[]>,
+    required: true
+  },
+  productNumber: {
+    type: String,
+    required: false,
+    default: null
+  }
+
+})
+
+const isLast = (index: Number) => {
+  return index === props.breadcrumbs.length - 1
+}
+</script>
+
+<template>
+  <nav>
+    <ul class="breadcrumbs flex items-center p-0 leading-none	">
+      <li v-if="props.showBack" class="breadcrumb-item flex">
+        <button
+          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap px-3 my-auto"
+          :title="props.textBack" onclick="history.back()" i-bx-bx-arrow-back />
+      </li>
+    </ul>
+    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
+      itemtype="https://schema.org/BreadcrumbList">
+      <li v-if="props.showHome" class="breadcrumb-item flex">
+        <a href="/"
+          class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
+          :title="textBack" itemprop="item" i-carbon-home>
+        </a>
+        <meta itemprop="position" content="1">
+      </li>
+      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
+        itemscope itemtype="https://schema.org/ListItem">
+        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-2 sm:py-1 px-1"
+          itemprop="item" :title="`Polo 6R ${crumb.name}`">
+          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+        </a>
+        <a v-else :href="crumb.path"
+          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-2 sm:py-1 px-1"
+          :title="`Polo 6R ${crumb.name} ${productNumber}`">
+          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
+        </a>
+        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumbs {
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item {
+
+  &+.breadcrumb-item:before {
+    @apply py-2 sm:py-1 px-1;
+    display: inline-block;
+    padding-right: .5rem;
+    color: #bdbdbd;
+    content: "/";
+  }
+
+  b {
+    @apply hidden sm:inline font-normal;
+  }
+}
+
+.breadcrumb-link {
+  border: 0;
+  cursor: pointer;
+
+  &--disabled {
+    cursor: default;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}</style>

package/src/components/Button.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { url } from "inspector";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  url?: string;
+  primary?: boolean;
+  secondary?: boolean;
+  text?: boolean;
+  tag?: boolean;
+}>();
+
+const tag = url && url.length ? 'a' : 'button'
+
+const classes = {
+  "bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center md:px-10 md:py-2 md:text-lg px-8 py-3 rounded-full shadow text-base text-white": props.primary,
+  "px-4 py-2 rounded-md transition-all shadow-sm hover:bg-opacity-80 font-medium text-blue-600 border-blue-500 border": props.secondary,
+  "px-4 py-2 rounded-md transition-all shadow-sm hover:bg-opacity-80 font-medium text-blue-500 hover:bg-opacity-80 shadow-md": props.text,
+  "bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600": props.tag
+};
+</script>
+
+
+<template>
+  <component  :is="tag" :class="classes" :href="props.url">
+    <slot></slot>
+  </component>
+</template>

package/src/components/CategoryLink.astro

@@ -0,0 +1,18 @@
+---
+const { categories } = Astro.props;
+---
+
+<div class="text-light-blue-400 uppercase text-base z-3 relative w-full">
+  {
+    categories
+      ? categories.map((category) => (
+          <a
+            class="term-link text-sm sm:text-base not-first:(before:content-empty) before:(w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative)"
+            href={category.uri}
+          >
+            {category.name}
+          </a>
+        ))
+      : null
+  }
+</div>

package/src/components/Copyright.astro

@@ -1,12 +1,12 @@
----
-    const { class: className } = Astro.props
----
-
-      <div class="bg-vw h-11 flex items-center font-headlight justify-between px-4" class:list={[className]}>
-        <slot name="left-item"/>
-        <slot name="middle-item"/>
-        <slot name="right-item"/>
-      </div>
-
-    
+---
+    const { class: className } = Astro.props
+---
+
+      <div class="bg-vw h-11 flex items-center font-headlight justify-between px-4" class:list={[className]}>
+        <slot name="left-item"/>
+        <slot name="middle-item"/>
+        <slot name="right-item"/>
+      </div>
+
+    
     

package/src/components/Date.astro

@@ -0,0 +1,7 @@
+---
+const { date } = Astro.props;
+---
+
+<time class="text-sm flex items-center mr-2" datetime={date}>
+  {new Date(date).toLocaleDateString()}
+</time>

package/src/components/FuckRussia.vue

@@ -1,65 +1,65 @@
-<template>
-  <div class="relative" title="FUCK PUTIN! FUCK RUZZIA!">
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
-    <div class="relative">
-      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
-      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
-    </div>
-    <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
-    </div>
-    <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
-    </div>
-    <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.bg-ukraine {
-  background: linear-gradient(180deg, #0066cc 56%, rgba(255,204,0,1) 44%);
-}
-
-.animate-bull {
-  top: -2px;
-  // @apply rotate-90;
-
-  animation-iteration-count: infinite;
-
-  &--1 {
-    animation-duration: 2s;
-    animation-name: AnimateBull1;
-  }
-
-  &--2 {
-    animation-duration: 1.332s;
-    animation-name: AnimateBull2;
-    animation-delay: 1s;
-  }
-
-  &--3 {
-    animation-duration: 0.666s;
-    animation-name: AnimateBull3;
-    animation-delay: 2s;
-  }
-}
-
-@keyframes AnimateBull1 {
-  0% {transform: translate(14px,0px);}
-  100% {transform: translate(86px,0px);}
-}
-
-@keyframes AnimateBull2 {
-  0% {transform: translate(38px,0px);}
-  100% {transform: translate(80px,0px);}
-}
-
-@keyframes AnimateBull3 {
-  0% {transform: translate(62px,0px);}
-  100% {transform: translate(88px,0px);}
-}
-</style>
+<template>
+  <div class="relative flex" title="FUCK PUTIN! FUCK RUZZIA!">
+    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
+    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
+    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
+    <div class="relative">
+      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
+      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.bg-ukraine {
+  background: linear-gradient(180deg, #0066cc 56%, rgba(255,204,0,1) 44%);
+}
+
+.animate-bull {
+  top: -2px;
+  // @apply rotate-90;
+
+  animation-iteration-count: infinite;
+
+  &--1 {
+    animation-duration: 2s;
+    animation-name: AnimateBull1;
+  }
+
+  &--2 {
+    animation-duration: 1.332s;
+    animation-name: AnimateBull2;
+    animation-delay: 1s;
+  }
+
+  &--3 {
+    animation-duration: 0.666s;
+    animation-name: AnimateBull3;
+    animation-delay: 2s;
+  }
+}
+
+@keyframes AnimateBull1 {
+  0% {transform: translate(14px,0px);}
+  100% {transform: translate(86px,0px);}
+}
+
+@keyframes AnimateBull2 {
+  0% {transform: translate(38px,0px);}
+  100% {transform: translate(80px,0px);}
+}
+
+@keyframes AnimateBull3 {
+  0% {transform: translate(62px,0px);}
+  100% {transform: translate(88px,0px);}
+}
+</style>

package/src/components/HandDrive.astro

@@ -1,31 +1,31 @@
----
-
-const {  class: className, handDrive, biggerText } = Astro.props;
-// import { t, locale} from "i18next";
-import { t } from "i18next";
-import { Image } from 'astro:assets';
-import handDriveImage from "../assets/hand-drive.svg";
-
-const getHandDriveName  = (value: number) => {
-  if (value === 1)
-    return 'lhd'
-
-  else
-    return 'rhd'
-}
-
-const handDriveName =  getHandDriveName(handDrive)
----
-<div title={handDriveName.toUpperCase()} class="flex items-center" class:list={className}>
-  <Image src={handDriveImage} alt="infoObject.product.hand_drive" width={48} height={34} class={handDriveName} />
-  <div data-pagefind-filter={`${t('part.sw-position')}:${handDriveName.toUpperCase()}`}
-    class={`sm:ml-2 order-0 ${!biggerText ? 'text-xxs md:text-xs' : 'order-0'}`} 
-    set:html={t(`part.for-${handDriveName}`)} 
-  />
-</div>
-
-<style lang="scss">
-  .rhd {
-          transform: scaleX(-1);
-  }
+---
+
+const {  class: className, handDrive, biggerText } = Astro.props;
+// import { t, locale} from "i18next";
+import { t } from "i18next";
+import { Image } from 'astro:assets';
+import handDriveImage from "../assets/hand-drive.svg";
+
+const getHandDriveName  = (value: number) => {
+  if (value === 1)
+    return 'lhd'
+
+  else
+    return 'rhd'
+}
+
+const handDriveName =  getHandDriveName(handDrive)
+---
+<div title={handDriveName.toUpperCase()} class="flex items-center" class:list={className}>
+  <Image src={handDriveImage} alt="infoObject.product.hand_drive" width={48} height={34} class={handDriveName} />
+  <div data-pagefind-filter={`${t('part.sw-position')}:${handDriveName.toUpperCase()}`}
+    class={`sm:ml-2 order-0 ${!biggerText ? 'text-xxs md:text-xs' : 'order-0'}`} 
+    set:html={t(`part.for-${handDriveName}`)} 
+  />
+</div>
+
+<style lang="scss">
+  .rhd {
+          transform: scaleX(-1);
+  }
   </style>

package/src/components/HeadCommon.astro

@@ -1,40 +1,40 @@
----
-
----
-
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="sitemap" href="/sitemap.xml" />
-
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
-
-<!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
-
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-	// const root = document.documentElement;
-	// const theme = localStorage.getItem('theme');
-	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-	// 	root.classList.add('dark');
-	// } else {
-	// 	root.classList.remove('dark');
-	// }
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '');
-</script> -->
+---
+
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<link rel="sitemap" href="/sitemap.xml" />
+
+<!-- Preload Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
+
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	// const root = document.documentElement;
+	// const theme = localStorage.getItem('theme');
+	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	// 	root.classList.add('dark');
+	// } else {
+	// 	root.classList.remove('dark');
+	// }
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '');
+</script> -->