@storybook/addon-knobs#optionsKnob TypeScript Examples
The following examples show how to use
@storybook/addon-knobs#optionsKnob.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Input.stories.tsx From react-native-base-ui with MIT License | 6 votes |
|
createProps = (): InputProps => ({
size: optionsKnob(
'size',
{
default: INPUT_SIZE.default,
large: INPUT_SIZE.large,
compact: INPUT_SIZE.compact,
mini: INPUT_SIZE.mini,
},
INPUT_SIZE.default,
{
display: 'inline-radio',
}
),
positive: boolean('positive', false),
error: boolean('error', false),
disabled: boolean('disabled', false),
clearable: boolean('clearable', false),
// actions
onChangeText: action('on change text'),
onFocus: action('on focus'),
onBlur: action('on blur'),
})
Example #2
| Source File: with-subheader.stories.ts From angular-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withSubheader = (): any => ({
template: `
<blui-drawer [open]="state.open">
<blui-drawer-header title="Brightlayer UI Drawer" subtitle="with a subtitle">
<button blui-icon mat-icon-button (click)="toggleDrawer(state)">
<mat-icon>menu</mat-icon>
</button>
</blui-drawer-header>
<blui-drawer-subheader [divider]="divider" [hideContentOnCollapse]="hideContentOnCollapse">
<mat-form-field *ngIf="content === 'Filter'" appearance="outline"
style="width: 100%; padding: 8px 16px; box-sizing: border-box">
<mat-label>Search</mat-label>
<input matInput placeholder="Search criteria">
<mat-icon matSuffix>search</mat-icon>
<mat-hint style="min-width: 360px">The subheader can be used for custom content.</mat-hint>
</mat-form-field>
<mat-card *ngIf="content === 'Card'" style="font-weight: 500; width: 100%; min-width: 350px;">
Sample Content Goes Here
</mat-card>
</blui-drawer-subheader>
<blui-drawer-body>
<blui-drawer-nav-group>
<blui-drawer-nav-item *ngFor="let navItem of navItems"
[title]="navItem.title"
[selected]="state.selected === navItem.title"
(select)="navItem.onSelect(); setActive(navItem.title, state);">
<mat-icon blui-icon>{{ navItem.icon }}</mat-icon>
</blui-drawer-nav-item>
</blui-drawer-nav-group>
</blui-drawer-body>
</blui-drawer>
`,
props: {
colors: Colors,
navItems: navItems,
divider: boolean('divider', true),
hideContentOnCollapse: boolean('hideContentOnCollapse', true),
content: optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj),
},
})
Example #3
| Source File: with-subheader.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withSubheader = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const valuesObj = {
filter: 'Filter',
accordion: 'Accordion',
};
const optionsObj = {
display: 'inline-radio' as OptionsKnobOptionsDisplay,
};
const subheaderContent = optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj);
const navGroupItems: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />
<DrawerSubheader
hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
divider={boolean('divider', true)}
>
<div
style={{
display: 'flex',
justifyContent: 'center',
padding: '1rem 16px',
}}
>
{subheaderContent === 'Filter' ? filter : accordion}
</div>
</DrawerSubheader>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #4
| Source File: Button.stories.tsx From react-native-base-ui with MIT License | 5 votes |
|
props = (): ButtonProps => ({
kind: optionsKnob(
'kind',
{
primary: BUTTON_KIND.primary,
secondary: BUTTON_KIND.secondary,
tertiary: BUTTON_KIND.tertiary,
minimal: BUTTON_KIND.minimal,
},
BUTTON_KIND.primary,
{
display: 'inline-radio',
}
),
shape: optionsKnob(
'shape',
{
default: BUTTON_SHAPE.default,
pill: BUTTON_SHAPE.pill,
round: BUTTON_SHAPE.round,
square: BUTTON_SHAPE.square,
circle: BUTTON_SHAPE.circle,
},
BUTTON_SHAPE.default,
{
display: 'inline-radio',
}
),
size: optionsKnob(
'size',
{
default: BUTTON_SIZE.default,
large: BUTTON_SIZE.large,
compact: BUTTON_SIZE.compact,
mini: BUTTON_SIZE.mini,
},
BUTTON_SIZE.default,
{
display: 'inline-radio',
}
),
isLoading: boolean('isLoading', false),
isSelected: boolean('isSelected', false),
disabled: boolean('disabled', false),
onPress: action('clicked'),
})
Example #5
| Source File: Tag.stories.tsx From react-native-base-ui with MIT License | 5 votes |
|
props = (): TagProps => ({
kind: optionsKnob(
'kind',
{
neutral: TAG_KIND.neutral,
primary: TAG_KIND.primary,
accent: TAG_KIND.accent,
positive: TAG_KIND.positive,
warning: TAG_KIND.warning,
negative: TAG_KIND.negative,
black: TAG_KIND.black,
blue: TAG_KIND.blue,
green: TAG_KIND.green,
red: TAG_KIND.red,
yellow: TAG_KIND.yellow,
orange: TAG_KIND.orange,
purple: TAG_KIND.purple,
brown: TAG_KIND.brown,
},
TAG_KIND.primary,
{
display: 'select',
}
),
size: optionsKnob(
'size',
{
small: TAG_SIZE.small,
medium: TAG_SIZE.medium,
large: TAG_SIZE.large,
},
TAG_SIZE.small,
{
display: 'inline-radio',
}
),
variant: optionsKnob(
'variant',
{
light: TAG_VARIANT.light,
outlined: TAG_VARIANT.outlined,
solid: TAG_VARIANT.solid,
},
TAG_VARIANT.light,
{
display: 'inline-radio',
}
),
closeable: boolean('closeable', true),
disabled: boolean('disabled', false),
children: text('children', 'this is a tag'),
onPress: action('clicked'),
})
Example #6
| Source File: index.story.tsx From design-system with MIT License | 4 votes |
|
all = () => {
const size = optionsKnob(
'size',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const sizeXS = optionsKnob(
'sizeXS',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const sizeS = optionsKnob(
'sizeS',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const sizeM = optionsKnob(
'sizeM',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const sizeL = optionsKnob(
'sizeL',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const sizeXL = optionsKnob(
'sizeXL',
{
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
undefined,
{
display: 'inline-radio',
}
);
const columnOptions = {
size,
sizeXL,
sizeL,
sizeM,
sizeS,
sizeXS,
};
return (
<Row>
<Column {...columnOptions}>1</Column>
<Column {...columnOptions}>2</Column>
<Column {...columnOptions}>3</Column>
<Column {...columnOptions}>4</Column>
<Column {...columnOptions}>5</Column>
<Column {...columnOptions}>6</Column>
<Column {...columnOptions}>7</Column>
<Column {...columnOptions}>8</Column>
<Column {...columnOptions}>9</Column>
<Column {...columnOptions}>10</Column>
<Column {...columnOptions}>11</Column>
<Column {...columnOptions}>12</Column>
</Row>
);
}
