spoko-design-system 0.9.6 → 1.0.0

package/src/components/FuckRussia.vue

@@ -1,62 +1,62 @@
-<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 >
-.bg-ukraine {
-  background: linear-gradient(180deg, #0066cc 56%, #ffcc00 44%); }
-
-.animate-bull {
-  top: -2px;
-  animation-iteration-count: infinite; }
-  
-  .animate-bull--1 {
-    animation-duration: 2s;
-    animation-name: AnimateBull1; }
-
-  .animate-bull--2 {
-    animation-duration: 1.332s;
-    animation-name: AnimateBull2;
-    animation-delay: 1s; }
-
-  .animate-bull--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 >
+.bg-ukraine {
+  background: linear-gradient(180deg, #0066cc 56%, #ffcc00 44%); }
+
+.animate-bull {
+  top: -2px;
+  animation-iteration-count: infinite; }
+  
+  .animate-bull--1 {
+    animation-duration: 2s;
+    animation-name: AnimateBull1; }
+
+  .animate-bull--2 {
+    animation-duration: 1.332s;
+    animation-name: AnimateBull2;
+    animation-delay: 1s; }
+
+  .animate-bull--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,56 @@
----
-
-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={`ml-2 order-0 ${!biggerText ? 'text-xxs md:text-xs' : 'order-0'}`} 
-    set:html={t(`part.for-${handDriveName}`)} 
-  />
-</div>
-
-<style>
-  .rhd {
-          transform: scaleX(-1);
-  }
+---
+// Universal HandDrive component - API-first, no i18n dependencies
+// Designed for multiple projects with consistent API data
+
+interface Props {
+  class?: string;
+  /** Hand drive type: 'lhd' | 'rhd' */
+  handDrive?: 'lhd' | 'rhd' | null;
+  /** Display text from API */
+  text?: string;
+  /** Larger text variant */
+  biggerText?: boolean;
+  /** Optional: Override title attribute */
+  title?: string;
+}
+
+const {
+  class: className,
+  handDrive,
+  text,
+  biggerText = false,
+  title
+} = Astro.props;
+
+import { Image } from 'astro:assets';
+import handDriveImage from "../assets/hand-drive.svg";
+
+// Don't render if no valid hand drive specified
+if (!handDrive || (handDrive !== 'lhd' && handDrive !== 'rhd')) {
+  return null;
+}
+
+// Use provided title or generate from type
+const titleText = title || handDrive.toUpperCase();
+---
+
+<div title={titleText} class="flex items-center" class:list={className}>
+  <Image
+    src={handDriveImage}
+    alt={`${handDrive.toUpperCase()} hand drive`}
+    width={48}
+    height={34}
+    class={handDrive}
+  />
+  {text && (
+    <div class={`ml-2 ${biggerText ? 'text-sm md:text-base' : 'text-xxs md:text-xs'}`}>
+      {text}
+    </div>
+  )}
+</div>
+
+<style>
+  .rhd {
+          transform: scaleX(-1);
+  }
   </style>

package/src/components/Header/Header.astro

@@ -1,210 +1,210 @@
----
-import { SITE } from "../../config";
-import SkipToContent from "./SkipToContent.astro";
-import { MenuIcon } from "astro-navbar";
-import Search from "astro-pagefind/components/Search";
----
-
-<header
-  class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900"
->
-  <SkipToContent />
-  <nav
-    title="Top Navigation"
-    class="mx-auto flex justify-between items-center px-4"
-  >
-    <div class="flex flex-nowrap">
-      <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
-      <a class="text-2xl font-medium block font-textbold leading-none block my-auto text-blue-medium" href="/"> SDS</a>
-      <Search
-        transition:persist
-        transition:name="search-field"
-        className="search-container"
-        id="search"
-        uiOptions={{
-          showImages: false,
-          showFilters: false,
-          resetStyles: true,
-        }}
-      />
-    </div>
-    <div class="flex gap-2">
-      {
-        SITE.github && (
-          <a
-            title="Github"
-            class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors"
-            href={"https://github.com/" + SITE.github}
-          >
-            <img class="h-7" src="/github.svg" alt="github logo" />
-          </a>
-        )
-      }
-      {
-        SITE.linkedin && (
-          <a
-            title="linkedin"
-            class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors"
-            href={"https://linkedin.com/in/" + SITE.linkedin}
-          >
-            <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
-          </a>
-        )
-      }
-    </div>
-  </nav>
-</header>
-
-<style  is:global>
-#search {
-  @apply ml-6;
-}
-
-.search-container {
-  box-sizing: border-box;
-  @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
-}
-
-.pagefind-ui {
-  @apply font-textlight text-base;
-}
-
-.pagefind-ui__search-input {
-  height: 40px !important;
-  border: 0;
-  @apply rounded-none sm:rounded-3xl h-10 w-full;
-}
-
-.pagefind-ui__result-excerpt,
-.pagefind-ui__button {
-  font-size: 14px !important;
-}
-
-.pagefind-ui__filter-name {
-  font-size: 12px !important;
-}
-
-.pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-  @apply p-4;
-}
-
-.pagefind-ui__result-link {
-  color: var(--pagefind-ui-primary);
-  font-family: vw_headlight;
-  font-size: 1rem;
-}
-
-.pagefind-ui__result-link::before {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  content: "";
-  position: absolute;
-}
-
-.pagefind-ui__result-excerpt {
-  color: var(--pagefind-ui-text);
-  order: 3;
-}
-
-.pagefind-ui__drawer {
-  @apply bg-white md:fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)] gap-[30px];
-}
-
-.pagefind-ui__search-clear {
-  height: 38px;
-  top: 0;
-  @apply sm:rounded-3xl;
-}
-
-.pagefind-ui__search-input {
-  font-size: 1rem;
-  font-weight: 400;
-  padding: 0 2.5rem 2px;
-}
-
-.pagefind-ui__form::before {
-  top: 14px;
-  left: 16px;
-  width: 14px;
-  height: 14px;
-}
-
-.pagefind-ui__result {
-  padding: 0.875rem 0;
-  gap: 1rem;
-  @apply relative;
-}
-
-.pagefind-ui__filter-block {
-  padding: 0.875rem 0;
-  border-width: 1px;
-}
-
-.pagefind-ui__filter-group {
-  gap: 0.5rem;
-  padding-top: 0.875rem;
-}
-
-.pagefind-ui__filter-value {
-  gap: 10px;
-}
-
-.pagefind-ui__filter-checkbox {
-  border-radius: 3px;
-  margin-top: 1px;
-  min-width: calc(16px * var(--pagefind-ui-scale));
-}
-
-.pagefind-ui__result-image {
-  @apply drop-shadow-sm w-full h-full object-contain rounded-none;
-}
-
-.pagefind-ui__filter-panel {
-  @apply hidden;
-}
-
-.pagefind-ui__filter-label {
-  font-size: 0.9rem;
-}
-
-.pagefind-ui__button {
-  font-weight: 400;
-  height: 40px;
-}
-
-.pagefind-ui__result-tag {
-  background: inherit;
-  padding: 0;
-  color: #9ca3af;
-}
-
-.pagefind-ui__result-thumb {
-  max-width: 120px;
-}
-
-.pagefind-ui__result-tags {
-  margin-top: 0.4rem;
-  order: 2;
-}
-
-.pagefind-ui__filter-name::after {
-  color: var(--pagefind-ui-primary);
-}
-
-.pagefind-ui__result-title {
-  font-size: inherit;
-  line-height: 1;
-}
-
-.pagefind-ui__filter-panel,
-.pagefind-ui__results-area {
-  margin-top: 0;
-}
-
-.pagefind-ui__message {
-  padding: 0.875rem 0;
-}
-
-</style>
+---
+import { SITE } from "../../config";
+import SkipToContent from "./SkipToContent.astro";
+import { MenuIcon } from "astro-navbar";
+import Search from "astro-pagefind/components/Search";
+---
+
+<header
+  class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900"
+>
+  <SkipToContent />
+  <nav
+    title="Top Navigation"
+    class="mx-auto flex justify-between items-center px-4"
+  >
+    <div class="flex flex-nowrap">
+      <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
+      <a class="text-2xl font-medium block font-textbold leading-none block my-auto text-blue-medium" href="/"> SDS</a>
+      <Search
+        transition:persist
+        transition:name="search-field"
+        className="search-container"
+        id="search"
+        uiOptions={{
+          showImages: false,
+          showFilters: false,
+          resetStyles: true,
+        }}
+      />
+    </div>
+    <div class="flex gap-2">
+      {
+        SITE.github && (
+          <a
+            title="Github"
+            class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors"
+            href={"https://github.com/" + SITE.github}
+          >
+            <img class="h-7" src="/github.svg" alt="github logo" />
+          </a>
+        )
+      }
+      {
+        SITE.linkedin && (
+          <a
+            title="linkedin"
+            class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors"
+            href={"https://linkedin.com/in/" + SITE.linkedin}
+          >
+            <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
+          </a>
+        )
+      }
+    </div>
+  </nav>
+</header>
+
+<style  is:global>
+#search {
+  @apply ml-6;
+}
+
+.search-container {
+  box-sizing: border-box;
+  @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
+}
+
+.pagefind-ui {
+  @apply font-textlight text-base;
+}
+
+.pagefind-ui__search-input {
+  height: 40px !important;
+  border: 0;
+  @apply rounded-none sm:rounded-3xl h-10 w-full;
+}
+
+.pagefind-ui__result-excerpt,
+.pagefind-ui__button {
+  font-size: 14px !important;
+}
+
+.pagefind-ui__filter-name {
+  font-size: 12px !important;
+}
+
+.pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  @apply p-4;
+}
+
+.pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+  font-family: vw_headlight;
+  font-size: 1rem;
+}
+
+.pagefind-ui__result-link::before {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: "";
+  position: absolute;
+}
+
+.pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+  order: 3;
+}
+
+.pagefind-ui__drawer {
+  @apply bg-white md:fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)] gap-[30px];
+}
+
+.pagefind-ui__search-clear {
+  height: 38px;
+  top: 0;
+  @apply sm:rounded-3xl;
+}
+
+.pagefind-ui__search-input {
+  font-size: 1rem;
+  font-weight: 400;
+  padding: 0 2.5rem 2px;
+}
+
+.pagefind-ui__form::before {
+  top: 14px;
+  left: 16px;
+  width: 14px;
+  height: 14px;
+}
+
+.pagefind-ui__result {
+  padding: 0.875rem 0;
+  gap: 1rem;
+  @apply relative;
+}
+
+.pagefind-ui__filter-block {
+  padding: 0.875rem 0;
+  border-width: 1px;
+}
+
+.pagefind-ui__filter-group {
+  gap: 0.5rem;
+  padding-top: 0.875rem;
+}
+
+.pagefind-ui__filter-value {
+  gap: 10px;
+}
+
+.pagefind-ui__filter-checkbox {
+  border-radius: 3px;
+  margin-top: 1px;
+  min-width: calc(16px * var(--pagefind-ui-scale));
+}
+
+.pagefind-ui__result-image {
+  @apply drop-shadow-sm w-full h-full object-contain rounded-none;
+}
+
+.pagefind-ui__filter-panel {
+  @apply hidden;
+}
+
+.pagefind-ui__filter-label {
+  font-size: 0.9rem;
+}
+
+.pagefind-ui__button {
+  font-weight: 400;
+  height: 40px;
+}
+
+.pagefind-ui__result-tag {
+  background: inherit;
+  padding: 0;
+  color: #9ca3af;
+}
+
+.pagefind-ui__result-thumb {
+  max-width: 120px;
+}
+
+.pagefind-ui__result-tags {
+  margin-top: 0.4rem;
+  order: 2;
+}
+
+.pagefind-ui__filter-name::after {
+  color: var(--pagefind-ui-primary);
+}
+
+.pagefind-ui__result-title {
+  font-size: inherit;
+  line-height: 1;
+}
+
+.pagefind-ui__filter-panel,
+.pagefind-ui__results-area {
+  margin-top: 0;
+}
+
+.pagefind-ui__message {
+  padding: 0.875rem 0;
+}
+
+</style>

package/src/components/Header/SkipToContent.astro

@@ -1 +1 @@
-    <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
+    <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>