spoko-design-system 0.9.2 → 0.9.4

package/src/components/Headline.vue

@@ -1,88 +1,88 @@
-<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
-  },
-  fontFamily: {
-    type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
-    required: false,
-    default: 'head'
-  },
-  fontWeight: {
-    type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
-    required: false,
-    default: 'regular'
-  },
-  underline: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-
-// Generate the typography class based on font family and weight
-const getTypographyClass = (): string => {
-  const family = props.fontFamily
-  const weight = props.fontWeight
-  
-  // Handle special cases for mono fonts
-  if (family === 'novamono' || family === 'mono') {
-    return `font-${family}`
-  }
-  
-  // For head family, generate specific classes
-  if (family === 'head') {
-    if (weight === 'light') return 'headline-light'
-    if (weight === 'bold') return 'headline-bold'
-    if (weight === 'light-bold') return 'headline-light-bold'
-    if (weight === 'light-thin') return 'headline-light-thin'
-    return 'headline' // for regular weight
-  }
-  
-  // For text family, generate appropriate class
-  if (family === 'text') {
-    return `font-text${weight}`
-  }
-  
-  // Default fallback
-  return 'headline'
-}
-
-const typographyClass = getTypographyClass()
-</script>
-
-<template>
-  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
-    :class="`${typographyClass} ${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
-  }
-}
+<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
+  },
+  fontFamily: {
+    type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
+    required: false,
+    default: 'head'
+  },
+  fontWeight: {
+    type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
+    required: false,
+    default: 'regular'
+  },
+  underline: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+// Generate the typography class based on font family and weight
+const getTypographyClass = (): string => {
+  const family = props.fontFamily
+  const weight = props.fontWeight
+  
+  // Handle special cases for mono fonts
+  if (family === 'novamono' || family === 'mono') {
+    return `font-${family}`
+  }
+  
+  // For head family, generate specific classes
+  if (family === 'head') {
+    if (weight === 'light') return 'headline-light'
+    if (weight === 'bold') return 'headline-bold'
+    if (weight === 'light-bold') return 'headline-light-bold'
+    if (weight === 'light-thin') return 'headline-light-thin'
+    return 'headline' // for regular weight
+  }
+  
+  // For text family, generate appropriate class
+  if (family === 'text') {
+    return `font-text${weight}`
+  }
+  
+  // Default fallback
+  return 'headline'
+}
+
+const typographyClass = getTypographyClass()
+</script>
+
+<template>
+  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
+    :class="`${typographyClass} ${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/{layout → Layout}/CallToAction.astro

@@ -1,53 +1,53 @@
----
-import Button from "./../Button.vue"
-
-interface Props {
-  class?: string;
-  title?: string;
-  description?: string;
-}
-
-const { class: additionalClasses, title: propTitle, description: propDescription } = Astro.props;
-
-// Sprawdzamy, czy slot 'description' ma jakąkolwiek zawartość
-const hasDescriptionSlotContent = Astro.slots.has('description');
----
-
-<section
-  class:list={[
-    "full-width border-blue-medium bg-blue-darker/5 border-t-4 md:(border-t-0 px-6 bg-white) my-8",
-    additionalClasses,
-  ]}
->
-  <div class="flex flex-col items-center gap-4 md:(flex-row border-l-4 border-blue-medium bg-blue-darker/5 px-6) py-6">
-    <div class="flex-shrink-0 hidden md:block">
-      <slot name="icon">
-        <span i-ph:sparkle-thin class="mr-1 text-8 md:text-10 text-brand-secondary"></span>
-      </slot>
-    </div>
-    <div class="flex-1 text-center md:text-left">
-      <h3 class="text-lg font-semibold text-blue-darker">
-        <slot name="title">
-          {propTitle || 'Domyślny tytuł akcji'}
-        </slot>
-      </h3>
-      {(propDescription || hasDescriptionSlotContent) && (
-        <p class="text-blue-darker mt-1">
-          <slot name="description">
-            {propDescription || 'Domyślny opis, który zachęca do działania.'}
-          </slot>
-        </p>
-      )}
-    </div>
-    <slot name="action">
-      <Button
-        type="button"
-        class:list="w-fit place-self-center gap-2"
-        tertiary
-        rounded
-        title="Domyślny przycisk akcji">
-        Kliknij mnie!
-      </Button>
-    </slot>
-  </div>
+---
+import Button from "./../Button.vue"
+
+interface Props {
+  class?: string;
+  title?: string;
+  description?: string;
+}
+
+const { class: additionalClasses, title: propTitle, description: propDescription } = Astro.props;
+
+// Sprawdzamy, czy slot 'description' ma jakąkolwiek zawartość
+const hasDescriptionSlotContent = Astro.slots.has('description');
+---
+
+<section
+  class:list={[
+    "full-width border-blue-medium bg-blue-darker/5 border-t-4 md:(border-t-0 px-6 bg-white) my-8",
+    additionalClasses,
+  ]}
+>
+  <div class="flex flex-col items-center gap-4 md:(flex-row border-l-4 border-blue-medium bg-blue-darker/5 px-6) py-6">
+    <div class="flex-shrink-0 hidden md:block">
+      <slot name="icon">
+        <span i-ph:sparkle-thin class="mr-1 text-8 md:text-10 text-brand-secondary"></span>
+      </slot>
+    </div>
+    <div class="flex-1 text-center md:text-left">
+      <h3 class="text-lg font-semibold text-blue-darker">
+        <slot name="title">
+          {propTitle || 'Domyślny tytuł akcji'}
+        </slot>
+      </h3>
+      {(propDescription || hasDescriptionSlotContent) && (
+        <p class="text-blue-darker mt-1">
+          <slot name="description">
+            {propDescription || 'Domyślny opis, który zachęca do działania.'}
+          </slot>
+        </p>
+      )}
+    </div>
+    <slot name="action">
+      <Button
+        type="button"
+        class:list="w-fit place-self-center gap-2"
+        tertiary
+        rounded
+        title="Domyślny przycisk akcji">
+        Kliknij mnie!
+      </Button>
+    </slot>
+  </div>
 </section>

package/src/components/{layout → Layout}/Container.astro

@@ -1,7 +1,7 @@
----
-const { class: className, isFullWidth } = Astro.props;
----
-
-<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
-  <slot />
-</div>
+---
+const { class: className, isFullWidth } = Astro.props;
+---
+
+<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
+  <slot />
+</div>

package/src/components/{layout → Layout}/Header.astro

@@ -1,80 +1,80 @@
----
-const { class: className } = Astro.props;
-import { Icon } from "astro-icon/components";
-
-const navItemsLeft = [
-  {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    img: "/Components.jpg",
-  },
-  {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    img: "/Patterns.jpg",
-  },
-];
----
-
-<nav
-  itemscope
-  itemtype="http://schema.org/WPHeader"
-  class:list={[
-    className,
-    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
-  ]}
->
-  <div class="flex items-center justify-start sm:items-stretch order-1">
-    <slot name="logo" />
-
-    <div class="hidden sm:block sm:ml-6">
-      <div class="flex space-x-4" itemprop="hasPart">
-        {
-          navItemsLeft.map(({ title, description, url, img }) => (
-            <a
-              href={url}
-              class="text-gray-400 hover:bg-blue-darker hover:text-white px-3 py-1 rounded-full text-sm font-medium"
-              title={description}
-              itemprop="url"
-            >
-              {title}
-            </a>
-          ))
-        }
-      </div>
-    </div>
-  </div>
-
-  <div
-    class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
-  >
-    <slot name="search" />
-  </div>
-
-  <div
-    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
-    itemprop="hasPart"
-    itemscope
-    itemtype="http://schema.org/SiteNavigationElement"
-  >
-    <a
-      class="icon-btn mx-2"
-      title=""
-      aria-label=""
-      href="#"
-      itemprop="url"
-      data-astro-reload
-    >
-      <Icon name="carbon:language" />
-    </a>
-  </div>
-</nav>
-
-<style is:global>
-  nav {
-    /* display: grid;  */
-    place-items: center;
-  }
-</style>
+---
+const { class: className } = Astro.props;
+import { Icon } from "astro-icon/components";
+
+const navItemsLeft = [
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    img: "/Components.jpg",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    img: "/Patterns.jpg",
+  },
+];
+---
+
+<nav
+  itemscope
+  itemtype="http://schema.org/WPHeader"
+  class:list={[
+    className,
+    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
+  ]}
+>
+  <div class="flex items-center justify-start sm:items-stretch order-1">
+    <slot name="logo" />
+
+    <div class="hidden sm:block sm:ml-6">
+      <div class="flex space-x-4" itemprop="hasPart">
+        {
+          navItemsLeft.map(({ title, description, url, img }) => (
+            <a
+              href={url}
+              class="text-gray-400 hover:bg-blue-darker hover:text-white px-3 py-1 rounded-full text-sm font-medium"
+              title={description}
+              itemprop="url"
+            >
+              {title}
+            </a>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
+  >
+    <slot name="search" />
+  </div>
+
+  <div
+    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
+    itemprop="hasPart"
+    itemscope
+    itemtype="http://schema.org/SiteNavigationElement"
+  >
+    <a
+      class="icon-btn mx-2"
+      title=""
+      aria-label=""
+      href="#"
+      itemprop="url"
+      data-astro-reload
+    >
+      <Icon name="carbon:language" />
+    </a>
+  </div>
+</nav>
+
+<style is:global>
+  nav {
+    /* display: grid;  */
+    place-items: center;
+  }
+</style>

package/src/components/LeftSidebar.astro

@@ -1,53 +1,53 @@
----
-import { SIDEBAR } from "../config";
-import { Astronav, MenuItems } from "astro-navbar";
-const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.slice(1);
-
-const isCurrentPage = (item) => {
-  if (item.link) {
-    return item.link.includes(currentPageMatch);
-  }
-  return false;
-};
-
-const getLinkClasses = (link) => {
-  const baseClasses =
-    "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
-
-  if (isCurrentPage(link)) {
-    return baseClasses + " border-slate-500 text-slate-900";
-  } else {
-    return baseClasses;
-  }
-};
----
-
-<Astronav>
-  <MenuItems
-    class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-lightest bg-opacity-5 flex)"
-  >
-    <ul class="mt-0 mb-auto">
-      {
-        SIDEBAR.map((item) =>
-          item.header ? (
-            <h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2>
-          ) : (
-            <li class={getLinkClasses(item)}>
-              <a href={item.link}>{item.text}</a>
-            </li>
-          ),
-        )
-      }
-    </ul>
-  </MenuItems>
-</Astronav>
-
-<script is:inline>
-  window.addEventListener("DOMContentLoaded", (event) => {
-    var target = document.querySelector('[aria-current="page"]');
-    if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
-    }
-  });
-</script>
+---
+import { SIDEBAR } from "../config";
+import { Astronav, MenuItems } from "astro-navbar";
+const { currentPage } = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+
+const isCurrentPage = (item) => {
+  if (item.link) {
+    return item.link.includes(currentPageMatch);
+  }
+  return false;
+};
+
+const getLinkClasses = (link) => {
+  const baseClasses =
+    "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900";
+
+  if (isCurrentPage(link)) {
+    return baseClasses + " border-slate-500 text-slate-900";
+  } else {
+    return baseClasses;
+  }
+};
+---
+
+<Astronav>
+  <MenuItems
+    class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-lightest bg-opacity-5 flex)"
+  >
+    <ul class="mt-0 mb-auto">
+      {
+        SIDEBAR.map((item) =>
+          item.header ? (
+            <h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2>
+          ) : (
+            <li class={getLinkClasses(item)}>
+              <a href={item.link}>{item.text}</a>
+            </li>
+          ),
+        )
+      }
+    </ul>
+  </MenuItems>
+</Astronav>
+
+<script is:inline>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    var target = document.querySelector('[aria-current="page"]');
+    if (target && target.offsetTop > window.innerHeight - 100) {
+      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+    }
+  });
+</script>