spoko-design-system 1.18.1 → 1.20.0

package/src/pages/components/buttons.mdx

@@ -1,360 +1,360 @@
----
-title: "Buttons"
-layout: "../../layouts/MainLayout.astro"
----
-import Button from '../../components/Button.vue'
-import ButtonCopy from '../../components/ButtonCopy.astro'
-import { Icon } from 'astro-icon/components';
-
-# 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 flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary>Primary</Button>
-        <Button secondary>Secondary</Button>
-        <Button tertiary>Tertiary</Button>
-        
-        <Button text medium>Text</Button>
-        <Button tag small>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary rounded>Primary</Button>
-        <Button secondary rounded>Secondary</Button>
-        <Button tertiary rounded>Tertiary</Button>
-        
-        <Button text medium rounded>Text</Button>
-        <Button tag small rounded>Tag Name</Button>
-    </div>
-</div>
-
-```js
-<Button primary>Primary</Button>
-<Button secondary>Secondary</Button>
-<Button tertiary>Tertiary</Button>
-<Button text medium>Text</Button>
-<Button tag small>Tag Name</Button>
-
-<Button primary rounded>Primary</Button>
-<Button secondary rounded>Secondary</Button>
-<Button tertiary rounded>Tertiary</Button>
-<Button text medium rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-```
-
-## Primary button `<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 primary medium>Primary</Button>
-    <Button primary small>Primary</Button>
-</div>
-
-```js
-    <Button primary>Primary</Button>
-    <Button primary medium>Primary</Button>
-    <Button primary small>Primary</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 secondary medium>Secondary</Button>
-    <Button secondary small>Secondary</Button>
-</div>
-
-```js
-    <Button secondary>Secondary</Button>
-    <Button secondary medium>Secondary</Button>
-    <Button secondary small>Secondary</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>
-    <Button text>Text button</Button>
-    <Button text>Text button</Button>
-</div>
-
-```js
-<Button text>Text button</Button>
-```
-
-## Link tertiary 
-
-<div class="component-preview">
-
-    <Button tertiary>Tertiary</Button>
-    <Button tertiary medium>Tertiary</Button>
-    <Button tertiary small>Tertiary</Button>
-
-</div>
-
-```html
-    <Button tertiary>Tertiary</Button>
-    <Button tertiary medium>Tertiary</Button>
-    <Button tertiary small>Tertiary</Button>
-```
-
-## Tertiary with icon
-<div class="component-preview">
-    <Button tertiary href="#">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-
-    <Button tertiary href="#" medium>
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-
-    <Button tertiary href="#" small class="px-5">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-</div>
-
-```html
-    <Button tertiary href="#">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-
-    <Button tertiary href="#" medium>
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-
-    <Button tertiary href="#" small class="px-5">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-
-```
-
-## Rounded button
-
-Rounded edges
-
-<div class="component-preview flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary rounded>Primary</Button>
-        <Button secondary rounded>Secondary</Button>
-        <Button tertiary rounded>Tertiary</Button>
-        
-        <Button text rounded>Text</Button>
-        <Button tag rounded>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary medium rounded>Primary</Button>
-        <Button secondary medium rounded>Secondary</Button>
-        <Button tertiary medium rounded>Tertiary</Button>
-        
-        <Button text medium rounded>Text</Button>
-        <Button tag medium rounded>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary small rounded>Primary</Button>
-        <Button secondary small rounded>Secondary</Button>
-        <Button tertiary small rounded>Tertiary</Button>
-        
-        <Button text medium small rounded>Text</Button>
-        <Button tag small rounded>Tag Name</Button>
-    </div>
-</div>
-
-```js
-<Button primary rounded>Primary</Button>
-<Button secondary rounded>Secondary</Button>
-<Button tertiary rounded>Tertiary</Button>
-<Button text medium rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-
-<Button primary medium rounded>Primary</Button>
-<Button secondary medium rounded>Secondary</Button>
-<Button tertiary medium rounded>Tertiary</Button>
-<Button text medium medium rounded>Text</Button>
-<Button tag small medium rounded>Tag Name</Button>
-
-<Button primary small rounded>Primary</Button>
-<Button secondary small rounded>Secondary</Button>
-<Button tertiary small rounded>Tertiary</Button>
-<Button text medium small rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-```
-
-## Outline button
-
-Text buttons are used for actions that do not require a primary or secondary button.
-
-<div class="component-preview flex-wrap">
-    <Button primary-outline title="Title">Text button</Button>
-    <Button primary-outline rounded title="Title">Text button</Button>
-
-    <Button secondary-outline title="Title">Text button</Button>
-    <Button secondary-outline rounded title="Title">Text button</Button>
-
-    <Button tertiary-outline title="Title">Text button</Button>
-    <Button tertiary-outline rounded title="Title">Text button</Button>
-
-    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
-</div>
-
-```js
-    <Button primary-outline title="Title">Text button</Button>
-    <Button primary-outline rounded title="Title">Text button</Button>
-
-    <Button secondary-outline title="Title">Text button</Button>
-    <Button secondary-outline rounded title="Title">Text button</Button>
-
-    <Button tertiary-outline title="Title">Text button</Button>
-    <Button tertiary-outline rounded title="Title">Text button</Button>
-
-    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
-```
-
-### Outline button - custom hover
-
-<div class="component-preview">
-    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
-</div>
-
-```js
-    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
-    
-```
-
-
-## Link button `<a>`
-
-Text buttons are used for actions that do not require a primary or secondary button.
-
-<div class="component-preview">
-    <Button primary href="#" title="Title">Text button</Button>
-</div>
-
-```js
-<Button primary href="#" title="Title">Text button</Button>
-```
-
-## Circle button
-
-Circle buttons are perfect for icon-only actions, maintaining equal width and height.
-
-<div class="component-preview flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-        <Button secondary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-        <Button tertiary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-        <Button secondary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-        <Button tertiary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-        <Button secondary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-        <Button tertiary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-    </div>
-</div>
-
-```js
-<Button primary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-<Button secondary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-<Button tertiary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-
-<Button primary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-<Button secondary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-<Button tertiary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-
-
-
-<Button primary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-<Button secondary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-<Button tertiary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-```
-
-### Circle outline buttons
-
-Circle buttons are also available in outline variants.
-
-<div class="component-preview">
-    <Button primary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-
-    <Button secondary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-
-    <Button tertiary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-</div>
-
-```js
-    <Button primary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button secondary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button tertiary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
+---
+title: "Buttons"
+layout: "../../layouts/MainLayout.astro"
+---
+import Button from '../../components/Button.vue'
+import ButtonCopy from '../../components/ButtonCopy.astro'
+import { Icon } from 'astro-icon/components';
+
+# 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 flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary>Primary</Button>
+        <Button secondary>Secondary</Button>
+        <Button tertiary>Tertiary</Button>
+        
+        <Button text medium>Text</Button>
+        <Button tag small>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        
+        <Button text medium rounded>Text</Button>
+        <Button tag small rounded>Tag Name</Button>
+    </div>
+</div>
+
+```js
+<Button primary>Primary</Button>
+<Button secondary>Secondary</Button>
+<Button tertiary>Tertiary</Button>
+<Button text medium>Text</Button>
+<Button tag small>Tag Name</Button>
+
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+```
+
+## Primary button `<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 primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
+</div>
+
+```js
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</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 secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
+</div>
+
+```js
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</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>
+    <Button text>Text button</Button>
+    <Button text>Text button</Button>
+</div>
+
+```js
+<Button text>Text button</Button>
+```
+
+## Link tertiary 
+
+<div class="component-preview">
+
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+
+</div>
+
+```html
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+```
+
+## Tertiary with icon
+<div class="component-preview">
+    <Button tertiary href="#">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+</div>
+
+```html
+    <Button tertiary href="#">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+
+```
+
+## Rounded button
+
+Rounded edges
+
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        
+        <Button text rounded>Text</Button>
+        <Button tag rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium rounded>Primary</Button>
+        <Button secondary medium rounded>Secondary</Button>
+        <Button tertiary medium rounded>Tertiary</Button>
+        
+        <Button text medium rounded>Text</Button>
+        <Button tag medium rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small rounded>Primary</Button>
+        <Button secondary small rounded>Secondary</Button>
+        <Button tertiary small rounded>Tertiary</Button>
+        
+        <Button text medium small rounded>Text</Button>
+        <Button tag small rounded>Tag Name</Button>
+    </div>
+</div>
+
+```js
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+
+<Button primary medium rounded>Primary</Button>
+<Button secondary medium rounded>Secondary</Button>
+<Button tertiary medium rounded>Tertiary</Button>
+<Button text medium medium rounded>Text</Button>
+<Button tag small medium rounded>Tag Name</Button>
+
+<Button primary small rounded>Primary</Button>
+<Button secondary small rounded>Secondary</Button>
+<Button tertiary small rounded>Tertiary</Button>
+<Button text medium small rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+```
+
+## Outline button
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<div class="component-preview flex-wrap">
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
+</div>
+
+```js
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
+```
+
+### Outline button - custom hover
+
+<div class="component-preview">
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+</div>
+
+```js
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+    
+```
+
+
+## Link button `<a>`
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<div class="component-preview">
+    <Button primary href="#" title="Title">Text button</Button>
+</div>
+
+```js
+<Button primary href="#" title="Title">Text button</Button>
+```
+
+## Circle button
+
+Circle buttons are perfect for icon-only actions, maintaining equal width and height.
+
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button secondary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button tertiary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button secondary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button tertiary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button secondary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button tertiary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+    </div>
+</div>
+
+```js
+<Button primary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button secondary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button tertiary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+
+<Button primary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button secondary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button tertiary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+
+
+
+<Button primary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button secondary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button tertiary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+```
+
+### Circle outline buttons
+
+Circle buttons are also available in outline variants.
+
+<div class="component-preview">
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+</div>
+
+```js
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
 ```