.add('background styles', () => (
<div style={{backgroundColor: 'gray'}}>
<Button onClick={action('onClick')} style="clean">Clean button</Button>
<Button onClick={action('onClick')} style="lighter">Lighter button</Button>
<Button onClick={action('onClick')} style="transparent">Transparent button</Button>
</div>
))
.add('default view', () => (
<Login onFacebookLogin={action('click the Facebook button')}
onResetPwdClick={linkTo('Core.Account.ResetPwd', 'default view')}
onSignUpClick={linkTo('Core.Account.SignUp', 'default view')}
onSubmitLogin={action('click the Submit button')}
/>
));
.addWithInfo('Controlled with knobs', 'Input controlled with knobs', () => {
const iconOptions = {
'': '(none)',
search: 'search',
clear: 'clear',
warning: 'warning',
};
return (
<Input
label={ text('label', 'Input Label') }
error={ text('error') }
required={ boolean('required') }
value={ text('value') }
placeholder={ text('placeholder') }
addonLeft={ text('addonLeft') }
addonRight={ text('addonRight') }
iconLeft={ select('iconLeft', iconOptions) }
iconRight={ select('iconRight', iconOptions) }
disabled={ boolean('disabled') }
readOnly={ boolean('readOnly') }
onChange={ action('change') }
onBlur={ action('blur') }
/>
);
})
stories.add('event handlers', function () {
const info = `
# <SplitPane />
## Event Handlers
The component supports \`drag-started\`, \`drag-finished\` and \`change\` events.
~~~jsx
<SplitPane
onChange={action('change')}
onDragStarted={action('started')}
onDragFinished={action('finished')}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
~~~
`;
return (
<Story info={info}>
<SplitPane
onChange={action('change')}
onDragStarted={action('started')}
onDragFinished={action('finished')}>
<div>pane-1</div>
<div>pane-2</div>
</SplitPane>
</Story>
);
});
function noCommit() {
const temp = JSON.parse(runJSON);
temp.commitId = null;
const run = new RunRecord(temp);
const topNavLinks = [
<a href="#" className="selected">Pipeline</a>,
<a href="#">Changes</a>,
<a href="#">Tests</a>,
<a href="#">Artifacts</a>,
];
return (
<WithContext context={ctx}>
<RunDetailsHeader
locale="en"
t={t}
pipeline={testData.pipeline}
data={run}
onOrganizationClick={ action('button-click')}
onNameClick={ action('button-click')}
onAuthorsClick={ action('button-click')}
topNavLinks={topNavLinks}/>
</WithContext>
);
}
function longBranch() {
const temp = JSON.parse(runJSON);
temp.pipeline = "bug/JENKINS-007-license-to-kill-this-long-ass-branch-name";
const run = new RunRecord(temp);
const topNavLinks = [
<a href="#" className="selected">Pipeline</a>,
<a href="#">Changes</a>,
<a href="#">Tests</a>,
<a href="#">Artifacts</a>,
];
return (
<WithContext context={ctx}>
<RunDetailsHeader
locale="en"
t={t}
pipeline={testData.pipeline}
data={run}
onOrganizationClick={ action('button-click')}
onNameClick={ action('button-click')}
onAuthorsClick={ action('button-click')}
topNavLinks={topNavLinks}/>
</WithContext>
);
}
.add('hover styles', () => (
<div>
<Button onClick={action('onClick')} hoverStyle="clean">Hover clean</Button>
<Button onClick={action('onClick')} hoverStyle="darken">Hover darken</Button>
<Button onClick={action('onClick')} hoverStyle="brand">Hover brand</Button>
</div>
))
.add('Site enabled', () =>
<QuickState
currentProfile={'uuid'}
profiles={profiles}
enabled
onToggle={action('toggle state')}
onProfileChange={action('profile change')}
/>
.add('Empty state', () => (
<Popup
dispatch={action('dispatch')}
onSettings={action('settings')}
onClose={action('close')}
onPassword={action('password')}
/>
));
.add('states', () => (
<div>
<Button onClick={action('onClick')}>Normal state</Button>
<Button onClick={action('onClick')} isActive={true}>Active</Button>
<Button onClick={action('onClick')} isDisabled={true}>Disabled</Button>
<Button onClick={action('onClick')} isFocused={true}>Focused</Button>
</div>
))
.addWithInfo('Controlled', 'Lookup component whose state is controlled from outside', () => (
<LookupControlled
label='Lookup (Controlled)'
onSearchTextChange={ action('searchTextChange') }
onLookupRequest={ action('lookupRequest') }
onSelect={ action('select') }
onComplete={ action('complete') }
/>
))
.addWithInfo('Default', 'Default date input control', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.add('defaults view', () => (
<div className="todoapp">
<Footer
completedCount={10}
activeCount={4}
filter={SHOW_ALL}
onClearCompleted={action('onClearCompleted')}
onShow={action('onShow')} />
</div>
))
.addWithInfo('With date format', 'Date input control with date format specified (YYYY.MM.DD)', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
dateFormat='YYYY.MM.DD'
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.add('show active', () => (
<div className="todoapp">
<Footer
completedCount={10}
activeCount={4}
filter={SHOW_ACTIVE}
onClearCompleted={action('onClearCompleted')}
onShow={action('onShow')} />
</div>
));
.addWithInfo('Disabled', 'Date input control with disabled status', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
disabled
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.addWithInfo('Required', 'Date input control with required attribute', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
required
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.addWithInfo('With search text', 'Lookup component with search input text', () => (
<Lookup
label='Lookup Label'
searchText='A'
onSearchTextChange={ action('searchTextChange') }
onLookupRequest={ action('lookupRequest') }
onSelect={ action('select') }
onBlur={ action('blur') }
onComplete={ action('complete') }
/>
))
.addWithInfo('Default', 'Default Select control', () => (
<Select
label='Select Label'
onChange={ action('change') }
onBlur={ action('blur') }
>
<Option label='Option One' value='1' />
<Option label='Option Two' value='2' />
<Option label='Option Three' value='3' />
</Select>
))
.addWithInfo('Include time data', 'Date input control with time information', () => (
<DateInput
label='Date Input Label'
value='2016-04-13T23:42:56+0900'
dateFormat='YYYY/MM/DD HH:mm:ss'
includeTime
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.addWithInfo('With min/max date', 'Date input control with minimum date boundary', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
minDate='2016-04-10'
maxDate='2016-04-19'
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.addWithInfo('With selection', 'Lookup component with item selected', () => (
<Lookup
label='Lookup Label'
selected={ COMPANY_DATA[0] }
onSearchTextChange={ action('searchTextChange') }
onLookupRequest={ action('lookupRequest') }
onSelect={ action('select') }
onBlur={ action('blur') }
onComplete={ action('complete') }
/>
))
.addWithInfo('Error', 'Date input control with error message', () => (
<DateInput
label='Date Input Label'
value='2016-04-13'
required
error='This field is required'
onBlur={ action('blur') }
onValueChange={ action('valueChange') }
onComplete={ action('complete') }
/>
))
.addWithInfo('Sizes', 'Icon with different size (x-small, small, medium, large)', () => (
<div>
<Icon icon='standard:case' size='x-small' onClick={ action('x-small:click') } />
<span className='slds-p-right--small' />
<Icon icon='standard:case' size='small' onClick={ action('small:click') } />
<span className='slds-p-right--small' />
<Icon icon='standard:case' size='medium' onClick={ action('medium:click') } />
<span className='slds-p-right--small' />
<Icon icon='standard:case' size='large' onClick={ action('large:click') } />
</div>
))
.add("gray", () => (
<HoverHighlight
color="#eee"
target="definitions://"
highlightsOn={action('highlighted')}
highlightsOff={action('unhighlighted')}
highlights={[]}
>
<span>the function</span>
</HoverHighlight>
));
.add('with title and buttons', () => (
<Dialog
actions={[
{ label: 'Cancel', onClick: action('click Cancel button') },
{ label: 'Save', onClick: action('click Save button') }
]}
active
title="My awesome dialog"
>
<p>Some content</p>
</Dialog>
))
.addWithInfo('With search icon in left', 'Lookup component with search text and search icon in left side', () => (
<Lookup
label='Lookup Label'
searchText='A'
iconAlign='left'
onSearchTextChange={ action('searchTextChange') }
onLookupRequest={ action('lookupRequest') }
onSelect={ action('select') }
onBlur={ action('blur') }
onComplete={ action('complete') }
/>
))
function getHelloWorld() {
return (
<div>
<HelloWorld
text="Hello Story"
SayWorld={action("SayWorld")}
SayChevalier={action("SayChevalier")}
SaySomething={action("SaySomething")}
></HelloWorld>
</div>
);
}
.addWithInfo('Required', 'Select control with required attribute', () => (
<Select
label='Select Label'
required
onChange={ action('change') }
onBlur={ action('blur') }
>
<Option label='Option One' value='1' />
<Option label='Option Two' value='2' />
<Option label='Option Three' value='3' />
</Select>
))
.addWithInfo('Disabled', 'Select control with disabled status', () => (
<Select
label='Select Label'
disabled
onChange={ action('change') }
onBlur={ action('blur') }
>
<Option label='Option One' value='1' />
<Option label='Option Two' value='2' />
<Option label='Option Three' value='3' />
</Select>
))