spoko-design-system 0.9.6 → 1.0.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,78 @@
----
-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
+Universal RHD (right-hand drive) and LHD (left-hand drive) component with API-first design.
+- https://en.wikipedia.org/wiki/Left-_and_right-hand_traffic
+
+#### Import:
+
+```js
+import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `handDrive` | `'lhd' \| 'rhd'` | Yes | - | Hand drive type |
+| `text` | `string` | No | - | Display text from API |
+| `class` | `string` | No | - | CSS classes for styling |
+| `biggerText` | `boolean` | No | `false` | Use larger text size |
+| `title` | `string` | No | - | Override tooltip text |
+
+## Examples
+
+### LHD (Left-Hand Drive)
+<div class="component-preview">
+     <HandDrive handDrive="lhd" text="Left-Hand Drive" />
+</div>
+
+```js
+<HandDrive handDrive="lhd" text="Left-Hand Drive" />
+```
+
+### RHD (Right-Hand Drive)
+<div class="component-preview">
+     <HandDrive handDrive="rhd" text="Right-Hand Drive" />
+</div>
+
+```js
+<HandDrive handDrive="rhd" text="Right-Hand Drive" />
+```
+
+### Without Text
+<div class="component-preview">
+     <HandDrive handDrive="lhd" />
+</div>
+
+```js
+<HandDrive handDrive="lhd" />
+```
+
+### With Custom Styling
+<div class="component-preview">
+     <HandDrive handDrive="lhd" text="Left-Hand Drive" class="mb-4 border rounded p-2" biggerText={true} />
+</div>
+
+```js
+<HandDrive
+  handDrive="lhd"
+  text="Left-Hand Drive"
+  class="mb-4 border rounded p-2"
+  biggerText={true}
+/>
+```
+
+
+## Design Principles
+
+- **Universal**: No i18n dependencies, works across multiple projects
+- **API-first**: All data comes from consistent API endpoints
+- **Self-documenting**: 'lhd'/'rhd' values are clear in any language
+- **Type-safe**: Strong TypeScript support with string literals
+- **Clean**: No magic numbers or mixed value types

package/src/pages/components/headline.mdx

@@ -1,137 +1,137 @@
----
-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: 'span',  
-        required: true,
-},
-textSize: {
-        type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
-        required: false,
-        default: null
-}
-
-```
-
-
-## Examples
-
-<div class="component-preview flex-wrap flex-col justify-start !items-start">
-<ul class="list-decimal list-outside">
-  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline></li>
-  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline></li>
-  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline></li>
-  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline></li>
-  <li class="px-4 pb-4"><Headline as="code" font-family="novamono">Nova Mono Code Text</Headline></li>
-  <li class="px-4 pb-4"><Headline as="code" font-family="mono">Mono Code Text</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
-    <Icon name="ph:cat-thin" class="inline-block mr-4" />
-    Headline with Icon
-  </Headline></li>
-  <li class="px-4 pb-4"><Headline as="h1">Default Headline</Headline></li>
-  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
-    <Icon name="ph:cat-thin" class="inline-block mr-4" />
-    Complete Example
-  </Headline></li>
-</ul>
-</div>
-
-```js
-/* 1 */
-<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
-
-/* 2 */
-<Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>
-
-/* 3 */
-<Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>
-
-/* 4 */
-<Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>
-
-/* 5 */
-<Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>
-
-/* 6 */
-<Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>
-
-/* 7 */
-<Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>
-
-/* 8 */
-<Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>
-
-/* 9 */
-<Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>
-
-/* 10 */
-<Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>
-
-/* 11 */
-<Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>
-
-/* 12 */
-<Headline as="code" font-family="mono">Mono Code Text</Headline>
-
-/* 13 */
-<Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>
-
-/* 14 */
-<Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>
-
-/* 15 */
-<Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
-  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
-  Headline with Icon
-</Headline>
-
-/* 16 */
-<Headline as="h1">Default Headline</Headline>
-
-/* 17 */
-<Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
-  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
-  Complete Example
-</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: 'span',  
+        required: true,
+},
+textSize: {
+        type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+        required: false,
+        default: null
+}
+
+```
+
+
+## Examples
+
+<div class="component-preview flex-wrap flex-col justify-start !items-start">
+<ul class="list-decimal list-outside">
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="novamono">Nova Mono Code Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="mono">Mono Code Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
+    <Icon name="ph:cat-thin" class="inline-block mr-4" />
+    Headline with Icon
+  </Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1">Default Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
+    <Icon name="ph:cat-thin" class="inline-block mr-4" />
+    Complete Example
+  </Headline></li>
+</ul>
+</div>
+
+```js
+/* 1 */
+<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
+
+/* 2 */
+<Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>
+
+/* 3 */
+<Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>
+
+/* 4 */
+<Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>
+
+/* 5 */
+<Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>
+
+/* 6 */
+<Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>
+
+/* 7 */
+<Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>
+
+/* 8 */
+<Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>
+
+/* 9 */
+<Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>
+
+/* 10 */
+<Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>
+
+/* 11 */
+<Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>
+
+/* 12 */
+<Headline as="code" font-family="mono">Mono Code Text</Headline>
+
+/* 13 */
+<Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>
+
+/* 14 */
+<Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>
+
+/* 15 */
+<Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
+  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
+  Headline with Icon
+</Headline>
+
+/* 16 */
+<Headline as="h1">Default Headline</Headline>
+
+/* 17 */
+<Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
+  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
+  Complete Example
+</Headline>
+
+
+
+```
+
+
+#