spoko-design-system 1.3.7 → 1.4.1

package/src/components/SlimBanner.vue

@@ -1,73 +1,182 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const props = defineProps({
+  // Primary state (visible by default)
+  message: {
+    type: String,
+    default: 'We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit',
+  },
+  linkText: {
+    type: String,
+    default: 'this page',
+  },
+  linkUrl: {
+    type: String,
+    default: 'https://polo.blue/support-ukraine/',
+  },
+  linkTitle: {
+    type: String,
+    default: '',
+  },
+
+  // Toggle state (shows when close button is clicked)
+  toggleMessage: {
+    type: String,
+    default: '',
+  },
+  toggleBgClass: {
+    type: String,
+    default: 'bg-black',
+  },
+  toggleTextClass: {
+    type: String,
+    default: 'text-white',
+  },
+
+  // Close button
   showCloseButton: {
     type: Boolean,
     default: true,
-    required: false,
+  },
+  closeButtonAriaLabel: {
+    type: String,
+    default: 'Toggle',
+  },
+
+  // Show flag icon (Ukraine flag by default)
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+    default: 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]',
+  },
+
+  // LocalStorage persistence
+  persistClose: {
+    type: Boolean,
+    default: false,
+  },
+  storageKey: {
+    type: String,
+    default: 'slimbanner-closed',
+  },
+  // Expiration in days (0 = never expires)
+  expirationDays: {
+    type: Number,
+    default: 30,
   },
 });
+
 const isShow = ref(true);
+const isHidden = ref(false);
+
+// Check localStorage on mount
+onMounted(() => {
+  if (props.persistClose && typeof window !== 'undefined') {
+    const stored = localStorage.getItem(props.storageKey);
+    if (stored) {
+      try {
+        const data = JSON.parse(stored);
+        const now = new Date().getTime();
+
+        // Check if expired
+        if (props.expirationDays > 0 && data.expires && now > data.expires) {
+          // Expired, remove from storage
+          localStorage.removeItem(props.storageKey);
+        } else if (data.closed) {
+          // Still valid, keep hidden
+          isHidden.value = true;
+        }
+      } catch (e) {
+        // Invalid data, remove it
+        localStorage.removeItem(props.storageKey);
+      }
+    }
+  }
+});
+
 const toggleVisibility = () => {
   isShow.value = !isShow.value;
 };
+
+const closePermanently = () => {
+  isHidden.value = true;
+
+  if (props.persistClose && typeof window !== 'undefined') {
+    const data = {
+      closed: true,
+      timestamp: new Date().getTime(),
+      expires: props.expirationDays > 0
+        ? new Date().getTime() + (props.expirationDays * 24 * 60 * 60 * 1000)
+        : null,
+    };
+    localStorage.setItem(props.storageKey, JSON.stringify(data));
+  }
+};
 </script>
 
 <template>
-  <div
-    v-if="isShow"
-    data-pagefind-ignore
-    class="slimbanner"
-  >
-    <span
-      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]"
-    />
-    <span class="leading-none"
-      ><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
-      />
-      <a
-        href="https://polo.blue/support-ukraine/"
-        target="_blank"
-        rel="noopener"
-        title="Support Ukraine"
-        class="underline underline-offset-2 hover:text-blue-wrc"
-        >this page</a
-      >.
-    </span>
-
-    <button
-      v-if="props.showCloseButton"
-      class="btn-close text-white"
-      aria-label="Toggle"
-      @click="toggleVisibility()"
+  <template v-if="!isHidden">
+    <div
+      v-if="isShow"
+      data-pagefind-ignore
+      class="slimbanner"
     >
-      <span class="close close-dark" />
-    </button>
-  </div>
-  <div
-    v-else
-    data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2"
-  >
-    <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" />
-      <span
-        class="underline decoration-red-600 decoration-1 underline-offset-3"
-        data-text="TERRORIST"
-      />
-      <span data-text="STATE" />
+      <slot name="icon">
+        <span
+          v-if="props.showIcon"
+          :class="props.iconClass"
+        />
+      </slot>
+
+      <span class="leading-none inline-flex">
+        <slot>
+          <span :data-text="props.message"></span>
+          <a
+            v-if="props.linkUrl"
+            :href="props.linkUrl"
+            target="_blank"
+            rel="noopener"
+            :title="props.linkTitle || props.linkText"
+            class="underline underline-offset-2 hover:text-blue-wrc ml-1.5"
+            :data-text="props.linkText"
+          ></a>
+          <span v-if="props.linkUrl" data-text="."></span>
+        </slot>
+      </span>
+
+      <button
+        v-if="props.showCloseButton && (props.toggleMessage || props.persistClose)"
+        class="btn-close text-white"
+        :aria-label="props.closeButtonAriaLabel"
+        @click="props.persistClose ? closePermanently() : toggleVisibility()"
+      >
+        <span class="close close-dark" />
+      </button>
     </div>
-    <button
-      v-if="props.showCloseButton"
-      class="btn-close"
-      aria-label="Toggle"
-      @click="toggleVisibility()"
+    <div
+      v-else-if="props.toggleMessage"
+      data-pagefind-ignore
+      :class="`px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none relative drop-shadow-md z-2 ${props.toggleBgClass} ${props.toggleTextClass}`"
     >
-      <span class="close close-light" />
-    </button>
-  </div>
+      <div class="tracking-widest leading-none">
+        <slot name="toggle">
+          {{ props.toggleMessage }}
+        </slot>
+      </div>
+      <button
+        v-if="props.showCloseButton"
+        class="btn-close"
+        :aria-label="props.closeButtonAriaLabel"
+        @click="props.persistClose ? closePermanently() : toggleVisibility()"
+      >
+        <span :class="props.toggleTextClass === 'text-white' ? 'close close-light' : 'close close-dark'" />
+      </button>
+    </div>
+  </template>
 </template>
 
 <style>

package/src/pages/components/modal.mdx

@@ -9,56 +9,204 @@ import { Icon } from 'astro-icon/components';
 
 # Modal
 
-Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
-#
-**Documentation:**
+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
 
-## Modal window
+## 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="dialog" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-               <hr />
-          </main>
-          <Button primary slot="close" class="mt-4">Close</Button>
+     <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>
 
-```js
-<Modal id="dialog" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <hr />
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-    <Button primary slot="close" class="mt-4">Close</Button>
+```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 different close button
+## Modal with Custom Actions
 
 <div class="component-preview">
-     <Modal id="dialog2" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-          </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     <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>
 
-```js
-<Modal id="dialog2" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
+```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
+