@transferwise/components 46.126.0 → 46.127.1

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface/Tests',
+  title: 'Content/SentimentSurface/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof SentimentSurface>;
 
@@ -124,3 +124,50 @@ export const ButtonsAcrossThemes: Story = {
     </div>
   ),
 };
+
+export const NeutralSentimentOnNeutralBackground: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <SentimentSurface
+        sentiment="neutral"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+      <SentimentSurface
+        sentiment="neutral"
+        emphasis="elevated"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+    </div>
+  ),
+};

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>
-`;