@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

package/src/common/Option/Option.css

@@ -110,7 +110,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);
   }

package/src/common/Option/Option.less

@@ -101,11 +101,11 @@ button.np-option {
       margin-right: var(--size-16);
       margin-top: -10px;
       padding-bottom: var(--size-16);
-      max-width:fit-content
+      max-width:fit-content;
   }
 
   @media (max-width: 480px) {
-    .np-option-additional-content  {
+    :not(.np-option__sm-media) > .np-option-additional-content {
       margin-left: var(--size-16);
     }
   }

package/src/common/Option/Option.tsx

@@ -105,7 +105,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
           <div className="media-right">{button}</div>
         </div>
         {additionalContent ? (
-          <div className="np-option-additional-content"> {additionalContent} </div>
+          <div className="np-option-additional-content">{additionalContent}</div>
         ) : null}
       </Element>
     );

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -2,7 +2,6 @@ import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 mockMatchMedia();
 
 describe('BottomSheet', () => {

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -19,8 +19,8 @@ export default {
     open: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(args.open);
+
     return (
       <div style={{ height: '2000px' }}>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -201,7 +201,6 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         position={Position.BOTTOM}
         className={clsx('np-bottom-sheet', props.className)}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
           aria-labelledby={props['aria-labelledby'] || undefined}

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -52,7 +52,7 @@ exports[`BottomSheet renders content when open 1`] = `
                       width="16"
                     >
                       <path
-                        d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                        d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
                       />
                     </svg>
                   </span>

package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`CloseButton renders as expected 1`] = `
         width="24"
       >
         <path
-          d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+          d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
         />
       </svg>
     </span>

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -1,11 +1,13 @@
 export const isDateValid = (date: Date | string | null) => {
   if (date === null) {
     return false;
-  } else if (date instanceof Date) {
+  }
+
+  if (date instanceof Date) {
     return validDateObject(date);
-  } else {
-    return validDateString(date);
   }
+
+  return validDateString(date);
 };
 
 export const validDateString = (dateString: string) => validDateObject(new Date(dateString));

package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js

@@ -65,7 +65,6 @@ describe('useHasIntersected', () => {
       });
 
       it('calls observer', () => {
-        // eslint-disable-next-line jest/prefer-spy-on
         window.IntersectionObserver = jest.fn(() => ({
           observe,
           unobserve,
@@ -107,7 +106,6 @@ describe('useHasIntersected', () => {
   });
 
   const setupIntersectionObserver = (isIntersecting) => {
-    // eslint-disable-next-line jest/prefer-spy-on
     window.IntersectionObserver = jest.fn((callback) => {
       callback([{ isIntersecting }], { unobserve });
       return {

package/src/common/locale/index.ts

@@ -1,4 +1,4 @@
-import { Direction } from '..';
+import { Direction } from '../direction';
 
 export const DEFAULT_LANG = 'en';
 export const DEFAULT_LOCALE = 'en-GB';

package/src/common/panel/Panel.tsx

@@ -119,26 +119,15 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
         {...rest}
         ref={setPopperElement}
         role="dialog"
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
-        <div
-          ref={reference}
-          /* eslint-disable-next-line react/forbid-dom-props */
-          style={contentStyle}
-          className={clsx('np-panel__content')}
-        >
+        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
           {arrow && (
-            <div
-              ref={setArrowElement}
-              className={clsx('np-panel__arrow')}
-              // eslint-disable-next-line react/forbid-dom-props
-              style={styles.arrow}
-            />
+            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
           )}
         </div>
       </div>

package/src/dateInput/DateInput.tsx

@@ -2,7 +2,13 @@ import { clsx } from 'clsx';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import Body from '../body';
+import { Input } from '../inputs/Input';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputProps,
+} from '../inputs/SelectInput';
 import {
   DateMode,
   MonthFormat,

package/src/dateLookup/DateLookup.css

@@ -91,8 +91,3 @@
 .np-theme-personal .tw-date-lookup-menu td {
   border: none;
 }
-.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
-.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
-  color: #37517e;
-  color: var(--color-content-primary);
-}

package/src/dateLookup/DateLookup.less

@@ -91,9 +91,5 @@
     td {
       border: none;
     }
-
-    .tw-date-lookup-header-current {
-      color: var(--color-content-primary);
-    }
   }
 }

package/src/dateLookup/dateHeader/DateHeader.tsx

@@ -1,13 +1,13 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import Chevron from '../../chevron';
-import { Position, Size, Typography } from '../../common';
+import { Typography } from '../../common';
 import { useLayout } from '../../common/hooks';
 import Title from '../../title';
 import messages from '../DateLookup.messages';
-
-const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
+import Button from '../../button/Button';
+import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
+import IconButton from '../../iconButton';
 
 interface DateHeaderProps {
   label?: string;
@@ -29,44 +29,42 @@ const DateHeader: React.FC<DateHeaderProps> = ({
   return (
     <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
       <div className="pull-left-single-direction">
-        <button
-          type="button"
-          className={`d-inline-flex ${buttonClasses}`}
+        <IconButton
+          size={40}
+          priority="minimal"
+          className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
           onClick={onPreviousClick}
         >
-          <Chevron
-            orientation={Position.LEFT}
-            className="left-single-direction"
-            size={Size.MEDIUM}
-          />
-        </button>
+          <ChevronLeft className="left-single-direction" />
+        </IconButton>
       </div>
       {label && (
         <Title type={Typography.TITLE_BODY} className="tw-date-lookup-header-current-container">
-          <button
+          <Button
+            v2
+            size="md"
             type="button"
-            className={`tw-date-lookup-header-current ${buttonClasses}`}
+            priority="tertiary"
+            className="tw-date-lookup-header-current"
             aria-label={intl.formatMessage(messages.goTo20YearView)}
+            addonEnd={{ type: 'icon', value: <ChevronDown /> }}
             onClick={onLabelClick}
           >
             {label}
-          </button>
+          </Button>
         </Title>
       )}
       <div className="pull-right-single-direction">
-        <button
-          type="button"
-          className={`d-inline-flex ${buttonClasses}`}
-          aria-label={`${useIntl().formatMessage(messages.next)} ${dateMode}`}
+        <IconButton
+          size={40}
+          className="d-inline-flex"
+          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}
+          priority="minimal"
           onClick={onNextClick}
         >
-          <Chevron
-            orientation={Position.RIGHT}
-            className="right-single-direction"
-            size={Size.MEDIUM}
-          />
-        </button>
+          <ChevronRight className="right-single-direction" />
+        </IconButton>
       </div>
     </div>
   );

package/src/dimmer/Dimmer.story.tsx

@@ -18,7 +18,6 @@ type Story = StoryObj<typeof Dimmer>;
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(false);
 
     return (

package/src/dimmer/dimmerManager/DimmerManager.ts

@@ -5,7 +5,7 @@ export default class DimmerManager {
   /**
    * Dimmer refs
    */
-  private dimmers: Element[];
+  private readonly dimmers: Element[];
 
   constructor() {
     this.dimmers = [];

package/src/display/Display.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/accessible-emoji */
-
 import { Typography } from '../common';
 import Money from '../money/Money';
 import Title from '../title/Title';

package/src/divider/Divider.accessibility.docs.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+
+<Meta title="Layouts/Divider/Accessibility" />
+
+# Accessibility
+
+A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
+  href="https://wise.design/components/divider"
+/>
+
+<br />
+<br />
+
+## Using `<hr />` vs `<div />`
+
+By default, our Divider is rendered as `<div role="presentation" />`. However, you can optionally set `isContent` to true, which many screen readers interpret as a “separator.”
+
+<Source dark code={`
+// By default: non-semantic divider
+<Divider isContent={false} />
+
+// Alternatively, to provide a semantic HR:
+
+<Divider isContent={true} />
+`}/>
+
+Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break or separation has occurred. However, sometimes you may not want an audible separation. In that case, using `<div>` (which omits semantic meaning) might be preferable.
+
+<br />
+
+## Levels
+
+The Divider supports levels like “section”, “subsection”, or “content” to visually change the separation style:
+
+<Source
+  dark
+  code={`
+// A few level examples
+<>
+  <Divider level="section" />
+  <Divider level="subsection" />
+  <Divider level="content" />
+</>
+`}
+/>
+
+Screen readers generally ignore these visual styling changes unless you explicitly provide more context (e.g., additional text or heading tags).
+
+<br />
+
+**Additional resources:**
+
+1. [WAI-ARIA Authoring Practices: Separator Role](https://www.w3.org/TR/wai-aria-practices-1.2/#separator)
+2. [MDN Web Docs: &lt;hr /&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)

package/src/divider/Divider.css

@@ -0,0 +1,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;
+}

package/src/divider/Divider.less

@@ -0,0 +1,31 @@
+.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: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    height: var(--Divider-border-width);
+    width: 100%;
+
+    &--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);
+    }
+
+    &--content,
+    &--subsection {
+        --Divider-border-width: 1px;
+    }
+}

package/src/divider/Divider.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Divider, { DividerProps } from './Divider';
+
+describe('Divider', () => {
+  const defaultProps: DividerProps = {
+    testId: 'test-divider',
+  };
+
+  const renderDivider = (props: Partial<DividerProps> = {}) => {
+    const utils = render(<Divider {...defaultProps} {...props} />);
+    const rerender = (newProps: Partial<DividerProps> = {}) =>
+      utils.rerender(<Divider {...defaultProps} {...newProps} />);
+    return { ...utils, rerender };
+  };
+
+  it('should render the Divider component', () => {
+    renderDivider();
+    expect(screen.getByTestId('test-divider')).toBeInTheDocument();
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider');
+  });
+
+  it('should render as a semantic <hr> when `isContent` is true', () => {
+    renderDivider({ isContent: true });
+    expect(screen.getByTestId('test-divider')).not.toHaveAttribute('role', 'presentation');
+  });
+
+  it('should render as a non-semantic <div> when `isContent` is false', () => {
+    renderDivider({ isContent: false });
+    expect(screen.getByTestId('test-divider')).toHaveAttribute('role', 'presentation');
+  });
+
+  it('should apply custom class names when provided', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('custom-class');
+
+    // Re-render with updated props
+    rerender({ className: 'custom-class' });
+    expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
+  });
+
+  it('should apply the "content" level styling', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--content');
+
+    rerender({ level: 'content' });
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider', 'wds-Divider--content');
+  });
+
+  it('should apply the "subsection" level styling', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
+
+    rerender({ level: 'subsection' });
+    expect(screen.getByTestId('test-divider')).toHaveClass(
+      'wds-Divider',
+      'wds-Divider--subsection',
+    );
+  });
+});

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;