@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/radio/Radio.story.tsx

@@ -1,11 +1,8 @@
-import { boolean, text } from '@storybook/addon-knobs';
-import { Flag } from '@wise/art';
+import { boolean } from '@storybook/addon-knobs';
 import { useState } from 'react';
-
-import Avatar, { AvatarType } from '../avatar';
-import Checkbox from '../checkbox';
-
 import Radio from './Radio';
+import AvatarView from '../avatarView';
+import { Flag } from '@wise/art';
 
 export default {
   component: Radio,
@@ -13,69 +10,42 @@ export default {
 };
 
 export const Basic = () => {
-  const [checked, setChecked] = useState(true);
+  const [selectedValue, setSelectedValue] = useState('option1');
 
   const disabled = boolean('disabled', false);
-  const label = text('label', 'This is the label');
-  const secondary = text('secondary', '');
-  const showAvatar = boolean('avatar', false);
-  const hasError = boolean('hasError', false);
 
   return (
     <>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
+      <div className={`form-group ${selectedValue === 'option1' ? 'has-error' : ''}`}>
         <Radio
-          label={label}
+          label="Without Avatar"
           name="name"
-          id="id"
-          checked={checked}
+          secondary="This is secondary text"
+          id="radioGroup1"
           disabled={disabled}
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="IMP" />
-              </Avatar>
-            ) : null
-          }
-          onChange={() => setChecked(!checked)}
+          value="option1"
+          checked={selectedValue === 'option1'}
+          onChange={() => setSelectedValue('option1')}
         />
       </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
+      <div className="form-group">
         <Radio
-          label={label}
+          label="With Avatar"
           name="name"
-          id="id1"
-          checked={checked}
+          id="radioGroup2"
           disabled={disabled}
-          secondary={secondary}
           avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="KES" />
-              </Avatar>
-            ) : null
+            <AvatarView>
+              <Flag code="IMP" />
+            </AvatarView>
           }
-          onChange={() => setChecked(!checked)}
+          value="option1"
+          checked={selectedValue === 'option2'}
+          onChange={() => setSelectedValue('option2')}
         />
       </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-        <Checkbox
-          label={label}
-          id="id2"
-          checked={checked}
-          disabled={disabled}
-          secondary={secondary}
-          onChange={() => setChecked(!checked)}
-        />
-      </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-        <Checkbox
-          label={label}
-          id="id3"
-          checked={checked}
-          disabled={disabled}
-          onChange={() => setChecked(!checked)}
-        />
+      <div className="form-group">
+        <Radio label="Disabled" name="name" id="radioGroup3" disabled value="option3" />
       </div>
     </>
   );

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/test-utils/Parameters.d.ts

@@ -1,15 +1,7 @@
 declare module '@storybook/react' {
   interface Parameters {
     /** Prefer using `storyConfig` for configuring variants */
-    variants?: (
-      | 'default'
-      | 'light'
-      | 'dark'
-      | 'bright-green'
-      | 'forest-green'
-      | 'rtl'
-      | (string & Record<string, unknown>)
-    )[];
+    variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
     /** Used by Chromatic */
     chromatic?: ChromaticParameters;
     viewport?: {

package/src/test-utils/story-config.ts

@@ -30,16 +30,7 @@ interface StoryConfig {
    *
    * @default undefined
    */
-  variants?: (
-    | 'default'
-    | 'light'
-    | 'dark'
-    | 'bright-green'
-    | 'forest-green'
-    | 'rtl'
-    | 'mobile'
-    | '400%'
-  )[];
+  variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile' | '400%')[];
 }
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {

package/build/button/Button.resolver.js

@@ -1,74 +0,0 @@
-'use strict';
-
-var React = require('react');
-var LegacyButton = require('./LegacyButton.js');
-var Button$1 = require('./Button.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const mapProps = props => {
-  const {
-    priority,
-    size,
-    type,
-    ...newProps
-  } = props;
-  const priorityMapping = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal'
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary'
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary'
-    }
-  };
-  const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
-  const mappedSentiment = type === 'negative' ? 'negative' : undefined;
-  const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
-  const resolveSize = () => {
-    if (size) {
-      return {
-        xs: 'sm',
-        sm: 'sm',
-        md: 'md',
-        lg: 'lg'
-      }[size] || size;
-    }
-    return size;
-  };
-  return {
-    ...newProps,
-    size: resolveSize(),
-    priority: mappedPriority,
-    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
-    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
-    v2: true
-  };
-};
-const Button = /*#__PURE__*/React.forwardRef(({
-  v2 = false,
-  ...props
-}, ref) => {
-  if (v2) {
-    const mappedProps = mapProps(props);
-    return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-      ...mappedProps,
-      ref: ref
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(LegacyButton, {
-    ...props,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-
-module.exports = Button;
-//# sourceMappingURL=Button.resolver.js.map

package/build/button/Button.resolver.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n  const { priority, size, type, ...newProps } = props;\n\n  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n    accent: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'minimal',\n    },\n    positive: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'tertiary',\n    },\n    negative: {\n      primary: 'primary',\n      secondary: 'secondary',\n      tertiary: 'secondary',\n    },\n  };\n\n  const mappedPriority =\n    type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n  const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n  const legacyButtonTypes: LegacyButtonProps['type'][] = [\n    'accent',\n    'negative',\n    'positive',\n    'primary',\n    'pay',\n    'secondary',\n    'danger',\n    'link',\n  ];\n\n  const resolveSize = () => {\n    if (size) {\n      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n    }\n\n    return size;\n  };\n\n  return {\n    ...newProps,\n    size: resolveSize(),\n    priority: mappedPriority,\n    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n    v2: true,\n  } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n  if (v2) {\n    const mappedProps = mapProps(props as LegacyButtonProps);\n    return <NewButton {...mappedProps} ref={ref} />;\n  }\n\n  return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,cAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}

package/build/button/Button.resolver.mjs

@@ -1,72 +0,0 @@
-import { forwardRef } from 'react';
-import LegacyButton from './LegacyButton.mjs';
-import Button$1 from './Button.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const mapProps = props => {
-  const {
-    priority,
-    size,
-    type,
-    ...newProps
-  } = props;
-  const priorityMapping = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal'
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary'
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary'
-    }
-  };
-  const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
-  const mappedSentiment = type === 'negative' ? 'negative' : undefined;
-  const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
-  const resolveSize = () => {
-    if (size) {
-      return {
-        xs: 'sm',
-        sm: 'sm',
-        md: 'md',
-        lg: 'lg'
-      }[size] || size;
-    }
-    return size;
-  };
-  return {
-    ...newProps,
-    size: resolveSize(),
-    priority: mappedPriority,
-    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
-    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
-    v2: true
-  };
-};
-const Button = /*#__PURE__*/forwardRef(({
-  v2 = false,
-  ...props
-}, ref) => {
-  if (v2) {
-    const mappedProps = mapProps(props);
-    return /*#__PURE__*/jsx(Button$1, {
-      ...mappedProps,
-      ref: ref
-    });
-  }
-  return /*#__PURE__*/jsx(LegacyButton, {
-    ...props,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-
-export { Button as default };
-//# sourceMappingURL=Button.resolver.mjs.map

package/build/button/Button.resolver.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n  const { priority, size, type, ...newProps } = props;\n\n  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n    accent: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'minimal',\n    },\n    positive: {\n      primary: 'primary',\n      secondary: 'tertiary',\n      tertiary: 'tertiary',\n    },\n    negative: {\n      primary: 'primary',\n      secondary: 'secondary',\n      tertiary: 'secondary',\n    },\n  };\n\n  const mappedPriority =\n    type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n  const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n  const legacyButtonTypes: LegacyButtonProps['type'][] = [\n    'accent',\n    'negative',\n    'positive',\n    'primary',\n    'pay',\n    'secondary',\n    'danger',\n    'link',\n  ];\n\n  const resolveSize = () => {\n    if (size) {\n      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n    }\n\n    return size;\n  };\n\n  return {\n    ...newProps,\n    size: resolveSize(),\n    priority: mappedPriority,\n    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n    v2: true,\n  } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n  if (v2) {\n    const mappedProps = mapProps(props as LegacyButtonProps);\n    return <NewButton {...mappedProps} ref={ref} />;\n  }\n\n  return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,GAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}

package/build/button/LegacyButton.js

@@ -1,114 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var React = require('react');
-var reactIntl = require('react-intl');
-require('../common/theme.js');
-require('../common/direction.js');
-var control = require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-var size = require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
-require('@transferwise/icons');
-require('../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
-var Button_messages = require('../i18n/commonMessages/Button.messages.js');
-var classMap = require('./classMap.js');
-var legacyUtils = require('./legacyUtils/legacyUtils.js');
-
-const LegacyButton = /*#__PURE__*/React.forwardRef(({
-  as: component = 'button',
-  block = false,
-  children,
-  className,
-  disabled,
-  loading = false,
-  priority = control.Priority.PRIMARY,
-  size: size$1 = size.Size.MEDIUM,
-  type = control.ControlType.ACCENT,
-  onClick,
-  ...rest
-}, ref) => {
-  const intl = reactIntl.useIntl();
-  legacyUtils.logDeprecationNotices({
-    size: size$1,
-    type
-  });
-  const newType = legacyUtils.establishNewType(type);
-  const newPriority = legacyUtils.establishNewPriority(priority, type);
-  const classes = clsx.clsx(`btn btn-${size$1}`, `np-btn np-btn-${size$1}`, {
-    'btn-loading': loading,
-    'btn-block np-btn-block': block,
-    disabled
-  },
-  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  classMap.typeClassMap[newType],
-  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  classMap.priorityClassMap[newPriority], className);
-  function processIndicatorSize() {
-    return ['sm', 'xs'].includes(size$1) ? 'xxs' : 'xs';
-  }
-  const Element = component ?? 'button';
-  let props;
-  if (Element === 'button') {
-    const {
-      htmlType = 'button',
-      ...restProps
-    } = rest;
-    props = {
-      ...restProps,
-      disabled,
-      'aria-disabled': loading,
-      type: htmlType
-    };
-  } else {
-    props = {
-      ...rest,
-      'aria-disabled': loading
-    };
-  }
-  /**
-   * Ensures that the button cannot be activated in loading or disabled mode,
-   * when `aria-disabled` might be used over the `disabled` HTML attribute
-   */
-  const handleClick = handler => event => {
-    if (disabled || loading) {
-      event.preventDefault();
-    } else if (typeof handler === 'function') {
-      handler(event);
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
-    ref: ref,
-    className: classes,
-    onClick: handleClick(onClick),
-    ...props,
-    "aria-live": loading ? 'polite' : 'off',
-    "aria-busy": loading,
-    "aria-label": loading ? intl.formatMessage(Button_messages.loadingAriaLabel) : rest['aria-label'],
-    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
-      size: processIndicatorSize(),
-      className: "btn-loader",
-      "data-testid": "ButtonProgressIndicator"
-    })]
-  });
-});
-
-module.exports = LegacyButton;
-//# sourceMappingURL=LegacyButton.js.map

package/build/button/LegacyButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  v2?: false;\n\n  /** Makes the button take up the full width of its container */\n  block?: boolean;\n\n  /**\n   * The `target` attribute for HTML anchor.\n   * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n   */\n  target?: string;\n  /**\n   * Toggles the disabled state\n   * @default false\n   */\n\n  disabled?: boolean;\n  /**\n   * Toggles the loading state\n   * @default false\n   */\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n  htmlType?: 'submit' | 'reset' | 'button';\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n    as?: 'a';\n    href?: string;\n  };\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n  (\n    {\n      as: component = 'button',\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      onClick,\n      ...rest\n    }: LegacyButtonProps,\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    logDeprecationNotices({ size, type });\n\n    const newType = establishNewType(type);\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = clsx(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n        disabled,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled,\n        'aria-disabled': loading,\n        type: htmlType,\n      };\n    } else {\n      props = {\n        ...rest,\n        'aria-disabled': loading,\n      } as AnchorProps;\n    }\n\n    /**\n     * Ensures that the button cannot be activated in loading or disabled mode,\n     * when `aria-disabled` might be used over the `disabled` HTML attribute\n     */\n    const handleClick =\n      (handler: LegacyButtonProps['onClick']) =>\n      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n        if (disabled || loading) {\n          event.preventDefault();\n        } else if (typeof handler === 'function') {\n          handler(event);\n        }\n      };\n\n    return (\n      <Element\n        ref={ref as React.Ref<ButtonReferenceType>}\n        className={classes}\n        onClick={handleClick(onClick)}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-busy={loading}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && (\n          <ProcessIndicator\n            size={processIndicatorSize()}\n            className=\"btn-loader\"\n            data-testid=\"ButtonProgressIndicator\"\n          />\n        )}\n      </Element>\n    );\n  },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}