@skhemata/skhemata-form
Version:
Skhemata Form Web Component. This web component can be used as base web component when working with forms and inputs.
94 lines • 2.85 kB
JavaScript
import { html } from '@skhemata/skhemata-base';
import '../skhemata-form';
export default {
title: 'General/SkhemataForm/SkhemataFormButton',
component: 'skhemata-blog',
argTypes: {
title: {
control: 'text',
description: 'Text to display on the button',
table: {
type: 'string',
category: 'HTML Attributes',
},
},
isFullwidth: {
control: 'boolean',
name: 'isfullwidth',
description: 'Sets the width of the button',
table: {
type: 'boolean',
category: 'HTML Attributes',
},
},
isLoading: {
control: 'boolean',
name: 'isloading',
description: 'Sets a loading spinner on the button',
table: {
type: 'boolean',
category: 'HTML Attributes',
},
},
skhemataFormButtonBackgroundColor: {
control: 'color',
name: '--skhemata-form-button-background-color',
description: 'Background color of the form buttons',
defaultValue: '#00d1b2',
table: {
type: 'string',
category: 'CSS Properties',
},
},
skhemataFormButtonTextColor: {
control: 'color',
name: '--skhemata-form-button-text-color',
description: 'Text color of the form buttons',
defaultValue: '#ffffff',
table: {
type: 'string',
category: 'CSS Properties',
},
},
submit: {
description: 'Fires when button is clicked and type="submit"',
table: {
category: 'Events',
type: 'event',
},
},
click: {
description: 'Fires when type is not submit',
table: {
category: 'Events',
type: 'event',
},
},
}
};
const Template = ({ title = 'My Button', isFullwidth = false, isLoading = false, skhemataFormButtonBackgroundColor, skhemataFormButtonTextColor, }) => html `
<style>
body {
--skhemata-form-button-background-color: ${skhemataFormButtonBackgroundColor};
--skhemata-form-button-text-color: ${skhemataFormButtonTextColor};
}
</style>
<skhemata-form-button
.title=${title}
.isFullwidth=${isFullwidth}
.isLoading=${isLoading}
></skhemata-form-button>
`;
export const Example = Template.bind({});
Example.parameters = {
docs: {
source: {
code: `
<skhemata-form-button
title="My Button"
></skhemata-form-button>
`,
},
},
};
//# sourceMappingURL=SkhemataFormButton.stories.js.map