@nuvia-ui/components 4.0.1

package/src/ds-dialog/ds-dialog.stories.js

@@ -0,0 +1,274 @@
+import { html } from 'lit';
+import { useArgs } from '@storybook/preview-api';
+import './ds-dialog.js';
+import '../ds-action-bar/ds-action-bar.js';
+import '../ds-header/ds-header.js';
+import '../ds-nav-vertical/ds-nav-vertical.js';
+import '../ds-nav-item/ds-nav-item.js';
+import '../ds-input/ds-input.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-button/ds-button.js';
+import '../ds-button-group/ds-button-group.js';
+
+export default {
+    title: 'Components/Dialog',
+    component: 'ds-dialog',
+    argTypes: {
+        open: { control: 'boolean' },
+        heading: { control: 'text' },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg', 'fullscreen']
+        },
+        preventClose: { control: 'boolean' },
+        modal: { control: 'boolean', description: 'If true, shows as modal with backdrop.' },
+        position: {
+            control: { type: 'select' },
+            options: ['center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+            description: 'Where to display the dialog (Non-modal only)'
+        }
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => html`<div style="min-height: 100vh; padding: 24px; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center;">${Story()}</div>`
+    ]
+};
+
+const Template = (args) => {
+    const [{ open }, updateArgs] = useArgs();
+
+    const handleClose = () => {
+        updateArgs({ open: false });
+    };
+
+    const handleOpen = () => {
+        updateArgs({ open: true });
+    };
+
+    return html`
+      <ds-button @click=${handleOpen}>Open Dialog</ds-button>
+      
+      <ds-dialog 
+        ?open=${open} 
+        heading=${args.heading} 
+        size=${args.size}
+        ?prevent-close=${args.preventClose}
+        ?modal=${args.modal}
+        @ds-close=${handleClose}
+      >
+        <div>
+           <p>This is the default content passed to the body slot.</p>
+           <p>It has the default typography and padding defined by the requirements.</p>
+           ${!args.modal ? html`<p><strong>Non-Modal Mode:</strong> Try clicking the "Open Dialog" button behind me. You should be able to interact with the page.</p>` : ''}
+        </div>
+        
+        <ds-action-bar slot="footer" variant="pattern" divider>
+            <ds-button-group align="end">
+                <ds-button variant="primary" @click=${handleClose}>Confirm</ds-button>
+                <ds-button variant="secondary" @click=${handleClose}>Cancel</ds-button>
+            </ds-button-group>
+        </ds-action-bar>
+      </ds-dialog>
+    `;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    open: false,
+    heading: 'Dialog Title',
+    size: 'md',
+    preventClose: false,
+    modal: true // Explicitly set to true for default story
+};
+
+// Dedicated visual test for Non-Modal behavior
+export const NonModal = (args) => {
+    const [{ open }, updateArgs] = useArgs();
+
+    // Auto-open for better DX on first view
+    const handleClose = () => updateArgs({ open: false });
+    const handleOpen = () => updateArgs({ open: true });
+
+    return html`
+        <div style="height: 100vh; display: flex; flex-direction: column; background: var(--ds-color-bg-surface-secondary, #f4f4f4);">
+            <!-- DS Header -->
+            <ds-header>
+                <div slot="logo" style="display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--ds-color-bg-brand, #0052cc); color: white; border-radius: 4px;">DS</div>
+                <span slot="app-name">App Dashboard</span>
+                
+                <div slot="actions">
+                     <!-- Trigger inside standard location -->
+                    <ds-button variant="primary" size="small" @click=${handleOpen}>Open Utility Window</ds-button>
+                </div>
+            </ds-header>
+
+            <div style="flex: 1; display: flex; overflow: hidden;">
+                <!-- DS Sidebar -->
+                <aside style="width: 250px; border-right: 1px solid var(--ds-color-border-subtle, #e0e0e0); background: white;">
+                    <ds-nav-vertical value="dashboard">
+                        <ds-nav-item label="Dashboard" icon="dashboard" value="dashboard" selected></ds-nav-item>
+                        <ds-nav-item label="Projects" icon="folder" value="projects"></ds-nav-item>
+                        <ds-nav-item label="Settings" icon="settings" value="settings"></ds-nav-item>
+                    </ds-nav-vertical>
+                </aside>
+
+                <!-- Main Content Area -->
+                <main style="flex: 1; padding: 32px; overflow-y: auto; position: relative;">
+                    <div style="max-width: 800px; margin: 0 auto;">
+                        <h1 style="font: var(--ds-typo-heading-xl, bold 32px sans-serif); margin-bottom: 16px;">
+                            Interactive Workflow
+                        </h1>
+                        <p style="font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-secondary); margin-bottom: 32px;">
+                            This layout demonstrates how a <strong>Non-Modal Dialog</strong> co-exists with the main application flow.
+                            You can interact with the sidebar or the form below without closing the dialog.
+                        </p>
+                        
+                        <!-- Interactive Form using DS Components -->
+                        <div style="background: white; padding: 24px; border-radius: 8px; border: 1px solid var(--ds-color-border-subtle, #e0e0e0); display: flex; flex-direction: column; gap: 24px;">
+                            <h3 style="font: var(--ds-typo-heading-sm); margin: 0;">User Profile</h3>
+                            
+                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
+                                <ds-input label="First Name" placeholder="e.g. Miguel" value="Miguel"></ds-input>
+                                <ds-input label="Last Name" placeholder="e.g. Silva"></ds-input>
+                            </div>
+                            
+                            <ds-input label="Email Address" type="email" placeholder="name@company.com" info="We will never share your email."></ds-input>
+                            
+                            <div style="display: flex; justify-content: flex-end; gap: 16px;">
+                                <ds-button variant="secondary">Cancel</ds-button>
+                                <ds-button variant="primary">Save Changes</ds-button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- The Non-Modal Dialog -->
+                    <!-- Positioned relative to viewport or simply centered but non-blocking -->
+                    <ds-dialog 
+                        ?open=${open} 
+                        heading=${args.heading} 
+                        size=${args.size}
+                        ?prevent-close=${args.preventClose}
+                        ?modal=${args.modal}
+                        position=${args.position}
+                        @ds-close=${handleClose}
+                    >
+                        <div style="padding-bottom: 16px;">
+                            <p style="margin-top: 0">I am a floating utility window.</p>
+                            <p>Try ignoring me and clicking "Save Changes" on the form behind me!</p>
+                        </div>
+                         <ds-action-bar slot="footer" variant="pattern" divider>
+                            <ds-button-group align="end">
+                                <ds-button variant="secondary" @click=${handleClose}>Close</ds-button>
+                            </ds-button-group>
+                        </ds-action-bar>
+                    </ds-dialog>
+                </main>
+            </div>
+        </div>
+    `;
+};
+NonModal.args = {
+    ...Default.args,
+    open: true, // Start open to demonstrate immediate non-blocking nature
+    heading: 'Utility Window',
+    modal: false,
+    position: 'bottom-right'
+};
+NonModal.parameters = {
+    layout: 'fullscreen', // Ensure it takes full space
+    docs: {
+        story: {
+            description: 'Non-modal dialogs allow full interaction with the underlying page. Perfect for reference tools, tutorials, or secondary workflows.'
+        }
+    }
+};
+
+
+export const Small = Template.bind({});
+Small.args = {
+    ...Default.args,
+    size: 'sm',
+    heading: 'Small Dialog'
+};
+
+export const Large = Template.bind({});
+Large.args = {
+    ...Default.args,
+    size: 'lg',
+    heading: 'Large Dialog'
+};
+
+export const Fullscreen = Template.bind({});
+Fullscreen.args = {
+    ...Default.args,
+    size: 'fullscreen',
+    heading: 'Fullscreen Dialog'
+};
+// Override the template for Fullscreen to use 'page' variant action bar
+Fullscreen.decorators = [
+    (Story, context) => {
+        const { args } = context;
+        // We can't easily change the internal Template logic from here without duplicating it or using a refined Template.
+        // Let's define a specific render for this story to ensure 'page' variant usage.
+        const [{ open }, updateArgs] = useArgs();
+        const handleClose = () => updateArgs({ open: false });
+        const handleOpen = () => updateArgs({ open: true });
+
+        return html`
+      <ds-button @click=${handleOpen}>Open Fullscreen Dialog</ds-button>
+      
+      <ds-dialog 
+        ?open=${open} 
+        heading=${args.heading} 
+        size="fullscreen"
+        ?prevent-close=${args.preventClose}
+        ?modal=${args.modal}
+        @ds-close=${handleClose}
+      >
+        <div>
+           ${Array(20).fill(html`<p>This is a fullscreen dialog with a lot of content to demonstrate scrolling behavior and sticky headers/footers.</p>`).map(p => p)}
+        </div>
+        
+        <!-- Requirement: 'page' variant for fullscreen -->
+        <ds-action-bar slot="footer" variant="page" divider>
+            <ds-button-group align="end">
+                <ds-button variant="primary" @click=${handleClose}>Save Changes</ds-button>
+                <ds-button variant="secondary" @click=${handleClose}>Cancel</ds-button>
+            </ds-button-group>
+        </ds-action-bar>
+      </ds-dialog>
+    `;
+    }
+];
+
+export const ScrollingContent = (args) => {
+    const [{ open }, updateArgs] = useArgs();
+
+    const handleClose = () => updateArgs({ open: false });
+    const handleOpen = () => updateArgs({ open: true });
+
+    return html`
+      <ds-button @click=${handleOpen}>Open Long Dialog</ds-button>
+      
+      <ds-dialog ?open=${open} heading="Terms and Conditions" size="md" ?modal=${args.modal} @ds-close=${handleClose}>
+        
+        <!-- Added tabindex to demonstrate focus style, with inline style to remove native outline as requested -->
+        <div tabindex="0" class="focusable-content" style="outline: none;">
+           ${Array(10).fill(html`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>`).map(p => p)}
+        </div>
+        
+        <ds-action-bar slot="footer" variant="pattern" divider>
+            <ds-button-group align="end">
+                <ds-button variant="primary" @click=${handleClose}>Accept</ds-button>
+                <ds-button variant="secondary" @click=${handleClose}>Decline</ds-button>
+            </ds-button-group>
+        </ds-action-bar>
+      </ds-dialog>
+    `;
+};
+ScrollingContent.args = {
+    modal: true
+};