feat(dees-stepper): refactor to use dees-tile and add overlay functionality
- Updated IStep interface to include optional footerContent for step-specific actions. - Implemented createAndShow static method for displaying stepper as an overlay with DeesWindowLayer. - Refactored render method to wrap each step in a dees-tile, separating header, body, and footer content. - Enhanced CSS for dual-mode operation, adjusting styles for overlay and inline modes. - Added z-index management for overlay stepper to ensure proper stacking with window layer. - Updated demo to include a button for launching the stepper as an overlay.
This commit is contained in:
@@ -1,134 +1,148 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { DeesStepper, type IStep } from './dees-stepper.js';
|
||||
|
||||
const demoSteps: IStep[] = [
|
||||
{
|
||||
title: 'Account Setup',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="email" label="Work Email" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Profile Details',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="firstName" label="First Name" required></dees-input-text>
|
||||
<dees-input-text key="lastName" label="Last Name" required></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Contact Information',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
|
||||
<dees-input-text key="company" label="Company"></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Team Size',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-dropdown
|
||||
key="teamSize"
|
||||
label="How big is your team?"
|
||||
.options=${[
|
||||
{ label: '1-5', value: '1-5' },
|
||||
{ label: '6-20', value: '6-20' },
|
||||
{ label: '21-50', value: '21-50' },
|
||||
{ label: '51+', value: '51+' },
|
||||
]}
|
||||
required
|
||||
></dees-input-dropdown>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Goals',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-multitoggle
|
||||
key="goal"
|
||||
label="Main objective"
|
||||
.options=${[
|
||||
{ label: 'Onboarding', value: 'onboarding' },
|
||||
{ label: 'Analytics', value: 'analytics' },
|
||||
{ label: 'Automation', value: 'automation' },
|
||||
]}
|
||||
required
|
||||
></dees-input-multitoggle>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Brand Preferences',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
|
||||
<dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Integrations',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-list
|
||||
key="integrations"
|
||||
label="Integrations in use"
|
||||
placeholder="Add integration"
|
||||
></dees-input-list>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Review & Launch',
|
||||
content: html`
|
||||
<dees-panel>
|
||||
<p>Almost there! Review your selections and launch whenever you're ready.</p>
|
||||
</dees-panel>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
const cloneSteps = (): IStep[] => demoSteps.map((step) => ({ ...step }));
|
||||
|
||||
export const stepperDemo = () => html`
|
||||
<dees-stepper
|
||||
.steps=${[
|
||||
{
|
||||
title: 'Account Setup',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="email" label="Work Email" required></dees-input-text>
|
||||
<dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Profile Details',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="firstName" label="First Name" required></dees-input-text>
|
||||
<dees-input-text key="lastName" label="Last Name" required></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Contact Information',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
|
||||
<dees-input-text key="company" label="Company"></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Team Size',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-dropdown
|
||||
key="teamSize"
|
||||
label="How big is your team?"
|
||||
.options=${[
|
||||
{ label: '1-5', value: '1-5' },
|
||||
{ label: '6-20', value: '6-20' },
|
||||
{ label: '21-50', value: '21-50' },
|
||||
{ label: '51+', value: '51+' },
|
||||
]}
|
||||
required
|
||||
></dees-input-dropdown>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Goals',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-multitoggle
|
||||
key="goal"
|
||||
label="Main objective"
|
||||
.options=${[
|
||||
{ label: 'Onboarding', value: 'onboarding' },
|
||||
{ label: 'Analytics', value: 'analytics' },
|
||||
{ label: 'Automation', value: 'automation' },
|
||||
]}
|
||||
required
|
||||
></dees-input-multitoggle>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Brand Preferences',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
|
||||
<dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Integrations',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-list
|
||||
key="integrations"
|
||||
label="Integrations in use"
|
||||
placeholder="Add integration"
|
||||
></dees-input-list>
|
||||
<dees-form-submit>Continue</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
const deesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Review & Launch',
|
||||
content: html`
|
||||
<dees-panel>
|
||||
<p>Almost there! Review your selections and launch whenever you're ready.</p>
|
||||
</dees-panel>
|
||||
`,
|
||||
},
|
||||
] as const}
|
||||
></dees-stepper>
|
||||
<div style="position: absolute; inset: 0;">
|
||||
<div
|
||||
style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
|
||||
>
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
await DeesStepper.createAndShow({ steps: cloneSteps() });
|
||||
}}
|
||||
>Open stepper as overlay</dees-button>
|
||||
</div>
|
||||
<dees-stepper .steps=${cloneSteps()}></dees-stepper>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user