spoko-design-system 0.2.20 → 0.2.21

package/src/components/Header/Header.astro

@@ -1,214 +1,214 @@
----
-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-600 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-600" 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 lang="scss" 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;
-
-      &__search-input {
-        height: 40px !important;
-        border: 0;
-        @apply rounded-none sm-rounded-3xl h-10 w-full;
-      }
-
-      &__result-excerpt,
-      __button {
-        font-size: 14px !important;
-      }
-
-      &__filter-name {
-        font-size: 12px !important;
-      }
-      &__drawer:not(.pagefind-ui__hidden) {
-        @apply p-4;
-      }
-
-      &__result-link {
-        color: var(--pagefind-ui-primary);
-        // font-family: 'vw_headregular';
-        font-family: vw_headlight;
-        font-size: 1rem;
-
-        &:before {
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          content: "";
-          position: absolute;
-        }
-      }
-
-      &__result-excerpt {
-        color: var(--pagefind-ui-text);
-        order: 3;
-      }
-
-      &__drawer {
-        @apply bg-white md-position-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;
-      }
-
-      &__search-clear {
-        height: 38px;
-        top: 0;
-        @apply sm-rounded-3xl;
-      }
-
-      &__search-input {
-        font-size: 1rem;
-        font-weight: 400;
-        padding: 0 2.5rem 2px;
-      }
-
-      &__form {
-        &:before {
-          top: 14px;
-          left: 16px;
-          width: 14px;
-          height: 14px;
-        }
-      }
-
-      &__result {
-        padding: 0.875rem 0;
-        gap: 1rem;
-        @apply position-relative;
-      }
-
-      &__filter-block {
-        padding: 0.875rem 0;
-        border-width: 1px;
-      }
-
-      &__filter-group {
-        gap: 0.5rem;
-        padding-top: 0.875rem;
-      }
-
-      &__filter-value {
-        gap: 10px;
-      }
-
-      &__filter-checkbox {
-        border-radius: 3px;
-        margin-top: 1px;
-        min-width: calc(16px * var(--pagefind-ui-scale));
-      }
-
-      &__result-image {
-        @apply drop-shadow-sm w-full h-full object-contain rounded-none;
-      }
-
-      &__filter-panel {
-        // min-width: 220px;
-        @apply hidden;
-      }
-
-      &__filter-label {
-        font-size: 0.9rem;
-      }
-
-      &__button {
-        font-weight: 400;
-        height: 40px;
-      }
-
-      &__result-tag {
-        background: inherit;
-        padding: 0;
-        color: #9ca3af;
-      }
-
-      &__result-thumb {
-        max-width: 120px;
-      }
-
-      &__result-tags {
-        margin-top: 0.4rem;
-        order: 2;
-      }
-
-      &__filter-name {
-        &:after {
-          color: var(--pagefind-ui-primary);
-        }
-      }
-
-      &__result-title {
-        font-size: inherit;
-        line-height: 1;
-      }
-
-      &__filter-panel,
-      &__results-area {
-        margin-top: 0;
-      }
-
-      &__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-600 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-600" 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 lang="scss" 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;
+
+      &__search-input {
+        height: 40px !important;
+        border: 0;
+        @apply rounded-none sm-rounded-3xl h-10 w-full;
+      }
+
+      &__result-excerpt,
+      __button {
+        font-size: 14px !important;
+      }
+
+      &__filter-name {
+        font-size: 12px !important;
+      }
+      &__drawer:not(.pagefind-ui__hidden) {
+        @apply p-4;
+      }
+
+      &__result-link {
+        color: var(--pagefind-ui-primary);
+        // font-family: 'vw_headregular';
+        font-family: vw_headlight;
+        font-size: 1rem;
+
+        &:before {
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          content: "";
+          position: absolute;
+        }
+      }
+
+      &__result-excerpt {
+        color: var(--pagefind-ui-text);
+        order: 3;
+      }
+
+      &__drawer {
+        @apply bg-white md-position-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;
+      }
+
+      &__search-clear {
+        height: 38px;
+        top: 0;
+        @apply sm-rounded-3xl;
+      }
+
+      &__search-input {
+        font-size: 1rem;
+        font-weight: 400;
+        padding: 0 2.5rem 2px;
+      }
+
+      &__form {
+        &:before {
+          top: 14px;
+          left: 16px;
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      &__result {
+        padding: 0.875rem 0;
+        gap: 1rem;
+        @apply position-relative;
+      }
+
+      &__filter-block {
+        padding: 0.875rem 0;
+        border-width: 1px;
+      }
+
+      &__filter-group {
+        gap: 0.5rem;
+        padding-top: 0.875rem;
+      }
+
+      &__filter-value {
+        gap: 10px;
+      }
+
+      &__filter-checkbox {
+        border-radius: 3px;
+        margin-top: 1px;
+        min-width: calc(16px * var(--pagefind-ui-scale));
+      }
+
+      &__result-image {
+        @apply drop-shadow-sm w-full h-full object-contain rounded-none;
+      }
+
+      &__filter-panel {
+        // min-width: 220px;
+        @apply hidden;
+      }
+
+      &__filter-label {
+        font-size: 0.9rem;
+      }
+
+      &__button {
+        font-weight: 400;
+        height: 40px;
+      }
+
+      &__result-tag {
+        background: inherit;
+        padding: 0;
+        color: #9ca3af;
+      }
+
+      &__result-thumb {
+        max-width: 120px;
+      }
+
+      &__result-tags {
+        margin-top: 0.4rem;
+        order: 2;
+      }
+
+      &__filter-name {
+        &:after {
+          color: var(--pagefind-ui-primary);
+        }
+      }
+
+      &__result-title {
+        font-size: inherit;
+        line-height: 1;
+      }
+
+      &__filter-panel,
+      &__results-area {
+        margin-top: 0;
+      }
+
+      &__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>

package/src/components/Headline.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'span',
-    required: true,
-  },
-  textSize: {
-    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
-    required: false,
-    default: null
-  },
-  underline: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-</script>
-
-<template>
-  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
-    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
-    <slot />
-  </component>
-</template>
-
-<style lang="scss">
-.headline--underline {
-  @apply relative pb-4;
-
-  &:after {
-    @apply content-empty absolute left-0 bottom-0;
-    height: 3px;
-    width: 55px;
-    background-color: var(--clr-primary-400);
-  }
-
-  &:before {
-    @apply content-empty absolute left-0 bottom-px h-px;
-    width: 95%;
-    max-width: 255px;
-    background-color: #64748b
-  }
-}
-</style>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'span',
+    required: true,
+  },
+  textSize: {
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+    required: false,
+    default: null
+  },
+  underline: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
+    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
+    <slot />
+  </component>
+</template>
+
+<style lang="scss">
+.headline--underline {
+  @apply relative pb-4;
+
+  &:after {
+    @apply content-empty absolute left-0 bottom-0;
+    height: 3px;
+    width: 55px;
+    background-color: var(--clr-primary-400);
+  }
+
+  &:before {
+    @apply content-empty absolute left-0 bottom-px h-px;
+    width: 95%;
+    max-width: 255px;
+    background-color: #64748b
+  }
+}
+</style>

package/src/components/Image.astro

@@ -1,30 +1,30 @@
----
-import { Image } from "astro:assets";
-
-const { imageObject } = Astro.props;
-let inputProps = {};
-
-if (imageObject.index && imageObject.index === 1) {
-  inputProps["data-pagefind-meta"] = "image[src], image_alt[alt]";
-  inputProps["loading"] = "eager";
-}
-
-if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps["widths"] = imageObject.srcset;
-}
----
-
-<Image
-  src={imageObject.src}
-  alt={imageObject.alt}
-  height={imageObject.height}
-  width={imageObject.width}
-  itemprop="image"
-  format="avif"
-  data-pagefind-index-attrs="alt"
-  onerror="this.style.display='none';"
-  class={`h-full w-full select-none pointer-none ${
-    imageObject.class || "object-cover"
-  }`}
-  {...inputProps}
-/>
+---
+import { Image } from "astro:assets";
+
+const { imageObject } = Astro.props;
+let inputProps = {};
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps["data-pagefind-meta"] = "image[src], image_alt[alt]";
+  inputProps["loading"] = "eager";
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps["widths"] = imageObject.srcset;
+}
+---
+
+<Image
+  src={imageObject.src}
+  alt={imageObject.alt}
+  height={imageObject.height}
+  width={imageObject.width}
+  itemprop="image"
+  format="avif"
+  data-pagefind-index-attrs="alt"
+  onerror="this.style.display='none';"
+  class={`h-full w-full select-none pointer-none ${
+    imageObject.class || "object-cover"
+  }`}
+  {...inputProps}
+/>

package/src/components/Jumbatron.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-import { useSlots } from 'vue';
-
-const slots = useSlots()
-const hasSlot = (name) => {
-  return !!slots[name];
-}
-const props = defineProps({
-  small: {
-    type: Boolean,
-    default: null,
-    required: false,
-  },
-  intro: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <header class="relative flow content-grid bg-vw  mx-auto my-auto py-8 lg:w-full text-center"  :class="props.small ? 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'">
-      
-        <slot name="intro">
-          <h1 class="text-3xl  tracking-tight font-headlight text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl " v-html="props.intro" />
-        </slot>
-   
-      <slot name="subtitle" />
-      <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
-          <slot name="cta" />
-      </div>
-    </header>
-</template>
-<style lang="scss">
-.bg-vw {
-  background: radial-gradient(circle at 50% 85%,
-      #00437A 0%,
-      #001E50 100%)
-}
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+const slots = useSlots()
+const hasSlot = (name) => {
+  return !!slots[name];
+}
+const props = defineProps({
+  small: {
+    type: Boolean,
+    default: null,
+    required: false,
+  },
+  intro: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <header class="relative flow content-grid bg-vw  mx-auto my-auto py-8 lg:w-full text-center"  :class="props.small ? 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'">
+      
+        <slot name="intro">
+          <h1 class="text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl " v-html="props.intro" />
+        </slot>
+   
+      <slot name="subtitle" />
+      <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
+          <slot name="cta" />
+      </div>
+    </header>
+</template>
+<style lang="scss">
+.bg-vw {
+  background: radial-gradient(circle at 50% 85%,
+      #00437A 0%,
+      #001E50 100%)
+}
 </style>