spoko-design-system 0.2.1 → 0.2.3

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.sh8o4gha998"
+    "revision": "0.e6nv4jtuc7o"
   }], {
     "directoryIndex": "index.html"
   });

package/package.json

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

package/src/components/Card.astro

@@ -5,7 +5,7 @@ import Image from "../components/Image.astro";
 ---
 
 <div
-  class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
+  class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden"
 >
   <a href={href} class="aspect-ratio-video block relative">
     {

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/Headline.vue

@@ -32,21 +32,14 @@ const props = defineProps({
   @apply relative pb-4;
 
   &:after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 0;
+    @apply content-empty absolute left-0 bottom-0;
     height: 3px;
     width: 55px;
     background-color: var(--primary);
   }
 
   &:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 1px;
-    height: 1px;
+    @apply content-empty absolute left-0 bottom-px h-px;
     width: 95%;
     max-width: 255px;
     background-color: #64748b

package/src/components/Jumbatron.vue

@@ -21,14 +21,12 @@ const props = defineProps({
         :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32'">
         <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div class="text-center">
-            <h1 class="text-3xl  tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl  font-headlight text-white">
+            <h1 class="text-3xl  tracking-tight font-headlight text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl ">
               <slot name="intro" />
             </h1>
             <slot name="subtitle" />
-            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center" v-if="hasSlot('cta')">
-              <div>
+            <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
                 <slot name="cta" />
-              </div>
             </div>
           </div>
         </header>

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>
@@ -34,19 +34,16 @@ const props = defineProps({
   @apply overflow-hidden relative;
 
     span {
-      @apply block bg-white dark:bg-blue-901 relative z-10 pr-1.5 w-full;
+      @apply block bg-white relative z-10 pr-1.5 w-full;
 
       &:before {
         // order: 2;
-        @apply text-gray-300 absolute select-none border-b border-gray-200 dark:border-gray-600 w-full -z-1;
+        @apply text-gray-300 absolute select-none border-b border-gray-200 w-full -z-1 absolute content-empty left-0;
         height: 1em;
         white-space: nowrap;
         font-weight: 100;
-        bottom: 3px;
-        left: 0;
+        bottom: 2px;
         flex: 1;
-        content: '';
-        position:absolute;
       }
     }
 

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
@@ -41,14 +41,17 @@ const props = defineProps({
 
 <style lang="scss">
   .details {
-    border: none;
+    @apply border-none w-full md:w-auto
     box-shadow: none;
 
+    col {
+      @apply w-1/2;
+    }
+
     td,
     tr,
     th {
-      border: none;
-      @apply leading-4 text-sm py-2;
+      @apply leading-4 text-sm py-2 border-none;
     }
 
     th {
@@ -56,7 +59,7 @@ const props = defineProps({
     }
 
     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/components/layout/Header.astro

@@ -54,7 +54,7 @@ const navItemsLeft = [
   </div>
 
   <div
-    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
+    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"

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/components/card.mdx

@@ -15,14 +15,14 @@ Card - product link component which can be used for carousels, section with rela
   <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
     <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
-            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
         </a>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+        <p class="mb-3 font-normal text-gray-700 ">
           Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
         </p>
 
         <div class="flex items-center justify-between my-4">
-          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+          <span class="text-2xl font-bold text-gray-900">€599.00</span>
         </div>
 
         <Button tertiary small href="#">
@@ -33,14 +33,14 @@ Card - product link component which can be used for carousels, section with rela
 
     <Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
-            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 leading-none">Lorem Ipsum</h5>
         </a>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+        <p class="mb-3 font-normal text-gray-700 ">
           Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
         </p>
 
         <div class="flex items-center justify-between my-4">
-          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+          <span class="text-2xl font-bold text-gray-900 ">€599.00</span>
         </div>
 
         <Button tertiary small href="#">
@@ -51,14 +51,14 @@ Card - product link component which can be used for carousels, section with rela
 
     <Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
-            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900  leading-none">Lorem Ipsum</h5>
         </a>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+        <p class="mb-3 font-normal text-gray-700 ">
           Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
         </p>
 
         <div class="flex items-center justify-between my-4">
-          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+          <span class="text-2xl font-bold text-gray-900 ">€599.00</span>
         </div>
 
         <Button tertiary small href="#">
@@ -73,14 +73,14 @@ Card - product link component which can be used for carousels, section with rela
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
     <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
-            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900  leading-none">Lorem Ipsum</h5>
         </a>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+        <p class="mb-3 font-normal text-gray-700 ">
           Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
         </p>
 
         <div class="flex items-center justify-between my-4">
-          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+          <span class="text-2xl font-bold text-gray-900 ">€599.00</span>
         </div>
 
         <Button tertiary small href="#">

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'],