spoko-design-system 1.3.3 → 1.3.5

package/src/components/Jumbotron.astro

@@ -6,7 +6,16 @@ const props = Astro.props as Props;
 ---
 
 <BaseJumbotron {...props}>
-  <slot name="intro" slot="intro" />
-  <slot name="subtitle" slot="subtitle" />
-  <slot name="cta-content" slot="cta-content" />
+  <slot
+    name="intro"
+    slot="intro"
+  />
+  <slot
+    name="subtitle"
+    slot="subtitle"
+  />
+  <slot
+    name="cta-content"
+    slot="cta-content"
+  />
 </BaseJumbotron>

package/src/components/LanguageSuggestion.astro

@@ -33,7 +33,10 @@ const targetPath = customPath
   ]}
   role="alert"
 >
-  <a href={targetPath} class="flex items-center gap-2 font-medium hover:underline">
+  <a
+    href={targetPath}
+    class="flex items-center gap-2 font-medium hover:underline"
+  >
     {showIcon && <span class="material-icons-outlined text-sm">translate</span>}
     {new Intl.DisplayNames([preferredLocale], { type: 'language' }).of(preferredLocale)}
   </a>

package/src/components/MainInput.vue

@@ -8,10 +8,11 @@ const props = defineProps<{
   <label class="group text-left w-full max-w-xs flex flex-col">
     <span
       class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium"
-    >{{ props.label }}</span>
+      >{{ props.label }}</span
+    >
     <input
       class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
       type="text"
-    >
+    />
   </label>
 </template>

package/src/components/Modal.astro

@@ -17,9 +17,16 @@ import Button from '../components/Button.vue';
   }
 </style>
 
-<Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
+<Button
+  primary
+  onclick={`window.${id}.showModal()`}
+  >{open}</Button
+>
 
-<dialog id={id} class="p-6">
+<dialog
+  id={id}
+  class="p-6"
+>
   <slot name="main" />
   <form method="dialog">
     <slot name="close" />

package/src/components/PageContent.astro

@@ -1,4 +1,7 @@
-<article id="article" class="content">
+<article
+  id="article"
+  class="content"
+>
   <section class="main-section">
     <slot />
   </section>

package/src/components/PostHeader.astro

@@ -31,11 +31,18 @@ import Date from './Date.astro';
       >
         {title}
       </h1>
-      <PostCategories categories={categories} lang={lang} />
+      <PostCategories
+        categories={categories}
+        lang={lang}
+      />
       <div class="order-3 flex items-center text-gray-1 00">
         {
           author && (
-            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+            <span
+              class="text-sm"
+              title={author.firstName}
+              data-pagefind-ignore
+            >
               {author.name}
             </span>
           )
@@ -46,7 +53,10 @@ import Date from './Date.astro';
     </div>
   </div>
   <div class="featured-image">
-    <img src={image} alt={title} />
+    <img
+      src={image}
+      alt={title}
+    />
   </div>
 </header>
 

package/src/components/Product/ProductDetails.vue

@@ -116,8 +116,8 @@ const props = defineProps({
           <span
             v-else-if="
               detail.value !== undefined &&
-                detail.id === 'for-exterior-colour' &&
-                detail.isArrayValue
+              detail.id === 'for-exterior-colour' &&
+              detail.isArrayValue
             "
             class=""
           >

package/src/components/Product/ProductLink.astro

@@ -82,7 +82,11 @@ const nameFormatted = removeSemicolon(productName.toString());
             }}
           />
         ) : (
-          <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
+          <img
+            src="/1x1.png"
+            class="bg-neutral-lightest/70"
+            alt={productName}
+          />
         )}
       </div>
 
@@ -103,12 +107,21 @@ const nameFormatted = removeSemicolon(productName.toString());
           set:html={nameFormatted}
         />
 
-        <ProductNumber productNumber={product.number} copyDisabled={true} />
+        <ProductNumber
+          productNumber={product.number}
+          copyDisabled={true}
+        />
 
         {index !== null && (
           <>
-            <meta itemprop="position" content={index.toString()} />
-            <meta itemprop="name" content={nameFormatted} />
+            <meta
+              itemprop="position"
+              content={index.toString()}
+            />
+            <meta
+              itemprop="name"
+              content={nameFormatted}
+            />
           </>
         )}
       </div>

package/src/components/Product/ProductLink.vue

@@ -13,7 +13,7 @@
           src="/1x1.png"
           class="bg-neutral-lightest/70"
           :alt="productName"
-        >
+        />
       </slot>
     </div>
 
@@ -42,11 +42,11 @@
         <meta
           itemprop="position"
           :content="index.toString()"
-        >
+        />
         <meta
           itemprop="name"
           :content="nameFormatted"
-        >
+        />
       </template>
     </div>
   </div>

package/src/components/Product/ProductLinkInfo.astro

@@ -23,12 +23,21 @@ const { product, nameFormatted, price, url, index, bigTile } = Astro.props;
     title={product.number}
     set:html={nameFormatted}
   />
-  <ProductNumber productNumber={product.number} copyDisabled={true} />
+  <ProductNumber
+    productNumber={product.number}
+    copyDisabled={true}
+  />
   {
     index !== null && (
       <>
-        <meta itemprop="position" content={index} />
-        <meta itemprop="name" content={nameFormatted} />
+        <meta
+          itemprop="position"
+          content={index}
+        />
+        <meta
+          itemprop="name"
+          content={nameFormatted}
+        />
       </>
     )
   }

package/src/components/Product/ProductModel.vue

@@ -13,9 +13,8 @@ const props = defineProps({
   <strong
     class="product-model"
     :data-pagefind-filter="`model:${props.carModel.name}`"
-  >{{
-    props.carModel.name
-  }}</strong>
+    >{{ props.carModel.name }}</strong
+  >
 </template>
 <style>
 .product-model:not(:last-child) {

package/src/components/Product/ProductNumber.astro

@@ -29,19 +29,37 @@ const FormattedWrapper = isPdp ? 'h3' : 'div';
 {
   productNumber && formatted && (
     <div class={classNames}>
-      <div class={['p-number', small ? 'w-full' : ''].join(' ')} itemprop="identifier">
-        <ProductWrapper id={productNumber} class="product-code">
+      <div
+        class={['p-number', small ? 'w-full' : ''].join(' ')}
+        itemprop="identifier"
+      >
+        <ProductWrapper
+          id={productNumber}
+          class="product-code"
+        >
           {productNumber}
         </ProductWrapper>
 
-        {big && <ButtonCopy productNumber={productNumber} texts={buttonTexts} tooltipClasses="" />}
+        {big && (
+          <ButtonCopy
+            productNumber={productNumber}
+            texts={buttonTexts}
+            tooltipClasses=""
+          />
+        )}
       </div>
 
       <div class={['code-formatted', trackingClass].join(' ')}>
-        <div class="relative inset-0" data-pagefind-ignore>
+        <div
+          class="relative inset-0"
+          data-pagefind-ignore
+        >
           {formatted.dot}
         </div>
-        <div class="absolute inset-0" data-pagefind-ignore>
+        <div
+          class="absolute inset-0"
+          data-pagefind-ignore
+        >
           {formatted.dash}
         </div>
         <FormattedWrapper class="number-secondary">{formatted.standard}</FormattedWrapper>

package/src/components/ProductDetailsList.vue

@@ -38,10 +38,13 @@ const isHtmlValue = (value: unknown): boolean => {
 
 // Function for specifying header text
 const getHeaderText = (row: TableItem) => {
-  return row.label || row.id
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+  return (
+    row.label ||
+    row.id
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  );
 };
 
 // Function to determine the icon class for a link type
@@ -77,8 +80,8 @@ const validatedItems = computed(() => {
       </slot>
     </caption>
     <colgroup>
-      <col class="details-table-col">
-      <col class="details-table-col">
+      <col class="details-table-col" />
+      <col class="details-table-col" />
     </colgroup>
     <tbody>
       <tr

package/src/components/ProductTile.astro

@@ -19,7 +19,11 @@ import ProductNumber from './Product/ProductNumber.astro';
             }}
           />
         ) : (
-          <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+          <img
+            src="/1x1.png"
+            class="bg-gray-100/70"
+            alt={productObject.name}
+          />
         )}
       </div>
 
@@ -41,8 +45,14 @@ import ProductNumber from './Product/ProductNumber.astro';
 
         {index !== null && (
           <>
-            <meta itemprop="position" content={String(index)} />
-            <meta itemprop="name" content={productObject.name} />
+            <meta
+              itemprop="position"
+              content={String(index)}
+            />
+            <meta
+              itemprop="name"
+              content={productObject.name}
+            />
           </>
         )}
       </div>

package/src/components/ReloadPrompt.astro

@@ -1,5 +1,9 @@
 <script src="./../pwa.ts"></script>
-<div id="pwa-toast" role="alert" aria-labelledby="toast-message">
+<div
+  id="pwa-toast"
+  role="alert"
+  aria-labelledby="toast-message"
+>
   <div class="message">
     <span id="toast-message"></span>
   </div>

package/src/components/SlimBanner.vue

@@ -23,16 +23,18 @@ const toggleVisibility = () => {
     <span
       class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]"
     />
-    <span class="leading-none"><span
-                                 data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
-                               />
+    <span class="leading-none"
+      ><span
+        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
+      />
       <a
         href="https://polo.blue/support-ukraine/"
         target="_blank"
         rel="noopener"
         title="Support Ukraine"
         class="underline underline-offset-2 hover:text-blue-wrc"
-      >this page</a>.
+        >this page</a
+      >.
     </span>
 
     <button

package/src/components/layout/CallToAction.astro

@@ -24,7 +24,10 @@ const hasDescriptionSlotContent = Astro.slots.has('description');
   >
     <div class="flex-shrink-0 hidden md:block">
       <slot name="icon">
-        <span i-ph:sparkle-thin class="mr-1 text-8 md:text-10 text-brand-secondary"></span>
+        <span
+          i-ph:sparkle-thin
+          class="mr-1 text-8 md:text-10 text-brand-secondary"
+        ></span>
       </slot>
     </div>
     <div class="flex-1 text-center md:text-left">

package/src/components/layout/Header.astro

@@ -30,7 +30,10 @@ const navItemsLeft = [
     <slot name="logo" />
 
     <div class="hidden sm:block sm:ml-6">
-      <div class="flex space-x-4" itemprop="hasPart">
+      <div
+        class="flex space-x-4"
+        itemprop="hasPart"
+      >
         {
           navItemsLeft.map(({ title, description, url }) => (
             <a
@@ -57,7 +60,14 @@ const navItemsLeft = [
     itemscope
     itemtype="http://schema.org/SiteNavigationElement"
   >
-    <a class="icon-btn mx-2" title="" aria-label="" href="#" itemprop="url" data-astro-reload>
+    <a
+      class="icon-btn mx-2"
+      title=""
+      aria-label=""
+      href="#"
+      itemprop="url"
+      data-astro-reload
+    >
       <Icon name="carbon:language" />
     </a>
   </div>

package/src/layouts/Layout.astro

@@ -9,10 +9,17 @@ const { content = {} } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
 
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
+<html
+  dir={content.dir ?? 'ltr'}
+  lang={content.lang ?? 'en-us'}
+  class="initial"
+>
   <head>
     <HeadCommon />
-    <HeadSEO {content} canonicalURL={canonicalURL} />
+    <HeadSEO
+      {content}
+      canonicalURL={canonicalURL}
+    />
     <title>
       {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>

package/src/layouts/MainLayout.astro

@@ -20,10 +20,17 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
   });
 </script>
 
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
+<html
+  dir={content.dir ?? 'ltr'}
+  lang={content.lang ?? 'en-us'}
+  class="initial"
+>
   <head>
     <HeadCommon />
-    <HeadSEO content={content} canonicalURL={canonicalURL} />
+    <HeadSEO
+      content={content}
+      canonicalURL={canonicalURL}
+    />
     <title>
       {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
@@ -36,12 +43,18 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 
     <div class="flex bg-white z-10 mb-11 relative">
       <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
-        <div class="mr-auto" transition:name="sidebar">
+        <div
+          class="mr-auto"
+          transition:name="sidebar"
+        >
           <LeftSidebar currentPage={currentPage} />
         </div>
       </div>
       <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
-        <PageContent content={content} transition:name="content">
+        <PageContent
+          content={content}
+          transition:name="content"
+        >
           <slot />
         </PageContent>
       </main>

package/src/layouts/partials/HeadCommon.astro

@@ -5,12 +5,26 @@ import { pwaInfo } from 'virtual:pwa-info';
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="sitemap" href="/sitemap-index.xml" />
+<meta
+  name="viewport"
+  content="width=device-width"
+/>
+
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href="/favicon.svg"
+/>
+<link
+  rel="alternate icon"
+  type="image/x-icon"
+  href="/favicon.ico"
+/>
+
+<link
+  rel="sitemap"
+  href="/sitemap-index.xml"
+/>
 
 <!-- Preload Fonts -->
 <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -18,7 +32,10 @@ import { pwaInfo } from 'virtual:pwa-info';
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
 
 <!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
+<script
+  src="/make-scrollable-code-focusable.js"
+  is:inline
+></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>

package/src/layouts/partials/HeadSEO.astro

@@ -13,32 +13,65 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
 ---
 
 <!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
+<link
+  rel="canonical"
+  href={canonicalURL}
+/>
 
 <!-- OpenGraph Tags -->
-<meta property="og:title" content={formattedContentTitle} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
+<meta
+  property="og:title"
+  content={formattedContentTitle}
+/>
+<meta
+  property="og:type"
+  content="article"
+/>
+<meta
+  property="og:url"
+  content={canonicalURL}
+/>
+<meta
+  property="og:locale"
+  content={content.ogLocale ?? SITE.defaultLanguage}
+/>
 <!-- <meta property="og:image" content={canonicalImageSrc} /> -->
-<meta property="og:image:alt" content={imageAlt} />
+<meta
+  property="og:image:alt"
+  content={imageAlt}
+/>
 <meta
   name="description"
   property="og:description"
   content={content.description ? content.description : SITE.description}
 />
-<meta property="og:site_name" content={SITE.title} />
+<meta
+  property="og:site_name"
+  content={SITE.title}
+/>
 
 <!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={formattedContentTitle} />
+<meta
+  name="twitter:card"
+  content="summary_large_image"
+/>
+<meta
+  name="twitter:site"
+  content={OPEN_GRAPH.twitter}
+/>
+<meta
+  name="twitter:title"
+  content={formattedContentTitle}
+/>
 <meta
   name="twitter:description"
   content={content.description ? content.description : SITE.description}
 />
 <!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
-<meta name="twitter:image:alt" content={imageAlt} />
+<meta
+  name="twitter:image:alt"
+  content={imageAlt}
+/>
 
 <!--
   TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?

package/src/pages/components/icons.astro

@@ -57,7 +57,10 @@ const sortedIconCollections = Object.entries(ICONS)
                 >
                   <div class="flex flex-col items-center">
                     <div class="p-4 bg-gray-50 rounded-lg mb-2 w-full flex justify-center items-center min-h-[64px]">
-                      <Icon name={`${name}:${iconName}`} class="text-3xl text-blue-medium" />
+                      <Icon
+                        name={`${name}:${iconName}`}
+                        class="text-3xl text-blue-medium"
+                      />
                     </div>
                     <code class="text-sm text-gray-600 text-center break-all">
                       {name}:{iconName}