spoko-design-system 0.2.0 → 0.2.2

package/.astro/icon.d.ts

@@ -1,5 +1,5 @@
 // Automatically generated by astro-icon
-// 58e65dea937db0c3380bd0c4fd9e7fb804e1cf491be9bc3648a1426d609ba681
+// 3c37914558667f7b928f73843c6dc6c8b7a94c23dd8b1fd64b1f03bf751bb1b8
 
 declare module 'virtual:astro-icon' {
 	export type Icon = 
@@ -495,7 +495,7 @@ declare module 'virtual:astro-icon' {
 		| "flowbite:chevron-right-outline"
 		| "flowbite:map-location-outline"
 		| "flowbite:map-pin-alt-solid"
-		| "flowbite:x-outline"
+		| "flowbite:close-outline"
 		| "flowbite:messages-outline"
 		| "flowbite:arrow-down-to-bracket-outline"
 		| "flowbite:check-outline"

package/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

package/dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-c676b6d3'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "/",
-    "revision": "0.9rameh2lp0g"
+    "revision": "0.e6nv4jtuc7o"
   }], {
     "directoryIndex": "index.html"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "scripts": {
     "dev": "astro dev",

package/src/components/Header/Header.astro

@@ -15,7 +15,7 @@ import Search from "astro-pagefind/components/Search";
   >
     <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" href="/"> SDS</a>
+      <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"

package/src/components/ProductDetailName.vue

@@ -22,8 +22,8 @@ const props = defineProps({
 
 <template>
   <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex">
-    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
-      {{ props.text }}
+    <span :class="styles && styles.length ? styles : 'mt-auto'">
+      <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
     </span>
   </component>
 </template>
@@ -42,7 +42,7 @@ const props = defineProps({
         height: 1em;
         white-space: nowrap;
         font-weight: 100;
-        bottom: 3px;
+        bottom: 2px;
         left: 0;
         flex: 1;
         content: '';

package/src/components/ProductDetailsList.vue

@@ -25,7 +25,7 @@ const props = defineProps({
       <col>
     </colgroup>
     <tbody>
-      <tr class="border" v-for="row, index in props.items" :key="index">
+      <tr v-for="row, index in props.items" :key="index">
         <ProductDetailName as="th" :text="row.name" />
         <td>
           <slot
@@ -52,11 +52,11 @@ const props = defineProps({
     }
 
     th {
-      @apply pr-0
+      @apply px-0
     }
 
     td {
-      @apply relative;
+      @apply relative pt-0;
     }
   }
 </style>

package/src/components/ProductNumber.astro

@@ -67,7 +67,7 @@ const niceName = (string: string, separator = "\u00A0") => {
 };
 
 
-const classes = `product-number ${big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`  }`
+const classes = `product-number ${big ? "text-lg leading-none" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`  }`
 
 ---
 
@@ -78,7 +78,7 @@ const classes = `product-number ${big ? "text-lg" : `text-sm ${className ? class
   productNumber !== null && (
    
 
-      <PartNumber class={`product-code ${classes}`} number={productNumber} as={isPdp ? 'h2' : 'div'} />
+      <PartNumber class={`${classes} product-code`} number={productNumber} as={isPdp ? 'h2' : 'div'} />
 
       <div
         class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
@@ -98,7 +98,7 @@ const classes = `product-number ${big ? "text-lg" : `text-sm ${className ? class
 
 <!-- {!copyDisabled && ( -->
   <ButtonCopy
-    class="top-3.5 right-0"
+    class="top-1 right-0"
     productNumber={String(productNumber)}
     texts={butonTexts}
     tooltipClasses=""

package/src/config.ts

@@ -42,8 +42,8 @@ export const SIDEBAR = [
   { text: "PR-Code", link: "/components/pr-code/" },
   { text: "Product Number", link: "/components/product-number/" },
   { text: "Product Tile", link: "/components/product-tile/" },
-  { text: "Table", link: "/components/table/" },
   { text: "Quote", link: "/components/quote/" },
+  { text: "Table", link: "/components/table/" },
 
   { text: "Extras", header: true },
   { text: "Flags", link: "/components/flags/" },

package/src/layouts/Layout.astro

@@ -1,7 +1,7 @@
 ---
 import HeadCommon from "./partials/HeadCommon.astro";
 import FooterCommon from "./partials/FooterCommon.astro";
-import HeadSEO from "../components/HeadSEO.astro";
+import HeadSEO from "../layouts/partials/HeadSEO.astro";
 import * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
 import "../styles/main.scss";

package/src/layouts/MainLayout.astro

@@ -1,6 +1,6 @@
 ---
 import HeadCommon from "./partials/HeadCommon.astro";
-import HeadSEO from "../components/HeadSEO.astro";
+import HeadSEO from "../layouts/partials/HeadSEO.astro";
 import Header from "../components/Header/Header.astro";
 import PageContent from "../components/PageContent.astro";
 import LeftSidebar from "../components/LeftSidebar.astro";

package/src/{components → layouts/partials}/HeadSEO.astro

@@ -1,5 +1,5 @@
 ---
-import { SITE, OPEN_GRAPH } from '../config';
+import { SITE, OPEN_GRAPH } from '../../config';
 export interface Props {
 	content: any;
 	site: any;
@@ -37,5 +37,5 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
   TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
   Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
   https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+  Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
 -->

package/src/pages/index.astro

@@ -7,75 +7,101 @@ import Layout from "../layouts/Layout.astro";
 import Headline from "../components/Headline.vue";
 import Button from "../components/Button.vue";
 import Quote from "../components/Quote.vue";
+import FeaturesList from "../components/FeaturesList.vue";
 
 const navItems = [
-    {
-        title: "Core",
-        description: "Base colors, typography, shadows etc.",
-        url: "/core/introduction",
-        icon: "ant-design:cluster-outlined"
-    },
-    {
-        title: "Components",
-        description: "The building blocks for our UI.",
-        url: "/components/buttons",
-        icon: "ant-design:build-twotone"
-    },
-    {
-        title: "Patterns",
-        description: "Common patterns for building interfaces.",
-        url: "/patterns/introduction",
-        icon: "ant-design:audit-outlined"
-    },
+  {
+    title: "Core",
+    description: "Base colors, typography, shadows etc.",
+    url: "/core/introduction",
+    icon: "ant-design:cluster-outlined",
+  },
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    icon: "ant-design:build-twotone",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    icon: "ant-design:audit-outlined",
+  },
 ];
 ---
+
 <Layout>
-<div class="bg-slate-100 min-h-screen text-center" >
-  <Jumbatron class="w-full">
-    <span slot="intro" set:html={SITE.title} />
-    
-    <p slot="subtitle"
-      class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-      set:html={SITE.description}
-    />
+  <div class="bg-slate-100 min-h-screen text-center">
+    <Jumbatron class="w-full">
+      <span slot="intro" set:html={SITE.title} />
 
+      <p
+        slot="subtitle"
+        class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+        set:html={SITE.description}
+      />
 
-    <Button slot="cta"
-      href="/core/introduction/"
-      title="Spoko Design System"
-      primary
-      rounded 
+      <Button
+        slot="cta"
+        href="/core/introduction/"
+        title="Spoko Design System"
+        primary
+        rounded
+      >
+        Read More
+      </Button>
+    </Jumbatron>
+    <nav>
+      <div
+        class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
       >
-     Read More
-    </Button>
-</Jumbatron>
-  <nav>
-    <div class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12  md:(px-0 flex-row) ">
-      {
-        navItems.map(({ title, description, url, icon }) => (
-          <a
-            href={url}
-            title={description}
-            class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
-          >
-            <Headline as="h2" textSize="2xl" underline={false}>
-              <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-2" />
-              {title}
-            </Headline>
-            <p class="text-slate-500 w-full">{description}</p>
-          </a>
-        ))
-      }
+        {
+          navItems.map(({ title, description, url, icon }) => (
+            <a
+              href={url}
+              title={description}
+              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
+            >
+              <Headline as="h2" textSize="2xl" underline={false}>
+                <Icon
+                  name={icon}
+                  aria-hidden="true"
+                  class="text-blue-400 mr-2"
+                />
+                {title}
+              </Headline>
+              <p class="text-slate-500 w-full">{description}</p>
+            </a>
+          ))
+        }
+      </div>
+    </nav>
+    <div
+      class="mt-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative"
+    >
+      <Quote>
+        <blockquote>
+          Well done is better than well said.
+          <small class="block font-headlight">- Benjamin Franklin</small>
+        </blockquote>
+      </Quote>
+    </div>
+
+    <div class="flex flex-col py-12">
+      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
+      <ul class="mx-auto flex flex-wrap items-center justify-center text-2xl py-6">
+        <li class="leading-5 me-6">
+          <a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> catalog.polo.blue</a>
+        </li>
+        <li class="leading-5 me-6">
+          <a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> polo.blue</a>
+        </li>
+        <li class="leading-5 me-6">
+          <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> spoko.space</a>
+        </li>
+      </ul>
     </div>
-  </nav>
-  <div class="my-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative">
-    <Quote>
-      <blockquote>
-        Well done is better than well said.
-        <small class="block">-Benjamin Franklin</small>
-      </blockquote></Quote>
   </div>
-  
-</div>
+  <script is:inline></script>
 </Layout>
-<script is:inline></script>

package/uno.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
     transformerVariantGroup(),
   ],
   shortcuts: [
+    ['product-number','font-novamono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
     ['colon-after', 'after:content-[":"]'],
     ['headline','font-headlight font-bold	'],
     ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
@@ -54,7 +55,7 @@ export default defineConfig({
     ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
     ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
     ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap	'],
-    ['product-number','font-novamono leading-none content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
+
     ['main','text-gray-700 dark:text-gray-200 dark:bg-blue-700 pt-24 sm:pt-14 relative'],
     ['nav','bg-white dark:bg-black absolute sm:fixed w-full top-0 z-40 sm:z-30 max-w-screen'],
     ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],