@transferwise/components 46.58.0 → 46.58.1

package/build/i18n/tr.json

@@ -18,7 +18,7 @@
   "neptune.DateLookup.year": "yıl",
   "neptune.FlowNavigation.back": "önceki adıma dön",
   "neptune.Info.ariaLabel": "Daha fazla bilgi",
-  "neptune.Label.optional": "(Isteğe bağlı)",
+  "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",

package/build/i18n/tr.json.js

@@ -20,7 +20,7 @@ var tr = {
 	"neptune.DateLookup.year": "yıl",
 	"neptune.FlowNavigation.back": "önceki adıma dön",
 	"neptune.Info.ariaLabel": "Daha fazla bilgi",
-	"neptune.Label.optional": "(Isteğe bağlı)",
+	"neptune.Label.optional": "(İsteğe bağlı)",
 	"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",

package/build/i18n/tr.json.mjs

@@ -18,7 +18,7 @@ var tr = {
 	"neptune.DateLookup.year": "yıl",
 	"neptune.FlowNavigation.back": "önceki adıma dön",
 	"neptune.Info.ariaLabel": "Daha fazla bilgi",
-	"neptune.Label.optional": "(Isteğe bağlı)",
+	"neptune.Label.optional": "(İsteğe bağlı)",
 	"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",

package/build/inlineAlert/InlineAlert.js

@@ -30,7 +30,9 @@ function InlineAlert({
     children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
       sentiment: type,
       size: size.Size.SMALL
-    }), children]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })]
   });
 }
 

package/build/inlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      {children}\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/inlineAlert/InlineAlert.mjs

@@ -28,7 +28,9 @@ function InlineAlert({
     children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
       sentiment: type,
       size: Size.SMALL
-    }), children]
+    }), /*#__PURE__*/jsx("div", {
+      children: children
+    })]
   });
 }
 

package/build/inlineAlert/InlineAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      {children}\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.58.0",
+  "version": "46.58.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/neptune-css": "14.13.3"
+    "@transferwise/neptune-css": "14.13.4",
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/i18n/tr.json

@@ -18,7 +18,7 @@
   "neptune.DateLookup.year": "yıl",
   "neptune.FlowNavigation.back": "önceki adıma dön",
   "neptune.Info.ariaLabel": "Daha fazla bilgi",
-  "neptune.Label.optional": "(Isteğe bağlı)",
+  "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",

package/src/inlineAlert/InlineAlert.tsx

@@ -47,7 +47,7 @@ export default function InlineAlert({
       )}
     >
       {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
-      {children}
+      <div>{children}</div>
     </Body>
   );
 }

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,81 +1,82 @@
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
 import { Flag } from '@wise/art';
 
 import Avatar, { AvatarType } from '../avatar';
 
-import RadioGroup from './RadioGroup';
+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';
 
-export default {
+const meta = {
   component: RadioGroup,
   title: 'Forms/RadioGroup',
-};
+} satisfies Meta<typeof RadioGroup>;
 
-export const Basic = () => {
-  const showAvatars = boolean('avatar', false);
-  const hasError = boolean('hasError', false);
+export default meta;
+type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-  const avatar = showAvatars ? (
-    <Avatar type={AvatarType.THUMBNAIL}>
-      <Flag code="NZD" />
-    </Avatar>
-  ) : undefined;
+export const Basic = {
+  args: {
+    selectedValue: 'radio-2',
+    name: 'radio-group',
+    radios: [
+      {
+        value: 'radio-1',
+        label: 'Radio1',
+        secondary: 'Secondary line 1',
+        disabled: false,
+      },
+      {
+        value: 'radio-2',
+        label: 'Radio2',
+        disabled: false,
+      },
+      {
+        value: 'radio-3',
+        label: 'Radio3',
+        secondary: 'Secondary line 3',
+        disabled: true,
+      },
+    ],
+    onChange: fn(),
+  },
+} satisfies Story;
 
-  return (
-    <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-      <RadioGroup
-        selectedValue="radio-2"
-        name="radio-group"
-        radios={[
-          {
-            value: 'radio-1',
-            label: 'Radio1',
-            secondary: 'Secondary line 1',
-            disabled: false,
-            avatar,
-          },
-          {
-            value: 'radio-2',
-            label: 'Radio2',
-            disabled: false,
-            avatar,
-          },
-          {
-            value: 'radio-3',
-            label: 'Radio3',
-            secondary: 'Secondary line 3',
-            disabled: true,
-            avatar,
-          },
-        ]}
-        onChange={(v) => action(v)}
-      />
-    </div>
-  );
-};
+export const WithAvatars = {
+  ...Basic,
+  args: {
+    ...Basic.args,
+    radios: Basic.args.radios.map(
+      (radio) =>
+        ({
+          ...radio,
+          avatar: (
+            <Avatar type={AvatarType.THUMBNAIL}>
+              <Flag code="NZD" />
+            </Avatar>
+          ),
+        }) satisfies RadioGroupRadio,
+    ),
+  },
+} satisfies Story;
 
-export const Labeled = () => {
-  return (
-    <Field label="Do you like our product?">
-      <RadioGroup
-        name="radio-group"
-        radios={[
-          {
-            value: 'yes',
-            label: 'Yes',
-          },
-          {
-            value: 'definitely',
-            label: 'Definitely',
-          },
-          {
-            value: 'absolutely',
-            label: 'Absolutely',
-          },
-        ]}
-        onChange={(v) => action(v)}
-      />
-    </Field>
-  );
-};
+export const WithinField = {
+  ...Basic,
+  render: function Render(args) {
+    const [selectedValue, setSelectedValue] = useState('radio-2');
+    const hasError = selectedValue === 'radio-2';
+    return (
+      <Field
+        {...(hasError
+          ? {
+              message: 'Something went wrong',
+              sentiment: 'negative',
+            }
+          : undefined)}
+      >
+        <RadioGroup {...args} selectedValue={selectedValue} onChange={setSelectedValue} />
+      </Field>
+    );
+  },
+} satisfies Story;