Add truncate text functionalitie

Author: Kubit

src/components/text/stories/argtypes.ts

@@ -171,6 +171,30 @@ export const argtypes = (
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    truncate: {
+      description:
+        'Boolean to indicate if render an ellipsis ("...") to represent the clipped text',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    maxTruncatedLines: {
+      description:
+        'Boolean to indicate if render an ellipsis ("...") to represent the clipped text with a max number of lines (`truncate` is not needed)',
+      type: { name: 'number' },
+      control: { type: 'number' },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     aria: {
       description: 'Prop used for accesibility',
       type: { name: 'Partial<React.AriaAttributes>' },

src/components/text/text.styled.tsx

@@ -1,5 +1,6 @@
 import styled, { CSSProp, css } from 'styled-components';
 
+import { maxTruncatedLinesMixin, truncateMixin } from '@/styles/mixins/truncate.mixin';
 import { getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import { ITextStyled } from './types/text';
@@ -18,6 +19,15 @@ const applyDevicePropsTextStyles = (props: TextPropsStylesType) => css`
   css`
     pointer-events: none;
   `}
+  ${!props.$maxTruncatedLines &&
+  props.$truncate &&
+  css`
+    ${truncateMixin}
+  `}
+  ${props.$maxTruncatedLines &&
+  css`
+    ${maxTruncatedLinesMixin(props.$maxTruncatedLines)}
+  `}
 `;
 
 const applyPropsTextStyles = (props: TextPropsStylesType) => css`

src/components/text/textStandAlone.tsx

@@ -8,17 +8,8 @@ import { TextTransformType } from './types/transform';
 
 const TextStandAloneComponent = (
   {
-    children,
-    component,
     dataTestId = 'text',
-    htmlFor,
-    id,
-    onClick,
-    role,
-    styles,
-    weight,
-    isDisabled,
-    align,
+
     transform = TextTransformType.NONE,
     ...props
   }: ITextStandAlone,
@@ -30,20 +21,22 @@ const TextStandAloneComponent = (
       {...props}
       {...ariaProps}
       ref={ref}
+      $maxTruncatedLines={props.maxTruncatedLines}
       $transform={transform}
-      align={align}
-      as={component}
+      $truncate={props.truncate}
+      align={props.align}
+      as={props.component}
       content={undefined}
       data-testid={dataTestId}
-      htmlFor={htmlFor}
-      id={id}
-      isDisabled={isDisabled}
-      role={role}
-      styles={styles}
-      weight={weight}
-      onClick={onClick}
+      htmlFor={props.htmlFor}
+      id={props.id}
+      isDisabled={props.isDisabled}
+      role={props.role}
+      styles={props.styles}
+      weight={props.weight}
+      onClick={props.onClick}
     >
-      {children}
+      {props.children}
     </TextStyled>
   );
 };

src/components/text/types/text.ts

@@ -17,6 +17,8 @@ export interface ITextStyled {
   align?: string;
   $transform?: TextTransformType;
   customTypography?: TypographyTypes;
+  $maxTruncatedLines?: number;
+  $truncate?: boolean;
 }
 
 type TextAriaAttributes = Pick<
@@ -39,6 +41,8 @@ export interface ITextStandAlone extends ITextStyled, TextAriaAttributes {
   cursor?: string;
   weight?: number;
   target?: string;
+  truncate?: boolean;
+  maxTruncatedLines?: number;
   // TODO: is that correct??
   align?: string;
   transform?: TextTransformType;

src/components/text/types/textTheme.ts

@@ -42,6 +42,8 @@ export type TextPropsStylesType = {
   align?: string;
   weight?: number;
   isDisabled?: boolean;
+  $maxTruncatedLines?: number;
+  $truncate?: boolean;
 };
 
 /**

src/designSystem/kubit/components/styles.ts

@@ -90,6 +90,7 @@ export * from './tableCaption/styles';
 export * from './tableDivider/styles';
 export * from './tableV2/styles';
 export * from './dataTable/styles';
+
 export * from './video/styles';
 export * from './virtualKeyboard/styles';
 export * from './progressBar/styles';

src/styles/mixins/index.ts

@@ -3,3 +3,4 @@ export * from './input.mixin';
 export * from './input.mixin.utils';
 export * from './overflow.mixin';
 export * from './srOnly.mixin';
+export * from './truncate.mixin';

src/styles/mixins/truncate.mixin.ts

@@ -0,0 +1,14 @@
+import { CSSProp, css } from 'styled-components';
+
+export const truncateMixin = css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+export const maxTruncatedLinesMixin = (maxLines: number): CSSProp => css`
+  display: -webkit-box;
+  -webkit-line-clamp: ${maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

src/types/styled.d.ts

@@ -21,5 +21,6 @@ export interface CustomTheme {
 }
 
 declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface DefaultTheme extends CustomTheme {}
 }

src/types/styles/typography.ts

@@ -24,6 +24,8 @@ type GenericDeviceTypographyType = {
   color?: string;
   overflow?: string;
   filter?: string;
+  webkit_line_clamp?: string;
+  webkit_box_orient?: string;
 } & TypographyCustomType &
   WordWrapTypes;