Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
<button> console.log(123)}
>
console.log(123)
</button>
<button> console.log({
some: { strong: [{ language: 123 }] },
}, 123)}
>
console.log(Object)
</button>
<button>
{text('text', 'Button text')}
</button>
), {
// notes: 'A very simple component',
.add('audio file', () => {
const fixtureProps = {
title: text('title', 'Ted Talk'),
mediaUrl: text(
'mediaUrl',
'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'
),
sttJsonType: text('sttJsonType', 'bbckaldi'),
isEditable: boolean('isEditable', true),
spellCheck: boolean('spellCheck', false),
fileName: text('fileName', 'KateDarling_2018S-950k.mp4'),
// commenting this version of `transcriptData` coz it seems that
// loading a json this sisde effects storybook performance
// transcriptData: object('transcriptData', bbcKaldiTranscript),
transcriptData: bbcKaldiTranscript,
handleAnalyticsEvents: action('Analytics event'),
handleAutoSaveChanges: action('handleAutoSaveChange'),
autoSaveContentType: select(
'autoSaveContentType',
[
'draftjs',
'digitalpaperedit',
'txt',
'txtspeakertimecodes',
.add('Inputs group', () => (
console.log('Swap it!')}>
updateKnob('value', 'text', target.value)}
/>
))
.add('Different controls group', () => (
component: () => (
<form name="myform">
</form>
}).add('default', () => {
const label = text('label', 'Example ButtonToggleGroup');
const labelHelp = text('labelHelp', 'This text provides more information for the label.');
const inputWidth = text('inputWidth', '');
const fieldHelp = text('fieldHelp', 'This text provides help for the input.');
const fieldHelpInline = boolean('fieldHelpInline', false);
const labelInline = boolean('labelInline', false);
const labelWidth = labelInline ? text('labelWidth', '') : undefined;
const labelAlign = labelInline ? select(
'labelAlign',
OptionsHelper.alignBinary,
OptionsHelper.alignBinary[0]
) : undefined;
return (
.add('grouping', () => (
<div>
</div>
.add('Playground', () => {
const imageUrl = text('Image URL', null);
const price = text('Price', '$1234');
const place = text('Place', 'Place');
const country = text('Country', 'Country');
const disabled = boolean('Disabled', false);
return (
);
});
() => (
)
)
({ service }) => (
{}}
duration={text('duration', '2:30')}
durationSpoken={text('durationSpoken', '2 minutes 30 seconds')}
datetime={text('datetime', 'PT2M30S')}
/>
),
{ notes },