spoko-design-system 0.9.3 → 0.9.4

package/src/components/MainColors.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { colors } from "./../../uno-config/theme/colors";
-
-// Get color categories
-const colorCategories = Object.entries(colors);
-</script>
-
-<template>
-  <div class="flex flex-col space-y-12">
-    <div v-for="[category, shades] in colorCategories" :key="category">
-      <h3 class="capitalize">{{ category }}</h3>
-      <div class="grid grid-cols-3 md:grid-cols-9">
-        <div v-for="(value, name) in shades" :key="name" class="mb-6">
-          <div class="h-12 transition-all" :style="`background: ${value}`"></div>
-          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
-            <span>{{ name }}</span>
-            <span class="uppercase text-xs">{{ value }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<script setup lang="ts">
+import { colors } from "./../../uno-config/theme/colors";
+
+// Get color categories
+const colorCategories = Object.entries(colors);
+</script>
+
+<template>
+  <div class="flex flex-col space-y-12">
+    <div v-for="[category, shades] in colorCategories" :key="category">
+      <h3 class="capitalize">{{ category }}</h3>
+      <div class="grid grid-cols-3 md:grid-cols-9">
+        <div v-for="(value, name) in shades" :key="name" class="mb-6">
+          <div class="h-12 transition-all" :style="`background: ${value}`"></div>
+          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
+            <span>{{ name }}</span>
+            <span class="uppercase text-xs">{{ value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

package/src/components/MainInput.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-const props = defineProps<{
-  label: string;
-}>();
-</script>
-
-<template>
-  <label class="group text-left w-full max-w-xs flex flex-col">
-    <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
-    }}</span>
-    <input
-      class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
-      type="text" />
-  </label>
-</template>
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <label class="group text-left w-full max-w-xs flex flex-col">
+    <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
+    }}</span>
+    <input
+      class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
+      type="text" />
+  </label>
+</template>

package/src/components/Modal.astro

@@ -1,27 +1,27 @@
----
-const { id, open } = Astro.props;
-import Button from "../components/Button.vue";
----
-
-<style >
-  dialog {
-    @apply fixed top-0 left-0 right-0 bottom-0;
-
-    &::backdrop {
-      @apply bg-slate-medium/50 fixed;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
-  }
-</style>
-
-<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
-
-<dialog id={id} class="p-6">
-  <slot name="main" />
-  <form method="dialog">
-    <slot name="close" />
-  </form>
-</dialog>
+---
+const { id, open } = Astro.props;
+import Button from "../components/Button.vue";
+---
+
+<style >
+  dialog {
+    @apply fixed top-0 left-0 right-0 bottom-0;
+
+    &::backdrop {
+      @apply bg-slate-medium/50 fixed;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+  }
+</style>
+
+<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
+
+<dialog id={id} class="p-6">
+  <slot name="main" />
+  <form method="dialog">
+    <slot name="close" />
+  </form>
+</dialog>

package/src/components/PageContent.astro

@@ -1,5 +1,5 @@
-<article id="article" class="content">
-  <section class="main-section">
-    <slot />
-  </section>
-</article>
+<article id="article" class="content">
+  <section class="main-section">
+    <slot />
+  </section>
+</article>

package/src/components/PartNumber.vue

@@ -1,28 +1,28 @@
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
-    default: 'div',
-    required: true,
-  },
-  number: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  class: {
-    type: String,
-    default: '',
-    required: false,
-  },
-})
-
-</script>
-
-<template>
-  <component :is="props.as" :class="props.class">
-    {{ props.number }}
-  </component>
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
+    default: 'div',
+    required: true,
+  },
+  number: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  class: {
+    type: String,
+    default: '',
+    required: false,
+  },
+})
+
+</script>
+
+<template>
+  <component :is="props.as" :class="props.class">
+    {{ props.number }}
+  </component>
 </template>

package/src/components/Post/PostCategories.astro

@@ -1,42 +1,42 @@
----
-interface Category {
-  id: number;
-  name: string;
-  slug: string;
-  description: string;
-  count: number;
-  parent: number;
-  link: string;
-}
-
-interface Props {
-  categories: Category[];
-  lang?: string;
-}
-
-const { categories, lang = 'en' } = Astro.props;
-
-// Determine the category label based on language
-const categoryLabel = lang === 'pl' ? 'Kategoria' : 'Category';
----
-
-<div class="text-brand-secondary uppercase text-base z-3 relative w-full">
-  {
-    categories && categories.length > 0
-      ? categories.map((category, index) => (
-          <>
-            {index > 0 && (
-              <span class="w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative" />
-            )}
-            <a
-              class="term-link text-sm sm:text-base hover:text-light-blue-400"
-              data-pagefind-filter={`${categoryLabel}:${category.name}`}
-              href={category.link}
-            >
-              {category.name}
-            </a>
-          </>
-        ))
-      : null
-  }
+---
+interface Category {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  count: number;
+  parent: number;
+  link: string;
+}
+
+interface Props {
+  categories: Category[];
+  lang?: string;
+}
+
+const { categories, lang = 'en' } = Astro.props;
+
+// Determine the category label based on language
+const categoryLabel = lang === 'pl' ? 'Kategoria' : 'Category';
+---
+
+<div class="text-brand-secondary uppercase text-base z-3 relative w-full">
+  {
+    categories && categories.length > 0
+      ? categories.map((category, index) => (
+          <>
+            {index > 0 && (
+              <span class="w-px h-2.5 bg-gray-300 mx-2.5 inline-block relative" />
+            )}
+            <a
+              class="term-link text-sm sm:text-base hover:text-light-blue-400"
+              data-pagefind-filter={`${categoryLabel}:${category.name}`}
+              href={category.link}
+            >
+              {category.name}
+            </a>
+          </>
+        ))
+      : null
+  }
 </div>

package/src/components/Post/PostCategories.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-interface Category {
-  id: number;
-  name: string;
-  slug: string;
-  description: string;
-  link: string;
-}
-
-interface Props {
-  category: Category;
-  active?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  active: false
-});
-</script>
-
-<template>
-  <a
-    :href="props.category.link"
-    class="category-link-base"
-    :class="{ 'category-link-active': props.active }"
-    :title="props.category.description || props.category.name"
-  >
-    {{ props.category.name }}
-  </a>
-</template>
-
+<script setup lang="ts">
+interface Category {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  link: string;
+}
+
+interface Props {
+  category: Category;
+  active?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: false
+});
+</script>
+
+<template>
+  <a
+    :href="props.category.link"
+    class="category-link-base"
+    :class="{ 'category-link-active': props.active }"
+    :title="props.category.description || props.category.name"
+  >
+    {{ props.category.name }}
+  </a>
+</template>
+
 <!-- No <style> section - all styles are now UnoCSS shortcuts -->

package/src/components/PostHeader.astro

@@ -1,103 +1,103 @@
----
-interface Props {
-  title: string;
-  image: string;
-  date?: string | null;
-  lang: string;
-
-  author: {
-    firstName: string;
-    name: string;
-  } | null;
-
-  categories: {
-    name: string;
-    uri: string;
-  }[];
-}
-
-const { image, title, categories, date, author, lang } = Astro.props;
-import PostCategories from "./Post/PostCategories.astro";
-import Date from "./Date.astro";
----
-
-<header
-  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest"
->
-  <div class="heading flex flex-wrap">
-    <div
-      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
-    >
-      <h1
-        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
-      >
-        {title}
-      </h1>
-      <PostCategories categories={categories} lang={lang} />
-      <div class="order-3 flex items-center text-gray-1 00">
-        {
-          author && (
-            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
-              {author.name}
-            </span>
-          )
-        }
-        {author && date && <span class="mx-1">-</span>}
-        {date && <Date date={date} />}
-      </div>
-    </div>
-  </div>
-  <div class="featured-image">
-    <img src={image} alt={title} />
-  </div>
-</header>
-
-<style >
-  .post-header {
-    @apply flex relative items-center;
-    min-height: 19vw;
-  }
-
-  .heading {
-    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
-  }
-
-  .featured-image {
-    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
-
-    &:before,
-    &:after {
-      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
-    }
-
-    &:before {
-      z-index: 5;
-      background: linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.95),
-        transparent 30%,
-        transparent 70%,
-        rgba(0, 0, 0, 0.95)
-      );
-      opacity: 0.5;
-    }
-
-    &:after {
-      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
-      opacity: 0.8;
-    }
-
-    img {
-      @apply w-full h-full object-cover block max-w-full;
-    }
-  }
-</style>
-
-<style is:global>
-  .icon {
-    @apply text-brand-secondary mr-2;
-    width: 1em;
-    height: 1em;
-    fill: currentcolor;
-  }
-</style>
+---
+interface Props {
+  title: string;
+  image: string;
+  date?: string | null;
+  lang: string;
+
+  author: {
+    firstName: string;
+    name: string;
+  } | null;
+
+  categories: {
+    name: string;
+    uri: string;
+  }[];
+}
+
+const { image, title, categories, date, author, lang } = Astro.props;
+import PostCategories from "./Post/PostCategories.astro";
+import Date from "./Date.astro";
+---
+
+<header
+  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest"
+>
+  <div class="heading flex flex-wrap">
+    <div
+      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
+    >
+      <h1
+        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
+      >
+        {title}
+      </h1>
+      <PostCategories categories={categories} lang={lang} />
+      <div class="order-3 flex items-center text-gray-1 00">
+        {
+          author && (
+            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+              {author.name}
+            </span>
+          )
+        }
+        {author && date && <span class="mx-1">-</span>}
+        {date && <Date date={date} />}
+      </div>
+    </div>
+  </div>
+  <div class="featured-image">
+    <img src={image} alt={title} />
+  </div>
+</header>
+
+<style >
+  .post-header {
+    @apply flex relative items-center;
+    min-height: 19vw;
+  }
+
+  .heading {
+    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
+  }
+
+  .featured-image {
+    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
+
+    &:before,
+    &:after {
+      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
+    }
+
+    &:before {
+      z-index: 5;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.95),
+        transparent 30%,
+        transparent 70%,
+        rgba(0, 0, 0, 0.95)
+      );
+      opacity: 0.5;
+    }
+
+    &:after {
+      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
+      opacity: 0.8;
+    }
+
+    img {
+      @apply w-full h-full object-cover block max-w-full;
+    }
+  }
+</style>
+
+<style is:global>
+  .icon {
+    @apply text-brand-secondary mr-2;
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+  }
+</style>