spoko-design-system 1.19.0 → 1.20.0

package/src/pages/components/features-list.mdx

@@ -1,38 +1,38 @@
----
-title: "DetailsList"
-layout: "../../layouts/MainLayout.astro"
----
-
-import FeaturesList from '../../components/FeaturesList.vue'
-
-export const items = [
-  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
-  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
-  "dolore cupidatat ad mollit excepteur quis"
-];
-
-# Product Details Table
-
-<div class="component-preview flex-wrap">
- <div class="bg-white rounded-lg p-8">
-     <p class="mb-4">Dolor amet excepteur id quis ut. Nisi incididunt occaecat est officia ea do voluptate deserunt aliqua cillum duis eiusmod. Officia veniam nisi mollit exercitation consequat ex fugiat ea veniam in culpa aliquip deserunt ea. Magna elit aliqua reprehenderit anim. Ullamco do nostrud nulla consectetur dolor fugiat adipisicing adipisicing. Reprehenderit est do culpa eu non quis. Veniam anim amet excepteur in sit et eiusmod. Id amet adipisicing amet ut eiusmod et. Tempor Lorem amet aute anim magna. Do ea aute consectetur fugiat nulla laboris pariatur ad enim anim. Dolor culpa veniam aliquip amet aute sunt excepteur consectetur sit excepteur excepteur Lorem. Ipsum esse ad aute nulla eu do incididunt eiusmod nulla sunt labore id cupidatat incididunt.</p>
-    <FeaturesList items={items} caption="Main features"/>
- </div>
-</div>
-
-```ts
- const items = [
-  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
-  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
-  "dolore cupidatat ad mollit excepteur quis"
-];
-
-```
-### Astro:
-```html
-<FeaturesList items={items} caption="Main features" />
- ```
- ### Vue:
-```html
-<FeaturesList :items="items" caption="Main features" />
+---
+title: "DetailsList"
+layout: "../../layouts/MainLayout.astro"
+---
+
+import FeaturesList from '../../components/FeaturesList.vue'
+
+export const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+# Product Details Table
+
+<div class="component-preview flex-wrap">
+ <div class="bg-white rounded-lg p-8">
+     <p class="mb-4">Dolor amet excepteur id quis ut. Nisi incididunt occaecat est officia ea do voluptate deserunt aliqua cillum duis eiusmod. Officia veniam nisi mollit exercitation consequat ex fugiat ea veniam in culpa aliquip deserunt ea. Magna elit aliqua reprehenderit anim. Ullamco do nostrud nulla consectetur dolor fugiat adipisicing adipisicing. Reprehenderit est do culpa eu non quis. Veniam anim amet excepteur in sit et eiusmod. Id amet adipisicing amet ut eiusmod et. Tempor Lorem amet aute anim magna. Do ea aute consectetur fugiat nulla laboris pariatur ad enim anim. Dolor culpa veniam aliquip amet aute sunt excepteur consectetur sit excepteur excepteur Lorem. Ipsum esse ad aute nulla eu do incididunt eiusmod nulla sunt labore id cupidatat incididunt.</p>
+    <FeaturesList items={items} caption="Main features"/>
+ </div>
+</div>
+
+```ts
+ const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+```
+### Astro:
+```html
+<FeaturesList items={items} caption="Main features" />
+ ```
+ ### Vue:
+```html
+<FeaturesList :items="items" caption="Main features" />
  ```

package/src/pages/components/flags.mdx

@@ -1,50 +1,50 @@
----
-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.
-
-## Pure CSS flags:
-### Flag PL
-<div class="component-preview">
-        <FlagPL />
-</div>
-
-```js
-<FlagPL />
-```
-
-### Flag UA
-<div class="component-preview">
-        <FlagUA />
-</div>
-
-```js
-<FlagUA />
-```
-
-## Circle icon flags with shadow
-<div class="component-preview">
-        <div class="bg-white p-6 columns-8 md:columns-16 w-full rounded-full">
-                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
-        </div>
-</div>
-
-```js
-                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
-                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
+---
+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.
+
+## Pure CSS flags:
+### Flag PL
+<div class="component-preview">
+        <FlagPL />
+</div>
+
+```js
+<FlagPL />
+```
+
+### Flag UA
+<div class="component-preview">
+        <FlagUA />
+</div>
+
+```js
+<FlagUA />
+```
+
+## Circle icon flags with shadow
+<div class="component-preview">
+        <div class="bg-white p-6 columns-8 md:columns-16 w-full rounded-full">
+                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
+        </div>
+</div>
+
+```js
+                <Icon name="circle-flags:pl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:fi" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:nl" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:no" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:ua" class="shadow-md rounded-full" />
+                <Icon name="circle-flags:uk" class="shadow-md rounded-full" />
 ```

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,78 +1,78 @@
----
-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
+---
+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