@transferwise/components 0.0.0-experimental-7f34f59 → 0.0.0-experimental-0f96ac0

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": "(İsteğe bağlı)",
+  "neptune.Label.optional": "(Isteğ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": "(İsteğe bağlı)",
+	"neptune.Label.optional": "(Isteğ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": "(İsteğe bağlı)",
+	"neptune.Label.optional": "(Isteğ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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7f34f59",
+  "version": "0.0.0-experimental-0f96ac0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.13.3",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@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": "(İsteğe bağlı)",
+  "neptune.Label.optional": "(Isteğ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/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;