mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-28 05:10:17 +08:00
83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import Faker from 'faker';
|
|
import { storiesOf } from '@storybook/react';
|
|
import { setOptions } from '@storybook/addon-options';
|
|
|
|
import { checkA11y } from '@storybook/addon-a11y';
|
|
import BaseButton from '../components/BaseButton';
|
|
import DelayedRender from '../components/DelayedRender';
|
|
import Button from '../components/addon-a11y/Button';
|
|
import Image from '../components/addon-a11y/Image';
|
|
import * as Form from '../components/addon-a11y/Form';
|
|
import * as Typography from '../components/addon-a11y/Typography';
|
|
|
|
const text = 'Testing the a11y addon';
|
|
|
|
storiesOf('Addons|a11y', module)
|
|
.addDecorator(checkA11y)
|
|
.addDecorator(fn => {
|
|
setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
|
|
return fn();
|
|
})
|
|
.add('Default', () => <BaseButton label="" />)
|
|
.add('Label', () => <BaseButton label={text} />)
|
|
.add('Disabled', () => <BaseButton disabled label={text} />)
|
|
.add('Invalid contrast', () => (
|
|
// FIXME has no effect on score
|
|
<BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
|
|
))
|
|
.add('delayed render', () => (
|
|
<DelayedRender>
|
|
<BaseButton label="This button has a delayed render of 1s" />
|
|
</DelayedRender>
|
|
));
|
|
|
|
storiesOf('Addons|a11y/Button', module)
|
|
.addDecorator(checkA11y)
|
|
.add('Default', () => <Button />)
|
|
.add('Content', () => <Button content={text} />)
|
|
.add('Label', () => <Button label={text} />)
|
|
.add('Disabled', () => <Button disabled content={text} />)
|
|
.add('Invalid contrast', () => <Button contrast="wrong" content={Faker.lorem.words()} />);
|
|
|
|
const label = Faker.lorem.word();
|
|
const placeholder = Faker.lorem.word();
|
|
|
|
storiesOf('Addons|a11y/Form', module)
|
|
.addDecorator(checkA11y)
|
|
.add('Without Label', () => <Form.Row input={<Form.Input />} />)
|
|
.add('With label', () => (
|
|
<Form.Row label={<Form.Label content={label} id="1" />} input={<Form.Input id="1" />} />
|
|
))
|
|
.add('With placeholder', () => (
|
|
<Form.Row input={<Form.Input id="1" placeholder={placeholder} />} />
|
|
));
|
|
|
|
const image = Faker.image.animals();
|
|
const alt = Faker.lorem.words();
|
|
|
|
storiesOf('Addons|a11y/Image', module)
|
|
.addDecorator(checkA11y)
|
|
.add('Without alt', () => <Image src={image} />)
|
|
.add('With alt', () => <Image src={image} alt={alt} />)
|
|
.add('Presentation', () => <Image presentation src={image} />);
|
|
|
|
// eslint-disable-next-line no-script-url
|
|
const href = 'javascript:void 0';
|
|
|
|
storiesOf('Addons|a11y/Typography', module)
|
|
.addDecorator(checkA11y)
|
|
.add('Correct', () => (
|
|
<div>
|
|
<Typography.Heading level={1}>{Faker.lorem.sentence()}</Typography.Heading>
|
|
|
|
<Typography.Text>{Faker.lorem.paragraph()}</Typography.Text>
|
|
|
|
<Typography.Link content={`${Faker.lorem.words(4)}...`} href={href} />
|
|
</div>
|
|
))
|
|
.add('Empty Heading', () => <Typography.Heading level={2} />)
|
|
.add('Empty Paragraph', () => <Typography.Text />)
|
|
.add('Empty Link', () => <Typography.Link href={href} />)
|
|
.add('Link without href', () => <Typography.Link content={`${Faker.lorem.words(4)}...`} />);
|