46 lines
999 B
TypeScript
46 lines
999 B
TypeScript
|
import {
|
||
|
|
DeesElement,
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
property,
|
||
|
|
css,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
@customElement('test-button-secondary')
|
||
|
|
export class TestButtonSecondary extends DeesElement {
|
||
|
|
// Same group as test-button-primary - they'll appear together
|
||
|
|
public static demoGroup = 'Buttons';
|
||
|
|
|
||
|
|
public static demo = () => html`
|
||
|
|
<test-button-secondary>Secondary Action</test-button-secondary>
|
||
|
|
`;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor label: string = 'Button';
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background: transparent;
|
||
|
|
color: #3b82f6;
|
||
|
|
border: 1px solid #3b82f6;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background: rgba(59, 130, 246, 0.1);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
return html`<button><slot>${this.label}</slot></button>`;
|
||
|
|
}
|
||
|
|
}
|