@transferwise/components 0.0.0-experimental-27bf250 → 0.0.0-experimental-bbf9517

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -225,24 +225,27 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
- * It's also possible to override the default icon's accessible name announced by screen readers
- * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
-          Your travel account is set up and ready to use.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
-          Connect Wise with your taxi app to get exclusive discounts.
+        <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
+          This prompt uses default Icon, but with a custom label for screen readers.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+        <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
-          The identity document you provided has expired.
+        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
       </>
     );

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
@@ -91,11 +92,22 @@ describe('InlinePrompt', () => {
           });
         }
 
-        it('should allow for customisation of aria label', () => {
+        it('should allow for customisation of aria label for StatusIcon', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
           expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
         });
 
+        it('should allow for customisation of aria label for a custom Icon', () => {
+          render(
+            <InlinePrompt
+              {...defaultProps}
+              sentiment={sentiment}
+              media={<Clock title={mediaLabel} />}
+            />,
+          );
+          expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
+        });
+
         it('should retain custom label while muted', () => {
           render(
             <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,

package/src/tile/Tile.test.tsx

@@ -17,16 +17,6 @@ describe(Tile, () => {
     jest.clearAllMocks();
   });
 
-  it('matches snapshot when regular size', () => {
-    const { asFragment } = render(<Tile {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('matches snapshot when small size', () => {
-    const { asFragment } = render(<Tile size={Size.SMALL} {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('calls onClick when anchor is clicked', () => {
     render(<Tile {...defaultProps} />);
 

package/src/tooltip/Tooltip.test.tsx

@@ -4,16 +4,6 @@ import { userEvent } from '@testing-library/user-event';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
-  it('renders an empty list when no items are passed', () => {
-    expect(
-      render(
-        <Tooltip label="Test Tooltip">
-          <span>Hover me</span>
-        </Tooltip>,
-      ).container,
-    ).toMatchSnapshot();
-  });
-
   it('initially is hidden (test with toBeInTheDocument)', () => {
     render(
       <Tooltip label="Test Tooltip">

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.test.js.snap

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`AccordionItem open / close renders an item closed 1`] = `
-<div>
-  <div
-    class="np-accordion-item"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="false"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color bottom"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`AccordionItem open / close renders an item open 1`] = `
-<div>
-  <div
-    class="np-accordion-item np-accordion-item--open"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="true"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color top"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-    <div
-      aria-labelledby="test-accordion-control"
-      id="test-accordion-section"
-      role="region"
-    >
-      <span
-        class="np-text-body-large np-accordion-item__content d-block"
-      >
-        Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
-      </span>
-    </div>
-  </div>
-</div>
-`;

package/src/accordion/__snapshots__/Accordion.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Accordion defaults renders an empty list when no items are passed 1`] = `<div />`;

package/src/actionButton/__snapshots__/ActionButton.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ActionButton by default renders the button 1`] = `
-<div>
-  <button
-    class="np-action-btn np-text-body-default-bold btn-priority-1"
-    type="button"
-  >
-    Personal profile
-  </button>
-</div>
-`;

package/src/avatarWrapper/__snapshots__/AvatarWrapper.test.tsx.snap

@@ -1,156 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <img
-      alt=""
-      src="https://wise.com"
-    />
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-briefcase "
-      data-testid="briefcase-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M9.01 3A1.01 1.01 0 0 0 8 4.01V7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3V4.01A1.01 1.01 0 0 0 14.99 3zM14 7V5h-4v2zm-4 2h4v9h-4zM8 9H5v9h3zm8 9V9h3v9z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-person "
-      data-testid="person-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
-<div
-  class="tw-badge tw-badge-border-light tw-badge-lg"
->
-  <div
-    class="tw-badge__children"
-  >
-    <div
-      class="tw-avatar tw-avatar--48 tw-avatar--icon"
-    >
-      <div
-        class="tw-avatar__content"
-      >
-        <span
-          class="tw-icon tw-icon-person "
-          data-testid="person-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="none"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    class="tw-badge__content"
-  >
-    <img
-      alt="badge alt text"
-      src="https://badge.com"
-    />
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-person "
-      data-testid="person-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;

package/src/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Checkbox renders the given label 1`] = `
-<div>
-  <div
-    class="np-checkbox checkbox"
-  >
-    <label
-      class="np-checkbox-label"
-    >
-      <span
-        class="np-checkbox-button p-r-2"
-      >
-        <input
-          type="checkbox"
-        />
-        <span
-          class="tw-checkbox-button"
-        >
-          <span
-            class="tw-checkbox-check"
-          />
-          <span
-            class="np-tw-checkbox-indeterminate"
-          />
-        </span>
-      </span>
-      <span
-        class="np-text-body-large np-checkbox__text"
-      >
-        <span>
-          <b>
-            hello
-          </b>
-        </span>
-      </span>
-    </label>
-  </div>
-</div>
-`;

package/src/chevron/__snapshots__/Chevron.test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Chevron custom xs icon renders 1`] = `
-<div>
-  <span
-    aria-hidden="true"
-    class="tw-icon tw-icon-chevron tw-chevron chevron-color bottom"
-    role="presentation"
-  >
-    <svg
-      fill="currentColor"
-      focusable="false"
-      height="10"
-      viewBox="0 0 10 10"
-      width="10"
-    >
-      <path
-        d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </span>
-</div>
-`;

package/src/chips/__snapshots__/Chips.test.tsx.snap

@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Chips Choice Chips renders as expected 1`] = `
-<div>
-  <div
-    aria-label="Please select a category"
-    class="np-chips d-flex"
-    role="radiogroup"
-  >
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="radio"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Accounting
-      </div>
-    </div>
-    <div
-      aria-checked="true"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap np-chip--selected"
-      role="radio"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Payroll
-      </div>
-    </div>
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="radio"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Reporting
-      </div>
-    </div>
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="radio"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Payments
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Chips Filter Chips renders as expected 1`] = `
-<div>
-  <div
-    aria-label="Filter by categories"
-    class="np-chips d-flex"
-    role="group"
-  >
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="checkbox"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Accounting
-      </div>
-    </div>
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="checkbox"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Payroll
-      </div>
-    </div>
-    <div
-      aria-checked="false"
-      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
-      role="checkbox"
-      tabindex="0"
-    >
-      <div
-        aria-hidden="false"
-        class="np-text-body-default-bold"
-      >
-        Reporting
-      </div>
-    </div>
-    <div
-      aria-checked="true"
-      class="np-chip d-flex align-items-center justify-content-between np-chip--removable text-xs-nowrap np-chip--selected p-r-1"
-      role="checkbox"
-      tabindex="-1"
-    >
-      <div
-        aria-hidden="true"
-        class="np-text-body-default-bold"
-      >
-        Payments
-      </div>
-      <button
-        aria-label="Clear Payments"
-        class="np-close-button close btn-link text-no-decoration btn-unstyled"
-        type="button"
-      >
-        <span
-          class="tw-icon tw-icon-cross-circle-fill "
-          data-testid="cross-circle-fill-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            role="none"
-            viewBox="0 0 24 24"
-            width="16"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-4.707-6.707L10.586 12 7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/src/common/RadioButton/__snapshots__/RadioButton.test.tsx.snap

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Radio button renders checked state correctly 1`] = `
-<div>
-  <input
-    checked=""
-    class="sr-only"
-    name="radio-name"
-    type="radio"
-    value=""
-  />
-  <span
-    class="tw-radio-button checked"
-  >
-    <span
-      class="tw-radio-check"
-    />
-  </span>
-</div>
-`;
-
-exports[`Radio button renders correctly 1`] = `
-<div>
-  <input
-    class="sr-only"
-    id="an-id"
-    name="a-name"
-    type="radio"
-    value="a-value"
-  />
-  <span
-    class="tw-radio-button"
-  >
-    <span
-      class="tw-radio-check"
-    />
-  </span>
-</div>
-`;
-
-exports[`Radio button renders disabled state correctly 1`] = `
-<div>
-  <input
-    class="sr-only"
-    disabled=""
-    name="radio-name"
-    type="radio"
-    value=""
-  />
-  <span
-    class="tw-radio-button disabled"
-  >
-    <span
-      class="tw-radio-check"
-    />
-  </span>
-</div>
-`;