storiesOf('GridLists', module).add('Grid List', () => {
return (
<GridList
tileGutter1={boolean('tileGutter1', false)}
headerCaption={boolean('headerCaption', false)}
twolineCaption={boolean('twolineCaption', false)}
withIconAlignStart={boolean('withIconAlignStart', false)}
tileAspect={select('tileAspect', tileAspectOptions, '1x1')}
>
{Array(4)
.fill()
.map((val, i) => (
<GridTile key={i}>
<GridTilePrimary>
<GridTilePrimaryContent wrap>
<img src="https://material-components-web.appspot.com/images/1-1.jpg" />
</GridTilePrimaryContent>
</GridTilePrimary>
<GridTileSecondary>
<GridTileIcon>info</GridTileIcon>
<GridTileTitle>Tile {i + 1}</GridTileTitle>
</GridTileSecondary>
</GridTile>
))}
</GridList>
);
});
const props = () => ({
className: 'some-class',
open: boolean('Open (open)', true),
passiveModal: boolean('Without footer (passiveModal)', false),
danger: boolean('Danger mode (danger)', false),
shouldSubmitOnEnter: boolean(
'Enter key to submit (shouldSubmitOnEnter)',
false
),
modalHeading: text('Modal heading (modalHeading)', 'Modal heading'),
modalLabel: text('Optional label (modalLabel)', 'Label'),
modalAriaLabel: text('ARIA label (modalAriaLabel)', ''),
primaryButtonText: text(
'Primary button text (primaryButtonText)',
'Primary Button'
),
secondaryButtonText: text(
'Secondary button text (secondaryButtonText)',
'Secondary Button'
),
iconDescription: text(
'Close icon description (iconDescription)',
'Close the modal'
),
onBlur: action('onBlur'),
onClick: action('onClick'),
onFocus: action('onFocus'),
onRequestClose: action('onRequestClose'),
onRequestSubmit: action('onRequestSubmit'),
onSecondarySubmit: action('onSecondarySubmit'),
});
state => ({
checked: boolean('checked', state.checked || false),
indeterminate: boolean('indeterminate', state.indeterminate || false),
disabled: boolean('disabled', state.disabled || false),
value: text('value', state.value || 'myValue'),
label: text('label', state.label || 'Hello World')
}),
storiesOf('NavigationButton', module).add('default', () => (
<NavigationButton
next={boolean('Next', true)}
disable={boolean('Disable', true)}
callback={log}
/>
));
const UserProps = () => ({
alt: text('Alternative Text (alt)', 'The Alt Text'),
ellipsis: boolean('Ellipsis (ellipsis)', false),
className: 'some-class',
image: text('Image (image)', undefined),
name: text('User name (name)', 'Max Mustermann'),
small: boolean('Small (small)', false),
});
withReadme(ButtonReadme, () => (
<Button
onClick={action('clicked')}
alert={boolean('alert', false)}
success={boolean('success', false)}
label={text('label', 'Hello Im Button')}
/>
))
.add('Controlled with knobs', withInfo('Toggle controlled with knobs')(() => (
<Toggle
label={ text('label', 'Toggle Label') }
required={ boolean('required') }
error={ text('error') }
checked={ boolean('checked') }
disabled={ boolean('disabled') }
onChange={ action('change') }
/>
)))
storiesOf('Ripples', module).add('Ripple', () => (
<Ripple
style={rippleStyle}
primary={boolean('primary', false)}
accent={boolean('accent', false)}
unbounded={boolean('unbounded', false)}
>
<div style={rippleStyle}>Click Me</div>
</Ripple>
));
.add("Playground", () => (
<ReactiveMapDefault
title={text("title", "Reactive maps")}
showPopoverOn={select("showPopoverOn", { click: "click", mouseover: "mouseover" }, "click")}
setMarkerCluster={boolean("setMarkerCluster", true)}
autoCenter={boolean("autoCenter", true)}
showSearchAsMove={boolean("showSearchAsMove", true)}
setSearchAsMove={boolean("setSearchAsMove", false)}
showMapStyles={boolean("showMapStyles", false)}
defaultMapStyle={select("defaultMapStyle", { Standard: "Standard", "Blue Essence": "Blue Essence", "Blue Water": "Blue Water", "Flat Map": "Flat Map", "Light Monochrome": "Light Monochrome", "Midnight Commander": "Midnight Commander", "Unsaturated Browns": "Unsaturated Browns" }, "Standard")}
size={number("size", 100)}
streamTTL={number("streamTTL", 5)}
streamAutoCenter={boolean("streamAutoCenter", true)}
autoMarkerPosition={boolean("autoMarkerPosition", false)}
showMarkers={boolean("showMarkers", true)}
autoMapRender={boolean("autoMapRender", true)}
defaultZoom={number("defaultZoom", 13)}
defaultCenter={object("defaultCenter", {
lat: 37.74,
lon: -122.45
})}
defaultMarkerImage={text("defaultMarkerImage", "https://cdn.rawgit.com/appbaseio/reactivemaps/6500c73a/dist/images/historic-pin.png")}
streamMarkerImage={text("streamMarkerImage", "https://cdn.rawgit.com/appbaseio/reactivemaps/6500c73a/dist/images/stream-pin.png")}
/>
));
.add("Playground", withReadme(removeFirstLine(MultiListReadme), () => (
<MultiListDefault
title={text("title", "MultiList: City Filter")}
size={number("size", 10)}
sortBy={select("sortBy", { asc: "asc", desc: "desc", count: "count" }, "count")}
defaultSelected={array("defaultSelected", ["London", "Sydney"])}
showCount={boolean("showCount", true)}
showSearch={boolean("showSearch", true)}
placeholder={text("placeholder", "Search City")}
selectAllLabel={text("selectAllLabel", "All cities")}
/>
)));
'with absolute positioning', (() => (
<Container>
<DateRangePicker
endDateInputId='end-date-id-0'
isAbsolutelyPositioned={ boolean('isAbsolutelyPositioned', true) }
isPastDateSelectable={ boolean('isPastDateSelectable', true) }
onDatesChange={ action('onDatesChange') }
startDateInputId='start-date-id-0'
/>
<p>I should be behind the calendar when opened</p>
</Container>
))
.add('Normal', () =>
<Fragment>
<GlobalStyle />
<Checkbox
label={text('Label Text', 'Choice 1')}
labelPosition={select('Label Position', labelPosition, 'right')}
checked={boolean('Checked', false)}
disabled={boolean('Disabled', false)}
debug={boolean('Debug', false)}
onChange={action('changed')}
/>
</Fragment>
'with no border on calendar', (() => (
<Container>
<DateRangePicker
endDateInputId='end-date-id-0'
focusedInput='startDate'
isBorderless={ boolean('isBorderless', true) }
isPastDateSelectable={ boolean('isPastDateSelectable', true) }
keepOpenOnDateSelect={ boolean('keepOpenOndateSelect', true) }
onDatesChange={ action('onDatesChange') }
startDateInputId='start-date-id-0'
/>
</Container>
))
.add('Normal', () =>
<Fragment>
<GlobalStyle />
<Button
type={select('Type', typeOptions, 'normal')}
radius={number('Radius', 0, radiusOptions)}
small={boolean('Small', false)}
disabled={boolean('Disabled', false)}
onClick={action('clicked')}
>
{text('Button Text', 'Button')}
</Button>
</Fragment>
.add('Normal', () =>
<Fragment>
<GlobalStyle />
<Select
icon={text('Icon', 'keyboard_arrow_down')}
colour={color('Colour', '#414142')}
isMulti={boolean('Multi Select', false)}
isClearable={boolean('Clearable', false)}
isDisabled={boolean('Disabled', false)}
isSearchable={boolean('Searchable', false)}
isLoading={boolean('Loading', false)}
options={object('Options', options)}
/>
</Fragment>
() => {
const isValid = boolean('Is valid?', true);
return (
<StoryWrapper>
<TextInput
validationErrors={isValid ? null : ['This input is invalid']}
placeholder={isValid ? 'Valid input' : 'Invalid input'}
onChange={action('onChange')}
onFocus={action('onFocus')}
onBlur={action('onBlur')}
highlight={boolean('Highlight', false)}
/>
</StoryWrapper>
);
},
.add('default state', () => (<div style={ styles.container }>
<div className="signin-form lego-grid__cell soft-double flex flex--column">
<form className="flex--1">
<ol className="lego-form-fields">
<li className="lego-form-fields__item push--bottom">
<Input
label='Email'
type='text'
displayError={ boolean('displayError [email]', false) }
/>
</li>
<li className="lego-form-fields__item push--bottom">
<Input
label='Password'
type='password'
displayError={ boolean('displayError [pass]', false) }
/>
</li>
<li className="lego-form-fields__item push--bottom">
<a href="#">Need help loggin in?</a>
</li>
<li className="lego-form-fields__item">
<Checkbox label='Keep me logged in' />
</li>
</ol>
<div style={{ border: 'none' }} className="lego-form__footer text--center push-triple--top">
<div className="position--relative height--50 flex flex--column flex-align--center">
<Button
className="lego-button lego-button--highlight lego-button--full push--bottom"
style='highlight'
width='full'>
Log In
</Button>
</div>
<a className="display--block" href="#" style={ styles.center }>Log in using SSO</a>
</div>
</form>
<div className="flex--1">
<Or>or</Or>
<Button
className="lego-button lego-button--outline lego-button--full"
style='outline'
width='full'>
Try It Free
</Button>
</div>
</div>
</div>));
.add('vanilla', withInfo()(() => (
<Menu active={boolean('active', true)}>
<MenuItem value={1} onClick={action('click')}>One</MenuItem>
<MenuItem value={2} onClick={action('click')}>Two</MenuItem>
<MenuItem value={3} onClick={action('click')}>Three</MenuItem>
</Menu>
)))
.add('Controlled with knobs', withInfo('Notification controlled with knobs')(() => {
const typeOptions = {
alert: 'alert',
toast: 'toast',
};
const icon = text('icon');
const iconSize = select('iconSize', {
'': '(none)',
'x-small': 'x-small',
small: 'small',
medium: 'medium',
large: 'large',
});
const level = select('level', {
'': '(none)',
info: 'info',
success: 'success',
warning: 'warning',
error: 'error',
});
const type = select('type', typeOptions, 'alert');
const notificationText = text('notificationText', 'This is notification text.');
const alertTexture = boolean('alertTexture', true);
return (
<Notification
type={ type } level={ level }
icon={ icon } iconSize={ iconSize }
alertTexture={ alertTexture }
onClose={ action('close') }
>
{ notificationText }
</Notification>
);
}))
'with buttons panel', (() => (
<Container>
<DateRangePicker
endDateInputId='end-date-id-0'
focusedInput='startDate'
isPastDateSelectable={ boolean('isPastDateSelectable', true) }
keepOpenOnDateSelect={ boolean('keepOpenOndateSelect', true) }
onDatesChange={ action('onDatesChange') }
panelButtons={ [
<Button key={ 0 } style="plain" onClick={ action('onClick Clear') }>Clear</Button>,
<Button key={ 1 } style="highlight" onClick={ action('onClick Apply') }>Apply</Button>,
] }
startDateInputId='start-date-id-0'
/>
</Container>
))
.add("Playground", withReadme(removeFirstLine(DateRangeReadme), () => (
<DateRangeDefault
title={text("title", "Date Range")}
numberOfMonths={number("numberOfMonths", 2)}
allowAllDates={boolean("allowAllDates", true)}
/>
)));
.add("Playground", withReadme(removeFirstLine(DataSearchReadme), () => (
<DataSearchDefault
title={text("title", "DataSearch: Meetups")}
placeholder={text("placeholder", "Search Venue")}
autocomplete={boolean("autocomplete", true)}
/>
)));
.add("Playground", withReadme(removeFirstLine(MultiRangeReadme), () => (
<MultiRangeDefault
title={text("title", "MultiRange: Earthquake Magnitude")}
defaultSelected={array("defaultSelected", ["Moderate", "Strong"])}
showTags={boolean("showTags", "false")}
/>
)));
stories.add('adding markers', () => (
<Line
{...commonProperties}
yScale={{
type: 'linear',
stacked: boolean('stacked', true),
}}
curve={select('curve', curveOptions, 'catmullRom')}
markers={[
{
axis: 'y',
value: 100,
lineStyle: { stroke: '#b0413e', strokeWidth: 2 },
legend: 'y marker',
legendOrientation: 'vertical',
},
{
axis: 'x',
value: data[0].data[5].x,
lineStyle: { stroke: '#b0413e', strokeWidth: 2 },
legend: 'x marker',
},
]}
/>
))
() => (
<Line
{...commonProperties}
data={[
{
id: 'fake corp. A',
data: [4, 8, 5, null, 2, 1, 4, null, 8, 9, 5].map((y, i) => ({
x: `#${i}`,
y,
})),
},
{
id: 'fake corp. B',
data: [5, 9, 8, 6, 3, 1, 2, null, 5, 8, 4].map((y, i) => ({ x: `#${i}`, y })),
},
]}
yScale={{
type: 'linear',
stacked: boolean('stacked', false),
}}
curve={select('curve', curveOptions, 'monotoneX')}
dotSize={8}
dotBorderColor="#fff"
dotBorderWidth={2}
/>
),
.add('complex', () => {
const name = text('Name', 'Jane');
const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
const fruits = {
Apple: 'apples',
Banana: 'bananas',
Cherry: 'cherries',
};
const fruit = select('Fruit', fruits, 'apples');
const price = number('Price', 2.25);
const colour = color('Border', 'deeppink');
const today = date('Today', new Date('Jan 20 2017 GMT+0'));
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
const nice = boolean('Nice', true);
const stockMessage = stock
? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
: `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
button('Arbitrary action', action('You clicked it!'));
return `
<div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
<h1>My name is ${name},</h1>
<h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
<p>${stockMessage}</p>
<p>Also, I have:</p>
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
</ul>
<p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
</div>
`;
})
`ConfirmAction`, () => ({
template: hbs`
<h5 class="title is-5">Confirm Action</h5>
<ConfirmAction
@buttonClasses={{buttonClasses}}
@confirmTitle={{confirmTitle}}
@confirmMessage={{confirmMessage}}
@confirmButtonText={{confirmButtonText}}
@cancelButtonText={{cancelButtonText}}
@disabled={{disabled}}
@onConfirmAction={{onComfirmAction}}
>
{{buttonText}}
</ConfirmAction>
`,
context: {
buttonText: text('buttonText', 'Delete'),
buttonClasses: text('buttonClasses', 'button'),
confirmTitle: text('confirmTitle', 'Delete this?'),
confirmMessage: text('confirmMessage', 'You will not be able to recover it later.'),
confirmButtonText: text('confirmButtonText', 'Delete'),
cancelButtonText: text('cancelButtonText', 'Cancel'),
disabled: boolean('disabled', false),
onComfirmAction: () => {
console.log('Action!');
},
},
}),
() => (
<Button
active={boolean("active", false)}
label={text("label", "Hello World")}
dangerouslySetColor={color("dangerouslySetColor", "")}
type={select("type", types, "default")}
disabled={boolean("disabled", false)}
clickAction={() => alert("clicked")}
orientation={select("orientation", orientations, "horizontal")}
outline={boolean("outline", false)}
prefix={text("prefix")}
suffix={text("suffix")}
size={select("size", sizes, "normal")}
tabIndex={number("tabIndex", 0)}
/>
),
.add('Menu link', () => (
<Div width={number('Container width', 90, { range: true, min: 50, max: 200, step: 10 })}>
<MenuLink href="/" onClick={action('navigation triggered')} active={boolean('Active', true)}>
{text('Text', 'Menu link item')}
</MenuLink>
</Div>
));
stories.add('custom tooltip', () => (
<Line
{...commonProperties}
enableStackTooltip={true}
curve={select('curve', curveOptions, 'linear')}
yScale={{
type: 'linear',
stacked: boolean('stacked', true),
}}
tooltip={slice => (
<div style={{ color: '#bbb' }}>
<siv>{slice.id}</siv>
{slice.data.map(d => (
<div
key={d.serie.id}
style={{
color: d.serie.color,
padding: '3px 0',
}}
>
<strong>{d.serie.id}</strong> [{d.data.y}]
</div>
))}
</div>
)}
theme={{
tooltip: {
container: {
background: '#333',
},
},
}}
/>
))