srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/components/01.atoms/display-dialog/CONSUMER-STYLING.md

@@ -0,0 +1,163 @@
+# DisplayDialog — Consumer Styling Guide
+
+## Public token API
+
+All `--display-dialog-*` tokens are the stable override surface. Because dialogs are site-wide UI
+elements — not inline components — the recommended approach is to set tokens once in a **global CSS
+file** rather than per-instance via `styleClassPassthrough`.
+
+### Overlay
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-dialog-backdrop-blur` | `blur(0.5rem)` | CSS filter applied to content behind the overlay |
+| `--display-dialog-backdrop-background` | `rgba(0, 0, 0, 0.5)` | Overlay scrim colour |
+| `--display-dialog-z-index` | `999999` | Stacking order of the overlay |
+| `--display-dialog-transition-duration` | `200ms` | Open/close transition speed (opacity, display, close-button hover) |
+
+### Dialog panel
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-dialog-inner-border-radius` | `0.8rem` | Panel corner rounding |
+| `--display-dialog-inner-border` | `0.1rem solid light-dark(var(--slate-10), var(--slate-02))` | Panel border shorthand |
+| `--display-dialog-inner-outline` | `0.1rem solid light-dark(var(--slate-10), var(--slate-00))` | Panel outer outline (sits outside the border) |
+| `--display-dialog-inner-background` | `light-dark(var(--slate-00), var(--slate-10))` | Panel background colour |
+
+### Header
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-dialog-header-padding` | `1.2rem` | Header area padding |
+| `--display-dialog-header-button-margin` | `0` | Close button margin |
+| `--display-dialog-header-button-padding` | `0.4rem` | Close button padding |
+| `--display-dialog-header-button-border` | `0.1rem solid transparent` | Close button border (resting) |
+| `--display-dialog-header-button-border-radius` | `0.4rem` | Close button corner rounding |
+| `--display-dialog-header-button-outline` | `0.1rem solid transparent` | Close button outline (resting) |
+| `--display-dialog-header-button-border-hover` | `0.1rem solid light-dark(var(--slate-08), var(--slate-04))` | Close button border on hover/focus |
+| `--display-dialog-header-button-outline-hover` | `0.1rem solid light-dark(var(--slate-08), var(--slate-04))` | Close button outline on hover/focus |
+| `--display-dialog-header-button-icon-color` | `light-dark(var(--slate-09), var(--slate-02))` | Close button icon colour |
+| `--display-dialog-header-button-icon-size` | `2.4rem` | Close button icon size |
+
+### Content & footer
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-dialog-content-padding` | `1.2rem` | Content area padding |
+| `--display-dialog-footer-gap` | `1.2rem` | Gap between footer action buttons |
+| `--display-dialog-footer-padding` | `1.2rem` | Footer area padding |
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/display-dialog.css` in the consuming app and set tokens
+on `:root`. This applies to every `DisplayDialog` across the site.
+
+```css
+/* assets/styles/setup/07.components/display-dialog.css */
+:root {
+  --display-dialog-backdrop-background: rgba(0, 0, 0, 0.6);
+  --display-dialog-inner-border-radius: 1.2rem;
+  --display-dialog-inner-background: var(--brand-surface);
+  --display-dialog-inner-border: 0.1rem solid var(--brand-border);
+  --display-dialog-inner-outline: none;
+  --display-dialog-transition-duration: 250ms;
+
+  --display-dialog-header-button-icon-color: var(--brand-text-muted);
+  --display-dialog-footer-gap: 0.8rem;
+}
+```
+
+---
+
+## Per-variant overrides
+
+The `fullscreen` variant bypasses `--_inner-border-radius`, `--_inner-border`, and
+`--_inner-outline` directly (setting them to `0`/`none`). To restyle the fullscreen panel,
+target the private tokens on `.inner.fullscreen`:
+
+```css
+.display-dialog {
+  .inner {
+    &.confirm {
+      /* e.g. constrain confirm panel width further */
+      max-width: 40rem;
+    }
+
+    &.alert {
+      --display-dialog-inner-border: 0.2rem solid var(--color-danger);
+    }
+
+    &.fullscreen {
+      /* private tokens are the only lever here */
+      --_inner-background: var(--brand-surface-alt);
+    }
+  }
+}
+```
+
+---
+
+## Section targeting
+
+Target `.header`, `.dialog-content`, and `.footer` directly to adjust layout within the panel:
+
+```css
+.display-dialog {
+  .header {
+    border-bottom: 0.1rem solid var(--brand-border);
+  }
+
+  .dialog-content {
+    /* content area uses --display-dialog-content-padding */
+  }
+
+  .footer {
+    border-top: 0.1rem solid var(--brand-border);
+    justify-content: space-between; /* override default flex-end */
+  }
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Because `<DisplayDialog>` renders inside the page's DOM tree (even though it is `position: fixed`),
+you can scope overrides to a specific page without affecting the rest of the site:
+
+```css
+/* In the consuming page's unscoped <style> block */
+.checkout-page {
+  .display-dialog {
+    --display-dialog-inner-border-radius: 0;
+    --display-dialog-backdrop-background: rgba(0, 0, 0, 0.8);
+
+    .footer {
+      justify-content: stretch;
+    }
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS for dialogs. When a single instance genuinely
+needs a different look, pass a modifier class and target it alongside `.display-dialog`:
+
+```vue
+<DisplayDialog :style-class-passthrough="['danger-dialog']" ...>
+```
+
+```css
+.display-dialog.danger-dialog {
+  --display-dialog-backdrop-background: rgba(180, 0, 0, 0.4);
+
+  .inner {
+    --display-dialog-inner-border: 0.2rem solid var(--color-danger);
+  }
+}
+```

package/app/components/01.atoms/display-dialog/DisplayDialog.vue

@@ -0,0 +1,277 @@
+<template>
+  <dialog
+    class="display-dialog"
+    :class="[elementClasses]"
+    :role="isAlert ? 'alertdialog' : 'dialog'"
+    :align-dialog
+    :justify-dialog
+    :open
+    :data-dialog-id="dataDialogId"
+  >
+    <focus-trap
+      v-model:active="open"
+      :escape-deactivates="!isAlert"
+      :click-outside-deactivates="!isAlert"
+      @deactivate="closeDialog()"
+    >
+      <div class="inner" :class="[variant]">
+        <div class="header">
+          <div v-if="hasTitle" class="col-left">
+            <slot name="dialogTitle"></slot>
+          </div>
+
+          <div class="col-right">
+            <button
+              data-test-id="display-dialog-header-close"
+              class="display-prompt-action"
+              @click.prevent="closeDialog()"
+            >
+              <Icon name="bitcoin-icons:cross-filled" class="icon" />
+              <span class="sr-only">Close</span>
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="hasContent"
+          class="dialog-content"
+          :class="[{ 'allow-content-scroll': allowContentScroll }]"
+        >
+          <slot name="dialogContent"></slot>
+        </div>
+        <div v-if="hasFooter" class="footer">
+          <slot name="actionButtonLeft"></slot>
+          <slot name="actionButtonRight"></slot>
+        </div>
+      </div>
+    </focus-trap>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { FocusTrap } from "focus-trap-vue";
+interface Props {
+  styleClassPassthrough?: string | string[];
+  variant?: "dialog" | "modal" | "confirm" | "alert" | "fullscreen";
+  justifyDialog?: "start" | "center" | "end";
+  alignDialog?: "start" | "center" | "end";
+  lockViewport?: boolean;
+  allowContentScroll?: boolean;
+  dataDialogId: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+  variant: "dialog",
+  justifyDialog: "center",
+  alignDialog: "center",
+  lockViewport: true,
+  allowContentScroll: false,
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const isAlert = computed(() => props.variant === "alert");
+
+const open = defineModel<boolean>();
+
+const closeDialog = () => {
+  open.value = false;
+  if (props.lockViewport) {
+    document.body.classList.remove("lock");
+  }
+};
+
+const slots = useSlots();
+const hasTitle = computed(() => !!slots.dialogTitle);
+const hasContent = computed(() => !!slots.dialogContent);
+const hasFooter = computed(() => !!(slots.actionButtonLeft || slots.actionButtonRight));
+
+onMounted(() => {
+  if (props.lockViewport) {
+    document.body.classList.add("lock");
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .display-dialog {
+    --_backdrop-blur: var(--display-dialog-backdrop-blur, blur(0.5rem));
+    --_backdrop-background: var(--display-dialog-backdrop-background, rgba(0, 0, 0, 0.5));
+    --_z-index: var(--display-dialog-z-index, 999999);
+    --_transition-duration: var(--display-dialog-transition-duration, 200ms);
+
+    --_inner-border-radius: var(--display-dialog-inner-border-radius, 0.8rem);
+    --_inner-border: var(--display-dialog-inner-border, 0.1rem solid light-dark(var(--slate-10), var(--slate-02)));
+    --_inner-outline: var(--display-dialog-inner-outline, 0.1rem solid light-dark(var(--slate-10), var(--slate-00)));
+    --_inner-background: var(--display-dialog-inner-background, light-dark(var(--slate-00), var(--slate-10)));
+
+    --_header-padding: var(--display-dialog-header-padding, 1.2rem);
+    --_header-button-margin: var(--display-dialog-header-button-margin, 0);
+    --_header-button-padding: var(--display-dialog-header-button-padding, 0.4rem);
+    --_header-button-border: var(--display-dialog-header-button-border, 0.1rem solid transparent);
+    --_header-button-border-radius: var(--display-dialog-header-button-border-radius, 0.4rem);
+    --_header-button-outline: var(--display-dialog-header-button-outline, 0.1rem solid transparent);
+    --_header-button-border-hover: var(--display-dialog-header-button-border-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
+    --_header-button-outline-hover: var(--display-dialog-header-button-outline-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
+    --_header-button-icon-color: var(--display-dialog-header-button-icon-color, light-dark(var(--slate-09), var(--slate-02)));
+    --_header-button-icon-size: var(--display-dialog-header-button-icon-size, 2.4rem);
+
+    --_content-padding: var(--display-dialog-content-padding, 1.2rem);
+    --_footer-gap: var(--display-dialog-footer-gap, 1.2rem);
+    --_footer-padding: var(--display-dialog-footer-padding, 1.2rem);
+
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: var(--_backdrop-blur);
+    background-color: var(--_backdrop-background);
+    z-index: var(--_z-index);
+    opacity: 0;
+    border: none;
+    padding: 0;
+
+    display: none;
+    transition:
+      opacity var(--_transition-duration),
+      display var(--_transition-duration),
+      overlay var(--_transition-duration);
+    transition-behavior: allow-discrete;
+
+    &[open] {
+      display: flex;
+      opacity: 1;
+
+      @starting-style {
+        display: flex;
+        opacity: 0;
+      }
+    }
+
+    &[justify-dialog="start"] {
+      justify-content: flex-start;
+    }
+
+    &[justify-dialog="center"] {
+      justify-content: center;
+    }
+
+    &[justify-dialog="end"] {
+      justify-content: flex-end;
+    }
+
+    &[align-dialog="start"] {
+      align-items: flex-start;
+    }
+
+    &[align-dialog="center"] {
+      align-items: center;
+    }
+
+    &[align-dialog="end"] {
+      align-items: flex-end;
+    }
+
+    .inner {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      border-radius: var(--_inner-border-radius);
+      border: var(--_inner-border);
+      outline: var(--_inner-outline);
+      background-color: var(--_inner-background);
+      height: initial;
+      width: 100vw;
+      overflow: hidden;
+
+      &.alert {
+        width: min(90%, 48rem);
+      }
+
+      &.confirm {
+        width: initial;
+      }
+
+      &.dialog {
+        height: 70dvh;
+        width: min(75%, 72rem);
+      }
+
+      &.fullscreen {
+        --_inner-border-radius: 0;
+        --_inner-border: none;
+        --_inner-outline: none;
+        width: 100%;
+        height: 100%;
+      }
+
+      &.modal {
+        width: initial;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        padding: var(--_header-padding);
+
+        .col-left {
+          flex: 1;
+        }
+
+        .col-right {
+          margin-inline-start: auto;
+
+          .display-prompt-action {
+            background-color: transparent;
+            display: block flex;
+            align-items: center;
+            justify-content: center;
+            margin: var(--_header-button-margin);
+            padding: var(--_header-button-padding);
+            border: var(--_header-button-border);
+            border-radius: var(--_header-button-border-radius);
+            outline: var(--_header-button-outline);
+
+            transition:
+              border-color var(--_transition-duration),
+              outline-color var(--_transition-duration);
+
+            &:hover,
+            &:focus-visible {
+              cursor: pointer;
+              border: var(--_header-button-border-hover);
+              outline: var(--_header-button-outline-hover);
+            }
+
+            .icon {
+              color: var(--_header-button-icon-color);
+              display: block;
+              font-size: var(--_header-button-icon-size);
+            }
+          }
+        }
+      }
+
+      .dialog-content {
+        overflow: hidden;
+        padding: var(--_content-padding);
+
+        &.allow-content-scroll {
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        }
+      }
+
+      .footer {
+        display: flex;
+        gap: var(--_footer-gap);
+        justify-content: flex-end;
+        padding: var(--_footer-padding);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/display-dialog/stories/DisplayDialog.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../DisplayDialog.vue";
+
+type StoryArgs = {
+  variant: "dialog" | "modal" | "confirm" | "alert" | "fullscreen";
+  allowContentScroll: boolean;
+  justifyDialog: "start" | "center" | "end";
+  alignDialog: "start" | "center" | "end";
+};
+
+export default {
+  title: "Atoms/DisplayDialog",
+  component: StorybookComponent,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["dialog", "modal", "confirm", "alert", "fullscreen"],
+      description: "Controls sizing, shape, and ARIA role of the dialog panel",
+      table: { category: "Appearance" },
+    },
+    allowContentScroll: {
+      control: { type: "boolean" },
+      description: "Allow the content area to scroll independently",
+      table: { category: "Behaviour" },
+    },
+    justifyDialog: {
+      control: { type: "inline-radio" },
+      options: ["start", "center", "end"],
+      description: "Horizontal position of the dialog panel within the overlay",
+      table: { category: "Layout" },
+    },
+    alignDialog: {
+      control: { type: "inline-radio" },
+      options: ["start", "center", "end"],
+      description: "Vertical position of the dialog panel within the overlay",
+      table: { category: "Layout" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+    lockViewport: { table: { disable: true } },
+    dataDialogId: { table: { disable: true } },
+  },
+  args: {
+    variant: "dialog",
+    allowContentScroll: false,
+    justifyDialog: "center",
+    alignDialog: "center",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A dialog overlay with header, scrollable content, and footer action slots. Supports `dialog`, `confirm`, `alert`, `modal`, and `fullscreen` variants. The `alert` variant sets `role=alertdialog` and disables dismiss-on-outside-click and Escape.",
+      },
+    },
+  },
+} as Meta<StoryArgs>;
+
+const triggerButtonStyles =
+  "padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: 0.1rem solid currentColor; background: transparent; cursor: pointer; font-size: 1.4rem;";
+
+const actionButtonStyles =
+  "padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: 0.1rem solid currentColor; background: transparent; cursor: pointer; font-size: 1.4rem;";
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const open = ref(false);
+    return { args, open };
+  },
+  template: `
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <button :style="'${triggerButtonStyles}'" @click="open = true">Open dialog</button>
+      <StorybookComponent
+        v-model="open"
+        :variant="args.variant"
+        :allow-content-scroll="args.allowContentScroll"
+        :justify-dialog="args.justifyDialog"
+        :align-dialog="args.alignDialog"
+        :lock-viewport="false"
+        data-dialog-id="storybook-dialog"
+      >
+        <template #dialogTitle>
+          <p style="margin: 0; font-weight: 700; font-size: 1.6rem;">Dialog title</p>
+        </template>
+        <template #dialogContent>
+          <p style="margin: 0; line-height: 1.6;">
+            This is the dialog content area. It accepts any markup via the
+            <code>#dialogContent</code> slot.
+          </p>
+        </template>
+        <template #actionButtonLeft>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Cancel</button>
+        </template>
+        <template #actionButtonRight>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Confirm</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+const ScrollableTemplate: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const open = ref(false);
+    return { args, open };
+  },
+  template: `
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <button :style="'${triggerButtonStyles}'" @click="open = true">Open dialog</button>
+      <StorybookComponent
+        v-model="open"
+        variant="dialog"
+        :allow-content-scroll="true"
+        :lock-viewport="false"
+        data-dialog-id="storybook-scrollable"
+      >
+        <template #dialogTitle>
+          <p style="margin: 0; font-weight: 700; font-size: 1.6rem;">Scrollable content</p>
+        </template>
+        <template #dialogContent>
+          <div style="padding: 1.2rem 0;">
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Lorem ipsum odor amet, consectetuer adipiscing elit. Scelerisque tincidunt vestibulum litora torquent aliquam a. Sem litora tellus mattis nisi vehicula sodales arcu egestas.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Justo molestie felis tellus tellus taciti? Ullamcorper viverra quis felis donec aliquam torquent imperdiet. Curabitur vitae quis malesuada imperdiet hendrerit felis quam dictum.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Lobortis efficitur enim litora dictum montes. Sagittis eget etiam curae suspendisse cubilia. Ante aliquam orci mus ultricies nostra.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Venenatis adipiscing integer eget donec ridiculus risus. Nulla quis sollicitudin sem nam bibendum ligula. Curabitur malesuada platea egestas venenatis in torquent.</p>
+            <p style="margin: 0; line-height: 1.6;">Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque neque varius nostra.</p>
+          </div>
+        </template>
+        <template #actionButtonLeft>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Cancel</button>
+        </template>
+        <template #actionButtonRight>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Confirm</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = { variant: "dialog" };
+
+export const Confirm = Template.bind({});
+Confirm.args = { variant: "confirm" };
+Confirm.parameters = {
+  docs: {
+    description: { story: "Compact dialog sized to its content. Use for simple yes/no confirmations." },
+  },
+};
+
+export const Alert = Template.bind({});
+Alert.args = { variant: "alert" };
+Alert.parameters = {
+  docs: {
+    description: {
+      story:
+        "Sets `role=alertdialog`. Escape and outside-click are both disabled — the user must take explicit action via the footer buttons.",
+    },
+  },
+};
+
+export const Fullscreen = Template.bind({});
+Fullscreen.args = { variant: "fullscreen" };
+Fullscreen.parameters = {
+  docs: {
+    description: { story: "Fills the entire viewport. No border or border-radius. Useful for immersive multi-step flows." },
+  },
+};
+
+export const ScrollableContent = ScrollableTemplate.bind({});
+ScrollableContent.parameters = {
+  docs: {
+    description: { story: "Content area scrolls independently when it overflows the fixed-height dialog panel." },
+  },
+};