@transferwise/components 46.94.2 → 46.95.1

package/src/divider/Divider.story.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Divider from './Divider';
+
+/**
+ * Wraps stories with a container (e.g., centered or padded).
+ * Adjust styles to your needs.
+ */
+const withContainer = (Story: any) => (
+  <div style={{ padding: '1rem' }}>
+    <Story />
+  </div>
+);
+
+/**
+ * Not all stories need access to all controls as it causes unnecessary UI noise.
+ */
+const hideControls = (args: string[]) => {
+  const hidden = ['level', 'as', 'className', 'testId', ...args];
+
+  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
+};
+
+/**
+ * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
+ * levels allow customization for different visual separation needs.
+ *
+ * For more details, please refer to the [design documentation](https://wise.design/components/divider).
+ */
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+  title: 'Layouts/Divider',
+  tags: ['autodocs'],
+  decorators: [withContainer],
+  parameters: {
+    actions: { argTypesRegex: null },
+  },
+  argTypes: {
+    level: {
+      control: 'select',
+      options: ['section', 'subsection', 'content'],
+      description: 'Choose the Divider level.',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'section' },
+      },
+    },
+    isContent: {
+      control: 'boolean',
+      description: 'Render as a semantic <hr> (true) or non-semantic <div> (false).',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    className: {
+      description: 'Add custom class names to the Divider.',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'string' },
+      },
+    },
+    testId: {
+      description: 'Add a data-testid attribute for testing.',
+      table: {
+        category: 'Testing',
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    isContent: false,
+    className: '',
+    testId: '',
+    level: 'section',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Playground: Story = {
+  args: {
+    level: 'section',
+  },
+  tags: ['!autodocs'],
+};
+
+/**
+ * There are three different types of divider – `section`, `subsection`, and `content` –
+ * each designed to visually separate or group content. <br />
+ * [Design documentation](https://wise.design/components/divider)
+ */
+export const Level: Story = {
+  argTypes: {
+    ...hideControls(['testId', 'className', 'isContent']),
+  },
+  args: {
+    level: 'section',
+  },
+};
+
+/**
+ * The `isContent` prop determines whether the divider is rendered as a semantic `<hr>` or a non-semantic `<div>`.
+ */
+export const ContentDivider: Story = {
+  argTypes: {
+    ...hideControls(['level', 'testId', 'className']),
+  },
+  args: {
+    isContent: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: function Render() {
+    return (
+      <>
+        <Divider level="section" />
+        <Divider level="subsection" />
+        <Divider level="content" />
+      </>
+    );
+  },
+  argTypes: {
+    ...hideControls(['level', 'testId', 'className', 'isContent']),
+  },
+  tags: ['!autodocs'],
+};

package/src/divider/Divider.tsx

@@ -0,0 +1,54 @@
+import { clsx } from 'clsx';
+import React, { FunctionComponent } from 'react';
+
+export interface DividerProps {
+  /**
+   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
+   * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
+   * @default false
+   */
+  isContent?: boolean;
+
+  /**
+   * Alters the visual style of the divider, accommodating different types
+   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
+   * @default 'section'
+   */
+  level?: 'section' | 'subsection' | 'content';
+
+  className?: string;
+  testId?: string;
+}
+
+/**
+ * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role="presentation">`.
+ * @param {string} [className] - Optional class names for adding custom styling to the divider.
+ * @param {string} [testId] - Provides a `data-testid` for testing frameworks.
+ * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.
+ *
+ * @see {@link Divider} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
+ */
+const Divider: FunctionComponent<DividerProps> = ({
+  className,
+  isContent = false,
+  testId,
+  level = 'section',
+  ...props
+}) => {
+  const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
+
+  const commonProps = {
+    className: clsx('wds-Divider', levelClass, className),
+    'data-testid': testId,
+  };
+
+  const divProps = {
+    ...commonProps,
+    role: 'presentation',
+  };
+
+  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;
+};
+
+export default Divider;

package/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Divider';
+export type { DividerProps } from './Divider';

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/index.ts

@@ -31,6 +31,7 @@ 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 { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -143,6 +144,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';

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>
         )}

package/src/main.css

@@ -1782,7 +1782,7 @@ button.np-option {
   max-width: fit-content;
 }
 @media (max-width: 480px) {
-  .np-theme-personal .np-option-additional-content {
+  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);
   }
@@ -2281,6 +2281,30 @@ button.np-option {
     padding: var(--size-24);
   }
 }
+.wds-Divider {
+  --Divider-border-width: 4px;
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: 4px;
+  --Divider-dash-spacing: 4px;
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}
 .np-dropfade,
 .np-dropfade-enter {
   opacity: 0;

package/src/main.less

@@ -30,6 +30,7 @@
 @import "./definitionList/DefinitionList.less";
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
+@import "./divider/Divider.less";
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";

package/src/summary/Summary.tests.story.tsx

@@ -0,0 +1,55 @@
+import { Home as HomeIcon } from '@transferwise/icons';
+import { Status } from '../common';
+import Summary, { type SummaryProps } from '.';
+
+export default {
+  component: Summary,
+  title: 'Content/Summary/tests',
+};
+
+export const LongText = () => {
+  const sharedProps: Partial<SummaryProps> = {
+    action: {
+      text: 'Change address',
+      href: '#change-address',
+      'aria-label': ' Click here to change address',
+    },
+    as: 'li',
+    icon: <HomeIcon size={24} />,
+    status: Status.NOT_DONE,
+    info: {
+      title: 'Title',
+    },
+  };
+  return (
+    <ul style={{ width: '34rem' }}>
+      <Summary
+        title="Default behaviour"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Wrapping the long word with a 'span.text-word-break'"
+        description={
+          <>
+            {
+              'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
+            }
+            <span className="text-word-break">
+              breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+            </span>
+            {' word.'}
+          </>
+        }
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Using '&amp;shy;' HTML entitty"
+        description="This is a test of a a very long word dontbreakme dontbreakme 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."
+        {...sharedProps}
+      />
+    </ul>
+  );
+};

package/src/summary/Summary.tsx

@@ -142,7 +142,7 @@ const Summary = ({
             role="heading"
             aria-level={6}
             type={Typography.BODY_LARGE_BOLD}
-            className="text-primary m-b-1"
+            className="text-primary text-overflow-wrap m-b-1"
           >
             {title}
           </Body>
@@ -163,7 +163,7 @@ const Summary = ({
           <Body
             as="span"
             type={Typography.BODY_DEFAULT}
-            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
+            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
           >
             {description}
           </Body>

package/src/upload/Upload.spec.tsx

@@ -184,7 +184,9 @@ describe('Upload Component', () => {
 
     await waitForUpload();
 
-    expect(await screen.findByText(/File type not supported. Please try again with a different file/i)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/File type not supported. Please try again with a different file/i),
+    ).toBeInTheDocument();
   });
 
   test('should handle canceling the upload', async () => {

package/src/upload/steps/completeStep/completeStep.tsx

@@ -1,6 +1,6 @@
 import { Document as DocumentIcon } from '@transferwise/icons';
 
-import { Typography } from '../../..';
+import { Typography } from '../../../common';
 import Body from '../../../body';
 import Button from '../../../button';
 import Title from '../../../title';

package/src/upload/steps/processingStep/processingStep.spec.tsx

@@ -27,7 +27,7 @@ describe('ProcessingStep', () => {
       expect(processing).toBeInTheDocument();
     });
   });
-  
+
   test('renders ProcessIndicator with default status', () => {
     expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
   });

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -66,11 +66,11 @@ describe('uploadImageStep', () => {
     const errorIconLabel = 'Error icon label';
     const errorMessage = 'Maximum filesize is 2MB.';
     const { container } = render(
-      <UploadImageStep 
-        {...UPLOADIMAGE_STEP_PROPS} 
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
         errorMessage={errorMessage}
-        errorIconLabel={errorIconLabel} 
-      />
+        errorIconLabel={errorIconLabel}
+      />,
     );
 
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();