spoko-design-system 0.1.8 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -61,6 +61,7 @@
     "@unocss/preset-web-fonts": "^0.58.4",
     "@unocss/preset-wind": "^0.58.4",
     "@unocss/reset": "^0.58.4",
+    "@vite-pwa/astro": "^0.2.0",
     "@vueuse/core": "^10.7.2",
     "astro-compress": "^2.2.9",
     "astro-i18next": "1.0.0-beta.21",

package/src/components/FeaturesList.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <h2 class="font-headregular mb-2 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
+    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
     <ul class="mb-6">
         <li v-for="item in props.items" class="leading-5">
             {{ item }}

package/src/components/ProductDetailsList.vue

@@ -3,7 +3,7 @@ import { PropType } from "vue";
 import ProductDetailName from "./ProductDetailName.vue";
 
 interface TableItem {
-  slug: string,
+  id: string,
   name: string 
   value: unknown
 }
@@ -29,7 +29,7 @@ const props = defineProps({
         <ProductDetailName as="th" :text="row.name" />
         <td>
           <slot
-            :name="row.slug"
+            :name="row.id"
           >
            {{ row.value }}
           </slot>
@@ -48,7 +48,7 @@ const props = defineProps({
     tr,
     th {
       border: none;
-      @apply leading-4 text-sm;
+      @apply leading-4 text-sm py-2;
     }
 
     th {

package/src/components/Quote.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: false,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as"
+    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:z-0">
+      <slot>{{ props.text }}</slot>
+    </component>
+</template>

package/src/components/ReloadPrompt.astro

@@ -0,0 +1,51 @@
+<script src="./../pwa.ts"></script>
+<div
+    id="pwa-toast"
+    role="alert"
+    aria-labelledby="toast-message"
+>
+    <div class="message">
+      <span id="toast-message"></span>
+    </div>
+    <button id="pwa-refresh">
+      Reload
+    </button>
+    <button id="pwa-close">
+      Close
+    </button>
+</div>
+
+<style>
+#pwa-toast {
+  visibility: hidden;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 1;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+}
+#pwa-toast .message {
+  margin-bottom: 8px;
+}
+#pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+#pwa-toast.show {
+  visibility: visible;
+}
+button#pwa-refresh {
+  display: none;
+}
+#pwa-toast.show.refresh button#pwa-refresh {
+  display: inline-block;
+}
+</style>

package/src/config.ts

@@ -43,6 +43,7 @@ export const SIDEBAR = [
   { 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: "Extras", header: true },
   { text: "Flags", link: "/components/flags/" },

package/src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
+import HeadCommon from "./partials/HeadCommon.astro";
+import FooterCommon from "./partials/FooterCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
 import * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
@@ -53,6 +54,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
           />
         </a>
       </Copyright>
+      <FooterCommon />
     </footer>
   </body>
 </html>

package/src/layouts/MainLayout.astro

@@ -1,6 +1,5 @@
 ---
-import { ViewTransitions } from "astro:transitions";
-import HeadCommon from "../components/HeadCommon.astro";
+import HeadCommon from "./partials/HeadCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
 import Header from "../components/Header/Header.astro";
 import PageContent from "../components/PageContent.astro";
@@ -35,7 +34,6 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
           : CONFIG.SITE.title
       }
     </title>
-    <ViewTransitions />
   </head>
 
   <body class="bg-blue-50">

package/src/layouts/partials/FooterCommon.astro

@@ -0,0 +1,5 @@
+---
+import ReloadPrompt from "../../components/ReloadPrompt.astro";
+---
+
+<ReloadPrompt />

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

@@ -1,5 +1,6 @@
 ---
-
+import { ViewTransitions } from "astro:transitions";
+import { pwaInfo } from 'virtual:pwa-info';
 ---
 
 <!-- Global Metadata -->
@@ -38,3 +39,6 @@
   gtag('js', new Date());
   gtag('config', '');
 </script> -->
+
+<ViewTransitions />
+{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }

package/src/pages/components/details-list.mdx

@@ -11,32 +11,32 @@ export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
 
 export const tableItems = [
   {
-    slug: "number",
+    id: "number",
     name: "Part number",
     value: "6R0071609GRU",
   },
   {
-    slug: "prcodes",
+    id: "prcodes",
     name: "PR-Codes",
     value: ["PJ4", "CA2", "C4E", "2JZ"],
   },
   {
-    slug: "color",
+    id: "color",
     name: "Color",
     value: "Black",
   },
   {
-    slug: "position",
+    id: "position",
     name: "Fitting position",
     value: "Front axle",
   },
   {
-    slug: "brake-disck-thicnkess",
+    id: "brake-disck-thicnkess",
     name: "Brake disc thicknes",
     value: "22 mm",
   },
   {
-    slug: "weight",
+    id: "weight",
     name: "Weight",
     value: "5.185 kg"
   }
@@ -56,32 +56,32 @@ export const tableItems = [
 ```ts
  const tableItems = [
   {
-    slug: "number",
+    id: "number",
     name: "Part number",
     value: "6R0071609GRU",
   },
   {
-    slug: "prcodes",
+    id: "prcodes",
     name: "PR-Codes",
     value: ["PJ4", "CA2", "C4E"]
   },
   {
-    slug: "color",
+    id: "color",
     name: "Color",
     value: "Black",
   },
   {
-    slug: "position",
+    id: "position",
     name: "Fitting position",
     value: "Front axle",
   },
   {
-    slug: "brake-disck-thicnkess",
+    id: "brake-disck-thicnkess",
     name: "Brake disc thicknes",
     value: "22 mm",
   },
   {
-    slug: "weight",
+    id: "weight",
     name: "Weight",
     value: "5.185 kg"
   }

package/src/pages/components/icons.astro

@@ -1,5 +1,4 @@
 ---
-import { changeLanguage } from "i18next";
 import MainLayout from "../../layouts/MainLayout.astro";
 import { Icon } from "astro-icon/components";
 
@@ -28,27 +27,22 @@ const ICONS = {
 
         <pre  class="mt-6 astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
         <div class="">
-        {Object.keys(ICONS).map((key) => (
-            <h2 class="mt-6 mx-2">
-                <a href={`${iconifyUrl}${key}/`} target="_blank">
-                    {key}
-                </a>
-            </h2>
-            <div class="inline-grid grid-cols-2 md:grid-cols-4 gap-0 w-full">
+            {Object.keys(ICONS).map((key) => (
+                <h2 class="mt-6 mx-2">
+                    <a href={`${iconifyUrl}${key}/`} target="_blank">
+                        {key}
+                    </a>
+                </h2>
+                <div class="inline-grid grid-cols-2 md:grid-cols-4 gap-0 w-full">
                     {ICONS[key].map((value) => (
-                            <div class="mx-1 mb-2">
+                        <div class="mx-1 mb-2">
                             <div class="component-preview ">
-    <Icon name={`${key}:${value}`} class="text-3xl mx-auto text-light-blue-400" />
+                                <Icon name={`${key}:${value}`} class="text-3xl mx-auto text-light-blue-400" />
                             </div>
                             <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
-                            </div>
+                        </div>
                     ))}
-            </div>
-        ))}
+                </div>
+            ))}
         </div>
-
-
-
 </MainLayout>
-
-

package/src/pages/components/product-number.mdx

@@ -10,7 +10,7 @@ ProductNumber - with additional formatting adding spacing for Volkswagen product
 
 #
 <div class="component-preview">
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full bg-white p-y-5 px-4">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 w-full bg-white p-y-5 px-4">
     <ProductNumber
       big
       productNumber="6R0920870F"

package/src/pages/components/quote.mdx

@@ -0,0 +1,33 @@
+---
+title: "Quote"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Quote from '../../components/Quote.vue'
+
+
+# Quote
+
+Simple Quote component with left border in primary color.
+
+<div class="component-preview">
+    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```
+
+#
+
+
+<div class="component-preview">
+    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```

package/src/pages/core/typography.astro

@@ -32,7 +32,8 @@
         {FONTS.types.map(({name, value}) => (
             <div class="w-full">
                 <div class={`${value} text-3xl`} >Lorem Ipsum</div>
-                <div class="">{name}</div>    
+                <div class="">{name}</div>
+                <code>{value}</code>
             </div>
         ))}
         </div>

package/src/pages/index.astro

@@ -6,6 +6,7 @@ import Jumbatron from "../components/Jumbatron.vue";
 import Layout from "../layouts/Layout.astro";
 import Headline from "../components/Headline.vue";
 import Button from "../components/Button.vue";
+import Quote from "../components/Quote.vue";
 
 const navItems = [
     {
@@ -67,6 +68,14 @@ const navItems = [
       }
     </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>
 </Layout>
 <script is:inline></script>

package/src/pwa.ts

@@ -0,0 +1,13 @@
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // eslint-disable-next-line no-console
+    console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // eslint-disable-next-line no-console
+    console.log('PWA application ready to work offline')
+  },
+})

package/src/styles/base/_base.scss

@@ -101,12 +101,6 @@ html {
   opacity: 0;
 }
 
-.colon-after {
-  &:after {
-    content: ':'
-  }
-}
-
 .items {
   &>.item {
     &:not(:last-child) {

package/uno.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
     transformerVariantGroup(),
   ],
   shortcuts: [
+    ['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'],
     ['img--overlay','after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],

package/public/astro-design-system-logo.svg

@@ -1,10 +0,0 @@
-<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M59.4008 23.9454C59.3085 24.7845 58.8705 25.6033 57.9945 27.2409L38.8579 63.0169C37.3849 58.3378 35.1972 53.8377 32.2944 49.6873L45.2674 25.8805C45.4797 25.4909 45.411 25.0094 45.0987 24.6971C44.7855 24.3839 44.3024 24.3158 43.9125 24.5298L20.1826 37.557C16.0187 34.6351 11.5013 32.4342 6.80319 30.9539L42.6221 11.8558C44.2588 10.9832 45.0772 10.5469 45.9154 10.4555C46.6555 10.3747 47.403 10.4848 48.0867 10.7752C48.8612 11.1042 49.5142 11.7571 50.8202 13.0632L56.7917 19.0346C58.0994 20.3423 58.7532 20.9962 59.0822 21.7716C59.3726 22.4562 59.4823 23.2046 59.4008 23.9454Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2823 56.055C26.7326 55.8617 23.1916 53.9277 20.0384 50.7745C16.1682 46.9043 14.1348 42.4501 14.902 39.9615C13.6613 40.5867 12.5245 41.5855 11.8424 42.2676C11.8424 42.2676 8.29031 45.4142 8.27954 50.0626C9.48919 48.853 11.4459 48.8485 12.6499 50.0525C14.7137 52.1163 12.9026 53.9228 11.4331 55.3885C11.3891 55.4324 11.3454 55.476 11.3021 55.5193C9.07462 57.7468 8.52027 61.0113 9.64259 63.7433C9.94951 62.8607 10.4559 62.0314 11.1618 61.3255C13.2862 59.2011 15.3186 59.6516 17.6808 60.1751C19.5603 60.5917 21.6485 61.0546 24.1578 60.3034C25.467 59.9114 26.7017 59.1976 27.737 58.1622C28.3738 57.5255 28.8889 56.8135 29.2823 56.055Z" fill="url(#paint0_linear_27_26)"/>
-<defs>
-<linearGradient id="paint0_linear_27_26" x1="21.1464" y1="43.106" x2="1.62677" y2="74.0121" gradientUnits="userSpaceOnUse">
-<stop stop-color="#8B90FF"/>
-<stop offset="1" stop-color="#0711FF"/>
-</linearGradient>
-</defs>
-</svg>