@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-e9dbb78

package/src/radioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,91 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { userEvent } from '@testing-library/user-event';
+import RadioGroup from '.';
+import AvatarView from '../avatarView';
+import { Field } from '../field/Field';
+
+describe('RadioGroup', () => {
+  const handleChange = jest.fn();
+  const avatar = <AvatarView profileName="High Definition" />;
+  mockMatchMedia();
+
+  const RADIOS = [
+    {
+      id: 'id-test-0',
+      value: 'value-test0',
+      label: 'Radio1',
+      secondary: 'secondary',
+      disabled: true,
+      avatar,
+    },
+    {
+      id: 'id-test-1',
+      value: 'value-test1',
+      label: 'Radio2',
+      secondary: 'secondary',
+      disabled: false,
+    },
+    {
+      id: 'id-test-2',
+      value: 'value-test2',
+      label: 'Radio3',
+      secondary: 'secondary',
+      disabled: false,
+    },
+  ];
+  it('has accessible role', () => {
+    render(
+      <RadioGroup
+        name="currency"
+        radios={[{ label: 'USD' }, { label: 'EUR' }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Currency">
+        <RadioGroup
+          name="currency"
+          radios={[{ label: 'USD' }, { label: 'EUR' }]}
+          onChange={() => {}}
+        />
+      </Field>,
+    );
+    expect(screen.getByRole('radiogroup')).toHaveAccessibleName(/^Currency/);
+  });
+
+  it('renders nothing if no radios are provided', () => {
+    render(<RadioGroup name="radio-group" radios={[]} onChange={handleChange} />);
+    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+  });
+
+  it('renders radio options', () => {
+    render(<RadioGroup name="radio-group" radios={RADIOS} onChange={handleChange} />);
+    expect(screen.getAllByRole('radio')).toHaveLength(RADIOS.length);
+    const firstRadio = screen.getByRole('radio', { name: /Radio1/i });
+    expect(firstRadio).toBeDisabled();
+  });
+
+  it('checks the specified radio value', () => {
+    render(
+      <RadioGroup
+        name="radio-group"
+        radios={RADIOS}
+        selectedValue="value-test2"
+        onChange={handleChange}
+      />,
+    );
+    const checkedRadio = screen.getByRole('radio', { name: /Radio3/i });
+    expect(checkedRadio).toBeChecked();
+  });
+
+  it('calls onChange with the selected value', async () => {
+    render(<RadioGroup name="radio-group" radios={RADIOS} onChange={handleChange} />);
+    const thirdRadio = screen.getByRole('radio', { name: /Radio3/i });
+    await userEvent.click(thirdRadio);
+    expect(handleChange).toHaveBeenCalledWith('value-test2');
+  });
+});

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,12 +1,10 @@
 import { Flag } from '@wise/art';
-
-import Avatar, { AvatarType } from '../avatar';
-
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { useState } from 'react';
+import AvatarView from '../avatarView';
 
 const meta = {
   component: RadioGroup,
@@ -52,9 +50,9 @@ export const WithAvatars = {
         ({
           ...radio,
           avatar: (
-            <Avatar type={AvatarType.THUMBNAIL}>
+            <AvatarView>
               <Flag code="NZD" />
-            </Avatar>
+            </AvatarView>
           ),
         }) satisfies RadioGroupRadio,
     ),

package/src/statusIcon/StatusIcon.less

@@ -24,7 +24,6 @@
   background-color: var(--color-sentiment-negative);
 }
 
-
 .status-circle.neutral {
   background-color: var(--color-content-secondary);
 }

package/src/statusIcon/StatusIcon.messages.ts

@@ -19,12 +19,6 @@ export default defineMessages({
     description:
       'Visually hidden label read by screen readers, describing the Warning icon – normally a prefix to remaining visible content, e.g. validation result.',
   },
-  criticalLabel: {
-    id: 'neptune.StatusIcon.iconLabel.critical',
-    defaultMessage: 'Critical:',
-    description:
-      'Visually hidden label read by screen readers, describing the Critical icon – normally a prefix to remaining visible content, e.g. validation result.',
-  },
   pendingLabel: {
     id: 'neptune.StatusIcon.iconLabel.pending',
     defaultMessage: 'Pending:',

package/src/statusIcon/StatusIcon.tsx

@@ -52,10 +52,6 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
-    [Sentiment.CRITICAL]: {
-      Icon: Alert,
-      defaultIconLabel: intl.formatMessage(messages.criticalLabel),
-    },
     [Sentiment.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
@@ -80,10 +76,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const iconColor =
-    sentiment === 'warning' || sentiment === 'pending' || sentiment === 'critical'
-      ? 'dark'
-      : 'light';
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return (

package/src/radio/Radio.rtl.spec.tsx

@@ -1,24 +0,0 @@
-import Avatar, { AvatarType } from '../avatar';
-import { render } from '../test-utils';
-
-import Radio from '.';
-
-jest.mock('../common/hooks');
-
-describe('Radio', () => {
-  const props = {
-    label: 'This is a label',
-    name: 'name',
-    onChange: jest.fn(),
-    checked: false,
-    disabled: false,
-    secondary: '',
-  };
-
-  it('shows the avatar when supplied', () => {
-    expect(
-      render(<Radio {...props} avatar={<Avatar type={AvatarType.INITIALS}>HD</Avatar>} />)
-        .container,
-    ).toMatchSnapshot();
-  });
-});

package/src/radio/Radio.spec.js

@@ -1,76 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Body from '../body';
-import RadioButton from '../common/RadioButton';
-
-import Radio from '.';
-
-jest.mock('../common/hooks');
-
-describe('Radio', () => {
-  let props;
-  let component;
-
-  beforeEach(() => {
-    props = {
-      label: 'hello, i am a radio',
-      name: 'radio name',
-      onChange: jest.fn(),
-      checked: false,
-      disabled: false,
-      secondary: '',
-    };
-    component = shallow(<Radio {...props} />);
-  });
-
-  it('displays the given label', () => {
-    expect(component.find(Body).props().children).toContain(props.label);
-  });
-
-  it('does not render secondary text', () => {
-    expect(component.find('small')).toHaveLength(0);
-  });
-
-  it('has id as label for prop', () => {
-    component.setProps({ id: 'some-id' });
-    expect(component.find('label').prop('htmlFor')).toBe('some-id');
-  });
-
-  it('passes radio button id', () => {
-    component.setProps({ id: 'some-id' });
-    expect(radioButton().prop('id')).toBe('some-id');
-  });
-
-  it('passes radio button name', () => {
-    component.setProps({ name: 'a-name' });
-    expect(radioButton().prop('name')).toBe('a-name');
-  });
-
-  it('passes radio button checked', () => {
-    expect(radioButton().prop('checked')).toBe(false);
-    component.setProps({ checked: true });
-    expect(radioButton().prop('checked')).toBe(true);
-  });
-
-  it('passes radio button change handler', () => {
-    const onChange = jest.fn();
-    component.setProps({ onChange });
-    expect(radioButton().prop('onChange')).toBe(onChange);
-  });
-
-  it('passes radio button disabled', () => {
-    expect(radioButton().prop('disabled')).toBe(false);
-    component.setProps({ disabled: true });
-    expect(radioButton().prop('disabled')).toBe(true);
-  });
-
-  it('displays secondary text when supplied', () => {
-    component.setProps({ secondary: 'additional info' });
-    expect(component.find(Body).last().props().children).toContain('additional info');
-    expect(component.find('.radio').hasClass('radio-lg')).toBe(true);
-  });
-
-  function radioButton() {
-    return component.find(RadioButton);
-  }
-});

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Radio shows the avatar when supplied 1`] = `
-<div>
-  <div
-    class="radio np-radio"
-  >
-    <label
-      class=""
-    >
-      <span
-        class="m-r-2 np-radio-button"
-      >
-        <input
-          class="sr-only"
-          name="name"
-          type="radio"
-          value=""
-        />
-        <span
-          class="tw-radio-button"
-        >
-          <span
-            class="tw-radio-check"
-          />
-        </span>
-      </span>
-      <span
-        class="np-text-body-large np-radio__text"
-      >
-        This is a label
-      </span>
-      <span
-        class="np-radio__avatar m-l-auto"
-      >
-        <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-        >
-          <div
-            class="tw-avatar__content"
-          >
-            HD
-          </div>
-        </div>
-      </span>
-    </label>
-  </div>
-</div>
-`;

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,30 +0,0 @@
-import { render, screen } from '../test-utils';
-
-import RadioGroup from '.';
-import { Field } from '../field/Field';
-
-describe('RadioGroup', () => {
-  it('has accessible role', () => {
-    render(
-      <RadioGroup
-        name="currency"
-        radios={[{ label: 'USD' }, { label: 'EUR' }]}
-        onChange={() => {}}
-      />,
-    );
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Currency">
-        <RadioGroup
-          name="currency"
-          radios={[{ label: 'USD' }, { label: 'EUR' }]}
-          onChange={() => {}}
-        />
-      </Field>,
-    );
-    expect(screen.getByRole('radiogroup')).toHaveAccessibleName(/^Currency/);
-  });
-});

package/src/radioGroup/RadioGroup.spec.js

@@ -1,90 +0,0 @@
-/* eslint-disable no-console */
-import { shallow } from 'enzyme';
-
-import { Radio, RadioGroup } from '..';
-import Avatar, { AvatarType } from '../avatar';
-
-const props = { onChange: jest.fn(), name: 'radio-group' };
-const avatar = <Avatar type={AvatarType.INITIALS}>HD</Avatar>;
-
-const RADIOS = [
-  {
-    id: 'id-test-0',
-    value: 'value-test0',
-    label: 'Radio1',
-    secondary: 'secondary',
-    disabled: true,
-    avatar,
-  },
-  {
-    id: 'id-test-1',
-    value: 'value-test1',
-    label: 'Radio2',
-    secondary: 'secondary',
-    disabled: false,
-  },
-  {
-    id: 'id-test-2',
-    value: 'value-test2',
-    label: 'Radio3',
-    secondary: 'secondary',
-    disabled: false,
-  },
-];
-
-describe('RadioGroup', () => {
-  it('renders null if no radios are provided', () => {
-    expect(shallow(<RadioGroup radios={[]} {...props} />).isEmptyRender()).toBe(true);
-  });
-
-  it('renders radio options', () => {
-    const component = shallow(<RadioGroup radios={RADIOS} {...props} />);
-    expect(component.find(Radio)).toHaveLength(RADIOS.length);
-
-    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
-    expect(primitiveProps).toStrictEqual({
-      id: 'id-test-0',
-      value: 'value-test0',
-      label: 'Radio1',
-      name: 'radio-group',
-      disabled: true,
-      checked: false,
-      secondary: 'secondary',
-      avatar,
-    });
-  });
-
-  it('renders a single radio option, when radios array contains a single element', () => {
-    const component = shallow(<RadioGroup radios={RADIOS.slice(0, 1)} {...props} />);
-    expect(component.find(Radio)).toHaveLength(1);
-
-    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
-    expect(primitiveProps).toStrictEqual({
-      id: 'id-test-0',
-      value: 'value-test0',
-      label: 'Radio1',
-      name: 'radio-group',
-      disabled: true,
-      checked: false,
-      secondary: 'secondary',
-      avatar,
-    });
-  });
-
-  it('checks specified radio', () => {
-    const component = shallow(
-      <RadioGroup radios={RADIOS} selectedValue="value-test2" {...props} />,
-    );
-    expect(component.find(Radio)).toHaveLength(RADIOS.length);
-    expect(component.find(Radio).at(2).props().checked).toBeTruthy();
-
-    expect(component.find(Radio).at(0).props().checked).toBeFalsy();
-  });
-
-  it('calls onChange with selected value', () => {
-    const component = shallow(<RadioGroup radios={RADIOS} {...props} />);
-    component.find(Radio).at(2).simulate('change', 'value-test2');
-
-    expect(props.onChange).toHaveBeenCalledWith('value-test2');
-  });
-});