forked from storybookjs/storybook
/
highlight.stories.js
24 lines (19 loc) 路 997 Bytes
/
highlight.stories.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import { highlightObject } from '@storybook/addon-a11y';
import { themes, convert, styled } from '@storybook/theming';
import Button from '../../components/addon-a11y/Button';
const text = 'Testing the a11y highlight';
export default {
title: 'Addons/A11y/Highlight',
component: Button,
parameters: {
options: { selectedPanel: 'storybook/a11y/panel' },
},
decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
};
const PassesHighlight = styled.div(highlightObject(convert(themes.light).color.positive));
const IncompleteHighlight = styled.div(highlightObject(convert(themes.light).color.warning));
const ViolationsHighlight = styled.div(highlightObject(convert(themes.light).color.negative));
export const Passes = () => <PassesHighlight>{text}</PassesHighlight>;
export const Incomplete = () => <IncompleteHighlight>{text}</IncompleteHighlight>;
export const Violations = () => <ViolationsHighlight>{text}</ViolationsHighlight>;