textOverflow.stories.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import TextOverflow from 'sentry/components/textOverflow';
  2. export default {
  3. title: 'Utilities/Text/Overflow',
  4. args: {
  5. width: 150,
  6. text: 'https://example.com/foo/',
  7. isParagraph: false,
  8. ellipsisDirection: 'right',
  9. },
  10. argTypes: {
  11. ellipsisDirection: {
  12. control: {
  13. type: 'select',
  14. options: ['left', 'right'],
  15. },
  16. },
  17. },
  18. };
  19. export const _TextOverflow = ({text, width, ...args}) => (
  20. <div style={{width}}>
  21. <TextOverflow {...args}>{text}</TextOverflow>
  22. </div>
  23. );
  24. _TextOverflow.storyName = 'Overflow';
  25. _TextOverflow.parameters = {
  26. docs: {
  27. description: {
  28. story:
  29. 'Simple component that adds "text-overflow: ellipsis" and "overflow: hidden", still depends on container styles',
  30. },
  31. },
  32. };
  33. export const TestCases = () => {
  34. const examples = [
  35. {
  36. width: 250,
  37. text: 'https://example.com/foo/',
  38. isParagraph: false,
  39. ellipsisDirection: 'right',
  40. },
  41. {
  42. width: 250,
  43. text: 'https://example.com/foo/',
  44. isParagraph: false,
  45. ellipsisDirection: 'left',
  46. },
  47. {
  48. width: 150,
  49. text: 'https://example.com/foo/',
  50. isParagraph: false,
  51. ellipsisDirection: 'right',
  52. },
  53. {
  54. width: 150,
  55. text: 'https://example.com/foo/',
  56. isParagraph: false,
  57. ellipsisDirection: 'left',
  58. },
  59. {
  60. width: 75,
  61. text: 'Hello world',
  62. isParagraph: false,
  63. ellipsisDirection: 'right',
  64. },
  65. {
  66. width: 75,
  67. text: 'Hello world',
  68. isParagraph: false,
  69. ellipsisDirection: 'left',
  70. },
  71. ];
  72. return (
  73. <div>
  74. {examples.map((props, i) => (
  75. <_TextOverflow key={i} {...props} />
  76. ))}
  77. </div>
  78. );
  79. };