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', }, }, }} /> ))