Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import { Story } from '@storybook/react';
import React from 'react';
import TextTruncated, { Props as TextTruncatedProps } from '../components/TextTruncated/index';
export default {
title: 'TextTruncated',
component: TextTruncated,
};
const Template: Story<TextTruncatedProps> = (args) => {
return <TextTruncated {...args} />;
};
const stringList = ['elephant', 'foo', 'bar', 'baz', 'spam', 'bacon', 'eggs'];
let largeList = stringList;
for (let i = 0; i < 5; i++) {
largeList = [...largeList, ...largeList];
}
export const Default = Template.bind({});
Default.args = {
stringList,
maxLengthPx: 200,
showAllStyle: { fontSize: 14 },
textStyle: { fontSize: 14 },
moreSeparator: '...',
moreText: undefined,
placeHolder: undefined,
};
export const LargeList = Template.bind({});
LargeList.args = {
...Default.args,
stringList: largeList,
};
export const WithPlaceholder = Template.bind({});
WithPlaceholder.args = {
stringList: ['thing1', 'thing2'],
maxLengthPx: 200,
showAllStyle: { fontSize: 14 },
textStyle: { fontSize: 14 },
moreSeparator: '...',
moreText: 'more',
placeHolder: <span style={{ color: 'red' }}>Nothing Here!</span>,
};
|