spoko-design-system 0.9.2 → 0.9.4

package/src/styles/base/grid.css

@@ -1,93 +1,93 @@
-.content-grid {
-    --padding-inline: 1rem;
-    --content-max-width: 900px;
-    --breakout-max-width: 1200px;
-
-    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
-
-    display: grid;
-    grid-template-columns:
-        [full-width-start] minmax(var(--padding-inline), 1fr)
-        [breakout-start] minmax(0, var(--breakout-size))
-        [content-start] min(
-            100% - (var(--padding-inline) * 2),
-            var(--content-max-width)
-        )
-        [content-end]
-        minmax(0, var(--breakout-size)) [breakout-end]
-        minmax(var(--padding-inline), 1fr) [full-width-end];
-
-    > :not(.breakout, .full-width),
-    .full-width> :not(.breakout, .full-width) {
-        grid-column: content;
-    }
-
-    >.breakout {
-        grid-column: breakout;
-    }
-
-    >.full-width {
-        grid-column: full-width;
-    
-        display: grid;
-        grid-template-columns: inherit;
-    }
-    
-}
-
-img.full-width {
-    width: 100%;
-    max-height: 45vh;
-    object-fit: cover;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-.article-title {
-    @apply font-textbold;
-    font-size: var(--fs-800);
-    line-height: 1.05;
-    text-transform: uppercase;
-}
-
-.section-title {
-    font-size: var(--fs-800);
-    line-height: 1.1;
-}
-
-.visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
-
-.call-to-action {
-    @apply px-8 py-6; 
-}
-
-.wrapper {
-    width: calc(100% - 3rem);
-    max-width: var(--content-max-width);
-    margin-inline: auto;
-}
-
-.flow>*+* {
-    margin-top: var(--flow-spacing, 1em);
-}
-
-.section-padding {
-    padding-block: 2.5rem;
-}
-
-.even-columns {
-    display: flex;
-    gap: 1rem;
+.content-grid {
+    --padding-inline: 1rem;
+    --content-max-width: 900px;
+    --breakout-max-width: 1200px;
+
+    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+
+    display: grid;
+    grid-template-columns:
+        [full-width-start] minmax(var(--padding-inline), 1fr)
+        [breakout-start] minmax(0, var(--breakout-size))
+        [content-start] min(
+            100% - (var(--padding-inline) * 2),
+            var(--content-max-width)
+        )
+        [content-end]
+        minmax(0, var(--breakout-size)) [breakout-end]
+        minmax(var(--padding-inline), 1fr) [full-width-end];
+
+    > :not(.breakout, .full-width),
+    .full-width> :not(.breakout, .full-width) {
+        grid-column: content;
+    }
+
+    >.breakout {
+        grid-column: breakout;
+    }
+
+    >.full-width {
+        grid-column: full-width;
+    
+        display: grid;
+        grid-template-columns: inherit;
+    }
+    
+}
+
+img.full-width {
+    width: 100%;
+    max-height: 45vh;
+    object-fit: cover;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.article-title {
+    @apply font-textbold;
+    font-size: var(--fs-800);
+    line-height: 1.05;
+    text-transform: uppercase;
+}
+
+.section-title {
+    font-size: var(--fs-800);
+    line-height: 1.1;
+}
+
+.visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.call-to-action {
+    @apply px-8 py-6; 
+}
+
+.wrapper {
+    width: calc(100% - 3rem);
+    max-width: var(--content-max-width);
+    margin-inline: auto;
+}
+
+.flow>*+* {
+    margin-top: var(--flow-spacing, 1em);
+}
+
+.section-padding {
+    padding-block: 2.5rem;
+}
+
+.even-columns {
+    display: flex;
+    gap: 1rem;
 }

package/src/styles/base/typography.css

@@ -1,70 +1,70 @@
-@font-face {
-    font-family: 'vw_textregular';
-    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'vw_textbold';
-    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-textbold {
-    font-family: 'vw_textbold';
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headbold';
-    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-.font-vw-headbold {
-    font-family: 'vw_headbold' !important;
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headregular';
-    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: fallback;
-}
-
-@font-face {
-    font-family: 'vw_headlight';
-    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Nova Mono';
-    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap; 
-}
-
-@font-face {
-    font-family: 'vw_textlight';
-    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-/* for some content which don't need to index in Google */
-[data-text]:before {
-    content: attr(data-text);
-}
+@font-face {
+    font-family: 'vw_textregular';
+    src: url('/fonts/vwtext-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'vw_textbold';
+    src: url('/fonts/vwtext-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-textbold {
+    font-family: 'vw_textbold';
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headbold';
+    src: url('/fonts/vwhead-bold-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+.font-vw-headbold {
+    font-family: 'vw_headbold' !important;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headregular';
+    src: url('/fonts/vwhead-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: 'vw_headlight';
+    src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Nova Mono';
+    src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap; 
+}
+
+@font-face {
+    font-family: 'vw_textlight';
+    src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* for some content which don't need to index in Google */
+[data-text]:before {
+    content: attr(data-text);
+}

package/src/styles/content.css

@@ -1,73 +1,73 @@
-.content {
-  .main-section {
-    &>h1,
-    &>h2,
-    &>h3,
-    &>h4,
-    &>h5,
-    &>h6 {
-      margin-top: 1.77rem;
-    }
-    &>h1 {
-      font-size: 22pt;
-      font-weight: 400;
-    }
-    &>h2 {
-      font-size: 17pt;
-      font-weight: 500;
-    }
-    &>h3 {
-      font-size: 15pt;
-    }
-    &>h4 {
-      font-size: 13pt;
-    }
-
-    &>ul {
-      @apply list-disc pl-5
-    }
-  }
-
-  &>h1, 
-  &>h2,
-  &>h3,
-  &>h4,
-  &>h5 {
-      font-weight: bold;
-      @apply font-textbold;
-  }
-
-  code {
-    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-      Consolas, "Liberation Mono", "Courier New", monospace;
-  }
-
-  .component-preview {
-    @apply bg-blue-medium bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
-    gap: 1rem;
-    border-radius: 0.33rem;
-    border: 1px solid theme("colors.slate.200");
-    resize: both;
-  }
-
-  .astro-code {
-    @apply mx-0 p-4;
-    border-radius: 0.44rem;
-  }
-}
-
-table {
-  @apply table-auto text-left border bg-white shadow-md;
-
-  tr {
-    @apply border;
-  }
-
-  td, th {
-    @apply px-4 py-2;
-  }
-
-  thead {
-    @apply bg-gray-100;
-  }
-}
+.content {
+  .main-section {
+    &>h1,
+    &>h2,
+    &>h3,
+    &>h4,
+    &>h5,
+    &>h6 {
+      margin-top: 1.77rem;
+    }
+    &>h1 {
+      font-size: 22pt;
+      font-weight: 400;
+    }
+    &>h2 {
+      font-size: 17pt;
+      font-weight: 500;
+    }
+    &>h3 {
+      font-size: 15pt;
+    }
+    &>h4 {
+      font-size: 13pt;
+    }
+
+    &>ul {
+      @apply list-disc pl-5
+    }
+  }
+
+  &>h1, 
+  &>h2,
+  &>h3,
+  &>h4,
+  &>h5 {
+      font-weight: bold;
+      @apply font-textbold;
+  }
+
+  code {
+    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  .component-preview {
+    @apply bg-blue-medium bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
+    gap: 1rem;
+    border-radius: 0.33rem;
+    border: 1px solid theme("colors.slate.200");
+    resize: both;
+  }
+
+  .astro-code {
+    @apply mx-0 p-4;
+    border-radius: 0.44rem;
+  }
+}
+
+table {
+  @apply table-auto text-left border bg-white shadow-md;
+
+  tr {
+    @apply border;
+  }
+
+  td, th {
+    @apply px-4 py-2;
+  }
+
+  thead {
+    @apply bg-gray-100;
+  }
+}

package/src/styles/main.css

@@ -1,7 +1,7 @@
-
-/* @import "variables"; */
-@import "base/typography";
-@import "base/base";
-@import "base/grid";
-  
-@import "content.css";
+
+/* @import "variables"; */
+@import "base/typography";
+@import "base/base";
+@import "base/grid";
+  
+@import "content.css";

package/src/types/Product.ts

@@ -1,32 +1,32 @@
-export interface ProductImage {
-    path: string;
-  }
-  
-  export interface BaseProduct {
-    id: string | number;
-    number: string;
-    photo: string | null;
-    price_pln?: number;
-  }
-  
-  export interface ShopProduct extends BaseProduct {
-    images: ProductImage[];
-    slug: string;
-    name_pl: string;
-    name_en: string;
-  }
-  
-  export interface CatalogProduct extends BaseProduct {
-    photo: string | null;
-  }
-  
-  export type Product = ShopProduct | CatalogProduct;
-  
-  export interface ProductLinkProps {
-    productId: string;
-    bigTile?: boolean;
-    locale: string;
-    index?: number | null;
-    loading?: 'lazy' | 'eager';
-    isShopProduct?: boolean;
+export interface ProductImage {
+    path: string;
+  }
+  
+  export interface BaseProduct {
+    id: string | number;
+    number: string;
+    photo: string | null;
+    price_pln?: number;
+  }
+  
+  export interface ShopProduct extends BaseProduct {
+    images: ProductImage[];
+    slug: string;
+    name_pl: string;
+    name_en: string;
+  }
+  
+  export interface CatalogProduct extends BaseProduct {
+    photo: string | null;
+  }
+  
+  export type Product = ShopProduct | CatalogProduct;
+  
+  export interface ProductLinkProps {
+    productId: string;
+    bigTile?: boolean;
+    locale: string;
+    index?: number | null;
+    loading?: 'lazy' | 'eager';
+    isShopProduct?: boolean;
   }

package/src/types/astro.d.ts

@@ -1,4 +1,4 @@
-declare module '*.astro' {
-  const component: any;
-  export default component;
+declare module '*.astro' {
+  const component: any;
+  export default component;
 }

package/src/utils/product/getPriceFormatted.ts

@@ -1,16 +1,16 @@
-import i18next from "i18next";
-
-export const getPriceFormatted  = (product: any) => {
-    if (i18next.language === 'en') {
-      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur, )
-    }
-    if (i18next.language === 'pl') {
-      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln, )
-    }
-    else {
-      return 'no price'
-    }
-  }
-  
-
+import i18next from "i18next";
+
+export const getPriceFormatted  = (product: any) => {
+    if (i18next.language === 'en') {
+      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur, )
+    }
+    if (i18next.language === 'pl') {
+      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln, )
+    }
+    else {
+      return 'no price'
+    }
+  }
+  
+
   export default getPriceFormatted;

package/src/utils/product/getProductChecklist.ts

@@ -1,17 +1,17 @@
-import { t } from "i18next";
-
-export const getProductCheckList = (productDetails) => {
-    if (!productDetails || !productDetails.length) {
-        return null;
-    }
-
-    const list = productDetails.filter(item => item.icon);
-
-    if (!list.length) {
-        return null;
-    }
-
-    return list.map(detail => t(`detail.value.${detail.value}`));
-}
-
-export default getProductCheckList;
+import { t } from "i18next";
+
+export const getProductCheckList = (productDetails) => {
+    if (!productDetails || !productDetails.length) {
+        return null;
+    }
+
+    const list = productDetails.filter(item => item.icon);
+
+    if (!list.length) {
+        return null;
+    }
+
+    return list.map(detail => t(`detail.value.${detail.value}`));
+}
+
+export default getProductCheckList;