spoko-design-system 0.2.17 → 0.2.18

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

@@ -1,39 +1,39 @@
----
-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>
-```
+---
+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,38 +1,38 @@
----
-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} />
-```
+---
+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

@@ -1,152 +1,152 @@
----
-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
-supported 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
-Paragraph `<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>
-
-```
-
-#
+---
+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
+supported 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
+Paragraph `<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>
+
+```
+
+#

package/src/pages/components/icons.astro

@@ -1,48 +1,48 @@
----
-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", "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">
-                        {key}
-                    </a>
-                </h2>
-                <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}`} class="text-3xl mx-auto text-light-blue-400" />
-                            </div>
-                            <pre class="astro-code bg-slate-800 text-white text-sm text-center">&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", "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">
+                        {key}
+                    </a>
+                </h2>
+                <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}`} class="text-3xl mx-auto text-light-blue-400" />
+                            </div>
+                            <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
+                        </div>
+                    ))}
+                </div>
+            ))}
+        </div>
+</MainLayout>