.add('Internal', () => {
const options = {
'': 'undefined',
xs: 'xs',
sm: 'sm',
md: 'md',
lg: 'lg',
};
const defaultValue = '';
const pageWidth = select('pageWidth', options, defaultValue);
const optionsMobilePageWidth = {
'': 'undefined',
full: 'full',
};
const mobilePageWidth = select(
'mobilePageWidth',
optionsMobilePageWidth,
defaultValue
);
const metaContent = text('metaContent', '2019 © World Food Programme');
const className = text('className', 'some-class');
return (
<Footer
className={className}
metaContent={metaContent}
mobilePageWidth={mobilePageWidth}
pageWidth={pageWidth}>
<div className="wfp--footer__info">
<div className="wfp--footer__info__item">
<p className="wfp--footer__label">A label</p>
<ul className="wfp--footer__list">
<li>
<Link href="http://www.wfp.org">First Link</Link>
</li>
<li>
<Link href="http://www.wfp.org">Second Link</Link>
</li>
</ul>
</div>
<div className="wfp--footer__info__item">
<p className="wfp--footer__label">Another label</p>
<ul className="wfp--footer__list">
<li>
<Link href="http://www.wfp.org">First Link</Link>
</li>
<li>
<Link href="http://www.wfp.org">Second Link</Link>
</li>
</ul>
</div>
</div>
</Footer>
);
})
.add('Button Sizes', () => (
<ButtonSizes
color={select('Color', {
Default: 'default',
Primary: 'primary',
Secondary: 'secondary'
})}
size={select('Size', {
Small: 'small',
Medium: 'medium'
})}
/>
));
() => {
const typeOptions = {
None: 'None',
Narrow: 'Narrow',
Usd: 'Usd',
Partners: 'Partners',
Beneficiaries: 'Beneficiaries',
Households: 'Households',
Months: 'Months',
Mt: 'Mt',
Num: 'Num',
YearMonth: 'YearMonth',
Level: 'Level',
People: 'People',
Countries: 'Countries',
Percentage: 'Percentage',
};
const decimalOptions = {
undefined: undefined,
thousand: 'thousand',
million: 'million',
billion: 'billion',
};
const unitProps = {
type: select('Unit type (type)', typeOptions, 'Usd'),
output: select(
'Output decimal name (output)',
decimalOptions,
'million'
),
from: select('Input decimal name (from)', decimalOptions, undefined),
minimumFractionDigits: number(
'minimum number of fraction digits to use (minimumFractionDigits)',
undefined
),
maximumFractionDigits: number(
'minimum number of fraction digits to use (maximumFractionDigits)',
undefined
),
maximumSignificantDigits: number(
'maximum number of significant digits to use (maximumSignificantDigits)',
undefined
),
hideEmpty: text('hide value if empty (hideEmpty)', undefined),
};
const value = text('value', 1000000);
return <Unit {...unitProps}>{value}</Unit>;
},
const EsempiInterattiviComponent = () => {
if (envIs("test")) {
// Current story has a dependency on the DOM, skip it for now
return null;
}
const id = "example";
const target = () => document.getElementById(id);
const placements = ["top", "bottom", "left", "right"];
const placement = select("Posizione", placements, placements[0]);
const body = text("Body", "Tooltip");
return (
<div style={{ padding: 200 }}>
<Button id={id} className="m-3">
Tooltip
</Button>
<UncontrolledTooltip placement={placement} target={target}>
{body}
</UncontrolledTooltip>
</div>
);
};
.add('Icon Buttons', () => (
<IconButtons
iconColor={select('Icon Color', {
Default: 'default',
Primary: 'primary',
Secondary: 'secondary'
})}
/>
))
.add('Floating Actions', () => (
<FloatingActions
fabColor={select('FAB Color', {
Default: 'default',
Primary: 'primary',
Secondary: 'secondary'
})}
/>
))
.add('Button Emphasis', () => (
<ButtonEmphasis
disabled={boolean('Disabled', false)}
appBarColor={select('AppBar Color', {
Default: 'default',
Primary: 'primary',
Secondary: 'secondary'
})}
/>
))
const EsempiInterattiviComponent = () => {
const colors = ["success", "danger", "warning"];
const color = select("Variazioni", colors, colors[0]);
const open = boolean("Visible", true);
return (
<Alert color={color} isOpen={open}>
Questo è un alert di <em>{color}</em>!
</Alert>
);
};
() => {
const XAxisOrientation = select(
'XAxis.orientation',
{bottom: 'bottom', top: 'top'},
'bottom',
'XAxis'
);
const YAxisOrientation = select('YAxis.orientation', {left: 'left', right: 'right'}, 'left', 'YAxis');
return (
<SimpleChartWrapperNoAxes
margin={{
...(XAxisOrientation === 'top' ? {bottom: 20, top: 40} : {}),
...(YAxisOrientation === 'right' ? {left: 10, right: 40} : {})
}}
>
<XAxis orientation={XAxisOrientation} />
<YAxis orientation={YAxisOrientation} />
<LineSeries data={generateLinearData({key: 'line1'})} />
</SimpleChartWrapperNoAxes>
);
},
const EsempiInterattiviComponent = () => {
const variations = ["", "primary", "dark"];
const variation = select("Variazioni", variations, variations[0]);
const selectedColor = color("Color", "#e3f2fd");
const placements = ["", "top", "bottom"];
const placement = select("Posizionamento", placements, placements[0]);
const sticky = boolean("Sticky", false);
return (
<Navbar
light
expand="lg"
fixed={placement}
sticky={placement}
className={`bg-${variation}`}
style={{ backgroundColor: selectedColor }}
>
<NavbarBrand href="#">Brand</NavbarBrand>
</Navbar>
);
};
() => {
const XAxisPosition = select(
'XAxis.position',
{start: 'start', middle: 'middle', end: 'end'},
'end',
'XAxis'
);
const YAxisPosition = select(
'YAxis.position',
{start: 'start', middle: 'middle', end: 'end'},
'end',
'YAxis'
);
return (
<SimpleChartWrapperNoAxes>
<XAxis title="x-axis" position={XAxisPosition} />
<YAxis title="y-axis" position={YAxisPosition} />
<LineSeries data={generateLinearData({key: 'line1'})} />
</SimpleChartWrapperNoAxes>
);
},
export default () => {
const name = text('Name', 'Storyteller');
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
const fruits = {
apple: 'Apple',
banana: 'Banana',
cherry: 'Cherry',
};
const fruit = select('Fruit', fruits, 'apple');
const otherFruits = {
Kiwi: 'kiwi',
Guava: 'guava',
Watermelon: 'watermelon',
};
const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
const dollars = number('Dollars', 12.5);
// NOTE: color picker is currently broken
const backgroundColor = color('background', '#ffff00');
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
const otherStyles = object('Styles', {
borderWidth: 3,
borderColor: '#ff00ff',
padding: 10,
});
const nice = boolean('Nice', true);
// NOTE: put this last because it currently breaks everything after it :D
const birthday = date('Birthday', new Date('Jan 20 2017'));
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
return (
<View style={style}>
<Text>{intro}</Text>
<Text>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</Text>
<Text>My wallet contains: ${dollars.toFixed(2)}</Text>
<Text>In my backpack, I have:</Text>
<View>
{items.map(item => (
<Text key={item}>{item}</Text>
))}
</View>
<Text>{salutation}</Text>
</View>
);
};
const EsempiInterattiviComponent = () => {
const active = boolean("Attivo", false);
const link = boolean("Link", false);
const button = boolean("Bottoni", false);
const flush = boolean("Flush", false);
const colors = [
"italia",
"primary",
"secondary",
"tertiary",
"quaternary",
"success",
"danger",
"warning"
];
const color = select("Variazioni", colors, colors[0]);
const disabled = boolean("Disabilitato", false);
const value = text("Testo", "Dapibus ac facilisis in");
let tag;
let href;
if (link) {
tag = "a";
href = "#";
} else if (button) {
tag = "button";
}
return (
<ListGroup flush={flush}>
<ListGroupItem
action
active={active}
disabled={disabled}
color={color}
tag={tag}
href={href}
>
{value}
</ListGroupItem>
</ListGroup>
);
};
const EsempiInterattiviComponent = () => {
const colors = [
"primary",
"secondary",
"tertiary",
"quaternary",
"success",
"danger",
"warning"
];
const color = select("Variazioni", colors, colors[0]);
const pill = boolean("Arrotondati", true);
const label = text("Label", "");
return (
<Badge className="mr-1" color={color} pill={pill}>
{label}
{color}
</Badge>
);
};
.add('External', () => {
const options = {
'': 'undefined',
xs: 'xs',
sm: 'sm',
md: 'md',
lg: 'lg',
};
const defaultValue = '';
const pageWidth = select(
'page Width of Wrapper (pageWidth)',
options,
defaultValue
);
const optionsMobilePageWidth = {
'': 'undefined',
full: 'full',
};
const mobilePageWidth = select(
'mobile page width of Wrapper (mobilePageWidth)',
optionsMobilePageWidth,
defaultValue
);
const metaContent = text(
'meta Content (metaContent)',
' 2019 © World Food Programme'
);
const className = text('class name (className)', 'some-class');
const logo = text(
'logo on mobile devices (logo)',
process.env.STORYBOOK_ASSETS +
'logos/vertical/en/wfp-logo-vertical-black-en.svg'
);
const logoExtended = text(
'logo on desktop devices (logoExtended)',
process.env.STORYBOOK_ASSETS +
'logos/extended/en/wfp-logo-extended-black-en.svg'
);
return (
<Footer
external
className={className}
logo={logo}
logoExtended={logoExtended}
metaContent={metaContent}
secondary={
<div>
Via C. G. Viola 68 Parco dei Medici<br />00148 Rome, Italy
</div>
}
mobilePageWidth={mobilePageWidth}
pageWidth={pageWidth}>
<div>
The United Nations World Food Programme - saving lives in emergencies
and changing lives for millions through sustainable development. WFP
works in more than 80 countries around the world, feeding people
caught in conflict and disasters, and laying the foundations for a
better future.
<br />
<Link href="http://www.wfp.org">Custom Links</Link>
</div>
</Footer>
);
});