Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const inputs = (service = 'news') => {
const options = Object.keys(svgs).filter(key => key !== 'BBC_BLOCKS');
const svgChoice = select('Service SVG', options, service).toLowerCase();
const productInput = text('Product', 'BBC News');
const serviceLocalisedNameInput = text('Localised service name', 'Yoruba');
const svgRatio = svgs[svgChoice].ratio;
const svgMaxHeight = 24;
const svgMinHeight = 16;
const minWidthInput = number('minimum svg width', svgRatio * svgMinHeight);
const maxWidthInput = number('maximum svg width', svgRatio * svgMaxHeight);
const svgHeightInput = number('desired height svg', svgMaxHeight);
const borderBottom = boolean('Border Bottom', false);
const borderTop = boolean('Border Top', false);
const backgroundColour = color('Background colour', `${C_POSTBOX}`);
const logoColour = color('Logo colour', `${C_WHITE}`);
return {
productInput,
serviceLocalisedNameInput,
svgChoice,
svgHeightInput,
minWidthInput,
maxWidthInput,
borderTop,
borderBottom,
backgroundColour,
logoColour,
};
};
.add('Proportional', () => {
const containerWidth = number('Container Width', 500)
const topWidth = number('Top Content Width', 1000)
const bottomWidth = number('Bottom Content Width', 2000)
const containerStyle = `height:100px;width:${containerWidth}px;`
const leftColor = color('Left Color', '#ff0000')
const centerColor = color('Center Color', '#00ff00')
const rightColor = color('Right Color', '#0000ff')
const bg = `linear-gradient(0.25turn, ${leftColor}, ${centerColor}, ${rightColor})`
return ({
components: { ScrollSync },
template: `
<div>
<div style="height:100px;width:${topWidth}px;background:${bg};">
<div style="height:100px;width:${bottomWidth}px;background:${bg};">
</div>
`})
}</div></div>
.add('with title and subtitle', () => (
<header color="{color('color',">
<content>
<title>{text('title', 'Rocket.Chat')}</title>
{text('subtitle', 'Livechat')}
</content>
</header>
))
.add('with picture', () => (
visible: boolean('linePointVisible', true, 'line'),
radius: range('linePointRadius', 0, 20, 1, 'line', 0.5),
fill: color('linePointFill', 'white', 'line'),
stroke: customizePointStroke ? color('customLinePointStroke', 'red', 'line') : undefined,
strokeWidth: range('linePointStrokeWidth', 0, 20, 0.5, 'line'),
opacity: range('linePointOpacity', 0, 1, 1, 'line', 0.01),
},
},
areaSeriesStyle: {
area: {
fill: customizeAreaFill ? color('customAreaFill', 'red', 'area') : undefined,
visible: boolean('aAreaVisible', true, 'area'),
opacity: range('aAreaOpacity', 0, 1, 1, 'area'),
},
line: {
stroke: customizeAreaLineStroke ? color('customAreaLineStroke', 'red', 'area') : undefined,
strokeWidth: range('aStrokeWidth', 0, 10, 1, 'area'),
visible: boolean('aLineVisible', true, 'area'),
},
point: {
visible: boolean('aPointVisible', true, 'area'),
fill: color('aPointFill', 'white', 'area'),
radius: range('aPointRadius', 0, 20, 1, 'area'),
stroke: color('aPointStroke', 'white', 'area'),
strokeWidth: range('aPointStrokeWidth', 0, 20, 0.5, 'area'),
opacity: range('aPointOpacity', 0, 1, 0.01, 'area'),
},
},
barSeriesStyle: {
rect: {
fill: customizeRectFill ? color('recCustomFull', 'red', 'bar') : undefined,
opacity: range('rectOpacity', 0, 1, 0.5, 'bar', 0.1),
export default () => ({
components: { ChapterButton },
props: {
color: {
default: color('color', '#000')
},
type: {
default: select('type', types, 'next')
}
},
template: `
`,
methods: { action: action('@click') }
})
export const story3 = () => {
const name = text('Name', 'John Doe');
const textColor = color('Text color', 'orangered');
cachedContainer.textContent = name;
cachedContainer.style.transition = 'color 0.5s ease-out';
cachedContainer.style.color = textColor;
return cachedContainer;
};
story3.story = { name: 'CSS transitions' };
storiesOf('UI', module).add('Switch', () => (
border: 5px dashed ${() => color(name, defaultColor, 'colors')};
padding: 10px;
lineStroke?: string,
areaFill?: string,
) {
return {
...generateLineSeriesStyleKnobs(
groupName,
tag,
pointFill,
pointStroke,
pointStrokeWidth,
pointRadius,
lineStrokeWidth,
lineStroke,
),
area: {
fill: areaFill ? color(`area.fill (${tag})`, areaFill, groupName) : undefined,
visible: boolean(`area.visible (${tag})`, true, groupName),
opacity: range(`area.opacity (${tag})`, 0, 1, 0.8, groupName, 0.01),
},
};
}
)}
p={text('padding', '', 'Core')}
paddingTop={text('paddingTop', '', 'Core')}
paddingRight={text('paddingRight', '', 'Core')}
paddingBottom={text('paddingBottom', '', 'Core')}
paddingLeft={text('paddingLeft', '', 'Core')}
px={text('paddingX', '', 'Core')}
py={text('paddingY', '', 'Core')}
m={text('margin', '', 'Core')}
marginTop={text('marginTop', '', 'Core')}
marginRight={text('marginRight', '', 'Core')}
marginBottom={text('marginBottom', '', 'Core')}
marginLeft={text('marginLeft', '', 'Core')}
mx={text('marginX', '', 'Core')}
my={text('marginY', '', 'Core')}
bg={color('background', '', 'Core')}
display={select(
'display',
{
block: 'block',
flex: 'flex',
inline: 'inline',
'inline-block': 'inline-block',
grid: 'grid',
none: 'none',
},
'block',
'Layout',
)}
size={text('size', '', 'Layout')}
width={text('width', '', 'Layout')}
minWidth={text('minWidth', '', 'Layout')}