mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-19 05:02:40 +08:00
Merge pull request #19149 from storybookjs/shilman/generic-controls-stories
Build: Generic stories for addon-controls
This commit is contained in:
Michael Shilman
GitHub
commit
04b519c0af
83
code/addons/controls/template/stories/basics.stories.ts
Normal file
83
code/addons/controls/template/stories/basics.stories.ts
Normal file
@ -0,0 +1,83 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
argTypes: {
|
||||
boolean: { control: 'boolean' },
|
||||
color: { control: 'color' },
|
||||
colorWithPresets: {
|
||||
control: {
|
||||
type: 'color',
|
||||
presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
|
||||
},
|
||||
},
|
||||
colorStartOpen: { control: { type: 'color', startOpen: true } },
|
||||
date: { control: 'date' },
|
||||
file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
|
||||
number: { control: 'number' },
|
||||
object: { control: 'object' },
|
||||
radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
|
||||
radioWithLabels: {
|
||||
control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
|
||||
},
|
||||
inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
|
||||
select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
|
||||
multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
|
||||
range: { control: 'range' },
|
||||
rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
|
||||
text: { control: 'text' },
|
||||
},
|
||||
};
|
||||
|
||||
export const Undefined = {
|
||||
args: {},
|
||||
};
|
||||
|
||||
const DEFAULT_NESTED_OBJECT = {
|
||||
text: 'Hello world',
|
||||
boolean: true,
|
||||
array: ['One', 'Two', 'Three'],
|
||||
object: { a: 1, b: 2, c: 3 },
|
||||
};
|
||||
export const Defined = {
|
||||
args: {
|
||||
boolean: true,
|
||||
color: '#ff0',
|
||||
colorWithPresets: 'pink',
|
||||
colorStartOpen: 'orange',
|
||||
date: new Date(2010, 1, 1),
|
||||
file: ['https://storybook.js.org/images/placeholders/350x150.png'],
|
||||
number: 10,
|
||||
object: DEFAULT_NESTED_OBJECT,
|
||||
radio: 'a',
|
||||
radioWithLabels: 'b',
|
||||
inlineRadio: 'c',
|
||||
select: 'b',
|
||||
multiSelect: ['a'],
|
||||
range: 15,
|
||||
rangeCustom: 10,
|
||||
text: 'hello',
|
||||
},
|
||||
};
|
||||
|
||||
// export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
|
||||
// ImageFileControl.args = {
|
||||
// imageUrls: ['https://storybook.js.org/images/placeholders/350x150.png'],
|
||||
// };
|
||||
|
||||
// const hasCycle: any = {};
|
||||
// hasCycle.cycle = hasCycle;
|
||||
|
||||
// export const CyclicArgs = {
|
||||
// args: process.env.NODE_ENV !== 'test' ? { object: hasCycle } : {},
|
||||
// parameters: {
|
||||
// docs: { disable: true },
|
||||
// chromatic: { disable: true },
|
||||
// storyshots: { disable: true },
|
||||
// },
|
||||
// };
|
||||
62
code/addons/controls/template/stories/conditional.stories.ts
Normal file
62
code/addons/controls/template/stories/conditional.stories.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
};
|
||||
|
||||
export const MutuallyExclusiveModes = {
|
||||
argTypes: {
|
||||
mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
|
||||
mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
|
||||
},
|
||||
};
|
||||
|
||||
export const ToggleControl = {
|
||||
argTypes: {
|
||||
colorMode: {
|
||||
control: 'boolean',
|
||||
},
|
||||
dynamicText: {
|
||||
if: { arg: 'colorMode', truthy: false },
|
||||
control: 'text',
|
||||
},
|
||||
dynamicColor: {
|
||||
if: { arg: 'colorMode' },
|
||||
control: 'color',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ToggleExpandCollapse = {
|
||||
argTypes: {
|
||||
advanced: {
|
||||
control: 'boolean',
|
||||
},
|
||||
margin: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
padding: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
cornerRadius: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const GlobalBased = {
|
||||
argTypes: {
|
||||
ifThemeExists: { control: 'text', if: { global: 'theme' } },
|
||||
ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
|
||||
ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
|
||||
ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
|
||||
},
|
||||
};
|
||||
22
code/addons/controls/template/stories/disable.stories.ts
Normal file
22
code/addons/controls/template/stories/disable.stories.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
};
|
||||
|
||||
export const DisableTable = {
|
||||
args: { a: 'a', b: 'b' },
|
||||
argTypes: {
|
||||
b: { table: { disable: true } },
|
||||
},
|
||||
};
|
||||
|
||||
export const DisableControl = {
|
||||
args: { a: 'a', b: 'b' },
|
||||
b: { control: { disable: true } },
|
||||
};
|
||||
47
code/addons/controls/template/stories/filters.stories.ts
Normal file
47
code/addons/controls/template/stories/filters.stories.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
args: {
|
||||
helloWorld: 1,
|
||||
helloPlanet: 1,
|
||||
byeWorld: 1,
|
||||
},
|
||||
};
|
||||
|
||||
export const IncludeList = {
|
||||
parameters: {
|
||||
controls: {
|
||||
include: ['helloWorld'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const IncludeRegex = {
|
||||
parameters: {
|
||||
controls: {
|
||||
include: /hello*/,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ExcludeList = {
|
||||
parameters: {
|
||||
controls: {
|
||||
exclude: ['helloPlanet', 'helloWorld'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ExcludeRegex = {
|
||||
parameters: {
|
||||
controls: {
|
||||
exclude: /hello*/,
|
||||
},
|
||||
},
|
||||
};
|
||||
16
code/addons/controls/template/stories/issues.stories.ts
Normal file
16
code/addons/controls/template/stories/issues.stories.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
};
|
||||
|
||||
// https://github.com/storybookjs/storybook/issues/14752
|
||||
export const MissingRadioOptions = {
|
||||
argTypes: { invalidRadio: { control: 'radio' } },
|
||||
args: { invalidRadio: 'someValue' },
|
||||
};
|
||||
39
code/addons/controls/template/stories/matchers.stories.ts
Normal file
39
code/addons/controls/template/stories/matchers.stories.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import globalThis from 'global';
|
||||
import { PartialStoryFn, StoryContext } from '@storybook/csf';
|
||||
|
||||
export default {
|
||||
component: null,
|
||||
decorators: [
|
||||
(storyFn: PartialStoryFn, context: StoryContext) =>
|
||||
storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
|
||||
],
|
||||
};
|
||||
|
||||
export const CustomMatchers = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
date: /whateverIwant/,
|
||||
},
|
||||
},
|
||||
docs: { source: { state: 'open' } },
|
||||
},
|
||||
args: {
|
||||
whateverIwant: '10/10/2020',
|
||||
},
|
||||
};
|
||||
|
||||
export const DisabledMatchers = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
date: null,
|
||||
color: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
args: {
|
||||
purchaseDate: '10/10/2020',
|
||||
backgroundColor: '#BADA55',
|
||||
},
|
||||
};
|
||||
@ -1,66 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons/Controls Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<my-button
|
||||
ng-reflect-is-disabled="false"
|
||||
ng-reflect-label="Args test"
|
||||
ng-reflect-some-data-object="[object Object]"
|
||||
>
|
||||
<button
|
||||
class="btn-secondary btn-medium"
|
||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="100"
|
||||
/>
|
||||
Args test
|
||||
|
||||
</button>
|
||||
</my-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Controls Disabled 1`] = `
|
||||
<storybook-wrapper>
|
||||
<my-button
|
||||
ng-reflect-is-disabled="true"
|
||||
ng-reflect-label="Disabled"
|
||||
>
|
||||
<button
|
||||
class="btn-secondary btn-medium"
|
||||
disabled=""
|
||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="100"
|
||||
/>
|
||||
Disabled
|
||||
|
||||
</button>
|
||||
</my-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Controls No Template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<my-button
|
||||
ng-reflect-is-disabled="false"
|
||||
ng-reflect-label="No template"
|
||||
>
|
||||
<button
|
||||
class="btn-secondary btn-medium"
|
||||
ng-reflect-ng-class="btn-secondary,btn-medium"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="100"
|
||||
/>
|
||||
No template
|
||||
|
||||
</button>
|
||||
</my-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { DocButtonComponent, ISomeInterface } from '../docs/doc-button/doc-button.component';
|
||||
|
||||
export default {
|
||||
title: 'Addons/Controls',
|
||||
component: DocButtonComponent,
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
const someDataObject: ISomeInterface = {
|
||||
one: 'Hello world',
|
||||
two: true,
|
||||
three: ['One', 'Two', 'Three'],
|
||||
};
|
||||
|
||||
export const Basic = Template.bind({});
|
||||
Basic.args = { label: 'Args test', isDisabled: false, someDataObject };
|
||||
|
||||
export const Disabled = Template.bind({});
|
||||
Disabled.args = { label: 'Disabled', isDisabled: true };
|
||||
|
||||
export const NoTemplate = () => ({
|
||||
props: { label: 'No template', isDisabled: false },
|
||||
});
|
||||
@ -1,19 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
export default {
|
||||
title: 'Addon/Controls',
|
||||
argTypes: {
|
||||
label: { type: { name: 'string' } },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => ({
|
||||
template: hbs`<button>{{label}}</button>`,
|
||||
context: args,
|
||||
});
|
||||
|
||||
export const Hello = Template.bind({});
|
||||
Hello.args = { label: 'Hello!' };
|
||||
|
||||
export const Bonjour = Template.bind({});
|
||||
Bonjour.args = { label: 'Bonjour!' };
|
||||
@ -1,16 +0,0 @@
|
||||
export default {
|
||||
title: 'Addons/Controls',
|
||||
argTypes: {
|
||||
label: { type: { name: 'string' } },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = ({ label }) => {
|
||||
return `<div>${label}</div>`;
|
||||
};
|
||||
|
||||
export const Hello = Template.bind({});
|
||||
Hello.args = { label: 'Hello!' };
|
||||
|
||||
export const Bonjour = Template.bind({});
|
||||
Bonjour.args = { label: 'Bonjour!' };
|
||||
@ -1,207 +0,0 @@
|
||||
import React from 'react';
|
||||
import Button from '../components/TsButton';
|
||||
|
||||
export default {
|
||||
title: 'Addons/Controls',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
children: { control: 'text', name: 'Children', mapping: { basic: 'BASIC' } },
|
||||
type: { name: 'Type', control: { type: 'text', maxLength: 32 } },
|
||||
json: { control: 'object', name: 'JSON' },
|
||||
imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
|
||||
label: {
|
||||
name: 'Label',
|
||||
options: ['Plain', 'Bold'],
|
||||
control: { type: 'select', labels: { Bold: 'BOLD' } },
|
||||
mapping: { Bold: <b>Bold</b> },
|
||||
},
|
||||
background: {
|
||||
name: 'Background color',
|
||||
control: {
|
||||
type: 'color',
|
||||
presetColors: [
|
||||
'#fe4a49',
|
||||
'#FED766',
|
||||
'rgba(0, 159, 183, 1)',
|
||||
'HSLA(240,11%,91%,0.5)',
|
||||
'slategray',
|
||||
],
|
||||
},
|
||||
},
|
||||
mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
|
||||
mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
|
||||
colorMode: {
|
||||
control: 'boolean',
|
||||
},
|
||||
dynamicText: {
|
||||
if: { arg: 'colorMode', truthy: false },
|
||||
control: 'text',
|
||||
},
|
||||
dynamicColor: {
|
||||
if: { arg: 'colorMode' },
|
||||
control: 'color',
|
||||
},
|
||||
advanced: {
|
||||
control: 'boolean',
|
||||
},
|
||||
margin: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
padding: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
cornerRadius: {
|
||||
control: 'number',
|
||||
if: { arg: 'advanced' },
|
||||
},
|
||||
someText: { control: 'text' },
|
||||
subText: { control: 'text', if: { arg: 'someText' } },
|
||||
ifThemeExists: { control: 'text', if: { global: 'theme' } },
|
||||
ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
|
||||
ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
|
||||
ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
|
||||
},
|
||||
parameters: {
|
||||
chromatic: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };
|
||||
|
||||
const Template = (args) => (
|
||||
<div style={args.background ? { background: args.background } : undefined}>
|
||||
<Button type={args.type}>
|
||||
{args.label?.type === 'b' ? <b>{args.children}</b> : args.children}
|
||||
</Button>
|
||||
{args.json && <pre>{JSON.stringify(args.json, null, 2)}</pre>}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Basic = Template.bind({});
|
||||
Basic.args = {
|
||||
children: 'basic',
|
||||
json: DEFAULT_NESTED_OBJECT,
|
||||
};
|
||||
Basic.parameters = {
|
||||
chromatic: { disable: false },
|
||||
docs: { source: { state: 'open' } },
|
||||
};
|
||||
|
||||
export const Action = Template.bind({});
|
||||
Action.args = {
|
||||
children: 'hmmm',
|
||||
type: 'action',
|
||||
json: null,
|
||||
};
|
||||
|
||||
export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
|
||||
ImageFileControl.args = {
|
||||
imageUrls: ['https://storybook.js.org/images/placeholders/350x150.png'],
|
||||
};
|
||||
|
||||
export const CustomControls = Template.bind({});
|
||||
CustomControls.args = {
|
||||
children: 'hmmm',
|
||||
type: 'action',
|
||||
json: DEFAULT_NESTED_OBJECT,
|
||||
};
|
||||
|
||||
CustomControls.argTypes = {
|
||||
children: { table: { disable: true } },
|
||||
type: { control: { disable: true } },
|
||||
};
|
||||
|
||||
export const NoArgs = () => <Button>no args</Button>;
|
||||
|
||||
const hasCycle: any = {};
|
||||
hasCycle.cycle = hasCycle;
|
||||
|
||||
export const CyclicArgs = Template.bind({});
|
||||
// No warnings in tests
|
||||
if (process.env.NODE_ENV !== 'test') {
|
||||
CyclicArgs.args = {
|
||||
hasCycle,
|
||||
};
|
||||
}
|
||||
CyclicArgs.parameters = {
|
||||
docs: { disable: true },
|
||||
chromatic: { disable: true },
|
||||
storyshots: { disable: true },
|
||||
};
|
||||
|
||||
export const CustomControlMatchers = Template.bind({});
|
||||
CustomControlMatchers.parameters = {
|
||||
controls: {
|
||||
matchers: {
|
||||
date: /whateverIwant/,
|
||||
},
|
||||
},
|
||||
docs: { source: { state: 'open' } },
|
||||
};
|
||||
CustomControlMatchers.args = {
|
||||
whateverIwant: '10/10/2020',
|
||||
};
|
||||
|
||||
export const WithDisabledCustomControlMatchers = Template.bind({});
|
||||
WithDisabledCustomControlMatchers.parameters = {
|
||||
controls: {
|
||||
matchers: {
|
||||
date: null,
|
||||
color: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
WithDisabledCustomControlMatchers.args = {
|
||||
purchaseDate: '10/10/2020',
|
||||
backgroundColor: '#BADA55',
|
||||
};
|
||||
|
||||
export const FilteredWithInclude = Template.bind({});
|
||||
FilteredWithInclude.parameters = {
|
||||
controls: {
|
||||
include: ['Children'],
|
||||
},
|
||||
};
|
||||
|
||||
export const FilteredWithIncludeRegex = Template.bind({});
|
||||
FilteredWithIncludeRegex.args = {
|
||||
helloWorld: 1,
|
||||
helloPlanet: 1,
|
||||
byeWorld: 1,
|
||||
};
|
||||
FilteredWithIncludeRegex.parameters = {
|
||||
controls: {
|
||||
include: /hello*/,
|
||||
},
|
||||
};
|
||||
|
||||
export const FilteredWithExclude = Template.bind({});
|
||||
FilteredWithExclude.args = {
|
||||
helloWorld: 1,
|
||||
helloPlanet: 1,
|
||||
byeWorld: 1,
|
||||
};
|
||||
FilteredWithExclude.parameters = {
|
||||
controls: {
|
||||
exclude: ['helloPlanet', 'helloWorld'],
|
||||
},
|
||||
};
|
||||
|
||||
export const FilteredWithExcludeRegex = Template.bind({});
|
||||
FilteredWithExcludeRegex.args = {
|
||||
helloWorld: 1,
|
||||
helloPlanet: 1,
|
||||
byeWorld: 1,
|
||||
};
|
||||
FilteredWithExcludeRegex.parameters = {
|
||||
controls: {
|
||||
exclude: /hello*/,
|
||||
},
|
||||
};
|
||||
|
||||
// https://github.com/storybookjs/storybook/issues/14752
|
||||
export const MissingRadioOptions = Template.bind({});
|
||||
MissingRadioOptions.argTypes = { invalidRadio: { control: 'radio' } };
|
||||
MissingRadioOptions.args = { invalidRadio: 'someValue' };
|
||||
@ -1,106 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Controls Show Case 1`] = `
|
||||
<section
|
||||
class="storybook-snapshot-container"
|
||||
>
|
||||
<h1>
|
||||
Control Showcase
|
||||
</h1>
|
||||
|
||||
<button
|
||||
class="button svelte-n2tx93"
|
||||
>
|
||||
<strong>
|
||||
Square
|
||||
corners
|
||||
</strong>
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
|
||||
You clicked
|
||||
:
|
||||
0
|
||||
</button>
|
||||
|
||||
<h2>
|
||||
Array Range
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
[]
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
Progress Bar
|
||||
</h2>
|
||||
|
||||
<progress
|
||||
max="100"
|
||||
min="0"
|
||||
step="1"
|
||||
value={0}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
Enum Selectors
|
||||
</h2>
|
||||
|
||||
<h3>
|
||||
inline radio
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Loading State:
|
||||
loading
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
inline check
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Food Items:
|
||||
[]
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
inline select
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Car choice:
|
||||
car
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
Color Picker
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="Box svelte-zg433x"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
Date Picker
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Date:
|
||||
Invalid Date
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
@ -1,38 +0,0 @@
|
||||
import ControlShowcaseView from './views/ControlShowcaseView.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Addon/Controls',
|
||||
component: ControlShowcaseView,
|
||||
argTypes: {
|
||||
range: { defaultValue: 0, control: { type: 'range', min: 0, max: 100 } },
|
||||
loadingState: {
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['loading', 'error', 'ready'],
|
||||
},
|
||||
},
|
||||
food: {
|
||||
control: {
|
||||
type: 'inline-check',
|
||||
options: ['apple', 'banana', 'orange'],
|
||||
},
|
||||
},
|
||||
car: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['Truck', 'SUV', 'Tesla'],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
control: 'color',
|
||||
},
|
||||
date: {
|
||||
control: 'date',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ShowCase = (args) => ({
|
||||
Component: ControlShowcaseView,
|
||||
props: args,
|
||||
});
|
||||
@ -1,104 +0,0 @@
|
||||
<script>
|
||||
/**
|
||||
* Control Showcase
|
||||
* @component
|
||||
*/
|
||||
import Button from '../../components/Button.svelte';
|
||||
|
||||
/**
|
||||
* Rounds the button
|
||||
*/
|
||||
export let rounded = false;
|
||||
|
||||
/**
|
||||
* Displays the count
|
||||
*/
|
||||
export let count = 0;
|
||||
|
||||
/**
|
||||
* Button text
|
||||
*/
|
||||
export let text = 'You clicked';
|
||||
|
||||
/**
|
||||
* Array object
|
||||
*/
|
||||
export let arrayTest = [];
|
||||
|
||||
/**
|
||||
* number range
|
||||
*/
|
||||
export let range = 0;
|
||||
|
||||
/**
|
||||
* Loading State
|
||||
*/
|
||||
export let loadingState = 'loading';
|
||||
|
||||
/**
|
||||
* Food items
|
||||
*/
|
||||
export let food = [];
|
||||
|
||||
/**
|
||||
* car choice
|
||||
*/
|
||||
export let car = 'car';
|
||||
|
||||
/**
|
||||
* color choice
|
||||
*/
|
||||
export let color = '#000000';
|
||||
|
||||
/**
|
||||
* date choice
|
||||
*/
|
||||
export let date = '';
|
||||
|
||||
function handleClick(event) {
|
||||
count += 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.Box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Control Showcase</h1>
|
||||
<Button {rounded} on:click={handleClick}>{text}: {count}</Button>
|
||||
|
||||
<h2>Array Range</h2>
|
||||
<div>{JSON.stringify(arrayTest)}</div>
|
||||
|
||||
<h2>Progress Bar</h2>
|
||||
<progress value={range} min={0} max={100} step={1} />
|
||||
|
||||
<h2>Enum Selectors</h2>
|
||||
|
||||
<h3>inline radio</h3>
|
||||
<div>
|
||||
<p>Loading State: {loadingState}</p>
|
||||
</div>
|
||||
|
||||
<h3>inline check</h3>
|
||||
<div>
|
||||
<p>Food Items: {JSON.stringify(food)}</p>
|
||||
</div>
|
||||
|
||||
<h3>inline select</h3>
|
||||
<div>
|
||||
<p>Car choice: {car}</p>
|
||||
</div>
|
||||
|
||||
<h2>Color Picker</h2>
|
||||
<div>
|
||||
<div class="Box" style="background-color: {color}" />
|
||||
</div>
|
||||
|
||||
<h2>Date Picker</h2>
|
||||
<div>
|
||||
<p>Date: {new Date(date)}</p>
|
||||
</div>
|
||||
@ -1,37 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Actions Action and method 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
>
|
||||
Click me to log the action
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Actions Action only 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
>
|
||||
Click me to log the action
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Actions Multiple actions 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
>
|
||||
(Double) click me to log the action
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Actions Multiple actions, object 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(66, 185, 131); border-color: #42b983;"
|
||||
>
|
||||
(Double) click me to log the action
|
||||
</button>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addon/Controls Rounded 1`] = `
|
||||
<div
|
||||
style="background-color: silver; padding: 10px;"
|
||||
>
|
||||
<button
|
||||
class="button rounded"
|
||||
style="color: rgb(255, 0, 0); border-color: #f00;"
|
||||
>
|
||||
A Button with rounded edges
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon/Controls Square 1`] = `
|
||||
<div
|
||||
style="background-color: silver; padding: 10px;"
|
||||
>
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(0, 0, 255); border-color: #00f;"
|
||||
>
|
||||
A Button with square edges
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -1,36 +0,0 @@
|
||||
import MyButton from './Button.vue';
|
||||
|
||||
const templateDecorator = () => ({
|
||||
template: `
|
||||
<div style="background-color: silver; padding: 10px;"><story/></div>
|
||||
`,
|
||||
});
|
||||
|
||||
export default {
|
||||
title: 'Addon/Controls',
|
||||
component: MyButton,
|
||||
argTypes: {
|
||||
color: { control: { type: 'color' } },
|
||||
},
|
||||
decorators: [templateDecorator],
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MyButton },
|
||||
template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
|
||||
});
|
||||
|
||||
export const Rounded = Template.bind({});
|
||||
Rounded.args = {
|
||||
rounded: true,
|
||||
color: '#f00',
|
||||
label: 'A Button with rounded edges',
|
||||
};
|
||||
|
||||
export const Square = Template.bind({});
|
||||
Square.args = {
|
||||
rounded: false,
|
||||
color: '#00f',
|
||||
label: 'A Button with square edges',
|
||||
};
|
||||
@ -1,45 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
import type { Meta, StoryFn } from '@storybook/web-components';
|
||||
import '../../../components/sb-button';
|
||||
|
||||
export default {
|
||||
title: 'Addons / Controls',
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
size: {
|
||||
control: {
|
||||
type: 'radio',
|
||||
options: ['small', 'medium', 'large'],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) =>
|
||||
html`<sb-button
|
||||
?primary="${primary}"
|
||||
.size="${size}"
|
||||
.label="${label}"
|
||||
.backgroundColor="${backgroundColor}"
|
||||
@sb-button:click="${sbButtonClickHandler}"
|
||||
></sb-button>`;
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
backgroundColor: '#ff00ff',
|
||||
size: 'small',
|
||||
};
|
||||
|
||||
export const Large = Template.bind({});
|
||||
Large.args = {
|
||||
label: 'Large Button',
|
||||
size: 'large',
|
||||
};
|
||||
|
||||
export const ClickHandler = Template.bind({});
|
||||
ClickHandler.args = {
|
||||
label: 'Click me to fire an alert!',
|
||||
sbButtonClickHandler: () => alert('Storybook Button clicked!'),
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user