spoko-design-system 0.8.0 → 0.8.1

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>
+
+```
+
+#