@transferwise/components 46.125.0 → 46.127.1

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

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

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`BottomSheet renders content when open 1`] = `
-<body>
-  <div />
-  <div
-    class="np-theme-personal"
-  >
-    <span
-      data-focus-scope-start="true"
-      hidden=""
-    />
-    <div
-      tabindex="-1"
-    >
-      <div
-        class="dimmer"
-        role="presentation"
-      >
-        <div
-          class="dimmer-content-positioner"
-        >
-          <div
-            class="sliding-panel sliding-panel--open-bottom np-bottom-sheet sliding-panel-appear sliding-panel-appear-active"
-          >
-            <div
-              aria-modal="true"
-              role="dialog"
-            >
-              <div
-                class="np-bottom-sheet--top-bar"
-              >
-                <div
-                  class="np-bottom-sheet--handler"
-                />
-                <button
-                  aria-label="Close"
-                  class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
-                  type="button"
-                >
-                  <span
-                    class="tw-icon tw-icon-cross "
-                    data-testid="cross-icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      role="none"
-                      viewBox="0 0 24 24"
-                      width="16"
-                    >
-                      <path
-                        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>
-                </button>
-              </div>
-              <div
-                class="np-bottom-sheet--content"
-                style="max-height: calc(768px - 64px - 32px);"
-              >
-                <b>
-                  Test Content
-                </b>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <span
-      data-focus-scope-end="true"
-      hidden=""
-    />
-  </div>
-</body>
-`;

package/src/common/card/__snapshots__/Card.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Card matches snapshot 1`] = `
-<div
-  class="np-Card"
-  data-testid="test-card"
->
-  Test Content
-</div>
-`;

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

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`CloseButton renders as expected 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="np-close-button close btn-link text-no-decoration np-close-button--large className"
-    type="button"
-  >
-    <span
-      class="tw-icon tw-icon-cross "
-      data-testid="cross-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          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>
-  </button>
-</div>
-`;

package/src/common/flowHeader/FlowHeader.test.tsx

@@ -1,22 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { Layout } from '../propsValues/layouts';
-
-import FlowHeader from './FlowHeader';
-import type { FlowHeaderProps } from './FlowHeader';
-
-describe('FlowHeader', () => {
-  const props = {
-    leftContent: 'leftContent',
-    rightContent: 'rightContent',
-    bottomContent: 'bottomContent',
-    className: 'className',
-  } satisfies FlowHeaderProps;
-  it('renders as expected', () => {
-    expect(render(<FlowHeader {...props} />).container).toMatchSnapshot();
-  });
-
-  it('renders as expected with vertical layout', () => {
-    expect(render(<FlowHeader {...props} layout={Layout.VERTICAL} />).container).toMatchSnapshot();
-  });
-});

package/src/common/flowHeader/__snapshots__/FlowHeader.test.tsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`FlowHeader renders as expected 1`] = `
-<div>
-  <div
-    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
-  >
-    leftContent
-    rightContent
-    <div
-      class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
-    >
-      bottomContent
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FlowHeader renders as expected with vertical layout 1`] = `
-<div>
-  <div
-    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
-  >
-    leftContent
-    rightContent
-    <div
-      class="align-items-center d-flex justify-content-center flex__item--12"
-    >
-      bottomContent
-    </div>
-  </div>
-</div>
-`;

package/src/common/panel/__snapshots__/Panel.test.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Panel renders 1`] = `<div />`;

package/src/flowNavigation/__snapshots__/FlowNavigation.test.js.snap

@@ -1,262 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`FlowNavigation on mobile renders as expected 1`] = `
-<div>
-  <div
-    class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
-  >
-    <div
-      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
-    >
-      <button
-        aria-label="back to previous step"
-        aria-live="off"
-        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
-        style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
-        type="button"
-      >
-        <span
-          class="tw-icon tw-icon-arrow-left "
-          data-testid="arrow-left-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="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-      <div
-        class="m-x-1"
-        data-testid="activeLabel-1"
-      >
-        AnimatedLabel
-      </div>
-      <div
-        class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
-      >
-        <div
-          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
-          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
-        >
-          <div
-            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
-            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
-          >
-            TM
-          </div>
-        </div>
-        <span
-          class="m-x-1"
-        />
-        <button
-          aria-label="Close"
-          class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
-          type="button"
-        >
-          <span
-            class="tw-icon tw-icon-cross "
-            data-testid="cross-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                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>
-        </button>
-      </div>
-      <div
-        class="align-items-center d-flex justify-content-center flex__item--12"
-      >
-        <div
-          class="tw-stepper np-flow-navigation__stepper"
-        >
-          <div
-            class="progress"
-          >
-            <div
-              class="progress-bar"
-              data-testid="progress-bar"
-            />
-          </div>
-          <ol
-            class="tw-stepper-steps p-t-1 m-b-0"
-          >
-            <li
-              aria-current="false"
-              class="hidden-xs tw-stepper__step np-text-body-default"
-              style="left: 0%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-0
-              </span>
-            </li>
-            <li
-              aria-current="step"
-              class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
-              style="left: 50%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-1
-              </span>
-            </li>
-            <li
-              aria-current="false"
-              class="hidden-xs tw-stepper__step np-text-body-default"
-              style="left: 100%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-2
-              </span>
-            </li>
-          </ol>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigation renders as expected 1`] = `
-<div>
-  <div
-    class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
-  >
-    <div
-      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
-    >
-      <div
-        class="np-flow-header__left"
-      >
-        <img
-          alt="logo"
-          height="24"
-          src="logo.svg"
-          width="138"
-        />
-      </div>
-      <div
-        class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
-      >
-        <div
-          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
-          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
-        >
-          <div
-            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
-            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
-          >
-            TM
-          </div>
-        </div>
-        <span
-          class="m-x-1"
-        />
-        <button
-          aria-label="Close"
-          class="np-close-button close btn-link text-no-decoration np-close-button--x-large"
-          type="button"
-        >
-          <span
-            class="tw-icon tw-icon-cross "
-            data-testid="cross-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                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>
-        </button>
-      </div>
-      <div
-        class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
-      >
-        <div
-          class="tw-stepper np-flow-navigation__stepper"
-        >
-          <div
-            class="progress"
-          >
-            <div
-              class="progress-bar"
-              data-testid="progress-bar"
-              style="width: 0%;"
-            />
-          </div>
-          <ol
-            class="tw-stepper-steps p-t-1 m-b-0"
-          >
-            <li
-              aria-current="step"
-              class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
-              style="left: 0%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-0
-              </span>
-            </li>
-            <li
-              aria-current="false"
-              class="hidden-xs tw-stepper__step np-text-body-default"
-              style="left: 50%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-1
-              </span>
-            </li>
-            <li
-              aria-current="false"
-              class="hidden-xs tw-stepper__step np-text-body-default"
-              style="left: 100%;"
-            >
-              <span
-                class="tw-stepper__step-label"
-              >
-                label-2
-              </span>
-            </li>
-          </ol>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;