spoko-design-system 0.2.30 → 0.2.33

package/src/components/FaqItem.astro

@@ -0,0 +1,96 @@
+---
+import { Markdown } from 'astro-remote';
+
+/* 
+  Question & Answer based on details & summary HTML tag 
+  https://web.dev/learn/html/details
+  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
+
+*/
+
+interface Props {
+  data: {
+    question: string;
+    answer: string;
+  };
+}
+
+const { data } = Astro.props;
+---
+
+{ data.answer &&
+  <details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="[&_summary:after]:open:-rotate-180">
+    <summary
+      class="py-2 outline-none cursor-pointer focus:underline text-xl font-500  relative items-center flex justify-between list-none
+      after:(block duration-200 content-empty bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60 bg-[url(/arrow-bottom.svg)])"
+      >
+        <h2 itemprop="name" class=" font-headbold" set:html={data.question} />
+    </summary> 
+    <div
+      itemscope
+      itemprop="acceptedAnswer"
+      itemtype="https://schema.org/Answer"
+     >
+      <div itemprop="text" class="px-0 pb-4">
+        <Markdown content={data.answer} />
+      </div>
+    </div>
+  </details>
+
+}
+
+
+<style is:global>
+
+  details {
+
+    &[open] {
+      h2 {
+        color: var(--clr-primary-450);
+      }
+    }
+
+
+    ul {
+      @apply list-disc pl-5;
+
+      &+p {
+        @apply mt-2;
+      }
+    }
+
+    ol {
+      @apply list-decimal	 pl-5;
+      &+p {
+        @apply mt-2;
+      }
+    }
+
+    h2 {
+      color: var(--clr-primary-700);
+      /* font-size: clamp(1.5rem, 1.29rem + 0.59vw, 2rem);
+        line-height: 120%;
+        letter-spacing: calc(-0.02em + 0.02rem); */
+      &:hover {
+        color: var(--clr-primary-450);
+      }
+    }
+    
+    h3 {
+      @apply mt-2;
+    }
+
+    /* table {
+      @apply table-auto;
+    } */
+
+    td, th {
+      @apply border-b text-left py-2 pr-4;
+    }
+
+    a {
+      @apply underline decoration-light-blue-400 underline-offset-2;
+    }
+  }
+  
+</style>

package/src/components/FeaturesList.vue

@@ -1,41 +1,41 @@
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-    items: {
-        type: Object as PropType<String[] | null>,
-        default: null,
-        required: true,
-    },
-    caption: {
-        type: Object as PropType<String | null>,
-        default: null,
-        required: false,
-    }
-})
-</script>
-
-<template>
-    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
-    <ul class="mb-6">
-        <li v-for="item in props.items" class="leading-5">
-            {{ item }}
-        </li>
-    </ul>
-</template>
-
-
-<style lang="scss" scoped>
-ul {
-    @apply list-square pl-5;
-
-    li {
-        @apply relative mb-2;
-
-        &::marker {
-            @apply text-blue-400;
-        }
-    }
-}
-</style>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Object as PropType<String[] | null>,
+        default: null,
+        required: true,
+    },
+    caption: {
+        type: Object as PropType<String | null>,
+        default: null,
+        required: false,
+    }
+})
+</script>
+
+<template>
+    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
+    <ul class="mb-6">
+        <li v-for="item in props.items" class="leading-5">
+            {{ item }}
+        </li>
+    </ul>
+</template>
+
+
+<style lang="scss" scoped>
+ul {
+    @apply list-square pl-5;
+
+    li {
+        @apply relative mb-2;
+
+        &::marker {
+            @apply text-blue-400;
+        }
+    }
+}
+</style>

package/src/components/FuckRussia.vue

@@ -1,80 +1,80 @@
-<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>
+<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,30 +1,30 @@
----
-
-const {  class: className, handDrive, biggerText } = Astro.props;
-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 } 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>