spoko-design-system 0.5.5 → 0.5.7

package/src/components/SlimBanner.vue

@@ -1,73 +1,73 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  showCloseButton: {
-    type: Boolean,
-    default: true,
-    required: false,
-  },
-})
-const isShow = ref(true)
-const toggleVisibility = () => {
-  isShow.value = !isShow.value
-}
-</script>
-
-<template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
-    <span
-      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
-    <span class="leading-none "><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
-        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
-    </span>
-
-    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
-      <span class="close close-dark"></span>
-    </button>
-  </div>
-  <div v-else data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
-    <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
-        data-text="TERRORIST" /> <span data-text="STATE" />
-    </div>
-    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
-      aria-label="Toggle">
-      <span class="close close-light"></span>
-    </button>
-  </div>
-</template>
-
-<style>
-.btn-close {
- @apply ml-3 relative w-5 h-5;
-}
-
-.close {
-  @apply absolute top-0 left-0 opacity-50 transition-opacity duration-200;
-}
-
-.btn-close:hover .close {
-  @apply opacity-100;
-}
-
-.close:before,
-.close:after {
-  position: absolute;
-  left: 0.5rem;
-  content: ' ';
-  height: 1.25rem;
-  width: 2px;
-}
-
-.close:before {
-  transform: rotate(45deg);
-}
-
-.close:after {
-  transform: rotate(-45deg);
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  showCloseButton: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+})
+const isShow = ref(true)
+const toggleVisibility = () => {
+  isShow.value = !isShow.value
+}
+</script>
+
+<template>
+  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
+    <span
+      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
+    <span class="leading-none "><span
+        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
+        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+    </span>
+
+    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close close-dark"></span>
+    </button>
+  </div>
+  <div v-else data-pagefind-ignore
+    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
+    <div class="tracking-widest leading-none">
+      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
+        data-text="TERRORIST" /> <span data-text="STATE" />
+    </div>
+    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close close-light"></span>
+    </button>
+  </div>
+</template>
+
+<style>
+.btn-close {
+ @apply ml-3 relative w-5 h-5;
+}
+
+.close {
+  @apply absolute top-0 left-0 opacity-50 transition-opacity duration-200;
+}
+
+.btn-close:hover .close {
+  @apply opacity-100;
+}
+
+.close:before,
+.close:after {
+  position: absolute;
+  left: 0.5rem;
+  content: ' ';
+  height: 1.25rem;
+  width: 2px;
+}
+
+.close:before {
+  transform: rotate(45deg);
+}
+
+.close:after {
+  transform: rotate(-45deg);
 }</style>

package/src/components/Table.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-const props = defineProps<{
-  data: string;
-}>();
-
-const theads = Object.keys(Object.values(props.data)[0])
-
-const capitalizeFirstLetter = (text: String) => {
-  return text[0].toUpperCase() + text.slice(1)
-}
-
-</script>
-
-<template>
-  <table class="table-auto text-left border bg-white shadow-md">
-    <thead class="bg-gray-500 text-white">
-      <tr class="border">
-        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
-          {{ capitalizeFirstLetter(thead) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="border" v-for="row in props.data" :key="row">
-        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
-          {{ row[key] }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
+<script setup lang="ts">
+const props = defineProps<{
+  data: string;
+}>();
+
+const theads = Object.keys(Object.values(props.data)[0])
+
+const capitalizeFirstLetter = (text: String) => {
+  return text[0].toUpperCase() + text.slice(1)
+}
+
+</script>
+
+<template>
+  <table class="table-auto text-left border bg-white shadow-md">
+    <thead class="bg-gray-500 text-white">
+      <tr class="border">
+        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
+          {{ capitalizeFirstLetter(thead) }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border" v-for="row in props.data" :key="row">
+        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
+          {{ row[key] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+

package/src/components/TableOfContents.astro

@@ -1,15 +1,15 @@
----
-const { headers } = Astro.props;
----
-
-<ul class="flex flex-col gap-4 mt-24">
-  {
-    headers.map(({ slug, text }) => {
-      return (
-        <li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
-          #<a href={`#${slug}`}>{text}</a>
-        </li>
-      );
-    })
-  }
-</ul>
+---
+const { headers } = Astro.props;
+---
+
+<ul class="flex flex-col gap-4 mt-24">
+  {
+    headers.map(({ slug, text }) => {
+      return (
+        <li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
+          #<a href={`#${slug}`}>{text}</a>
+        </li>
+      );
+    })
+  }
+</ul>

package/src/components/Translations.vue

@@ -1,23 +1,23 @@
-
-<script setup lang="ts">
-import { PropType } from 'vue';
-
-const props = defineProps({
-  lang: {
-    type: String
-  },
-  translations: {
-    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
-  }
-});
-</script>
-
-<template>
-  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
-    <a aria-label="Change language" type="button" :href="translations.uri"
-      :title="translations.name ? translations.name : translations.title"
-      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
-  </div>
-</template>
-
-
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  lang: {
+    type: String
+  },
+  translations: {
+    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
+  }
+});
+</script>
+
+<template>
+  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
+    <a aria-label="Change language" type="button" :href="translations.uri"
+      :title="translations.name ? translations.name : translations.title"
+      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+  </div>
+</template>
+
+

package/src/components/flags/FlagPL.vue

@@ -1,4 +1,4 @@
-<template>
-      <span
-            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
+<template>
+      <span
+            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
 </template>

package/src/components/flags/FlagUA.vue

@@ -1,3 +1,3 @@
-<template>
-    <span class="flag-ua" />
+<template>
+    <span class="flag-ua" />
 </template>

package/src/components/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/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/config.ts

@@ -1,56 +1,56 @@
-export const SITE = {
-  title: "Spoko Design System",
-  description: "The Astro design system which facilitates the development of websites.",
-  defaultLanguage: "en_US",
-  twitter: "@spokospace",
-  github: "spokospace",
-  linkedin: "szymonberski",
-};
-
-export const OPEN_GRAPH = {
-  image: {
-    src: "",
-    alt: "",
-  },
-  twitter: "",
-};
-
-export const SIDEBAR = [
-  { text: "Core", header: true },
-  { text: "Introduction", link: "/core/introduction/" },
-  { text: "Colors", link: "/core/colors/" },
-  { text: "Typography", link: "/core/typography/" },
-  { text: "Shadows", link: "/core/shadows/" },
-  { text: "Grid", link: "/core/grid/" },
-
-  { text: "Components", header: true },
-  { text: "Badges", link: "/components/badges/" },
-  { text: "Breadcrumbs", link: "/components/breadcrumbs/" },
-  { text: "Buttons", link: "/components/buttons/" },
-  { text: "Card", link: "/components/card/" },
-  { text: "Carousel", link: "/components/carousel/" },
-  { text: "Copyright", link: "/components/copyright/" },
-  { text: "Details List", link: "/components/details-list/" },
-  { text: "Features List", link: "/components/features-list/"},
-  { text: "HandDrive", link: "/components/hand-drive/" },
-  { text: "Headline", link: "/components/headline/" },
-  { text: "Icons", link: "/components/icons/" },
-  { text: "Image", link: "/components/image/" },
-  { text: "Input", link: "/components/input/" },
-  { text: "Jumbotron", link: "/components/jumbotron/" },
-  { text: "Modal", link: "/components/modal/" },
-  { text: "PostHeader", link: "/components/post-header/" },
-  { text: "PR-Code", link: "/components/pr-code/" },
-  { text: "Product Number", link: "/components/product-number/" },
-  { text: "Product Tile", link: "/components/product-tile/" },
-  { text: "Quote", link: "/components/quote/" },
-  { text: "Table", link: "/components/table/" },
-
-  { text: "Extras", header: true },
-  { text: "Flags", link: "/components/flags/" },
-  { text: "SlimBanner", link: "/components/slimbanner/" },
-  { text: "FuckRussia", link: "/components/fuck-russia/" },
-
-  { text: "Patterns", header: true },
-  { text: "Introduction", link: "/patterns/introduction/" },
-];
+export const SITE = {
+  title: "Spoko Design System",
+  description: "The Astro design system which facilitates the development of websites.",
+  defaultLanguage: "en_US",
+  twitter: "@spokospace",
+  github: "spokospace",
+  linkedin: "szymonberski",
+};
+
+export const OPEN_GRAPH = {
+  image: {
+    src: "",
+    alt: "",
+  },
+  twitter: "",
+};
+
+export const SIDEBAR = [
+  { text: "Core", header: true },
+  { text: "Introduction", link: "/core/introduction/" },
+  { text: "Colors", link: "/core/colors/" },
+  { text: "Typography", link: "/core/typography/" },
+  { text: "Shadows", link: "/core/shadows/" },
+  { text: "Grid", link: "/core/grid/" },
+
+  { text: "Components", header: true },
+  { text: "Badges", link: "/components/badges/" },
+  { text: "Breadcrumbs", link: "/components/breadcrumbs/" },
+  { text: "Buttons", link: "/components/buttons/" },
+  { text: "Card", link: "/components/card/" },
+  { text: "Carousel", link: "/components/carousel/" },
+  { text: "Copyright", link: "/components/copyright/" },
+  { text: "Details List", link: "/components/details-list/" },
+  { text: "Features List", link: "/components/features-list/"},
+  { text: "HandDrive", link: "/components/hand-drive/" },
+  { text: "Headline", link: "/components/headline/" },
+  { text: "Icons", link: "/components/icons/" },
+  { text: "Image", link: "/components/image/" },
+  { text: "Input", link: "/components/input/" },
+  { text: "Jumbotron", link: "/components/jumbotron/" },
+  { text: "Modal", link: "/components/modal/" },
+  { text: "PostHeader", link: "/components/post-header/" },
+  { text: "PR-Code", link: "/components/pr-code/" },
+  { text: "Product Number", link: "/components/product-number/" },
+  { text: "Product Tile", link: "/components/product-tile/" },
+  { text: "Quote", link: "/components/quote/" },
+  { text: "Table", link: "/components/table/" },
+
+  { text: "Extras", header: true },
+  { text: "Flags", link: "/components/flags/" },
+  { text: "SlimBanner", link: "/components/slimbanner/" },
+  { text: "FuckRussia", link: "/components/fuck-russia/" },
+
+  { text: "Patterns", header: true },
+  { text: "Introduction", link: "/patterns/introduction/" },
+];