123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import TextOverflow from 'sentry/components/textOverflow';
- export default {
- title: 'Utilities/Text/Overflow',
- args: {
- width: 150,
- text: 'https://example.com/foo/',
- isParagraph: false,
- ellipsisDirection: 'right',
- },
- argTypes: {
- ellipsisDirection: {
- control: {
- type: 'select',
- options: ['left', 'right'],
- },
- },
- },
- };
- export const _TextOverflow = ({text, width, ...args}) => (
- <div style={{width}}>
- <TextOverflow {...args}>{text}</TextOverflow>
- </div>
- );
- _TextOverflow.storyName = 'Overflow';
- _TextOverflow.parameters = {
- docs: {
- description: {
- story:
- 'Simple component that adds "text-overflow: ellipsis" and "overflow: hidden", still depends on container styles',
- },
- },
- };
- export const TestCases = () => {
- const examples = [
- {
- width: 250,
- text: 'https://example.com/foo/',
- isParagraph: false,
- ellipsisDirection: 'right',
- },
- {
- width: 250,
- text: 'https://example.com/foo/',
- isParagraph: false,
- ellipsisDirection: 'left',
- },
- {
- width: 150,
- text: 'https://example.com/foo/',
- isParagraph: false,
- ellipsisDirection: 'right',
- },
- {
- width: 150,
- text: 'https://example.com/foo/',
- isParagraph: false,
- ellipsisDirection: 'left',
- },
- {
- width: 75,
- text: 'Hello world',
- isParagraph: false,
- ellipsisDirection: 'right',
- },
- {
- width: 75,
- text: 'Hello world',
- isParagraph: false,
- ellipsisDirection: 'left',
- },
- ];
- return (
- <div>
- {examples.map((props, i) => (
- <_TextOverflow key={i} {...props} />
- ))}
- </div>
- );
- };
|