wix-style-react
Version:
417 lines (412 loc) • 9.69 kB
JavaScript
import React from 'react';
import { storiesOf } from '@storybook/react';
import InfoCircle from 'wix-ui-icons-common/InfoCircle';
import { skins, SIZES, horizontalPaddings } from '../constants';
import Accordion, {
accordionItemBuilder,
accordionSectionItemBuilder,
} from '../Accordion';
import Text from '../../Text';
import WixStyleReactProvider from '../../WixStyleReactProvider';
export const itemContent = (
<Text>
$Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua
</Text>
);
const tests = [
{
describe: '',
its: [
{
it: 'default',
props: {
items: [
accordionItemBuilder({
title: 'default',
children: itemContent,
}),
],
},
},
{
it: 'subtitle',
props: {
items: [
accordionItemBuilder({
title: 'default',
subtitle: 'subtitle',
children: itemContent,
}),
],
},
},
{
it: 'initiallyOpened',
props: {
items: [
accordionItemBuilder({
title: 'Initially opened',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'disabled',
props: {
items: [
accordionItemBuilder({
title: 'Disabled',
children: itemContent,
disabled: true,
}),
],
},
},
{
it: 'with icon',
props: {
items: [
accordionItemBuilder({
title: 'With icon',
children: itemContent,
icon: <InfoCircle />,
expandLabel: 'Show More',
collapseLabel: 'Less',
}),
],
},
},
{
it: 'with section item',
props: {
items: [
accordionSectionItemBuilder({
title: 'Section Item',
}),
accordionItemBuilder({
title: 'Item',
children: itemContent,
}),
],
},
},
],
},
{
describe: 'skin',
its: [
{
it: 'standard',
props: {
skin: skins.standard,
items: [
accordionItemBuilder({
title: 'Standard skin',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'light',
props: {
skin: skins.light,
items: [
accordionItemBuilder({
title: 'Light skin',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'neutral',
props: {
skin: skins.neutral,
items: [
accordionItemBuilder({
title: 'Neutral skin',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
],
},
{
describe: 'shadow',
its: [
{
it: 'enabled',
props: {
hideShadow: false,
items: [
accordionItemBuilder({
title: 'With shadow',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'disabled',
props: {
hideShadow: true,
items: [
accordionItemBuilder({
title: 'Without shadow',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
],
},
{
describe: 'buttonType',
its: [
{
it: 'none',
props: {
items: [
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: true,
}),
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: false,
}),
],
},
},
{
it: 'textButton',
props: {
items: [
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: true,
buttonType: 'textButton',
showLabel: 'always',
}),
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: false,
buttonType: 'textButton',
showLabel: 'always',
}),
],
},
},
{
it: 'button',
props: {
hideShadow: false,
items: [
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: true,
showLabel: 'always',
buttonType: 'button',
}),
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: false,
showLabel: 'always',
buttonType: 'button',
}),
],
},
},
{
it: 'node',
props: {
hideShadow: false,
items: [
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: true,
showLabel: 'always',
buttonType: 'node',
}),
accordionItemBuilder({
title: 'Item',
children: itemContent,
expandLabel: 'expand',
collapseLabel: 'collapse',
open: false,
showLabel: 'always',
buttonType: 'node',
}),
],
},
},
],
},
{
describe: 'size',
its: [
{
it: 'tiny',
props: {
size: SIZES.tiny,
items: [
accordionItemBuilder({
title: 'Tiny size',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'small',
props: {
size: SIZES.small,
items: [
accordionItemBuilder({
title: 'Small size',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'medium',
props: {
size: SIZES.medium,
items: [
accordionItemBuilder({
title: 'Medium size',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'large',
props: {
size: SIZES.large,
items: [
accordionItemBuilder({
title: 'Large size',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
],
},
{
describe: 'horizontalPadding',
its: [
{
it: 'tiny',
props: {
horizontalPadding: horizontalPaddings.tiny,
items: [
accordionItemBuilder({
title: 'Tiny horizontalPadding',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'small',
props: {
horizontalPadding: horizontalPaddings.small,
items: [
accordionItemBuilder({
title: 'Small horizontalPadding',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'medium',
props: {
horizontalPadding: horizontalPaddings.medium,
items: [
accordionItemBuilder({
title: 'Medium horizontalPadding',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
{
it: 'large',
props: {
horizontalPadding: horizontalPaddings.large,
items: [
accordionItemBuilder({
title: 'Large horizontalPadding',
children: itemContent,
initiallyOpen: true,
}),
],
},
},
],
},
];
tests.forEach(({ describe, its }) => {
its.forEach(({ it, props }) => {
storiesOf(`Accordion${describe ? '/' + describe : ''}`, module).add(
it,
() => <Accordion {...props} />,
);
});
});
tests.forEach(({ describe, its }) => {
its.forEach(({ it, props }) => {
storiesOf(`Layout And Spacing| Accordion/${describe}`, module).add(
it,
() => (
<WixStyleReactProvider
features={{ reducedSpacingAndImprovedLayout: true }}
>
<Accordion {...props} />
</WixStyleReactProvider>
),
);
});
});