@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-a41b256

package/src/header/Header.tsx

@@ -1,102 +1,155 @@
 import { clsx } from 'clsx';
 
-import { ActionButtonProps } from '../actionButton/ActionButton';
-import Button from '../button';
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
 import Link from '../link';
+import Button from '../button';
 import Title from '../title';
-import { HTMLAttributes } from 'react';
+import React, { useEffect, useRef, FunctionComponent } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
+  onClick?: () => void;
 };
 
-type ButtonActionProps = ActionProps & ActionButtonProps;
-
+type ButtonActionProps = ActionProps;
 type LinkActionProps = ActionProps & LinkProps;
 
-export type HeaderProps = CommonProps & {
+export interface HeaderProps extends CommonProps {
   /**
-   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
+   * Optional prop to define the action for the header. If the `href` property
+   * is provided, a `Link` will be rendered instead of a `Button`.
    */
   action?: ButtonActionProps | LinkActionProps;
+
   /**
-   * Override the heading element rendered for the title, useful to specify the semantics of your header.
+   * Option prop to specify DOM render element of the title
+   *
+   * - When `as="legend"`, the `Header` will render as a `<legend>` element.
+   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.
+   *   If this condition is not met, a warning will be logged to the console.
+   *   Additionally, the `action` prop is not supported when `as="legend"`.
    *
-   * @default "h5"
+   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
    */
   as?: Heading | 'legend' | 'header';
+
+  /** Required prop to set the title of the Header. */
   title: string;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
-const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
-  const props = {
-    'aria-label': action['aria-label'],
-  };
+  /** Optional prop to specify the level of the Header */
+  level?: 'section' | 'group';
 
-  if ('href' in action) {
-    return (
-      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
-        {action.text}
-      </Link>
-    );
-  }
-
-  return (
-    <Button
-      className="np-header__button"
-      priority="tertiary"
-      size="sm"
-      onClick={action.onClick}
-      {...props}
-    >
-      {action.text}
-    </Button>
-  );
-};
+  className?: string;
+  testId?: string;
+}
 
 /**
+ * Renders a header action which can be either a button or a link.
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
+ * @param {Object} props - The properties object.
+ * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
+ * @returns {JSX.Element} The rendered header action component.
  */
-export const Header = ({
-  id,
-  action,
-  as = 'h5',
-  title,
-  className,
-  role = undefined,
-}: HeaderProps) => {
-  if (!action) {
+const HeaderAction = React.forwardRef(
+  (
+    { action }: { action: ButtonActionProps | LinkActionProps },
+    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
+  ) => {
+    const { 'aria-label': ariaLabel, text, onClick } = action;
+
+    if ('href' in action) {
+      const { href, target, onClick: linkOnClick } = action;
+      return (
+        <Link
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          target={target}
+          aria-label={ariaLabel}
+          onClick={linkOnClick}
+        >
+          {text}
+        </Link>
+      );
+    }
+
     return (
-      <Title
-        as={as}
-        id={id}
-        role={role}
-        type={Typography.TITLE_GROUP}
-        className={clsx('np-header', 'np-header__title', className)}
+      <Button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        className="np-header__button"
+        priority="tertiary"
+        size="sm"
+        aria-label={ariaLabel}
+        onClick={onClick}
       >
-        {title}
-      </Title>
+        {text}
+      </Button>
     );
-  }
+  },
+);
 
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+HeaderAction.displayName = 'HeaderAction';
+
+/**
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
+ * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
+ * @param {string} title - Required prop to set the title of the section header.
+ * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
+ * @param {string} [className]
+ * @param {string} [testId]
+ *
+ * @see {@link Header } for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
+ */
+const Header: FunctionComponent<HeaderProps> = React.forwardRef(
+  (
+    { as = 'h5', action, className, testId, title, level = 'group', ...props },
+    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
+  ) => {
+    const internalRef = useRef<HTMLLegendElement>(null);
+    const levelTypography =
+      level === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
+    const headerClasses = clsx('np-header', className, {
+      'np-header--section': level === 'section',
+      'np-header__title': !action || as === 'legend',
+    });
+
+    const commonProps = {
+      className: headerClasses,
+      'data-testid': testId,
+    };
+
+    useEffect(() => {
+      if (as === 'legend' && internalRef.current) {
+        const { parentElement } = internalRef.current;
+        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+          console.warn(
+            'Legends should be the first child in a fieldset, and this is not possible when including an action',
+          );
+        }
+      }
+    }, [as]);
+
+    if (!action || as === 'legend') {
+      return (
+        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>
+          {title}
+        </Title>
+      );
+    }
+
+    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();
+
+    return (
+      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+        <Title as={as} type={levelTypography} className="np-header__title">
+          {title}
+        </Title>
+        <HeaderAction ref={actionRef} action={action} />
+      </div>
     );
-  }
-
-  return (
-    <div className={clsx('np-header', className)}>
-      <Title as={as} type={Typography.TITLE_GROUP} id={id} className="np-header__title">
-        {title}
-      </Title>
-      <HeaderAction action={action} />
-    </div>
-  );
-};
+  },
+);
+
+Header.displayName = 'Header';
 
 export default Header;

package/src/header/index.ts

@@ -1 +1,2 @@
 export { default } from './Header';
+export type { HeaderProps } from './Header';

package/src/i18n/cs.json

@@ -9,35 +9,52 @@
   "neptune.DateInput.year.label": "Rok",
   "neptune.DateInput.year.placeholder": "RRRR",
   "neptune.DateLookup.day": "den",
-  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.goTo20YearView": "Přejít na zobrazení 20 let",
   "neptune.DateLookup.month": "měsíc",
   "neptune.DateLookup.next": "další",
   "neptune.DateLookup.previous": "předchozí",
   "neptune.DateLookup.selected": "vybráno",
   "neptune.DateLookup.twentyYears": "20 let",
   "neptune.DateLookup.year": "rok",
-  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.FlowNavigation.back": "zpět na předchozí krok",
   "neptune.Info.ariaLabel": "Více informací",
-  "neptune.Link.opensInNewTab": "(opens in new tab)",
+  "neptune.Label.optional": "(Volitelné)",
+  "neptune.Link.opensInNewTab": "(otevře se v nové kartě)",
   "neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Vybrat měnu",
+  "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
+  "neptune.SelectOption.action.label": "Vybrat",
+  "neptune.SelectOption.selected.action.label": "Změnit zvolenou možnost",
+  "neptune.StatusIcon.iconLabel.error": "Chyba:",
+  "neptune.StatusIcon.iconLabel.information": "Informace:",
+  "neptune.StatusIcon.iconLabel.pending": "Vyřizuje se:",
+  "neptune.StatusIcon.iconLabel.success": "Úspěšné:",
+  "neptune.StatusIcon.iconLabel.warning": "Upozornění:",
   "neptune.Summary.statusDone": "Položka dokončena",
   "neptune.Summary.statusNotDone": "Položka k dokončení",
   "neptune.Summary.statusPending": "Čekající položka",
+  "neptune.Table.actionHeader": "Akce",
+  "neptune.Table.emptyData": "Nebyly nalezeny žádné výsledky",
+  "neptune.Table.loaded": "Data tabulky byla načtena",
+  "neptune.Table.loading": "Data tabulky se načítají",
+  "neptune.Table.refreshPage": "Aktualizovat stránku",
   "neptune.Upload.csButtonText": "Nahrát další soubor?",
   "neptune.Upload.csFailureText": "Nahrání se nezdařilo. Zkuste to prosím později",
   "neptune.Upload.csSuccessText": "Úspěšně nahráno!",
-  "neptune.Upload.csTooLargeMessage": "Soubor musí být menší než {maxSize}MB",
+  "neptune.Upload.csTooLargeMessage": "Nahrajte soubor menší než {maxSize} MB",
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
+  "neptune.Upload.retry": "Opakovat",
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
   "neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
-  "neptune.Upload.usPlaceholder": "Přetáhněte a pusťte sem soubor menší než {maxSize}MB",
+  "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
   "neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
   "neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
+  "neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Nahrát soubor",
   "neptune.UploadButton.uploadFiles": "Nahrát soubory",
   "neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",

package/src/i18n/nl.json

@@ -0,0 +1,73 @@
+{
+  "neptune.Button.loadingAriaLabel": "laden",
+  "neptune.Chips.ariaLabel": "{choice} wissen",
+  "neptune.ClearButton.ariaLabel": "Wissen",
+  "neptune.CloseButton.ariaLabel": "Sluiten",
+  "neptune.DateInput.day.label": "Dag",
+  "neptune.DateInput.day.placeholder": "DD",
+  "neptune.DateInput.month.label": "Maand",
+  "neptune.DateInput.year.label": "Jaar",
+  "neptune.DateInput.year.placeholder": "JJJJ",
+  "neptune.DateLookup.day": "dag",
+  "neptune.DateLookup.goTo20YearView": "Naar 20-jaarsoverzicht",
+  "neptune.DateLookup.month": "maand",
+  "neptune.DateLookup.next": "volgende",
+  "neptune.DateLookup.previous": "vorige",
+  "neptune.DateLookup.selected": "geselecteerd",
+  "neptune.DateLookup.twentyYears": "20 jaar",
+  "neptune.DateLookup.year": "jaar",
+  "neptune.FlowNavigation.back": "terug naar vorige stap",
+  "neptune.Info.ariaLabel": "Meer informatie",
+  "neptune.Label.optional": "(Optioneel)",
+  "neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
+  "neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
+  "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
+  "neptune.Select.searchPlaceholder": "Zoeken...",
+  "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
+  "neptune.SelectOption.action.label": "Kiezen",
+  "neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
+  "neptune.StatusIcon.iconLabel.error": "Fout:",
+  "neptune.StatusIcon.iconLabel.information": "Informatie:",
+  "neptune.StatusIcon.iconLabel.pending": "In behandeling:",
+  "neptune.StatusIcon.iconLabel.success": "Gelukt:",
+  "neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
+  "neptune.Summary.statusDone": "Item klaar",
+  "neptune.Summary.statusNotDone": "Item te doen",
+  "neptune.Summary.statusPending": "Item in behandeling",
+  "neptune.Table.actionHeader": "Actie",
+  "neptune.Table.emptyData": "Geen resultaten gevonden",
+  "neptune.Table.loaded": "Tabelgegevens zijn geladen",
+  "neptune.Table.loading": "Tabelgegevens worden geladen",
+  "neptune.Table.refreshPage": "Pagina vernieuwen",
+  "neptune.Upload.csButtonText": "Nog een bestand uploaden?",
+  "neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
+  "neptune.Upload.csSuccessText": "Uploaden voltooid!",
+  "neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
+  "neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
+  "neptune.Upload.psButtonText": "Annuleren",
+  "neptune.Upload.psProcessingText": "Uploaden...",
+  "neptune.Upload.retry": "Opnieuw proberen",
+  "neptune.Upload.usButtonText": "Of selecteer een bestand",
+  "neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
+  "neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
+  "neptune.UploadButton.allFileTypes": "Alle bestandstypen",
+  "neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
+  "neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",
+  "neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
+  "neptune.UploadButton.uploadFile": "Bestand uploaden",
+  "neptune.UploadButton.uploadFiles": "Bestanden uploaden",
+  "neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
+  "neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
+  "neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
+  "neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",
+  "neptune.UploadInput.fileIsTooLarge": "Bestand is te groot",
+  "neptune.UploadInput.fileTypeNotSupported": "Bestandstype niet ondersteund",
+  "neptune.UploadInput.maximumFilesAlreadyUploaded": "Deze upload is mislukt omdat we maar {maxFilesAllowed} bestanden tegelijk kunnen accepteren.",
+  "neptune.UploadItem.deleting": "Verwijderen...",
+  "neptune.UploadItem.removeFile": "Bestand {filename} verwijderen",
+  "neptune.UploadItem.uploaded": "Geüpload",
+  "neptune.UploadItem.uploadedFile": "Geüpload bestand",
+  "neptune.UploadItem.uploading": "Uploaden...",
+  "neptune.UploadItem.uploadingFailed": "Uploaden mislukt"
+}

package/src/index.ts

@@ -31,6 +31,8 @@ export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
+export type { DividerProps } from './divider';
+export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -108,7 +110,6 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type { ItemProps, ItemAdditionalInfoProps, ItemCheckboxProps } from './item';
 
 /**
  * Components
@@ -144,6 +145,7 @@ export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';
 export { default as Display } from './display';
+export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';
@@ -210,7 +212,6 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
-export { default as Item } from './table';
 
 /**
  * Hooks

package/src/info/Info.css

@@ -1,28 +1,5 @@
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;

package/src/info/Info.less

@@ -1,35 +1,7 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-
-  button,
-  [data-toggle="popover"]:not(.btn) {
-    .ring-offset-0();
-
-    height: 16px;
-    overflow: hidden;
-    display: inline-block;
-  }
-
-  &__large {
-    height: 24px;
-
-    button,
-    [data-toggle="popover"]:not(.btn) {
-      height: 24px;
-      display: inline-block;
-    }
-  }
-
-  .tw-icon {
-    cursor: pointer;
-    color: var(--color-interactive-primary);
-    display: inline-block;
-  }
 
   [data-toggle="popover"]:not(.btn) {
     // Bootstrap popover has !important dotted border bottom

package/src/info/Info.tsx

@@ -9,6 +9,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
 
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
+import IconButton, { IconButtonProps } from '../iconButton';
 
 export interface InfoProps {
   'aria-label'?: string;
@@ -53,25 +54,19 @@ const Info = ({
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
-  const isSmall = size === Size.SMALL;
 
-  const buttonProps = {
+  const buttonProps: IconButtonProps = {
     'aria-label': ariaLabel,
-    className: 'btn-unstyled',
-    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,
+    priority: 'minimal',
+    size: 24,
+    children: <HelpCircleIcon />,
   };
 
   return (
-    <span
-      className={clsx(className, 'np-info', {
-        'np-info__small': isSmall,
-        'np-info__large': !isSmall,
-      })}
-    >
+    <span className={clsx(className, 'np-info')}>
       {isModal ? (
         <>
-          <button
-            type="button"
+          <IconButton
             onClick={() => {
               setOpen(!open);
               if (onClick) {
@@ -84,8 +79,7 @@ const Info = ({
         </>
       ) : (
         <Popover content={content} preferredPlacement={preferredPlacement} title={title}>
-          <button
-            type="button"
+          <IconButton
             {...buttonProps}
             onClick={() => {
               if (onClick) {

package/src/inputs/Input.tsx

@@ -31,7 +31,6 @@ export const Input = forwardRef(function Input(
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
-      // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
       {...inputAttributes}
       {...restProps}

package/src/inputs/SelectInput.tsx

@@ -629,13 +629,7 @@ function SelectInputOptions<T = string>({
   const getItemNode = (index: number) => {
     const item = filteredItems[index];
     return (
-      <SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        item={item}
-        renderValue={renderValue}
-        needle={needle}
-      />
+      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />
     );
   };
 

package/src/inputs/_ButtonInput.tsx

@@ -19,7 +19,6 @@ export const ButtonInput = forwardRef(function ButtonInput(
       ref={ref}
       type="button"
       className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
-      // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

package/src/inputs/_Popover.tsx

@@ -113,7 +113,6 @@ export function Popover({
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
-                  // eslint-disable-next-line react/forbid-dom-props
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >

package/src/link/Link.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
 import Body from '../body/Body';
 import { Typography } from '../common';
 import Title from '../title/Title';

package/src/listItem/ListItem.story.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable react/jsx-child-element-spacing */
-
 import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button } from '..';
+import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
@@ -94,14 +92,9 @@ export const Variants = () => {
             title="Account number"
             value="123456789"
             action={
-              <button
-                type="button"
-                aria-label="Copy"
-                style={{ background: 'none', border: 0 }}
-                onClick={() => action('clicked')}
-              >
-                <Documents size="24" />
-              </button>
+              <IconButton size={24} aria-label="Copy" priority="minimal">
+                <Documents />
+              </IconButton>
             }
           />
         </List>

package/src/listItem/ListItem.tests.story.tsx

@@ -0,0 +1,52 @@
+import { FastFlag } from '@transferwise/icons';
+import Button from '../button';
+import AvatarView from '../avatarView';
+import ListItem, { List, type ListItemProps } from '.';
+
+export default {
+  component: ListItem,
+  title: 'Other/ListItem/tests',
+};
+
+export const LongText = () => {
+  const sharedProps: Partial<ListItemProps> = {
+    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
+    action: (
+      <Button v2 size="sm" onClick={() => {}}>
+        Action
+      </Button>
+    ),
+  };
+
+  return (
+    <div style={{ width: '35rem' }}>
+      <List>
+        <ListItem
+          {...sharedProps}
+          title="Default behaviour"
+          value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Wrapping the long word with a 'span.text-word-break'"
+          value={
+            <>
+              {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
+              <span className="text-word-break">
+                breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+              </span>
+              {' word.'}
+            </>
+          }
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Using '&amp;shy;' HTML entitty"
+          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        />
+      </List>
+    </div>
+  );
+};

package/src/listItem/ListItem.tsx

@@ -39,7 +39,7 @@ const ListItem: FC<ListItemProps> = ({
           {title}
         </Body>
         {value && (
-          <Body type="body-large" className="text-primary m-b-0">
+          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
             {value}
           </Body>
         )}