302 lines
11 KiB
TypeScript
302 lines
11 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './dees-panel.js';
|
|
import './dees-form.js';
|
|
import './dees-form-submit.js';
|
|
import './dees-input-text.js';
|
|
import './dees-icon.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
dees-panel {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.vertical-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.horizontal-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.demo-output {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: monospace;
|
|
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
|
}
|
|
|
|
.icon-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.code-snippet {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
display: inline-block;
|
|
margin: 4px 0;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
|
|
<div class="button-group">
|
|
<dees-button type="default">Default</dees-button>
|
|
<dees-button type="secondary">Secondary</dees-button>
|
|
<dees-button type="destructive">Destructive</dees-button>
|
|
<dees-button type="outline">Outline</dees-button>
|
|
<dees-button type="ghost">Ghost</dees-button>
|
|
<dees-button type="link">Link Button</dees-button>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'2. Button Sizes'} .subtitle=${'Multiple sizes for different contexts and use cases'}>
|
|
<div class="button-group">
|
|
<dees-button size="sm">Small Button</dees-button>
|
|
<dees-button size="default">Default Size</dees-button>
|
|
<dees-button size="lg">Large Button</dees-button>
|
|
<dees-button size="icon" type="outline" .text=${'🚀'}></dees-button>
|
|
</div>
|
|
|
|
<div class="button-group" style="margin-top: 16px;">
|
|
<dees-button size="sm" type="secondary">Small Secondary</dees-button>
|
|
<dees-button size="default" type="destructive">Default Destructive</dees-button>
|
|
<dees-button size="lg" type="outline">Large Outline</dees-button>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
|
|
<div class="icon-row">
|
|
<dees-button>
|
|
<dees-icon iconFA="faPlus"></dees-icon>
|
|
Add Item
|
|
</dees-button>
|
|
<dees-button type="destructive">
|
|
<dees-icon iconFA="faTrash"></dees-icon>
|
|
Delete
|
|
</dees-button>
|
|
<dees-button type="outline">
|
|
<dees-icon iconFA="faDownload"></dees-icon>
|
|
Download
|
|
</dees-button>
|
|
</div>
|
|
|
|
<div class="icon-row">
|
|
<dees-button type="secondary" size="sm">
|
|
<dees-icon iconFA="faCog"></dees-icon>
|
|
Settings
|
|
</dees-button>
|
|
<dees-button type="ghost">
|
|
<dees-icon iconFA="faChevronLeft"></dees-icon>
|
|
Back
|
|
</dees-button>
|
|
<dees-button type="ghost">
|
|
Next
|
|
<dees-icon iconFA="faChevronRight"></dees-icon>
|
|
</dees-button>
|
|
</div>
|
|
|
|
<div class="icon-row">
|
|
<dees-button size="icon" type="default">
|
|
<dees-icon iconFA="faPlus"></dees-icon>
|
|
</dees-button>
|
|
<dees-button size="icon" type="secondary">
|
|
<dees-icon iconFA="faCog"></dees-icon>
|
|
</dees-button>
|
|
<dees-button size="icon" type="outline">
|
|
<dees-icon iconFA="faSearch"></dees-icon>
|
|
</dees-button>
|
|
<dees-button size="icon" type="ghost">
|
|
<dees-icon iconFA="faEllipsisV"></dees-icon>
|
|
</dees-button>
|
|
<dees-button size="icon" type="destructive">
|
|
<dees-icon iconFA="faTrash"></dees-icon>
|
|
</dees-button>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
|
|
<div class="button-group">
|
|
<dees-button status="normal">Normal</dees-button>
|
|
<dees-button status="pending">Processing...</dees-button>
|
|
<dees-button status="success">Success!</dees-button>
|
|
<dees-button status="error">Error!</dees-button>
|
|
<dees-button disabled>Disabled</dees-button>
|
|
</div>
|
|
|
|
<div class="button-group" style="margin-top: 16px;">
|
|
<dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
|
|
<dees-button type="outline" status="pending">Default Loading</dees-button>
|
|
<dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
|
|
<div class="button-group">
|
|
<dees-button
|
|
@clicked=${() => {
|
|
const output = document.querySelector('#click-output');
|
|
if (output) {
|
|
output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
|
|
}
|
|
}}
|
|
>
|
|
Click Me
|
|
</dees-button>
|
|
|
|
<dees-button
|
|
type="secondary"
|
|
.eventDetailData=${'custom-data-123'}
|
|
@clicked=${(e: CustomEvent) => {
|
|
const output = document.querySelector('#click-output');
|
|
if (output) {
|
|
output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
|
|
}
|
|
}}
|
|
>
|
|
Click with Data
|
|
</dees-button>
|
|
|
|
<dees-button
|
|
type="destructive"
|
|
@clicked=${async () => {
|
|
const output = document.querySelector('#click-output');
|
|
if (output) {
|
|
output.textContent = 'Processing...';
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
output.textContent = 'Action completed!';
|
|
}
|
|
}}
|
|
>
|
|
Async Action
|
|
</dees-button>
|
|
</div>
|
|
|
|
<div id="click-output" class="demo-output">
|
|
<em>Click a button to see the result...</em>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
|
|
<dees-form @formData=${(e: CustomEvent) => {
|
|
const output = document.querySelector('#form-output');
|
|
if (output) {
|
|
output.innerHTML = '<strong>Form submitted with data:</strong><br>' +
|
|
JSON.stringify(e.detail.data, null, 2);
|
|
}
|
|
}}>
|
|
<dees-input-text label="Name" key="name" required></dees-input-text>
|
|
<dees-input-text label="Email" key="email" type="email" required></dees-input-text>
|
|
<dees-input-text label="Message" key="message" isMultiline></dees-input-text>
|
|
|
|
<dees-button type="secondary">Save Draft</dees-button>
|
|
<dees-button type="ghost">Cancel</dees-button>
|
|
<dees-form-submit>Submit Form</dees-form-submit>
|
|
</dees-form>
|
|
|
|
<div id="form-output" class="demo-output" style="white-space: pre-wrap;">
|
|
<em>Submit the form to see the data...</em>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
|
|
<div class="button-group">
|
|
<dees-button type="normal">Normal → Default</dees-button>
|
|
<dees-button type="highlighted">Highlighted → Destructive</dees-button>
|
|
<dees-button type="discreet">Discreet → Outline</dees-button>
|
|
<dees-button type="big">Big → Large Size</dees-button>
|
|
</div>
|
|
|
|
<p style="margin-top: 16px; font-size: 14px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};">
|
|
These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
|
|
</p>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
|
|
<div class="horizontal-group">
|
|
<div class="vertical-group">
|
|
<h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
|
|
<dees-button type="default" size="sm">
|
|
<dees-icon iconFA="faSave"></dees-icon>
|
|
Save Changes
|
|
</dees-button>
|
|
<dees-button type="secondary" size="sm">
|
|
<dees-icon iconFA="faUndo"></dees-icon>
|
|
Discard
|
|
</dees-button>
|
|
<dees-button type="ghost" size="sm">
|
|
<dees-icon iconFA="faQuestionCircle"></dees-icon>
|
|
Help
|
|
</dees-button>
|
|
</div>
|
|
|
|
<div class="vertical-group">
|
|
<h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
|
|
<dees-button type="destructive" size="sm">
|
|
<dees-icon iconFA="faTrash"></dees-icon>
|
|
Delete Account
|
|
</dees-button>
|
|
<dees-button type="outline" size="sm">
|
|
<dees-icon iconFA="faArchive"></dees-icon>
|
|
Archive Data
|
|
</dees-button>
|
|
<dees-button type="ghost" size="sm" disabled>
|
|
<dees-icon iconFA="faBan"></dees-icon>
|
|
Not Available
|
|
</dees-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 24px;">
|
|
<h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
|
|
<div class="code-snippet">
|
|
<dees-button type="default" size="sm" @clicked="\${handleClick}"><br>
|
|
<dees-icon iconFA="faSave"></dees-icon><br>
|
|
Save Changes<br>
|
|
</dees-button>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|