spoko-design-system 1.1.1 → 1.1.2

package/src/components/FaqItem.astro

@@ -11,30 +11,28 @@ interface Props {
 const { data } = Astro.props;
 ---
 
-{data.answer && (
-  <details 
-    itemscope 
-    itemprop="mainEntity" 
-    itemtype="https://schema.org/Question" 
-    class="faq-details [&_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-[url(/arrow-bottom.svg)] bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60)"
-    >
-      <h2 itemprop="name" class="font-headbold" set:html={data.question} />
-    </summary>
-    <div
+{
+  data.answer && (
+    <details
       itemscope
-      itemprop="acceptedAnswer"
-      itemtype="https://schema.org/Answer"
+      itemprop="mainEntity"
+      itemtype="https://schema.org/Question"
+      class="faq-details [&_summary:after]:open:-rotate-180"
     >
-      <div itemprop="text" class="px-0 pb-4">
-        <Markdown content={data.answer} />
+      <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-[url(/arrow-bottom.svg)] bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60)"
+      >
+        <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>
-    </div>
-  </details>
-)}
+    </details>
+  )
+}
 
 <style is:global>
   .faq-details {
@@ -42,9 +40,10 @@ const { data } = Astro.props;
       color: var(--clr-primary-450);
     }
 
-    ul, ol {
+    ul,
+    ol {
       @apply pl-5;
-      
+
       & + p {
         @apply mt-2;
       }
@@ -60,17 +59,18 @@ const { data } = Astro.props;
 
     h2 {
       color: var(--clr-primary-700);
-      
+
       &:hover {
         color: var(--clr-primary-450);
       }
     }
-    
+
     h3 {
       @apply mt-2;
     }
 
-    td, th {
+    td,
+    th {
       @apply border-b text-left py-2 pr-4;
     }
 
@@ -78,4 +78,4 @@ const { data } = Astro.props;
       @apply underline decoration-light-blue-400 underline-offset-2;
     }
   }
-</style>
+</style>

package/src/components/FeaturesList.vue

@@ -1,37 +1,27 @@
-
 <script lang="ts" setup>
 import { PropType } from 'vue';
 
 const props = defineProps({
-    items: {
-        type: Object as PropType<String[] | null>,
-        default: null,
-        required: true,
-    },
-    caption: {
-        type: String as PropType<String | null>,
-        default: null,
-        required: false,
-    }
-})
+  items: {
+    type: Object as PropType<String[] | null>,
+    default: null,
+    required: true,
+  },
+  caption: {
+    type: String as PropType<String | null>,
+    default: null,
+    required: false,
+  },
+});
 </script>
 
 <template>
-    <h2 
-        class="features-list-caption" 
-        v-if="props.caption"
-    >
-        {{ props.caption }}
-    </h2>
-    <ul class="features-list-ul">
-        <li 
-            v-for="item in props.items" 
-            class="features-list-item"
-            :key="item"
-        >
-            {{ item }}
-        </li>
-    </ul>
+  <h2 class="features-list-caption" v-if="props.caption">
+    {{ props.caption }}
+  </h2>
+  <ul class="features-list-ul">
+    <li v-for="item in props.items" class="features-list-item" :key="item">
+      {{ item }}
+    </li>
+  </ul>
 </template>
-
-

package/src/components/FuckRussia.vue

@@ -8,55 +8,68 @@
       <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 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 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 i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
     </div>
   </div>
 </template>
 
-<style >
+<style>
 .bg-ukraine {
-  background: linear-gradient(180deg, #0066cc 56%, #ffcc00 44%); }
+  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; }
+  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); }
+    transform: translate(14px, 0px);
+  }
   100% {
-    transform: translate(86px, 0px); } }
+    transform: translate(86px, 0px);
+  }
+}
 
 @keyframes AnimateBull2 {
   0% {
-    transform: translate(38px, 0px); }
+    transform: translate(38px, 0px);
+  }
   100% {
-    transform: translate(80px, 0px); } }
+    transform: translate(80px, 0px);
+  }
+}
 
 @keyframes AnimateBull3 {
   0% {
-    transform: translate(62px, 0px); }
+    transform: translate(62px, 0px);
+  }
   100% {
-    transform: translate(88px, 0px); } }
-
+    transform: translate(88px, 0px);
+  }
+}
 </style>

package/src/components/HandDrive.astro

@@ -14,16 +14,10 @@ interface Props {
   title?: string;
 }
 
-const {
-  class: className,
-  handDrive,
-  text,
-  biggerText = false,
-  title
-} = Astro.props;
+const { class: className, handDrive, text, biggerText = false, title } = Astro.props;
 
 import { Image } from 'astro:assets';
-import handDriveImage from "../assets/hand-drive.svg";
+import handDriveImage from '../assets/hand-drive.svg';
 
 // Don't render if no valid hand drive specified
 if (!handDrive || (handDrive !== 'lhd' && handDrive !== 'rhd')) {
@@ -42,15 +36,17 @@ const titleText = title || handDrive.toUpperCase();
     height={34}
     class={handDrive}
   />
-  {text && (
-    <div class={`ml-2 ${biggerText ? 'text-sm md:text-base' : 'text-xxs md:text-xs'}`}>
-      {text}
-    </div>
-  )}
+  {
+    text && (
+      <div class={`ml-2 ${biggerText ? 'text-sm md:text-base' : 'text-xxs md:text-xs'}`}>
+        {text}
+      </div>
+    )
+  }
 </div>
 
 <style>
   .rhd {
-          transform: scaleX(-1);
+    transform: scaleX(-1);
   }
-  </style>
+</style>

package/src/components/Header/Header.astro

@@ -1,21 +1,21 @@
 ---
-import { SITE } from "../../config";
-import SkipToContent from "./SkipToContent.astro";
-import { MenuIcon } from "astro-navbar";
-import Search from "astro-pagefind/components/Search";
+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"
->
+<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"
-  >
+  <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>
+      <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"
@@ -34,7 +34,7 @@ import Search from "astro-pagefind/components/Search";
           <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}
+            href={'https://github.com/' + SITE.github}
           >
             <img class="h-7" src="/github.svg" alt="github logo" />
           </a>
@@ -45,7 +45,7 @@ import Search from "astro-pagefind/components/Search";
           <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}
+            href={'https://linkedin.com/in/' + SITE.linkedin}
           >
             <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
           </a>
@@ -55,156 +55,155 @@ import Search from "astro-pagefind/components/Search";
   </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 .pagefind-ui__search-input {
-  height: 40px;
-  border: 0;
-  @apply rounded-none sm:rounded-3xl w-full;
-}
-
-.pagefind-ui .pagefind-ui__result-excerpt,
-.pagefind-ui .pagefind-ui__button {
-  font-size: 14px;
-}
-
-.pagefind-ui .pagefind-ui__filter-name {
-  font-size: 12px;
-}
-
-.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-  @apply p-4;
-}
-
-.pagefind-ui .pagefind-ui__result-link {
-  color: var(--pagefind-ui-primary);
-  font-family: vw_headlight;
-  font-size: 1rem;
-}
-
-.pagefind-ui .pagefind-ui__result-link::before {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  content: "";
-  position: absolute;
-}
-
-.pagefind-ui .pagefind-ui__result-excerpt {
-  color: var(--pagefind-ui-text);
-  order: 3;
-}
-
-.pagefind-ui .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 .pagefind-ui__search-clear {
-  height: 38px;
-  top: 0;
-  @apply sm:rounded-3xl;
-}
-
-.pagefind-ui .pagefind-ui__search-input {
-  font-size: 1rem;
-  font-weight: 400;
-  padding: 0 2.5rem 2px;
-}
-
-.pagefind-ui .pagefind-ui__form::before {
-  top: 14px;
-  left: 16px;
-  width: 14px;
-  height: 14px;
-}
-
-.pagefind-ui .pagefind-ui__result {
-  padding: 0.875rem 0;
-  gap: 1rem;
-  @apply relative;
-}
-
-.pagefind-ui .pagefind-ui__filter-block {
-  padding: 0.875rem 0;
-  border-width: 1px;
-}
-
-.pagefind-ui .pagefind-ui__filter-group {
-  gap: 0.5rem;
-  padding-top: 0.875rem;
-}
-
-.pagefind-ui .pagefind-ui__filter-value {
-  gap: 10px;
-}
-
-.pagefind-ui .pagefind-ui__filter-checkbox {
-  border-radius: 3px;
-  margin-top: 1px;
-  min-width: calc(16px * var(--pagefind-ui-scale));
-}
-
-.pagefind-ui .pagefind-ui__result-image {
-  @apply drop-shadow-sm w-full h-full object-contain rounded-none;
-}
-
-.pagefind-ui .pagefind-ui__filter-panel {
-  @apply hidden;
-}
-
-.pagefind-ui .pagefind-ui__filter-label {
-  font-size: 0.9rem;
-}
-
-.pagefind-ui .pagefind-ui__button {
-  font-weight: 400;
-  height: 40px;
-}
-
-.pagefind-ui .pagefind-ui__result-tag {
-  background: inherit;
-  padding: 0;
-  color: #9ca3af;
-}
-
-.pagefind-ui .pagefind-ui__result-thumb {
-  max-width: 120px;
-}
-
-.pagefind-ui .pagefind-ui__result-tags {
-  margin-top: 0.4rem;
-  order: 2;
-}
-
-.pagefind-ui .pagefind-ui__filter-name::after {
-  color: var(--pagefind-ui-primary);
-}
-
-.pagefind-ui .pagefind-ui__result-title {
-  font-size: inherit;
-  line-height: 1;
-}
-
-.pagefind-ui .pagefind-ui__filter-panel,
-.pagefind-ui .pagefind-ui__results-area {
-  margin-top: 0;
-}
-
-.pagefind-ui .pagefind-ui__message {
-  padding: 0.875rem 0;
-}
-
+<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 .pagefind-ui__search-input {
+    height: 40px;
+    border: 0;
+    @apply rounded-none sm:rounded-3xl w-full;
+  }
+
+  .pagefind-ui .pagefind-ui__result-excerpt,
+  .pagefind-ui .pagefind-ui__button {
+    font-size: 14px;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-name {
+    font-size: 12px;
+  }
+
+  .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+    @apply p-4;
+  }
+
+  .pagefind-ui .pagefind-ui__result-link {
+    color: var(--pagefind-ui-primary);
+    font-family: vw_headlight;
+    font-size: 1rem;
+  }
+
+  .pagefind-ui .pagefind-ui__result-link::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    content: '';
+    position: absolute;
+  }
+
+  .pagefind-ui .pagefind-ui__result-excerpt {
+    color: var(--pagefind-ui-text);
+    order: 3;
+  }
+
+  .pagefind-ui .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 .pagefind-ui__search-clear {
+    height: 38px;
+    top: 0;
+    @apply sm:rounded-3xl;
+  }
+
+  .pagefind-ui .pagefind-ui__search-input {
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 0 2.5rem 2px;
+  }
+
+  .pagefind-ui .pagefind-ui__form::before {
+    top: 14px;
+    left: 16px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .pagefind-ui .pagefind-ui__result {
+    padding: 0.875rem 0;
+    gap: 1rem;
+    @apply relative;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-block {
+    padding: 0.875rem 0;
+    border-width: 1px;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-group {
+    gap: 0.5rem;
+    padding-top: 0.875rem;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-value {
+    gap: 10px;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-checkbox {
+    border-radius: 3px;
+    margin-top: 1px;
+    min-width: calc(16px * var(--pagefind-ui-scale));
+  }
+
+  .pagefind-ui .pagefind-ui__result-image {
+    @apply drop-shadow-sm w-full h-full object-contain rounded-none;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-panel {
+    @apply hidden;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-label {
+    font-size: 0.9rem;
+  }
+
+  .pagefind-ui .pagefind-ui__button {
+    font-weight: 400;
+    height: 40px;
+  }
+
+  .pagefind-ui .pagefind-ui__result-tag {
+    background: inherit;
+    padding: 0;
+    color: #9ca3af;
+  }
+
+  .pagefind-ui .pagefind-ui__result-thumb {
+    max-width: 120px;
+  }
+
+  .pagefind-ui .pagefind-ui__result-tags {
+    margin-top: 0.4rem;
+    order: 2;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-name::after {
+    color: var(--pagefind-ui-primary);
+  }
+
+  .pagefind-ui .pagefind-ui__result-title {
+    font-size: inherit;
+    line-height: 1;
+  }
+
+  .pagefind-ui .pagefind-ui__filter-panel,
+  .pagefind-ui .pagefind-ui__results-area {
+    margin-top: 0;
+  }
+
+  .pagefind-ui .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>