spoko-design-system 1.18.1 → 1.20.0

package/src/pages/components/table.mdx

@@ -1,109 +1,109 @@
----
-title: "Table"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import Table from '../../components/Table.vue'
-export const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-export const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-# Table
-
-Simple table based on JSON data object.
-
-<div class="component-preview">
-    <Table data={tableData}></Table>
-</div>
-
-## Code
-
-```ts
-const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-```
-
-```html
-  <!-- Astro -->
-  <Table data={tableData} />
-
-  <!-- Vue -->
-  <Table :data="tableData" />
-```
-
-
-
-# Table
-
-<div class="component-preview">
-    <Table data={tableDataSecondary} />
-</div>
-
-## Code
-
-```ts
-const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-<Table data={tableDataSecondary} />
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Table from '../../components/Table.vue'
+export const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+export const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+# Table
+
+Simple table based on JSON data object.
+
+<div class="component-preview">
+    <Table data={tableData}></Table>
+</div>
+
+## Code
+
+```ts
+const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+```
+
+```html
+  <!-- Astro -->
+  <Table data={tableData} />
+
+  <!-- Vue -->
+  <Table :data="tableData" />
+```
+
+
+
+# Table
+
+<div class="component-preview">
+    <Table data={tableDataSecondary} />
+</div>
+
+## Code
+
+```ts
+const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+<Table data={tableDataSecondary} />
 ```

package/src/pages/core/colors.mdx

@@ -1,21 +1,21 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import MainColors from '../../components/MainColors.vue';
-
-<h1>Colors</h1>
-<p>Base colors for the design system.</p>
-
-## How to use
-
-Click on any element to copy values to your clipboard:
-
-- **Color swatch** - Click the large color box to copy the hex value
-- **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
-- **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
-- **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
-
-A green checkmark (✓) will appear when copied successfully.
-
-<MainColors class="mt-8" client:load />
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<p>Base colors for the design system.</p>
+
+## How to use
+
+Click on any element to copy values to your clipboard:
+
+- **Color swatch** - Click the large color box to copy the hex value
+- **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
+- **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
+- **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
+
+A green checkmark (✓) will appear when copied successfully.
+
+<MainColors class="mt-8" client:load />