spoko-design-system 0.0.1 → 0.0.5

package/src/pages/components/buttons.mdx

@@ -1,60 +1,143 @@
----
-title: "Buttons"
-layout: "../../layouts/MainLayout.astro"
----
-import MainButton from '../../components/MainButton.vue'
-
-## 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">
-    <MainButton primary><b>Primary</b></MainButton>
-    <MainButton secondary>Secondary</MainButton>
-    <MainButton text>Text</MainButton>
-</div>
-
-```js
-  <MainButton primary>Primary</MainButton>
-  <MainButton secondary>Secondary</MainButton>
-  <MainButton text>Text</MainButton>
-```
-
-## Primary button
-
-We use the primary button for main actions like saving a form or creating a new item.
-
-<div class="component-preview">
-    <MainButton primary>Primary button</MainButton>
-</div>
-
-```js
-<MainButton primary>Primary button</MainButton>
-```
-
-## Secondary button
-
-Secondary buttons accompany primary buttons to provide additional actions.
-For example, cancel buttons are secondary buttons.
-
-<div class="component-preview">
-    <MainButton secondary>Secondary button</MainButton>
-</div>
-
-```js
-<MainButton secondary>Secondary button</MainButton>
-```
-
-## Text button
-
-Text buttons are used for actions that do not require a primary or secondary button.
-
-<div class="component-preview">
-    <MainButton text>Text button</MainButton>
-</div>
-
-```js
-<MainButton text>Text button</MainButton>
-```
+---
+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
+
+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>
+
+```js
+    <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 `<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 primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
+</div>
+
+```js
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
+```
+
+## Secondary button
+
+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 secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
+</div>
+
+```js
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
+```
+
+## Text button
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<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,40 @@
+---
+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 mb-4">
+          <span class="text-2xl font-bold text-gray-900 dark:text-white">€599.00</span>
+        </div>
+        <Button tertiary 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">
+
+</div>
+```
+
+

package/src/pages/components/copyright.mdx

@@ -1,24 +1,41 @@
----
-title: "Copyright"
-layout: "../../layouts/MainLayout.astro"
----
-import Copyright from '../../components/Copyright.astro'
-
-## Copyright
-
-Copyright component
-<div class="component-preview">
-       <Copyright class="z-0 w-full">
-        <div slot="left-item">left item</div>
-        <div slot="middle-item">middle item</div>
-        <div slot="right-item">right item</div>
-       </Copyright>
-</div>
-
-```js
-        <Copyright class="fixed bottom-0 z-0 w-full" >
-          <div slot="left-item">left item</div>
-          <div slot="middle-item">middle item</div>
-          <div slot="right-item">right item</div>
-        </Copyright>
-```
+---
+title: "Copyright"
+layout: "../../layouts/MainLayout.astro"
+---
+import Copyright from '../../components/Copyright.astro'
+
+## Copyright
+
+Copyright component
+<div class="component-preview">
+       <Copyright class="w-full">
+        <div slot="left-item">left item</div>
+        <div slot="middle-item">middle item</div>
+        <div slot="right-item">right item</div>
+       </Copyright>
+</div>
+
+```js
+        <Copyright class="w-full" >
+          <div slot="left-item">left item</div>
+          <div slot="middle-item">middle item</div>
+          <div slot="right-item">right item</div>
+        </Copyright>
+```
+
+Copyright with custom classes
+<div class="component-preview">
+       <Copyright class="z-0 w-full">
+        <div slot="left-item">left item</div>
+        <div slot="middle-item">middle item</div>
+        <div slot="right-item">right item</div>
+       </Copyright>
+</div>
+
+```js
+        <Copyright class="fixed bottom-0 z-0 w-full" >
+          <div slot="left-item">left item</div>
+          <div slot="middle-item">middle item</div>
+          <div slot="right-item">right item</div>
+        </Copyright>
+```

package/src/pages/components/flags.mdx

@@ -1,27 +1,41 @@
----
-title: "FuckRussia"
-layout: "../../layouts/MainLayout.astro"
----
-import FlagPL from '../../components/flags/FlagPL.vue'
-import FlagUA from '../../components/flags/FlagUA.vue'
-
-## Flags
-Flags - icons
-
-### Flag PL
-        <div class="component-preview">
-                <FlagPL />
-        </div>
-
-```js
-        <FlagPL />
-```
-
-###Flag UA
-        <div class="component-preview">
-                <FlagUA />
-        </div>
-
-```js
-        <FlagUA />
+---
+title: "FuckRussia"
+layout: "../../layouts/MainLayout.astro"
+---
+import FlagPL from '../../components/flags/FlagPL.vue'
+import FlagUA from '../../components/flags/FlagUA.vue'
+import { Icon } from 'astro-icon/components'
+
+## Flags
+Flags based on CSS (UnoCSS) classes only.
+
+### Flag PL
+<div class="component-preview">
+        <FlagPL />
+</div>
+
+```js
+<FlagPL />
+```
+
+### Flag UA
+<div class="component-preview">
+        <FlagUA />
+</div>
+
+```js
+<FlagUA />
+```
+
+## Circle icon flags
+<div class="component-preview">
+        <Icon name="circle-flags:pl" />
+        <Icon name="circle-flags:uk" />
+        <Icon name="circle-flags:ua" />
+</div>
+
+```js
+        <Icon name="circle-flags:pl" />
+        <Icon name="circle-flags:uk" />
+        <Icon name="circle-flags:ua" />
 ```

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

@@ -1,16 +1,39 @@
----
-title: "FuckRussia"
-layout: "../../layouts/MainLayout.astro"
----
-import FuckRussia from '../../components/FuckRussia.vue'
-
-## FuckRussia
-
-FuckRussia - solidarity with Ukraine.
-        <div class="component-preview">
-                <FuckRussia class="flex" />
-        </div>
-
-```js
-        <FuckRussia class="flex" />
-```
+---
+title: "FuckRussia"
+layout: "../../layouts/MainLayout.astro"
+---
+import FuckRussia from '../../components/FuckRussia.vue'
+
+## FuckRussia
+
+FuckRussia - solidarity with Ukraine.
+
+```js
+import FuckRussia from '../../components/FuckRussia.vue'
+```
+####
+
+### Animation only
+
+<div class="component-preview">
+    <FuckRussia />
+</div>
+
+```js
+<FuckRussia />
+```
+
+
+### Linked animation
+
+<div class="component-preview">
+    <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener">
+        <FuckRussia />
+    </a>
+</div>
+
+```js
+<a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener">
+    <FuckRussia />
+</a>
+```

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

@@ -1,27 +1,38 @@
----
-title: "HandDrive"
-layout: "../../layouts/MainLayout.astro"
----
-import HandDrive from '../../components/HandDrive.astro'
-
-## HandDrive
-
-### HandDrive RHD
-<div class="component-preview">
-     <HandDrive handDrive={0}  />
-</div>
-
-```js
-     <HandDrive handDrive={0} />
-```
-
-
-
-### HandDrive LHD
-<div class="component-preview">
-     <HandDrive handDrive={1}  />
-</div>
-
-```js
-     <HandDrive handDrive={1} />
-```
+---
+title: "HandDrive"
+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 'spoko-design-system/src/components/HandDrive.astro'
+```
+
+
+### RHD
+
+<div class="component-preview">
+     <HandDrive handDrive={0}  />
+</div>
+
+```js
+     <HandDrive handDrive={0} />
+```
+
+
+
+### LHD
+<div class="component-preview">
+     <HandDrive handDrive={1}  />
+</div>
+
+```js
+     <HandDrive handDrive={1} />
+```

package/src/pages/components/headline.mdx

@@ -0,0 +1,148 @@
+---
+title: "Headline"
+layout: "../../layouts/MainLayout.astro"
+---
+import Headline from '../../components/Headline.vue'
+import { Icon } from 'astro-icon/components';
+
+
+## Headline
+
+### Headline - universal HTML tag <small>(nice for SEO)</small>
+Headings give both your visitors and search engines important clues about the content’s hierarchy and relevancy.
+It's good to use only H1-H6 for important headings, but sometimes I want more things to be unified. That's why I created this universal component.
+
+Thanks to this, I can make a header that always looks the same, regardless of whether it is an H1 or a DIV or P.
+
+## Import
+
+```js
+import Headline from 'spoko-design-system/src/components/Headline.vue';
+```
+
+## settings (parameters)
+```js
+as: {
+        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+        default: null,
+        required: true,
+},
+textSize: {
+        type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+        required: false,
+        default: null
+}
+
+```
+
+#### Headline H1
+
+<div class="component-preview">
+        <Headline as="h1">Lorem Ipsum</Headline>
+</div>
+
+```js
+<Headline as="h1">
+        Lorem Ipsum
+</Headline>
+
+```
+
+
+#### 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)" 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)" aria-hidden="true" />
+        Lorem Ipsum
+</Headline>
+
+```
+
+#### Headline DIV
+
+<div class="component-preview">
+<Headline as="div"><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>
+</div>
+
+```js
+<Headline as="div">
+        <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 P
+
+<div class="component-preview">
+<Headline as="p"><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="p">
+        <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>
+
+```
+
+#### Headline without icon
+
+<div class="component-preview">
+<Headline as="p">Lorem Ipsum</Headline>
+</div>
+
+```js
+<Headline as="p">Lorem Ipsum</Headline>
+
+```
+
+#### Headline without icon, text size 4xl
+
+<div class="component-preview">
+<Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
+</div>
+
+```js
+<Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
+
+```
+
+
+#### Headline without icon, text size 4xl with blue icon
+
+<div class="component-preview">
+<Headline as="h1" text-size="4xl"><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">
+        <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>
+
+```
+
+
+#### 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>
+
+```
+
+#
+
+<div class="headline headline--underline"></div>