Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add story for select boxes

Browse Source 
[MAILPOET-2772]
This commit is contained in:
Ján Mikláš
2020-05-06 17:34:17 +02:00
committed by Veljko V
parent 269d6a456c
commit 1ce07ad981
2 changed files with 73 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/src/common/form/select/_stories/assets/icon.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export default (
<svg viewBox="3 3 18 18">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
);

66
assets/js/src/common/form/select/_stories/select.tsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import Select from '../select';
import Heading from '../../../typography/heading/heading';
import icon from './assets/icon';
export default {
title: 'Form',
component: Select,
};
export const SelectBoxes = () => (
<>
<Heading level={3}>Small select boxes</Heading>
<p>
<Select size="small">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
<div className="mailpoet-gap" />
<Select
size="small"
iconStart={icon}
>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
</p>
<br />
<Heading level={3}>Regular select boxes</Heading>
<p>
<Select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
<div className="mailpoet-gap" />
<Select iconStart={icon}>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
</p>
<br />
<Heading level={3}>Full-width select boxes</Heading>
<p>
<Select isFullWidth>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
<div className="mailpoet-gap" />
<Select
isFullWidth
iconStart={icon}
>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</Select>
</p>
<br />
</>
);