spoko-design-system 0.0.7 → 0.0.9

package/README.md

@@ -46,6 +46,7 @@ Most of the components from this repository can be seen in my projects:
 - 🗒 [astrojs/mdx](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/) - markdown support
 - 📦 [astro-compress](https://github.com/astro-community/AstroCompress) - compression utilities to your Astro project
 - 🖨 Static-site generation (SSG)
+- 🎡 [Swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
 - 🌠 [View Transitions API](https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode) - [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ ([more details](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en))
 - ☁️ Deploy on Netlify
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -77,7 +77,8 @@
     "sass": "^1.70.0",
     "unocss": "^0.57.7",
     "vite": "^5.0.12",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.58.4",

package/src/components/Carousel.astro

@@ -0,0 +1,26 @@
+---
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
+---
+
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>

package/src/components/HeadCommon.astro

@@ -9,12 +9,12 @@
 <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.xml" />
+<link rel="sitemap" href="/sitemap-index.xml" />
 
 <!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
+<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>

package/src/components/Header/Header.astro

@@ -61,8 +61,7 @@ import Search from "astro-pagefind/components/Search";
 
     &.search-container {
       box-sizing: border-box;
-      @apply h-10;
-      @apply h-10 border-0 border-gray-800 rounded-3xl;
+      @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
     }
     .pagefind-ui {
 

package/src/components/ProductCarousel.astro

@@ -0,0 +1,48 @@
+---
+import ProductTile from "../components/ProductTile.astro";
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
+---
+
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+  </swiper-container>
+</div>

package/src/components/ProductTile.astro

@@ -1,6 +1,5 @@
 ---
 const { productObject, locale, index } = Astro.props;
-import i18next, { t } from "i18next";
 import Image from "./Image.astro"
 import ProductNumber from "./ProductNumber.astro"
 
@@ -9,7 +8,6 @@ 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 underline-on-hover">
     <!-- product image -->
     <div class="img--4/3 img--small">
       { productObject.photo !== null ?
@@ -46,7 +44,5 @@ import ProductNumber from "./ProductNumber.astro"
       }
     </div>
 
-  </div>
-
 )}
 

package/src/components/newFile.tsx

@@ -0,0 +1,42 @@
+import Image from "./Image.astro";
+import ProductNumber from "./ProductNumber.astro";
+
+<Fragment>
+{productObject &&
+(
+
+<Fragment><div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+{/** product image */}
+<div class="img--4/3 img--small">
+{productObject.photo !== null ?
+<Fragment><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'
+}} /></Fragment>
+:
+<Fragment><img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} /></Fragment>}
+</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 &&
+(<Fragment><meta itemprop="position" content={String(index)} /></Fragment>
+,
+<Fragment><meta itemprop="name" content={productObject.name} /></Fragment>)}
+</div>
+
+</div></Fragment>
+
+)}
+
+
+</Fragment>;

package/src/config.ts

@@ -27,6 +27,7 @@ export const SIDEBAR = [
   { text: "Breadcrumbs", link: "/components/breadcrumbs" },
   { text: "Buttons", link: "/components/buttons" },
   { text: "Card", link: "/components/card" },
+  { text: "Carousel", link: "/components/carousel" },
   { text: "Copyright", link: "/components/copyright" },
   { text: "HandDrive", link: "/components/hand-drive" },
   { text: "Headline", link: "/components/headline" },

package/src/layouts/MainLayout.astro

@@ -15,6 +15,13 @@ const { content = {} } = Astro.props;
 const currentPage = Astro.url.pathname;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
+<script>
+	// Swiper Element
+	import { register } from "swiper/element/bundle";
+	document.addEventListener("astro:page-load", () => {
+		register();
+	});
+</script>
 
 <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
 	<head>

package/src/pages/components/carousel.mdx

@@ -0,0 +1,62 @@
+---
+title: "Carousel"
+layout: "../../layouts/MainLayout.astro"
+---
+import Carousel from '../../components/Carousel.astro'
+import ProductCarousel from '../../components/ProductCarousel.astro'
+
+# Carousel
+
+Carousel - modern carousel based on Swiper Element (Web Component)
+
+<div class="component-preview">
+     <Carousel />
+</div>
+
+```js
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>
+```
+#
+
+Find the code for this page in the `src/pages/components/carousel.mdx` file.
+
+
+## Product Carousel
+<div class="component-preview">
+  <ProductCarousel />
+</div>
+```html
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    ...
+  </swiper-container>
+</div>
+```

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

@@ -15,15 +15,27 @@ export const productObject = {
 
 ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
 
+It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
+#
+
 <div class="component-preview">
   <div class="flex flex-wrap bg-white w-full p-4 pb-0">
 
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObjec={productObject}t />
-      <ProductTile productObject={productObject} />
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
   </div>
 </div>
 

package/src/pages/components/table.mdx

@@ -41,6 +41,8 @@ export const tableDataSecondary = [
 
 # Table
 
+Simple table based on JSON data object.
+
 <div class="component-preview">
     <MainTable data={tableData}></MainTable>
 </div>

package/src/pages/core/colors.mdx

@@ -5,4 +5,6 @@ layout: ../../layouts/MainLayout.astro
 import MainColors from '../../components/MainColors.vue';
 
 <h1>Colors</h1>
-<MainColors />
+<p>Base colors.</p>
+
+<MainColors class="mt-8" />

package/src/pages/index.astro

@@ -10,7 +10,7 @@ import Button from "../components/Button.vue";
 const navItems = [
     {
         title: "Core",
-        description: "Base colors, typography, shadows, and more.",
+        description: "Base colors, typography, shadows etc.",
         url: "/core/introduction",
         icon: "ant-design:cluster-outlined"
     },
@@ -49,18 +49,19 @@ const navItems = [
     </Button>
 </Jumbatron>
   <nav>
-    <ul class="flex gap-4 max-w-5xl mx-auto text-left mt-12">
+    <ul class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12  md:(px-0 flex-row) ">
       {
         navItems.map(({ title, description, url, icon }) => (
           <a
             href={url}
-            class="flex flex-col bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 text-center"
+            title={description}
+            class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center)"
           >
-            <Headline as="h2" textSize="2xl">
-              <Icon name={icon} aria-hidden="true" class="text-blue-wrc mr-2" />
+            <Headline as="h2" textSize="2xl" underline={false}>
+              <Icon name={icon} aria-hidden="true" class="text-blue-b mr-2" />
               {title}
             </Headline>
-            <p class="text-slate-500">{description}</p>
+            <p class="text-slate-500 w-full">{description}</p>
           </a>
         ))
       }

package/src/styles/content.scss

@@ -34,7 +34,7 @@
   }
 
   .component-preview {
-    @apply bg-blue-600 bg-opacity-5 px-0 py-4 mx-0 flex items-center sm:(p-8);
+    @apply bg-blue-600 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");

package/uno.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
     ['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
     ['img--medium', 'w-60'],
     ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px  after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
-
+    ['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
     ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
     ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
     ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],