spoko-design-system 0.0.1 → 0.0.2

package/src/pages/components/buttons.mdx

@@ -1,60 +1,62 @@
----
-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'
+
+## 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 text>Text</Button>
+    <Button tag>Text</Button>
+</div>
+
+```js
+  <Button primary>Primary</Button>
+  <Button secondary>Secondary</Button>
+  <Button text>Text</Button>
+  <Button tag>Text</Button>
+```
+
+## Primary 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>
+</div>
+
+```js
+<Button primary>Primary button</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>
+</div>
+
+```js
+<Button secondary>Secondary button</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>
+</div>
+
+```js
+<Button text>Text button</Button>
+```

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,33 @@
----
-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
+
+```js
+import HandDrive from '../../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,129 @@
+---
+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';
+```
+
+## 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) text-blue-wrc" 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" />
+        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>
+
+```

package/src/pages/components/icons.astro

@@ -1,45 +1,52 @@
----
-import MainLayout from '../../layouts/MainLayout.astro';
-import { Icon } from 'astro-icon/components';
-
-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" ],
-        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"]
-}
-
----
-
-<MainLayout>
-    <h1>Icons</h1>
-        <pre  class="astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
-        <div class="">
-        {Object.keys(ICONS).map((key) => (
-                <h2>{key}</h2>
-                <div class="inline-grid grid-cols-4 gap-0 w-full">
-                        {ICONS[key].map((value) => (
-                                <div>
-                                <div class="component-preview ">
-<Icon name={`${key}:${value}`} />
-                                </div>
-                                <pre class="astro-code bg-slate-800 text-white text-sm">&lt;Icon name={`${key}:${value}`} /&gt;</pre>
-                                </div>
-                        ))}
-                </div>
-        ))}
-        </div>
-
-
-
-</MainLayout>
-
-
+---
+import MainLayout from '../../layouts/MainLayout.astro';
+import { Icon } from 'astro-icon/components';
+
+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"]
+}
+
+---
+
+<MainLayout>
+    <h1>Icons</h1>
+
+        <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">
+                    {key}
+                </a>
+            </h2>
+            <div class="inline-grid 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}`} />
+                            </div>
+                            <pre class="astro-code bg-slate-800 text-white text-sm">&lt;Icon name={`${key}:${value}`} /&gt;</pre>
+                            </div>
+                    ))}
+            </div>
+        ))}
+        </div>
+
+
+
+</MainLayout>
+
+

package/src/pages/components/input.mdx

@@ -1,15 +1,46 @@
----
-title: Input
-layout: ../../layouts/MainLayout.astro
----
-import MainInput from '../../components/MainInput.vue'
-
-## Input text
-
-<div class="component-preview">
-    <MainInput label="Name"></MainInput>
-</div>
-
-```js
-<MainInput type="text" value="Hello world!"></MainInput>
+---
+title: Input
+layout: ../../layouts/MainLayout.astro
+---
+import MainInput from '../../components/MainInput.vue'
+
+## Input text
+
+<div class="component-preview">
+    <MainInput label="Name"></MainInput>
+</div>
+
+```js
+<MainInput type="text" value="Hello world!"></MainInput>
+```
+
+
+
+<div class="component-preview">
+
+<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
+    <div class="relative">
+        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    </div>
+
+    <div class="relative z-0">
+        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+    </div>
+</div>
+
+</div>
+
+
+```js
+<div class="relative">
+    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+</div>
+
+<div class="relative z-0">
+    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+</div>
 ```