spoko-design-system 0.2.1 → 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.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.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
@@ -56,7 +56,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/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/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'],