spoko-design-system 0.0.6 → 0.0.8

package/src/components/ProductTile.astro

@@ -6,49 +6,47 @@ import ProductNumber from "./ProductNumber.astro"
 
 ---
 
-  { productObject && 
-   (
+{ 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">
+  <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>
+    <div class="img--4/3 img--small">
       { 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'
-              }
+        <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>
+    <!-- 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>
+      <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

@@ -10,6 +10,3 @@ const headers = content.astro?.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"} -->

package/src/config.ts

@@ -38,6 +38,7 @@ export const SIDEBAR = [
   { text: "PostHeader", link: "/components/post-header" },
   { text: "PR-Code", link: "/components/pr-code" },
   { text: "Product Number", link: "/components/product-number" },
+  { text: "Product Tile", link: "/components/product-tile" },
   { text: "Table", link: "/components/table" },
 
   { text: "Extras", header: true },

package/src/design.config.ts

@@ -5,6 +5,10 @@ export const COLORS = {
     { name: "300", value: "#b5bbc5" },
     { name: "400", value: "#9ca3af" },
     { name: "500", value: "#64748B" },
+    { name: "600", value: "#475569" },
+    { name: "700", value: "#334155" },
+    { name: "800", value: "#1e293b" },
+    { name: "900", value: "#0f172a" },
   ],
   blue: [
     { name: "50", value: "#eff6ff" },

package/src/layouts/Layout.astro

@@ -26,11 +26,11 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 		</div>
 		<footer>
 			<Copyright class="fixed bottom-0 z-0 w-full">
-				<a slot="middle-item"  href={`https://${import.meta.env.COPYRIGHT_DOMAIN}`} target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}>
+				<a slot="middle-item"  href={`https://spoko.space`} target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}>
 				  <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
 				  <img
 					class="h-4 md:h-5 w-min"
-					src={`/${import.meta.env.COPYRIGHT_IMG}`}
+					src="spoko.space.svg"
 					alt="Modern Websites"
 					width="126"
 					height="23"

package/src/layouts/MainLayout.astro

@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import HeadCommon from '../components/HeadCommon.astro';
 import HeadSEO from '../components/HeadSEO.astro';
 import Header from '../components/Header/Header.astro';
@@ -20,25 +21,24 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 		<HeadCommon />
 		<HeadSEO {content} canonicalURL={canonicalURL} />
 		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
+		<ViewTransitions />
 	</head>
 
 	<body class="bg-blue-50">
-		<div class="sticky top-0 z-10 w-full">
+		<div class="sticky top-0 z-20 w-full bg-white/70">
 			<Header currentPage={currentPage} />
 		</div>
 
 		<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  ">
+				<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">
-				<div>
-					<PageContent content={content}>
-						<slot />
-					</PageContent>
-				</div>
+				<PageContent content={content}  transition:name="content">
+					<slot />
+				</PageContent>
 			</main>
 		</div>
 		<footer>

package/src/pages/components/badges.mdx

@@ -4,66 +4,52 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import Badges from '../../components/Badges.vue'
 
-## Product badges
+# Product badges
+Extra product badges (labels).
 
-### Badge - GTI
+## Badges - GTI
 <div class="component-preview">
-        <div class="relative min-h-10">
-                <Badges badges={['GTI']} class="top-2" />
-        </div>
+    <div class="relative min-h-19">
+            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+    </div>
 </div>
 ```js
 <div class="relative min-h-10">
-        <Badges badges={['GTI']} class="top-2" />
+    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
 </div>
 
 ```
 
 
-### Badge - Motorsport
-<div class="component-preview">
-        <div class="relative min-h-10">
-                <Badges badges={['Motorsport']} class="top-2" />
-        </div>
-</div>
-
-```js
-<div class="relative min-h-10">
-        <Badges badges={['Motorsport']} class="top-2" />
-</div>
-
-```
-
-
-### Badge on image - Motorsport
+## Badge on image
 <div class="component-preview">
 <div class="relative">
-        <img src="https://placehold.co/300x200" alt="image alt" />
-        <Badges badges={['Motorsport']} class="top-2" />
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
 </div>
 </div>
 
 ```js
 <div class="relative">
-        <img src="https://placehold.co/300x200" alt="image alt" />
-        <Badges badges={['Motorsport']} class="top-2" />
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
 </div>
 
 ```
 
 
-### Few badges on image
+## Few badges on image
 <div class="component-preview">
 <div class="relative">
-        <img src="https://placehold.co/300x200" alt="image alt" />
-        <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
 </div>
 </div>
 
 ```js
 <div class="relative">
-        <img src="https://placehold.co/300x200" alt="image alt" />
-        <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
 </div>
 
 ```

package/src/pages/components/breadcrumbs.mdx

@@ -6,7 +6,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import Breadcrumbs from '../../components/Breadcrumbs.vue'
 
-## Breadcrumbs
+# Breadcrumbs
 
 Breadcrumbs component with BreadcrumbList Microdata.
 
@@ -20,7 +20,7 @@ https://schema.org/ListItem
 
 
 
-### show back
+## Show back
 
 <div class="component-preview">
     <Breadcrumbs
@@ -49,7 +49,7 @@ https://schema.org/ListItem
 ```
 
 
-### show home
+## Show home
 
 <div class="component-preview">
     <Breadcrumbs
@@ -76,7 +76,7 @@ https://schema.org/ListItem
 ```
 
 
-### simply
+## Simply
 
 <div class="component-preview">
     <Breadcrumbs
@@ -103,9 +103,12 @@ https://schema.org/ListItem
 ```
 
 
-### Schema example:
+### Schema support:
+- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
+
+#### Example
 - https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
-#
+
 
 | @type            | BreadcrumbList                                                                    |
 | ---------------- | --------------------------------------------------------------------------------- |

package/src/pages/components/buttons.mdx

@@ -7,27 +7,43 @@ import ButtonCopy from '../../components/ButtonCopy.vue'
 import { Icon } from 'astro-icon/components';
 import { t } from "i18next";
 
-## All buttons
+# All buttons
 
 This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
 
 Find the code for this page in the `src/pages/components/buttons.md` file.
 
-<div class="component-preview">
-    <Button primary>Primary</Button>
-    <Button secondary>Secondary</Button>
-    <Button tertiary>Tertiary</Button>
-    
-    <Button text medium>Text</Button>
-    <Button tag small>Tag Name</Button>
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary>Primary</Button>
+        <Button secondary>Secondary</Button>
+        <Button tertiary>Tertiary</Button>
+        
+        <Button text medium>Text</Button>
+        <Button tag small>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        
+        <Button text medium rounded>Text</Button>
+        <Button tag small rounded>Tag Name</Button>
+    </div>
 </div>
 
 ```js
-    <Button primary>Primary</Button>
-    <Button secondary>Secondary</Button>
-    <Button tertiary>Tertiary</Button>
-    <Button text medium>Text</Button>
-    <Button tag small>Tag Name</Button>
+<Button primary>Primary</Button>
+<Button secondary>Secondary</Button>
+<Button tertiary>Tertiary</Button>
+<Button text medium>Text</Button>
+<Button tag small>Tag Name</Button>
+
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
 ```
 
 ## Primary button `<button>`
@@ -129,6 +145,83 @@ Text buttons are used for actions that do not require a primary or secondary but
 
 ```
 
+## Rounded button
+
+Rounded edges
+
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        
+        <Button text rounded>Text</Button>
+        <Button tag rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium rounded>Primary</Button>
+        <Button secondary medium rounded>Secondary</Button>
+        <Button tertiary medium rounded>Tertiary</Button>
+        
+        <Button text medium rounded>Text</Button>
+        <Button tag medium rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small rounded>Primary</Button>
+        <Button secondary small rounded>Secondary</Button>
+        <Button tertiary small rounded>Tertiary</Button>
+        
+        <Button text medium small rounded>Text</Button>
+        <Button tag small small rounded>Tag Name</Button>
+    </div>
+</div>
+
+```js
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+
+<Button primary medium rounded>Primary</Button>
+<Button secondary medium rounded>Secondary</Button>
+<Button tertiary medium rounded>Tertiary</Button>
+<Button text medium medium rounded>Text</Button>
+<Button tag small medium rounded>Tag Name</Button>
+
+<Button primary small rounded>Primary</Button>
+<Button secondary small rounded>Secondary</Button>
+<Button tertiary small rounded>Tertiary</Button>
+<Button text medium small rounded>Text</Button>
+<Button tag small small rounded>Tag Name</Button>
+```
+
+## Outline button
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<div class="component-preview">
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+</div>
+
+```js
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+```
+
 
 ## Link button `<a>`
 

package/src/pages/components/card.mdx

@@ -7,13 +7,13 @@ import Card from '../../components/Card.astro'
 import { Icon } from 'astro-icon/components';
 import Image from '../../components/Image.astro'
 
-## Card
+# Card
 
 Card - product link component which can be used for carousels, section with related products, recently added etc.
 
 <div class="component-preview">
   <div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
-    <Card imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
+    <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
         </a>
@@ -31,7 +31,7 @@ Card - product link component which can be used for carousels, section with rela
         </Button>
     </Card>
 
-    <Card imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
+    <Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
         </a>
@@ -49,7 +49,7 @@ Card - product link component which can be used for carousels, section with rela
         </Button>
     </Card>
 
-    <Card imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
+    <Card href="#" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
         </a>
@@ -71,7 +71,7 @@ Card - product link component which can be used for carousels, section with rela
 
 ```html
 <div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
-    <Card imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
+    <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
         </a>

package/src/pages/components/carousel.mdx

@@ -0,0 +1,20 @@
+---
+title: "Carousel"
+layout: "../../layouts/MainLayout.astro"
+---
+import Carousel from '../../components/Carousel.astro'
+
+# Carousel
+
+Carousel - modern carousel based on Swiper Element (Web Component)
+
+<div class="component-preview">
+     <Carousel />
+</div>
+
+```js
+     <Carousel />
+```
+#
+
+Find the code for this page in the `src/pages/components/carousel.mdx` file.

package/src/pages/components/copyright.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import Copyright from '../../components/Copyright.astro'
 
-## Copyright
+# Copyright
 
 Copyright component
 <div class="component-preview">
@@ -22,8 +22,9 @@ Copyright component
           <div slot="right-item">right item</div>
         </Copyright>
 ```
+#
 
-Copyright with custom classes
+## Copyright with custom classes
 <div class="component-preview">
        <Copyright class="z-0 w-full">
         <div slot="left-item">left item</div>

package/src/pages/components/flags.mdx

@@ -6,9 +6,10 @@ import FlagPL from '../../components/flags/FlagPL.vue'
 import FlagUA from '../../components/flags/FlagUA.vue'
 import { Icon } from 'astro-icon/components'
 
-## Flags
+# Flags
 Flags based on CSS (UnoCSS) classes only.
 
+## Pure CSS flags:
 ### Flag PL
 <div class="component-preview">
         <FlagPL />
@@ -29,7 +30,7 @@ Flags based on CSS (UnoCSS) classes only.
 
 ## Circle icon flags with shadow
 <div class="component-preview">
-        <div class="bg-white p-6 columns-8 md:columns-16 w-full">
+        <div class="bg-white p-6 columns-8 md:columns-16 w-full rounded-full">
                 <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
                 <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
                 <Icon name="circle-flags:nl" class="shadow-md rounded-full" />

package/src/pages/components/fuck-russia.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import FuckRussia from '../../components/FuckRussia.vue'
 
-## FuckRussia
+# FuckRussia
 
 FuckRussia - solidarity with Ukraine.
 

package/src/pages/components/hand-drive.mdx

@@ -5,18 +5,18 @@ layout: "../../layouts/MainLayout.astro"
 import HandDrive from '../../components/HandDrive.astro'
 
 
-## HandDrive
+# HandDrive
 RHD (right-hand drive) and LHD (left-hand drive) badges.
 - https://en.wikipedia.org/wiki/Left-_and_right-hand_traffic
 
-#### import:
+#### Import:
 
 ```js
 import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'
 ```
 
 
-### RHD
+## RHD
 
 <div class="component-preview">
      <HandDrive handDrive={0}  />
@@ -28,7 +28,7 @@ import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'
 
 
 
-### LHD
+## LHD
 <div class="component-preview">
      <HandDrive handDrive={1}  />
 </div>