spoko-design-system 0.2.83 → 0.2.84

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-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  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-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  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>

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>
-.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>
+.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 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>
-.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>
+.bg-vw {
+  background: radial-gradient(circle at 50% 85%,
+      #00437A 0%,
+      #001E50 100%)
+}
 </style>