Feat(web-react): Introduce UNSTABLE_Truncate component #DS-1098

packages/web-react/src/components/UNSTABLE_Truncate/README.md

@@ -0,0 +1,39 @@
+# UNSTABLE Truncate
+
+> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+> Please use it with caution.
+
+Truncate is a component that truncate text based on defined criteria.
+
+```jsx
+import { UNSTABLE_Truncate } from '@lmc-eu/spirit-web-react';
+
+<UNSTABLE_Truncate>
+    <!-- Text go here -->
+</UNSTABLE_Truncate>
+```
+
+## Lines
+
+You can add the number of lines to which you want to truncate the text using `lines` props
+
+```jsx
+<UNSTABLE_Truncate lines={2}>
+    <!-- Text go here -->
+</UNSTABLE_Truncate>
+```
+
+## API
+
+| Name       | Type                    | Default | Required | Description                                        |
+| ---------- | ----------------------- | ------- | -------- | -------------------------------------------------- |
+| `children` | `string` \| `ReactNode` | `null`  | ✓        | Content of the Truncate                            |
+| `lines`    | `number`                | 3       | ✕        | The number of lines on which the text is truncated |
+
+The components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
+import { SpiritTruncateProps } from '../../types/truncate';
+import { useTruncateStyleProps } from './useTruncateStyleProps';
+
+const defaultProps: Partial<SpiritTruncateProps> = {
+  lines: 3,
+};
+
+const Truncate = (props: SpiritTruncateProps): JSX.Element => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, ...restProps } = propsWithDefaults;
+
+  const { classProps, props: modifiedProps, styleProps: truncateStyle } = useTruncateStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  const truncateStyleProps = {
+    style: {
+      ...styleProps.style,
+      ...truncateStyle,
+    },
+  };
+
+  return (
+    <span {...otherProps} {...truncateStyleProps} className={classNames(classProps, styleProps.className)}>
+      {children}
+    </span>
+  );
+};
+
+export default Truncate;

packages/web-react/src/components/UNSTABLE_Truncate/__tests__/UNSTABLE_Truncate.test.tsx

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import UNSTABLE_Truncate from '../UNSTABLE_Truncate';
+
+describe('UNSTABLE_Truncate', () => {
+  classNamePrefixProviderTest(UNSTABLE_Truncate, 'UNSTABLE_Truncate');
+
+  stylePropsTest(UNSTABLE_Truncate);
+
+  restPropsTest(UNSTABLE_Truncate, 'span');
+
+  it('should have default classname', () => {
+    render(<UNSTABLE_Truncate>Text content</UNSTABLE_Truncate>);
+    const text = screen.getByText('Text content');
+
+    expect(text).toHaveClass('UNSTABLE_Truncate text-truncate-multiline');
+    expect(text).toHaveStyle('--text-truncate-lines:3;');
+  });
+
+  it('should have correct style based on lines', () => {
+    render(<UNSTABLE_Truncate lines={2}>Text content</UNSTABLE_Truncate>);
+    const text = screen.getByText('Text content');
+
+    expect(text).toHaveClass('UNSTABLE_Truncate text-truncate-multiline');
+    expect(text).toHaveStyle('--text-truncate-lines:2;');
+  });
+});

packages/web-react/src/components/UNSTABLE_Truncate/__tests__/useTruncateStyleProps.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react';
+import { useTruncateStyleProps } from '../useTruncateStyleProps';
+
+describe('useTruncateStyleProps', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useTruncateStyleProps(props));
+
+    expect(result.current.classProps).toBe('UNSTABLE_Truncate text-truncate-multiline');
+  });
+
+  it('should return correct style based on lines', () => {
+    const props = { lines: 2 };
+    const { result } = renderHook(() => useTruncateStyleProps(props));
+
+    expect(result.current.classProps).toBe('UNSTABLE_Truncate text-truncate-multiline');
+    expect(result.current.styleProps).toEqual({ '--text-truncate-lines': 2 });
+  });
+});

packages/web-react/src/components/UNSTABLE_Truncate/demo/TruncateDefault.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Text } from '../../Text';
+import { TextField } from '../../TextField';
+import { UNSTABLE_Truncate } from '..';
+
+const TruncateDefault = () => {
+  const [lines, setLines] = useState(3);
+
+  return (
+    <>
+      <form>
+        <fieldset style={{ border: 0 }}>
+          <TextField
+            type="number"
+            min="1"
+            max="10"
+            value={lines}
+            onChange={(e) => setLines(Number(e.currentTarget.value))}
+            label="Number of truncated lines:"
+            name="linesNumber"
+            id="truncate-lines"
+          />
+        </fieldset>
+      </form>
+      <Text size="xsmall">Maximum number of lines for demo purposes is 10.</Text>
+      <UNSTABLE_Truncate lines={lines}>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Vivamus ac leo pretium faucibus.
+        Pellentesque pretium lectus id turpis. Maecenas lorem. Maecenas sollicitudin. Nullam justo enim, consectetuer
+        nec, ullamcorper ac, vestibulum in, elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+        architecto beatae vitae dicta sunt explicabo. Suspendisse sagittis ultrices augue. Aenean fermentum risus id
+        tortor. Etiam bibendum elit eget erat. Nulla quis diam. Donec iaculis gravida nulla. Nulla pulvinar eleifend
+        sem. Fusce aliquam vestibulum ipsum. Sed ac dolor sit amet purus malesuada congue. In dapibus augue non sapien.
+        Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nam sed
+        tellus id magna elementum tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla.
+        Vivamus ac leo pretium faucibus. Pellentesque pretium lectus id turpis. Maecenas lorem. Maecenas sollicitudin.
+        Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed ut perspiciatis unde omnis iste
+        natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+        inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Suspendisse sagittis ultrices augue.
+        Aenean fermentum risus id tortor. Etiam bibendum elit eget erat. Nulla quis diam. Donec iaculis gravida nulla.
+        Nulla pulvinar eleifend sem. Fusce aliquam vestibulum ipsum. Sed ac dolor sit amet purus malesuada congue. In
+        dapibus augue non sapien. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin
+        sem purus in lacus. Nam sed tellus id magna elementum tincidunt.
+      </UNSTABLE_Truncate>
+    </>
+  );
+};
+
+export default TruncateDefault;

packages/web-react/src/components/UNSTABLE_Truncate/demo/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DocsSection from '../../../../docs/DocsSections';
+import TruncateDefault from './TruncateDefault';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <DocsSection title="Basic usage" stackAlignment="stretch">
+      <TruncateDefault />
+    </DocsSection>
+  </React.StrictMode>,
+);

packages/web-react/src/components/UNSTABLE_Truncate/index.html

@@ -0,0 +1 @@
+{{> web-react/demo}}

packages/web-react/src/components/UNSTABLE_Truncate/index.ts

@@ -0,0 +1,3 @@
+export * from './UNSTABLE_Truncate';
+export * from './useTruncateStyleProps';
+export { default as UNSTABLE_Truncate } from './UNSTABLE_Truncate';

packages/web-react/src/components/UNSTABLE_Truncate/stories/UNSTABLE_Truncate.stories.tsx

@@ -0,0 +1,41 @@
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import ReadMe from '../README.md';
+import { UNSTABLE_Truncate } from '..';
+
+const meta: Meta<typeof UNSTABLE_Truncate> = {
+  title: 'Experimental/UNSTABLE_Truncate',
+  component: UNSTABLE_Truncate,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    lines: {
+      control: 'number',
+    },
+  },
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Vivamus ac leo pretium faucibus.\n' +
+      '    Pellentesque pretium lectus id turpis. Maecenas lorem. Maecenas sollicitudin. Nullam justo enim, consectetuer nec,\n' +
+      '    ullamcorper ac, vestibulum in, elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium\n' +
+      '    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae\n' +
+      '    vitae dicta sunt explicabo. Suspendisse sagittis ultrices augue. Aenean fermentum risus id tortor. Etiam bibendum\n' +
+      '    elit eget erat. Nulla quis diam. Donec iaculis gravida nulla. Nulla pulvinar eleifend sem. Fusce aliquam vestibulum\n' +
+      '    ipsum. Sed ac dolor sit amet purus malesuada congue. In dapibus augue non sapien. Morbi imperdiet, mauris ac auctor\n' +
+      '    dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Nam sed tellus id magna elementum tincidunt.',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UNSTABLE_Truncate>;
+
+export const Playground: Story = {
+  name: 'UNSTABLE_Truncate',
+};

packages/web-react/src/components/UNSTABLE_Truncate/useTruncateStyleProps.ts

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { CSSProperties } from 'react';
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritTruncateProps } from '../../types/truncate';
+
+interface TruncateCSSProperties extends CSSProperties {
+  '--text-truncate-lines'?: number;
+}
+
+export interface TruncateStyles {
+  classProps: string;
+  props: SpiritTruncateProps;
+  styleProps: TruncateCSSProperties;
+}
+
+export function useTruncateStyleProps(props: SpiritTruncateProps): TruncateStyles {
+  const { lines, ...restProps } = props;
+
+  const TruncateClass = useClassNamePrefix('UNSTABLE_Truncate');
+  const TruncateMultilinesClass = 'text-truncate-multiline';
+  const classProps = classNames(TruncateClass, TruncateMultilinesClass);
+
+  const truncateStyle: TruncateCSSProperties = {};
+
+  if (lines) {
+    truncateStyle['--text-truncate-lines'] = lines;
+  }
+
+  return {
+    classProps,
+    props: restProps,
+    styleProps: truncateStyle,
+  };
+}

packages/web-react/src/types/truncate.ts

@@ -0,0 +1,5 @@
+import { ChildrenProps, StyleProps } from './shared';
+
+export interface SpiritTruncateProps extends StyleProps, ChildrenProps {
+  lines?: number;
+}