@transferwise/components 46.100.1 → 46.101.0

package/src/popover/Popover.css

@@ -1,23 +1,26 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-theme-personal .np-popover__container {
+.np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
-}.np-popover__container .np-popover__content {
+}
+.np-popover__container .np-popover__content {
   color: #5d7079;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
-}.np-popover__container .np-popover__content p:last-child {
+}
+.np-popover__container .np-popover__content p:last-child {
   margin-bottom: 0;
-}.np-popover__container.np-panel .np-popover__content {
+}
+.np-popover__container.np-panel .np-popover__content {
   padding: 16px 24px;
   padding: var(--size-16) var(--size-24);
   max-width: 276px;
-}.np-theme-personal .np-popover__container.np-panel .np-popover__content {
+}
+.np-theme-personal .np-popover__container.np-panel .np-popover__content {
   padding: 24px;
   padding: var(--size-24);
-}.np-popover__container.np-bottom-sheet .np-popover__title {
+}
+.np-popover__container.np-bottom-sheet .np-popover__title {
   margin: 0;
   color: #37517e;
   color: var(--color-content-primary);
@@ -32,7 +35,8 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
-}@supports (hyphenate-limit-chars: 1) {
+}
+@supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -48,7 +52,8 @@
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
     -webkit-hyphens: auto;
             hyphens: auto;
@@ -60,12 +65,14 @@
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.np-popover__container.np-bottom-sheet .np-popover__title + p,
+}
+.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {
   margin-top: 8px;
   margin-top: var(--size-8);
-}.np-popover__container.np-bottom-sheet .np-popover__content {
+}
+.np-popover__container.np-bottom-sheet .np-popover__content {
   padding: 32px 24px;
   padding: var(--size-32) var(--size-24);
 }

package/src/popover/Popover.story.tsx

@@ -1,10 +1,10 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import Button from '../button';
 import { Position } from '../common';
 
 import Popover from './Popover';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 type Story = StoryObj<typeof Popover>;
 

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import PrimitiveAnchor from '..';
 
 const meta: Meta<typeof PrimitiveAnchor> = {

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
-import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import PrimitiveAnchor from '..';
 
 const meta = {

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import PrimitiveButton from '..';
 
 const meta: Meta<typeof PrimitiveButton> = {

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
-import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import PrimitiveButton from '..';
 
 const meta = {

package/src/processIndicator/ProcessIndicator.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Size, Status } from '../common';
 

package/src/progress/Progress.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Progress from './Progress';
 

package/src/progressBar/ProgressBar.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import ProgressBar from './ProgressBar';
 import Info from '../info';

package/src/promoCard/PromoCard.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StarFill } from '@transferwise/icons';
 
 import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';

package/src/promoCard/PromoCardGroup.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import PromoCard from './PromoCard';
 import PromoCardGroup from './PromoCardGroup';

package/src/provider/Provider.spec.tsx

@@ -35,7 +35,7 @@ describe('Provider', () => {
     ['ja-JP', 'ja-JP'],
     ['', 'en-GB'],
     [' ', 'en-GB'],
-  ])('check locale value "%s"', (locale, expectedValue) => {
+  ])('check locale value "%s"', (locale: string, expectedValue: string) => {
     const TestComponent = () => {
       const intl = useIntl();
       return <>locale: {intl.locale}</>;
@@ -52,7 +52,7 @@ describe('Provider', () => {
   it.each([
     ['ru', 'Закрыть'],
     ['en', 'Close'],
-  ])('switching locale (%s)', async (locale, expectedMessage) => {
+  ])('switching locale (%s)', async (locale: string, expectedMessage: string) => {
     expect(document.body).toBeEmptyDOMElement();
 
     const messages = (await import(`../i18n/${locale}.json`)) as Record<string, string>;

package/src/provider/Provider.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FormattedMessage } from 'react-intl';
 
 import { Provider } from '..';

package/src/provider/direction/DirectionProvider.spec.tsx

@@ -12,7 +12,7 @@ describe('DirectionProvider', () => {
   it.each([
     [Direction.LTR, false],
     [Direction.RTL, true],
-  ])('store direction %s in React Context', (direction, isRTL) => {
+  ])('store direction %s in React Context', (direction: Direction, isRTL: boolean) => {
     let directionContext = null;
     const TestComponent = () => {
       directionContext = useDirection();

package/src/provider/language/LanguageProvider.spec.tsx

@@ -7,7 +7,7 @@ describe('LanguageProvider', () => {
     document.documentElement.removeAttribute('lang');
   });
 
-  it.each([['en'], ['ru'], ['ja']])('store language %s in React Context', (locale) => {
+  it.each([['en'], ['ru'], ['ja']])('store language %s in React Context', (locale: string) => {
     const TestComponent = () => {
       return <>locale: {locale}</>;
     };

package/src/provider/theme/ThemeProvider.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ThemeProvider } from '@wise/components-theming';
 
 import Button from '../../button';

package/src/radio/Radio.story.tsx

@@ -1,52 +1,69 @@
-import { boolean } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-import Radio from './Radio';
+import Radio, { type RadioProps } from './Radio';
 import AvatarView from '../avatarView';
 import { Flag } from '@wise/art';
+import { fn } from 'storybook/test';
 
-export default {
+const meta: Meta<RadioProps> = {
   component: Radio,
   title: 'Forms/Radio',
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
 };
+export default meta;
 
-export const Basic = () => {
-  const [selectedValue, setSelectedValue] = useState('option1');
-
-  const disabled = boolean('disabled', false);
+export const Basic: StoryObj<RadioProps> = {
+  render: (args) => {
+    return <Radio {...args} value="option1" onChange={fn()} />;
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    label: 'Without Avatar',
+    name: 'name',
+    secondary: 'This is secondary text',
+    id: 'radioGroup1',
+    value: 'option1',
+  },
+};
+export const Variants: StoryObj<RadioProps> = {
+  render: () => {
+    const [selectedValue, setSelectedValue] = useState('option1');
 
-  return (
-    <>
-      <div className={`form-group ${selectedValue === 'option1' ? 'has-error' : ''}`}>
-        <Radio
-          label="Without Avatar"
-          name="name"
-          secondary="This is secondary text"
-          id="radioGroup1"
-          disabled={disabled}
-          value="option1"
-          checked={selectedValue === 'option1'}
-          onChange={() => setSelectedValue('option1')}
-        />
-      </div>
-      <div className="form-group">
-        <Radio
-          label="With Avatar"
-          name="name"
-          id="radioGroup2"
-          disabled={disabled}
-          avatar={
-            <AvatarView>
-              <Flag code="IMP" />
-            </AvatarView>
-          }
-          value="option1"
-          checked={selectedValue === 'option2'}
-          onChange={() => setSelectedValue('option2')}
-        />
-      </div>
-      <div className="form-group">
-        <Radio label="Disabled" name="name" id="radioGroup3" disabled value="option3" />
-      </div>
-    </>
-  );
+    return (
+      <>
+        <div className={`form-group ${selectedValue === 'option1' ? 'has-error' : ''}`}>
+          <Radio
+            label="Without Avatar"
+            name="name"
+            secondary="This is secondary text"
+            id="radioGroup1"
+            value="option1"
+            checked={selectedValue === 'option1'}
+            onChange={() => setSelectedValue('option1')}
+          />
+        </div>
+        <div className="form-group">
+          <Radio
+            label="With Avatar"
+            name="name"
+            id="radioGroup2"
+            avatar={
+              <AvatarView>
+                <Flag code="IMP" />
+              </AvatarView>
+            }
+            value="option2"
+            checked={selectedValue === 'option2'}
+            onChange={() => setSelectedValue('option2')}
+          />
+        </div>
+        <div className="form-group">
+          <Radio label="Disabled" name="name" id="radioGroup3" disabled value="option3" />
+        </div>
+      </>
+    );
+  },
 };

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,8 +1,8 @@
 import { Flag } from '@wise/art';
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import { useState } from 'react';
 import AvatarView from '../avatarView';
 

package/src/radioOption/RadioOption.story.tsx

@@ -1,75 +1,110 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
-import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
+import { action } from 'storybook/actions';
+import { fn } from 'storybook/test';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { Header, Nudge, Section, Title, Typography } from '..';
-
 import RadioOption, { RadioOptionProps } from './RadioOption';
 
 export default {
   component: RadioOption,
   title: 'Option/RadioOption',
+  argTypes: {
+    disabled: { control: 'boolean' },
+    secondary: { control: 'text' },
+  },
+  args: {
+    title: 'Radio option',
+    content: 'Button and icon are vertically centered.',
+    disabled: false,
+  },
 };
 
-const Template = (props: Partial<RadioOptionProps>) => {
-  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
-  const title = text('title', 'title');
-  const disabled = boolean('disabled', false);
-  const content = text('content', 'content');
-  const isContainerAligned = boolean('isContainerAligned', false);
+export const Basic = (args: RadioOptionProps) => {
+  const [checked, setChecked] = useState(false);
 
   return (
     <RadioOption
+      {...args}
       media={<FastFlagIcon />}
-      title={title}
-      content={content}
-      id="id"
-      name="radio-option"
-      checked={props.checked}
-      complex={false}
-      disabled={disabled}
-      value="value"
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
-      onChange={(value) => {
-        action('checked');
-        props.onChange?.(value);
+      checked={checked}
+      onChange={() => {
+        fn();
+        setChecked(!checked);
       }}
     />
   );
 };
 
-export const Basic = () => {
-  const checked = boolean('checked', false);
-
-  return <Template checked={checked} />;
-};
-
-export const Multiple = () => {
+export const Multiple = (args: RadioOptionProps) => {
   const [selected, setSelected] = useState(0);
 
+  const handleChange = (value: number) => {
+    action('changed')(value);
+    setSelected(value);
+  };
+
   return (
     <Section as="fieldset">
       <Header as="legend" title="Test title" />
-      <Template checked={selected === 0} onChange={() => setSelected(0)} />
-      <Template checked={selected === 1} onChange={() => setSelected(1)} />
-      <Template checked={selected === 2} onChange={() => setSelected(2)} />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 0}
+        value="value0"
+        onChange={() => handleChange(0)}
+      />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 1}
+        value="value1"
+        onChange={() => handleChange(1)}
+      />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 2}
+        value="value2"
+        onChange={() => handleChange(2)}
+      />
     </Section>
   );
 };
 
-export const WithContainerContent = () => {
+export const WithContainerContent = (args: RadioOptionProps) => {
   const [selected, setSelected] = useState(0);
 
+  const handleChange = (value: number) => {
+    action('changed')(value);
+    setSelected(value);
+  };
+
   return (
     <>
       <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
         Choose how to pay
       </Title>
-      <Template checked={selected === 0} onChange={() => setSelected(0)} />
-      <Template checked={selected === 1} onChange={() => setSelected(1)} />
-      <Template checked={selected === 2} onChange={() => setSelected(2)} />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 0}
+        value="value0"
+        onChange={() => handleChange(0)}
+      />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 1}
+        value="value1"
+        onChange={() => handleChange(1)}
+      />
+      <RadioOption
+        {...args}
+        media={<FastFlagIcon />}
+        checked={selected === 2}
+        value="value2"
+        onChange={() => handleChange(2)}
+      />
       <div>
         <Nudge
           className="m-t-2"

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-webpack5';
 import React from 'react';
 
 import Button from '../button';