Add story for Toggle component
[MAILPOET-2773]
This commit is contained in:
36
assets/js/src/common/form/toggle/_stories/toggle.tsx
Normal file
36
assets/js/src/common/form/toggle/_stories/toggle.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import Toggle from '../toggle';
|
||||
import Heading from '../../../typography/heading/heading';
|
||||
import Grid from '../../../grid';
|
||||
|
||||
export default {
|
||||
title: 'Form',
|
||||
component: Toggle,
|
||||
};
|
||||
|
||||
export const Toggles = () => (
|
||||
<>
|
||||
<Heading level={3}>Toggles</Heading>
|
||||
<Grid.Column dimension="small">
|
||||
<Grid.SpaceBetween>
|
||||
<label htmlFor="toggle-1">Toggle regular</label>
|
||||
<Toggle
|
||||
onCheck={action('toggle-1')}
|
||||
id="toggle-1"
|
||||
name="toggle-1"
|
||||
/>
|
||||
</Grid.SpaceBetween>
|
||||
<div className="mailpoet-gap" />
|
||||
<Grid.SpaceBetween>
|
||||
<label htmlFor="toggle-2">Toggle small</label>
|
||||
<Toggle
|
||||
onCheck={action('toggle-2')}
|
||||
dimension="small"
|
||||
id="toggle-2"
|
||||
name="toggle-2"
|
||||
/>
|
||||
</Grid.SpaceBetween>
|
||||
</Grid.Column>
|
||||
</>
|
||||
);
|
Reference in New Issue
Block a user