spoko-design-system 0.0.2 → 0.0.6

package/src/pages/components/buttons.mdx

@@ -3,6 +3,9 @@ title: "Buttons"
 layout: "../../layouts/MainLayout.astro"
 ---
 import Button from '../../components/Button.vue'
+import ButtonCopy from '../../components/ButtonCopy.vue'
+import { Icon } from 'astro-icon/components';
+import { t } from "i18next";
 
 ## All buttons
 
@@ -13,27 +16,34 @@ 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 text>Text</Button>
-    <Button tag>Text</Button>
+    <Button tertiary>Tertiary</Button>
+    
+    <Button text medium>Text</Button>
+    <Button tag small>Tag Name</Button>
 </div>
 
 ```js
-  <Button primary>Primary</Button>
-  <Button secondary>Secondary</Button>
-  <Button text>Text</Button>
-  <Button tag>Text</Button>
+    <Button primary>Primary</Button>
+    <Button secondary>Secondary</Button>
+    <Button tertiary>Tertiary</Button>
+    <Button text medium>Text</Button>
+    <Button tag small>Tag Name</Button>
 ```
 
-## Primary button
+## Primary button `<button>`
 
 We use the primary button for main actions like saving a form or creating a new item.
 
 <div class="component-preview">
-    <Button primary>Primary button</Button>
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
 </div>
 
 ```js
-<Button primary>Primary button</Button>
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
 ```
 
 ## Secondary button
@@ -42,11 +52,15 @@ Secondary buttons accompany primary buttons to provide additional actions.
 For example, cancel buttons are secondary buttons.
 
 <div class="component-preview">
-    <Button secondary>Secondary button</Button>
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
 </div>
 
 ```js
-<Button secondary>Secondary button</Button>
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
 ```
 
 ## Text button
@@ -55,8 +69,75 @@ Text buttons are used for actions that do not require a primary or secondary but
 
 <div class="component-preview">
     <Button text>Text button</Button>
+    <Button text>Text button</Button>
+    <Button text>Text button</Button>
 </div>
 
 ```js
 <Button text>Text button</Button>
 ```
+
+## Link tertiary 
+
+<div class="component-preview">
+
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+
+</div>
+
+```html
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+```
+
+## Tertiary with icon
+<div class="component-preview">
+    <Button tertiary href="#">
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+</div>
+
+```html
+    <Button tertiary href="#">
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+```
+
+
+## Link button `<a>`
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<div class="component-preview">
+    <Button primary href="#" title="Title">Text button</Button>
+</div>
+
+```js
+<Button primary href="#" title="Title">Text button</Button>
+```

package/src/pages/components/card.mdx

@@ -0,0 +1,94 @@
+---
+title: "Card"
+layout: "../../layouts/MainLayout.astro"
+---
+import Button from '../../components/Button.vue';
+import Card from '../../components/Card.astro'
+import { Icon } from 'astro-icon/components';
+import Image from '../../components/Image.astro'
+
+## 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" >
+        <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+        </a>
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
+        </p>
+
+        <div class="flex items-center justify-between my-4">
+          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+        </div>
+
+        <Button tertiary small href="#">
+          Read more
+          <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
+        </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" >
+        <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+        </a>
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
+        </p>
+
+        <div class="flex items-center justify-between my-4">
+          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+        </div>
+
+        <Button tertiary small href="#">
+          Read more
+          <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
+        </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" >
+        <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+        </a>
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
+        </p>
+
+        <div class="flex items-center justify-between my-4">
+          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+        </div>
+
+        <Button tertiary small href="#">
+          Read more
+          <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
+        </Button>
+    </Card>
+  </div>
+</div>
+
+```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" >
+        <a href="#">
+            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
+        </a>
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          Magna magna mollit esse incididunt deserunt eiusmod ad id ullamco cupidatat laborum enim nostrud. Irure officia occaecat adipisicing amet labore et incididunt exercitation. Consequat aliqua excepteur duis dolore cupidatat.
+        </p>
+
+        <div class="flex items-center justify-between my-4">
+          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+        </div>
+
+        <Button tertiary small href="#">
+          Read more
+          <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl leading-none" />
+        </Button>
+    </Card>
+</div>
+```
+
+

package/src/pages/components/flags.mdx

@@ -27,15 +27,23 @@ Flags based on CSS (UnoCSS) classes only.
 <FlagUA />
 ```
 
-## Circle icon flags
+## Circle icon flags with shadow
 <div class="component-preview">
-        <Icon name="circle-flags:pl" />
-        <Icon name="circle-flags:uk" />
-        <Icon name="circle-flags:ua" />
+        <div class="bg-white p-6 columns-8 md:columns-16 w-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" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
+        </div>
 </div>
 
 ```js
-        <Icon name="circle-flags:pl" />
-        <Icon name="circle-flags:uk" />
-        <Icon name="circle-flags:ua" />
+                <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" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
 ```

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

@@ -4,10 +4,15 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import HandDrive from '../../components/HandDrive.astro'
 
+
 ## HandDrive
+RHD (right-hand drive) and LHD (left-hand drive) badges.
+- https://en.wikipedia.org/wiki/Left-_and_right-hand_traffic
+
+#### import:
 
 ```js
-import HandDrive from '../../components/HandDrive.astro'
+import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'
 ```
 
 

package/src/pages/components/headline.mdx

@@ -20,7 +20,7 @@ Thanks to this, I can make a header that always looks the same, regardless of wh
 import Headline from 'spoko-design-system/src/components/Headline.vue';
 ```
 
-## parameters
+## settings (parameters)
 ```js
 as: {
         type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
@@ -52,12 +52,12 @@ textSize: {
 #### Headline H2
 
 <div class="component-preview">
-<Headline as="h2"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
+<Headline as="h2"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />Lorem Ipsum</Headline>
 </div>
 
 ```js
 <Headline as="h2">
-        <Icon name="ph:cat-thin" class="mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />
+        <Icon name="ph:cat-thin" class="mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />
         Lorem Ipsum
 </Headline>
 
@@ -127,3 +127,20 @@ textSize: {
 </Headline>
 
 ```
+
+
+#### Headline with underline
+
+<div class="component-preview">
+<Headline as="h1" text-size="4xl" underline><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
+</div>
+
+```js
+<Headline as="h1" text-size="4xl"  icon-color="blue-wrc" underline>
+        <Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
+        Lorem Ipsum
+</Headline>
+
+```
+
+#

package/src/pages/components/icons.astro

@@ -1,44 +1,46 @@
 ---
-import MainLayout from '../../layouts/MainLayout.astro';
-import { Icon } from 'astro-icon/components';
+import { changeLanguage } from "i18next";
+import MainLayout from "../../layouts/MainLayout.astro";
+import { Icon } from "astro-icon/components";
 
-const iconifyUrl = 'https://icon-sets.iconify.design/'
 
+const iconifyUrl = "https://icon-sets.iconify.design/";
 const ICONS = {
-        mdi: ["facebook", "instagram", "post-it-note-edit-outline"], // Loads only Material Design Icon's "account" SVG
-        'ant-design': ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined", "cluster-outlined", "audit-outlined", "build-twotone" ],
-        bi: ["envelope-open", "credit-card"],
-        bx: ["arrow-back"],
-        carbon: ["language", "checkmark", "home", "dicom-overlay"],
-        el: ["star-empty", "star"],
-        'eos-icons': ["three-dots-loading"],
-        fluent: ["share-android-24-regular"],
-        'fluent-emoji': ["cookie"],
-        la: ["arrow-right", "arrow-left"],
-        octicon: ["chevron-left-24", "x-24"],
-        uil: ["map-marker", "envelope", "phone"]
-}
-
+    mdi: ["facebook", "instagram", "post-it-note-edit-outline", "car-hatchback", "car-door", "car-side", "car-windshield-outline", "car-light-alert", "car-tire-alert", "car-light-dimmed", "car-light-fog", "car-light-high", "car-parking-lights", "car-esp", "car-brake-abs", "car-horn", "engine-outline", "fan", "fan-off", "air-conditioner", "coolant-temperature", "car-brake-alert", "car-traction-control", "card-text-outline", "fuel", "oil", "hazard-lights", "credit-card-outline"],
+    el: ["star-empty", "star",  "heart-empty",  "heart", "map-marker", "fire", "quote-right", "qrcode", "car", "indent-left", "indent-right", "ok"],    'eos-icons': ["three-dots-loading", "bubble-loading", "loading", "installing"],
+    fluent: ["share-android-24-regular", "checkmark-24-filled", "tag-24-regular", "tag-multiple-24-regular" ],
+    "fluent-emoji": ["cookie", "construction", "warning", "wrench"],
+    la: ["arrow-right", "arrow-left", "car", "car-side"],
+    octicon: ["chevron-left-24", "x-24", "alert-24", "graph-24", "comment-24", "comment-discussion-24", "clock-24", "star-24", "star-fill-24", "file-media-24", "heart-24", "heart-fill-24", "project-roadmap-24", "location-24", "info-24", "mark-github-16"],
+    uil: ["map-marker", "envelope", "phone", "tag-alt"],
+    "simple-icons": ["ebay", "allegro", "volkswagen", "audi", "skoda", "seat", "whatsapp", "x", "facebook", "messenger", "instagram", "telegram"],
+    "icon-park-outline": ["shopping-bag", "comment", "comments", "tag-one"],
+    flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline","map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
+
+};
 ---
 
 <MainLayout>
     <h1>Icons</h1>
+    <p>Astro Icon is a straightforward icon system for the Astro framework.</p>
+
+    <a href="https://www.astroicon.dev/">https://www.astroicon.dev/</a>
 
         <pre  class="mt-6 astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
         <div class="">
         {Object.keys(ICONS).map((key) => (
             <h2 class="mt-6 mx-2">
-                <a href={`${iconifyUrl}/${key}`} target="_blank">
+                <a href={`${iconifyUrl}${key}/`} target="_blank">
                     {key}
                 </a>
             </h2>
-            <div class="inline-grid grid-cols-4 gap-0 w-full">
+            <div class="inline-grid grid-cols-2 md:grid-cols-4 gap-0 w-full">
                     {ICONS[key].map((value) => (
                             <div class="mx-1 mb-2">
                             <div class="component-preview ">
-    <Icon name={`${key}:${value}`} />
+    <Icon name={`${key}:${value}`} class="text-3xl mx-auto" />
                             </div>
-                            <pre class="astro-code bg-slate-800 text-white text-sm">&lt;Icon name={`${key}:${value}`} /&gt;</pre>
+                            <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
                             </div>
                     ))}
             </div>