spoko-design-system 0.0.1 → 0.0.5

package/src/components/MainInput.vue

@@ -1,18 +1,18 @@
-<template>
-  <label class="group text-left w-full max-w-xs flex flex-col">
-    <span
-      class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600"
-      >{{ label }}</span
-    >
-    <input
-      class="group-hover:border-blue-500 border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-600"
-      type="text"
-    />
-  </label>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  label: string;
-}>();
-</script>
+<template>
+  <label class="group text-left w-full max-w-xs flex flex-col">
+    <span
+      class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600"
+      >{{ label }}</span
+    >
+    <input
+      class="group-hover:border-blue-500 border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-600"
+      type="text"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+}>();
+</script>

package/src/components/MainTable.vue

@@ -1,45 +1,40 @@
-<template>
-  <table class="table-auto text-left border bg-white shadow-md">
-    <thead class="bg-slate-800 text-white">
-      <tr class="border">
-        <th class="px-4 py-2">id</th>
-        <th class="px-4 py-2">Name</th>
-        <th class="px-4 py-2">Email</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="border" v-for="row in tableData" :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 tableData = [
-  {
-    id: 1,
-    name: "John Doe",
-    email: "john@email.com",
-  },
-  {
-    id: 2,
-    name: "Jane Doe",
-    email: "jane@email.com",
-  },
-  {
-    id: 3,
-    name: "Jack Doe",
-    email: "jack@email.com",
-  },
-  {
-    id: 4,
-    name: "Jill Doe",
-    email: "jill@email.com",
-  },
-];
-</script>
-
-<style scoped></style>
+<template>
+  <table class="table-auto text-left border bg-white shadow-md">
+    <thead class="bg-slate-800 text-white">
+      <tr class="border">
+        <th class="px-4 py-2">id</th>
+        <th class="px-4 py-2">Name</th>
+        <th class="px-4 py-2">Email</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border" v-for="row in tableData" :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 tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+</script>
+
+<style scoped></style>

package/src/components/Modal.astro

@@ -0,0 +1,30 @@
+---
+const {id, open} = Astro.props;
+import Button from '../components/Button.vue'
+---
+<style lang="scss">
+dialog {
+  @apply fixed top-0 left-0 right-0 bottom-0;
+  // position: fixed;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+  &::backdrop {
+    @apply bg-gray-500/50 fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+
+  }
+}
+</style>
+
+<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
+
+<dialog id={id} class="p-6">
+  <slot name="main" />
+  <form method="dialog">
+    <slot name="close" />
+  </form>
+</dialog>

package/src/components/PageContent.astro

@@ -1,14 +1,14 @@
----
-const { content, githubEditUrl } = Astro.props;
-const title = content.title;
-// const headers = content.astro.headers;
----
-
-<article id="article" class="content">
-	<section class="main-section">
-		<nav class="block sm:hidden">
-		</nav>
-		<slot />
-	</section>
-</article>
-
+---
+const { content, githubEditUrl } = Astro.props;
+const title = content.title;
+// const headers = content.astro.headers;
+---
+
+<article id="article" class="content">
+	<section class="main-section">
+		<nav class="block sm:hidden">
+		</nav>
+		<slot />
+	</section>
+</article>
+

package/src/components/PostHeader.astro

@@ -0,0 +1,104 @@
+---
+interface Props {
+  title: string;
+  image: string;
+  date?: string | null;
+  lang: string;
+
+  author: {
+    firstName: string;
+    name: string;
+  } | null;
+
+  categories: {
+    name: string;
+    uri: string;
+  }[];
+}
+
+const { image, title, categories, date, author } =
+  Astro.props;
+import CategoryLink from "./CategoryLink.astro";
+import Date from "./Date.astro";
+---
+
+<header
+  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-900"
+>
+  <div class="heading flex flex-wrap">
+    <div
+      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
+    >
+      <h1
+        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
+      >
+        {title}
+      </h1>
+      <CategoryLink categories={categories} />
+      <div class="order-3 flex items-center text-gray-1 00">
+        {
+          author && (
+            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+              {author.name}
+            </span>
+          )
+        }
+        {author && date && <span class="mx-1">-</span>}
+        {date && <Date date={date} />}
+      </div>
+    </div>
+  </div>
+  <div class="featured-image">
+    <img src={image} alt={title} />
+  </div>
+</header>
+
+<style lang="scss">
+  .post-header {
+    @apply flex relative items-center;
+    min-height: 19vw;
+  }
+
+  .heading {
+    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
+  }
+
+  .featured-image {
+    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
+
+    &:before,
+    &:after {
+      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
+    }
+
+    &:before {
+      z-index: 5;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.95),
+        transparent 30%,
+        transparent 70%,
+        rgba(0, 0, 0, 0.95)
+      );
+      opacity: 0.5;
+    }
+
+    &:after {
+      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
+      opacity: 0.8;
+    }
+
+    img {
+      @apply w-full h-full object-cover block max-w-full;
+    }
+  }
+</style>
+
+<style is:global>
+  .icon {
+    @apply text-lightBlue-400 mr-2;
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+  }
+</style>

package/src/components/PrCode.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+/*
+     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
+*/
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    prcode: {
+        type: Object as PropType<string[] | null>,
+        default: null,
+        required: true,
+    },
+    isPdp: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+</script>
+
+<template>
+    <span data-pagefind-filter="PR-Code" class="btn-prcode " :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
+        {{ props.prcode }}
+    </span>
+</template>
+
+<style lang="scss" scoped>
+.btn-prcode {
+
+    &--pdp {
+        @apply mb-1
+    }
+
+    &:before {
+        @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
+
+        display: none;
+        position: absolute;
+        top: -10px;
+        transform: translateY(-50%) translateX(-50%);
+        left: 50%;
+    }
+
+    &:hover:before {
+        display: block;
+    }
+
+    &--2JK {
+        color: #f3881d;
+
+        &:before {
+            content: 'CROSS';
+        }
+    }
+
+    &--1LR,
+    &--1ZG,
+    &--1ZJ {
+        &:before {
+            content: '⌀ 256 mm';
+        }
+    }
+
+    &--1KD,
+    &--1ZP,
+    &--1ZR {
+        &:before {
+            content: '⌀ 310 mm';
+        }
+    }
+
+    &--1ZD,
+    &--1ZC,
+    &--1LN {
+        &:before {
+            content: '⌀ 288 mm; LUCAS';
+        }
+    }
+
+    &--2JZ {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion';
+        }
+    }
+
+    &--7L6 {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion (CFWA + start-stop)';
+        }
+    }
+
+    &--1KK,
+    &--1KT,
+    &--1KV,
+    &--1LV,
+    &--2EJ {
+        &:before {
+            content: '⌀ 230 mm';
+        }
+    }
+
+    &--2JE {
+        @apply text-lightBlue-700;
+
+        &:before {
+            content: 'BlueGT';
+        }
+    }
+
+    &--2JP {
+        &:before {
+            content: 'R-Line';
+        }
+    }
+
+    // WRC Street R
+    &--E5M,
+
+    // emblems/stickers
+    &--1KD,
+
+    //brakes
+    &--1ZP,
+
+    //brakes
+    &--2JQ,
+
+    //bumpers / engine parts
+    &--TA2 {
+        color: blue;
+
+        &:before {
+            content: 'R WRC Street';
+        }
+    }
+
+    // GTI
+    &--1KV,
+    &--1ZD,
+    &--1ZR,
+    &--0NH,
+    &--2JD {
+        color: red;
+
+        &:before {
+            content: 'GTI';
+        }
+    }
+
+}
+</style>

package/src/components/ProductNumber.astro

@@ -0,0 +1,117 @@
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  isPdp,
+  small,
+  big,
+  class: className,
+} = Astro.props;
+
+const butonTexts = {
+  copy: t("copy"),
+  copied: t("copied"),
+};
+
+const isLetter = (string: string) => {
+  return string.toLowerCase() !== string.toUpperCase();
+};
+
+const niceName = (string: string, separator = "\u00A0") => {
+  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+
+  if (
+    isLetter(string[0]) === true &&
+    isLetter(string[1]) === false &&
+    string.length === 9
+  ) {
+    // mainly liquids
+    word = string
+      .replace(
+        /^(\w{1})(\w{3})(\w{3})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
+  else if (string.length >= 13) {
+    // console.log('part number: wheels / emblems', word)
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else if (string.length > 12) {
+    // accessories / mats
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else {
+    // other parts
+    word = string
+      .replace(/(\w{3})/g, `$1${separator}`)
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  return word.replace(" ", separator);
+};
+---
+
+{
+  productNumber !== null && (
+    <div
+      class={`product-number ${
+        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
+      }`}
+    >
+      <div
+        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
+        itemprop="identifier"
+      >
+        {isPdp ? (
+          <h2 id={productNumber} class="product-code">
+            {productNumber}
+          </h2>
+        ) : (
+          <div id={productNumber} class="product-code">
+            {productNumber}
+          </div>
+        )}
+
+        { copyDisabled && (
+          <ButtonCopy
+            productNumber={String(productNumber)}
+            texts={butonTexts}
+            tooltipClasses=""
+            client:only
+          />
+        )}
+
+      </div>
+
+      <div
+        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
+      >
+        <div class="relative inset-0" data-pagefind-ignore>
+          {niceName(productNumber, ".")}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {niceName(productNumber, "-")}
+        </div>
+        {isPdp ? (
+          <h3 class="number-secondary">{niceName(productNumber)}</h3>
+        ) : (
+          <div class="number-secondary">{niceName(productNumber)}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProductTile.astro

@@ -0,0 +1,54 @@
+---
+const { productObject, locale, index } = Astro.props;
+import i18next, { t } from "i18next";
+import Image from "./Image.astro"
+import ProductNumber from "./ProductNumber.astro"
+
+---
+
+  { productObject && 
+   (
+
+<div  class="flex flex-wrap sm:flex-nowrap content-between w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4">
+    <!-- product image -->
+    <div>
+      { productObject.photo !== null ?
+        <div class="img--4/3 img--small">
+          <Image
+            imageObject={
+              {
+                src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+                alt: 'Image Alt',
+                height: '180',
+                width: '240',
+                class: 'img--overlay object-cover'
+              }
+            }
+          />
+        </div>
+        :
+        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+      }
+    </div>
+      
+  <!-- product deails -->
+  <div class="sm:pl-4 flex flex-col" >
+    <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
+      href={productObject.url} itemprop="url"
+      title={productObject.number}
+    >
+      { productObject.name }
+    </a>
+
+    <ProductNumber productNumber={productObject.number} copyDisabled={true}  />
+    
+    { index !== null && 
+      ( <meta itemprop="position" content={String(index)} />
+      <meta itemprop="name" content={productObject.name} /> )
+    }
+  </div>
+
+  </div>
+
+    )}
+

package/src/components/RightSidebar.astro

@@ -1,11 +1,15 @@
----
-import TableOfContents from './TableOfContents.astro';
-const { content } = Astro.props;
-const headers = content.astro?.headers || [];
----
-
-<nav aria-labelledby="grid-right">
-	<div class="px-8">
-		<TableOfContents headers={headers} />
-	</div>
-</nav>
+---
+import TableOfContents from './TableOfContents.astro';
+const { content } = Astro.props;
+const headers = content.astro?.headers || [];
+---
+
+<nav aria-labelledby="grid-right">
+	<div class="px-8">
+		<TableOfContents headers={headers} />
+		<pre>{JSON.stringify(content)}</pre>
+	</div>
+</nav>
+
+
+<!-- {"title":"Introduction","description":"Docs intro","file":"C:/www/2024/elements/src/pages/core/introduction.mdx","url":"/core/introduction"} -->