spoko-design-system 1.19.0 → 1.20.0

package/src/pages/components/modal.mdx

@@ -1,212 +1,212 @@
----
-title: "Modal"
-layout: "../../layouts/MainLayout.astro"
----
-import Modal from '../../components/Modal.astro'
-import Button from '../../components/Button.vue'
-import { Icon } from 'astro-icon/components';
-
-
-# Modal
-
-Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element. Features built-in X close button, action buttons, and flexible configuration.
-
-**Documentation:**
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
-
-## Basic Modal with Title and X Button
-
-<div class="component-preview">
-     <Modal id="dialog1" open="Open modal" title="Modal Title">
-          <p>This modal has a title and built-in X close button in the top-right corner.</p>
-          <p>You can also close by clicking the backdrop or pressing Escape.</p>
-     </Modal>
-</div>
-
-```astro
-<Modal id="dialog1" open="Open modal" title="Modal Title">
-    <p>This modal has a title and built-in X close button in the top-right corner.</p>
-    <p>You can also close by clicking the backdrop or pressing Escape.</p>
-</Modal>
-```
-
-## Modal with Action Buttons
-
-<div class="component-preview">
-     <Modal
-          id="dialog2"
-          open="Delete Item"
-          title="Confirm Delete"
-          showActions
-          cancelText="Cancel"
-          confirmText="Delete"
-     >
-          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
-     </Modal>
-</div>
-
-```astro
-<Modal
-     id="dialog2"
-     open="Delete Item"
-     title="Confirm Delete"
-     showActions
-     cancelText="Cancel"
-     confirmText="Delete"
->
-     <p>Are you sure you want to delete this item? This action cannot be undone.</p>
-</Modal>
-```
-
-## Modal with Custom Actions
-
-<div class="component-preview">
-     <Modal
-          id="dialog3"
-          open="Save Changes"
-          title="Save Document"
-          showActions
-     >
-          <p>Would you like to save your changes before closing?</p>
-
-          <div slot="actions" class="flex gap-3 justify-end">
-               <form method="dialog" class="contents">
-                    <Button>Don't Save</Button>
-               </form>
-               <form method="dialog" class="contents">
-                    <Button primary>Save</Button>
-               </form>
-          </div>
-     </Modal>
-</div>
-
-```astro
-<Modal
-     id="dialog3"
-     open="Save Changes"
-     title="Save Document"
-     showActions
->
-     <p>Would you like to save your changes before closing?</p>
-
-     <div slot="actions" class="flex gap-3 justify-end">
-          <form method="dialog" class="contents">
-               <Button>Don't Save</Button>
-          </form>
-          <form method="dialog" class="contents">
-               <Button primary>Save</Button>
-          </form>
-     </div>
-</Modal>
-```
-
-## Modal with Custom Width
-
-<div class="component-preview">
-     <Modal
-          id="dialog4"
-          open="Wide Modal"
-          title="Large Content"
-          maxWidth="900px"
-     >
-          <p>This modal is wider than the default. Useful for forms or detailed content.</p>
-          <div class="grid grid-cols-2 gap-4 mt-4">
-               <div class="p-4 bg-gray-100 rounded">Column 1</div>
-               <div class="p-4 bg-gray-100 rounded">Column 2</div>
-          </div>
-     </Modal>
-</div>
-
-```astro
-<Modal
-     id="dialog4"
-     open="Wide Modal"
-     title="Large Content"
-     maxWidth="900px"
->
-     <p>This modal is wider than the default. Useful for forms or detailed content.</p>
-</Modal>
-```
-
-## Modal without X Button (Legacy Style)
-
-<div class="component-preview">
-     <Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
-          <p>This modal doesn't have the X button.</p>
-          <p>You need to provide your own close button.</p>
-          <Button primary slot="close" class="mt-4">Close Modal</Button>
-     </Modal>
-</div>
-
-```astro
-<Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
-     <p>This modal doesn't have the X button.</p>
-     <Button primary slot="close" class="mt-4">Close Modal</Button>
-</Modal>
-```
-
-## Modal with Custom Close Button (Icon)
-
-<div class="component-preview">
-     <Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
-          <p>Some extra content you would like here</p>
-          <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-     </Modal>
-</div>
-
-```astro
-<Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
-     <p>Some extra content you would like here</p>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
-</Modal>
-```
-
-## Handling Confirm Events
-
-You can listen for the `confirm` event when using action buttons:
-
-```javascript
-document.getElementById('dialog2').addEventListener('confirm', (e) => {
-     console.log('Confirmed!', e.detail);
-     // Perform your action here
-     document.getElementById('dialog2').close();
-});
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | string | required | Unique identifier for the modal |
-| `open` | string | `'Open modal'` | Text for the trigger button |
-| `title` | string | `undefined` | Modal title (shown in header) |
-| `maxWidth` | string | `'600px'` | Maximum width of the modal |
-| `showXButton` | boolean | `true` | Show X close button in top-right |
-| `showTrigger` | boolean | `true` | Show the trigger button |
-| `showActions` | boolean | `false` | Show action buttons footer |
-| `cancelText` | string | `'Cancel'` | Text for cancel button |
-| `confirmText` | string | `'Confirm'` | Text for confirm button |
-| `confirmPrimary` | boolean | `true` | Make confirm button primary style |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Main modal content (alias for `main` slot) |
-| `main` | Main modal content |
-| `header` | Custom header content (replaces title) |
-| `actions` | Custom action buttons (when `showActions` is true) |
-| `close` | Custom close button (when `showActions` is false) |
-
-## Features
-
-- ✅ Built-in X close button in top-right corner
-- ✅ Click backdrop to close
-- ✅ Press Escape to close
-- ✅ Built-in action buttons (Cancel/Confirm)
-- ✅ Customizable width
-- ✅ TypeScript support
-- ✅ Fully accessible with ARIA labels
-
-
+---
+title: "Modal"
+layout: "../../layouts/MainLayout.astro"
+---
+import Modal from '../../components/Modal.astro'
+import Button from '../../components/Button.vue'
+import { Icon } from 'astro-icon/components';
+
+
+# Modal
+
+Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element. Features built-in X close button, action buttons, and flexible configuration.
+
+**Documentation:**
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
+
+## Basic Modal with Title and X Button
+
+<div class="component-preview">
+     <Modal id="dialog1" open="Open modal" title="Modal Title">
+          <p>This modal has a title and built-in X close button in the top-right corner.</p>
+          <p>You can also close by clicking the backdrop or pressing Escape.</p>
+     </Modal>
+</div>
+
+```astro
+<Modal id="dialog1" open="Open modal" title="Modal Title">
+    <p>This modal has a title and built-in X close button in the top-right corner.</p>
+    <p>You can also close by clicking the backdrop or pressing Escape.</p>
+</Modal>
+```
+
+## Modal with Action Buttons
+
+<div class="component-preview">
+     <Modal
+          id="dialog2"
+          open="Delete Item"
+          title="Confirm Delete"
+          showActions
+          cancelText="Cancel"
+          confirmText="Delete"
+     >
+          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+     </Modal>
+</div>
+
+```astro
+<Modal
+     id="dialog2"
+     open="Delete Item"
+     title="Confirm Delete"
+     showActions
+     cancelText="Cancel"
+     confirmText="Delete"
+>
+     <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+</Modal>
+```
+
+## Modal with Custom Actions
+
+<div class="component-preview">
+     <Modal
+          id="dialog3"
+          open="Save Changes"
+          title="Save Document"
+          showActions
+     >
+          <p>Would you like to save your changes before closing?</p>
+
+          <div slot="actions" class="flex gap-3 justify-end">
+               <form method="dialog" class="contents">
+                    <Button>Don't Save</Button>
+               </form>
+               <form method="dialog" class="contents">
+                    <Button primary>Save</Button>
+               </form>
+          </div>
+     </Modal>
+</div>
+
+```astro
+<Modal
+     id="dialog3"
+     open="Save Changes"
+     title="Save Document"
+     showActions
+>
+     <p>Would you like to save your changes before closing?</p>
+
+     <div slot="actions" class="flex gap-3 justify-end">
+          <form method="dialog" class="contents">
+               <Button>Don't Save</Button>
+          </form>
+          <form method="dialog" class="contents">
+               <Button primary>Save</Button>
+          </form>
+     </div>
+</Modal>
+```
+
+## Modal with Custom Width
+
+<div class="component-preview">
+     <Modal
+          id="dialog4"
+          open="Wide Modal"
+          title="Large Content"
+          maxWidth="900px"
+     >
+          <p>This modal is wider than the default. Useful for forms or detailed content.</p>
+          <div class="grid grid-cols-2 gap-4 mt-4">
+               <div class="p-4 bg-gray-100 rounded">Column 1</div>
+               <div class="p-4 bg-gray-100 rounded">Column 2</div>
+          </div>
+     </Modal>
+</div>
+
+```astro
+<Modal
+     id="dialog4"
+     open="Wide Modal"
+     title="Large Content"
+     maxWidth="900px"
+>
+     <p>This modal is wider than the default. Useful for forms or detailed content.</p>
+</Modal>
+```
+
+## Modal without X Button (Legacy Style)
+
+<div class="component-preview">
+     <Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
+          <p>This modal doesn't have the X button.</p>
+          <p>You need to provide your own close button.</p>
+          <Button primary slot="close" class="mt-4">Close Modal</Button>
+     </Modal>
+</div>
+
+```astro
+<Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
+     <p>This modal doesn't have the X button.</p>
+     <Button primary slot="close" class="mt-4">Close Modal</Button>
+</Modal>
+```
+
+## Modal with Custom Close Button (Icon)
+
+<div class="component-preview">
+     <Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
+          <p>Some extra content you would like here</p>
+          <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```astro
+<Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
+     <p>Some extra content you would like here</p>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+</Modal>
+```
+
+## Handling Confirm Events
+
+You can listen for the `confirm` event when using action buttons:
+
+```javascript
+document.getElementById('dialog2').addEventListener('confirm', (e) => {
+     console.log('Confirmed!', e.detail);
+     // Perform your action here
+     document.getElementById('dialog2').close();
+});
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | string | required | Unique identifier for the modal |
+| `open` | string | `'Open modal'` | Text for the trigger button |
+| `title` | string | `undefined` | Modal title (shown in header) |
+| `maxWidth` | string | `'600px'` | Maximum width of the modal |
+| `showXButton` | boolean | `true` | Show X close button in top-right |
+| `showTrigger` | boolean | `true` | Show the trigger button |
+| `showActions` | boolean | `false` | Show action buttons footer |
+| `cancelText` | string | `'Cancel'` | Text for cancel button |
+| `confirmText` | string | `'Confirm'` | Text for confirm button |
+| `confirmPrimary` | boolean | `true` | Make confirm button primary style |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Main modal content (alias for `main` slot) |
+| `main` | Main modal content |
+| `header` | Custom header content (replaces title) |
+| `actions` | Custom action buttons (when `showActions` is true) |
+| `close` | Custom close button (when `showActions` is false) |
+
+## Features
+
+- ✅ Built-in X close button in top-right corner
+- ✅ Click backdrop to close
+- ✅ Press Escape to close
+- ✅ Built-in action buttons (Cancel/Confirm)
+- ✅ Customizable width
+- ✅ TypeScript support
+- ✅ Fully accessible with ARIA labels
+
+

package/src/pages/components/post-header.mdx

@@ -1,64 +1,64 @@
----
-title: "PostHeader"
-layout: "../../layouts/MainLayout.astro"
----
-import PostHeader from '../../components/PostHeader.astro'
-export const author = { firstName: 'Szymon', name: 'CNK' } 
-export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
-export const date = "2023-07-13T01:35:03"
-
-# PostHeader
-
-WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
-
-
-## PostHeader with some content for WordPress single page template
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      author={author}
-      lang="en"
-      categories={categories}
-      title="Lorem Ipsum"
-      date={date}
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      author={ { firstName: 'Szymon', name: 'CNK' }  }
-      lang="en"
-      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
-            title="Lorem Ipsum"
-      date="2023-07-13T01:35:03"
-      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
-    />
-  </div>
-```
-
-
-## PostHeader - only title
-
-<div class="component-preview">
-  <div class="relative w-full">
-    <PostHeader
-      title="Lorem Ipsum"
-      lang="en"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-</div>
-
-```js
-  <div class="relative">
-    <PostHeader
-      title="Lorem Ipsum"
-      lang="en"
-      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
-    />
-  </div>
-```
+---
+title: "PostHeader"
+layout: "../../layouts/MainLayout.astro"
+---
+import PostHeader from '../../components/PostHeader.astro'
+export const author = { firstName: 'Szymon', name: 'CNK' } 
+export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
+export const date = "2023-07-13T01:35:03"
+
+# PostHeader
+
+WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
+
+
+## PostHeader with some content for WordPress single page template
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      author={author}
+      lang="en"
+      categories={categories}
+      title="Lorem Ipsum"
+      date={date}
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      author={ { firstName: 'Szymon', name: 'CNK' }  }
+      lang="en"
+      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
+            title="Lorem Ipsum"
+      date="2023-07-13T01:35:03"
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+```
+
+
+## PostHeader - only title
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      title="Lorem Ipsum"
+      lang="en"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      title="Lorem Ipsum"
+      lang="en"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+```