@transferwise/components 0.0.0-experimental-071a319 → 0.0.0-experimental-04f7ce3

package/build/types/common/commonProps.d.ts

@@ -1,10 +1,4 @@
 export type CommonProps = {
-    /**
-     * Space-separated list of the case-sensitive CSS classes,
-     * most would be applied to outermost element inside the component
-     *
-     * @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
-     */
     className?: string;
 };
 export type AriaLabelProperty = {

package/build/types/common/commonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-071a319",
+  "version": "0.0.0-experimental-04f7ce3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/_stories/Button.story.tsx

@@ -165,6 +165,7 @@ const meta: Meta<typeof Button> = {
         name: 'enum',
         value: ['lg', 'md', 'sm'],
       },
+      description: 'Sets the size of the button.',
       table: {
         type: {
           summary: 'ButtonSize',
@@ -176,6 +177,7 @@ const meta: Meta<typeof Button> = {
         name: 'enum',
         value: ['primary', 'secondary', 'secondary-neutral', 'tertiary'],
       },
+      description: 'Sets the visual hierarchy of the action.',
       table: {
         type: {
           summary: 'ButtonPriority',
@@ -195,7 +197,7 @@ const meta: Meta<typeof Button> = {
       },
     },
     disabled: {
-      description: 'Toggles the disabled state',
+      description: 'Toggles the disabled state.',
       table: {
         defaultValue: { summary: 'false' },
       },
@@ -215,12 +217,13 @@ const meta: Meta<typeof Button> = {
       type: {
         name: 'string',
       },
-      description: 'If set, the component will render as an HTML anchor.',
+      description: 'Renders the component as a link when provided.',
     },
     target: {
       type: {
         name: 'string',
       },
+      description: 'Controls where the linked document opens. Use `_blank` to open in a new tab.',
       table: {
         type: {
           summary: 'string',
@@ -248,12 +251,31 @@ const meta: Meta<typeof Button> = {
       },
     },
     children: {
+      description: 'Visible button label.',
       table: {
         type: {
           summary: 'ReactNode',
         },
       },
     },
+    id: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
+    className: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
+    onClick: {
+      description: '',
+      table: {
+        category: 'Common',
+      },
+    },
   },
   args: {
     v2: true,

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -2,7 +2,9 @@ import { useState, useEffect } from 'react';
 import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import CheckboxButton, { type CheckboxButtonProps } from './CheckboxButton';
+import { Label } from '../label/Label';
 
 /**
  * Use <a href="?path=/docs/forms-checkbox--docs">Checkbox</a> component instead when pairing with a label. Only use CheckboxButton when you need a standalone checkbox (e.g. settings matrix) and provide an `aria-label`.
@@ -22,10 +24,34 @@ export default {
     onFocus: fn(),
   },
   argTypes: {
+    'aria-label': {
+      description: 'Provides the accessible name when the control has no visible text label.',
+    },
+    checked: {
+      description: 'Controls whether the checkbox is checked.',
+    },
+    disabled: {
+      description: 'Toggles the disabled state.',
+    },
+    name: {
+      description: 'Name submitted with the form when the checkbox is checked.',
+    },
+    value: {
+      description: 'Value submitted with the form when the checkbox is checked.',
+    },
+    onChange: {
+      description: 'Called when the checked state changes.',
+    },
     indeterminate: {
       description:
         'Sets the native mixed state — used when some (not all) child items are selected. Clicking resolves to checked; clear `indeterminate` in `onChange` to reflect the transition.',
     },
+    defaultChecked: { description: '', table: { category: 'Common' } },
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+    onBlur: { description: '', table: { category: 'Common' } },
+    onClick: { description: '', table: { category: 'Common' } },
+    onFocus: { description: '', table: { category: 'Common' } },
   },
   parameters: {
     docs: { toc: true },
@@ -40,10 +66,8 @@ const withColumnLayout = (Story: () => JSX.Element) => (
   </div>
 );
 
-const row = { display: 'flex', alignItems: 'center', gap: '8px' } as const;
-
 /** Interactive single checkbox — use the Controls panel to toggle `disabled` and `indeterminate`. */
-export const Playground: Story = {
+export const Playground: Story = storySourceWithoutNoise({
   render: function Render(args: CheckboxButtonProps) {
     const [checked, setChecked] = useState(args.checked ?? true);
 
@@ -63,25 +87,32 @@ export const Playground: Story = {
       />
     );
   },
-};
+});
 
 /** Disabled state — checked and unchecked. */
 export const Disabled: Story = {
   decorators: [withColumnLayout],
-  render: () => (
+  render: (args) => (
     <>
-      <div style={row}>
+      <div>
+        <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
         <CheckboxButton
+          id="disabled-unchecked"
           aria-label="Disabled unchecked"
           checked={false}
           disabled
           onChange={() => {}}
         />
-        <span>Disabled unchecked</span>
       </div>
-      <div style={row}>
-        <CheckboxButton aria-label="Disabled checked" checked disabled onChange={() => {}} />
-        <span>Disabled checked</span>
+      <div>
+        <Label htmlFor="disabled-checked">Disabled checked</Label>
+        <CheckboxButton
+          id="disabled-checked"
+          aria-label="Disabled checked"
+          checked
+          disabled
+          onChange={() => {}}
+        />
       </div>
     </>
   ),
@@ -90,25 +121,27 @@ export const Disabled: Story = {
 /** Indeterminate state — checked and unchecked. */
 export const Indeterminate: Story = {
   decorators: [withColumnLayout],
-  render: () => (
+  render: (args) => (
     <>
-      <div style={row}>
+      <div>
+        <Label htmlFor="indeterminate-unchecked">Indeterminate (unchecked)</Label>
         <CheckboxButton
+          id="indeterminate-unchecked"
           aria-label="Indeterminate unchecked"
           checked={false}
           indeterminate
           onChange={() => {}}
         />
-        <span>Indeterminate (unchecked)</span>
       </div>
-      <div style={row}>
+      <div>
+        <Label htmlFor="indeterminate-checked">Indeterminate (checked)</Label>
         <CheckboxButton
+          id="indeterminate-checked"
           aria-label="Indeterminate checked"
           checked
           indeterminate
           onChange={() => {}}
         />
-        <span>Indeterminate (checked)</span>
       </div>
     </>
   ),

package/src/chips/Chips.story.tsx

@@ -17,9 +17,17 @@ export default {
     onChange: fn(),
   },
   argTypes: {
+    'aria-label': {
+      description: 'Provides the accessible name for the chip group.',
+    },
     chips: {
       description: 'Array of chip objects, each with a label (string) and value (string or number)',
     },
+    multiple: {
+      description:
+        'Switch between filter/multi-select (true) and choice/single-select (false) modes',
+    },
+    className: { description: '', table: { category: 'Common' } },
     selected: { table: { disable: true } },
   },
   parameters: {

package/src/circularButton/CircularButton.story.tsx

@@ -23,12 +23,28 @@ export default {
     disabled: false,
   },
   argTypes: {
+    children: {
+      description:
+        'Visible label shown below the icon. Keep it short so it fits in the circular layout.',
+    },
     icon: {
+      description: 'Icon displayed inside the circular button.',
       options: Object.keys(Icons),
       mapping: Object.fromEntries(
         Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
       ),
     },
+    priority: {
+      description: 'Sets the visual hierarchy of the action.',
+    },
+    type: {
+      description: 'Emphasises the nature of the action. Use `negative` for destructive actions.',
+    },
+    disabled: {
+      description: 'Toggles the disabled state.',
+    },
+    className: { description: '', table: { category: 'Common' } },
+    onClick: { description: '', table: { category: 'Common' } },
   },
   parameters: {
     docs: { toc: true },

package/src/common/commonProps.ts

@@ -1,10 +1,4 @@
 export type CommonProps = {
-  /**
-   * Space-separated list of the case-sensitive CSS classes,
-   * most would be applied to outermost element inside the component
-   *
-   * @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
-   */
   className?: string;
 };
 

package/src/iconButton/IconButton.story.tsx

@@ -27,6 +27,38 @@ export default {
     onClick: fn(),
     'aria-label': 'Action',
   },
+  argTypes: {
+    children: {
+      description: 'Icon rendered inside the button.',
+    },
+    'aria-label': {
+      description: 'Provides the accessible name when the control has no visible text label.',
+    },
+    size: {
+      description: 'Sets the button diameter in pixels.',
+    },
+    priority: {
+      description: 'Sets the visual hierarchy of the action.',
+    },
+    type: {
+      description: 'Emphasises the nature of the action. Use `negative` for destructive actions.',
+    },
+    disabled: {
+      description: 'Toggles the disabled state.',
+    },
+    href: {
+      description: 'Renders the component as a link when provided.',
+    },
+    target: {
+      description: 'Controls where the linked document opens. Use `_blank` to open in a new tab.',
+    },
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+    role: { description: '', table: { category: 'Common' } },
+    tabIndex: { description: '', table: { category: 'Common' } },
+    'data-testid': { description: '', table: { category: 'Common' } },
+    onClick: { description: '', table: { category: 'Common' } },
+  },
   parameters: {
     docs: { toc: true },
   },

package/src/switch/Switch.story.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { fn } from 'storybook/test';
 
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
@@ -21,6 +22,10 @@ const meta: Meta<typeof Switch> = {
     'aria-label': undefined,
     onClick: fn(),
   },
+  argTypes: {
+    id: { description: '', table: { category: 'Common' } },
+    className: { description: '', table: { category: 'Common' } },
+  },
   parameters: {
     docs: { toc: true },
   },
@@ -29,7 +34,7 @@ const meta: Meta<typeof Switch> = {
 export default meta;
 type Story = StoryObj<typeof Switch>;
 
-export const Playground: Story = {
+export const Playground: Story = storySourceWithoutNoise({
   render: function Render(args: SwitchProps) {
     const [checked, setChecked] = useState(args.checked ?? false);
 
@@ -39,14 +44,18 @@ export const Playground: Story = {
 
     return (
       <Field id="playground-field" label="Switch label">
-        <Switch {...args} checked={checked} onClick={() => setChecked((v: boolean) => !v)} />
+        <Switch
+          {...args}
+          checked={checked}
+          onClick={() => setChecked((value: boolean) => !value)}
+        />
       </Field>
     );
   },
   argTypes: {
     onClick: { table: { disable: true } },
   },
-};
+});
 
 /**
  * Three labelling patterns: <a href="?path=/docs/forms-label--docs">Label</a>, `aria-labelledby`, and <a href="?path=/docs/forms-field--docs">Field</a>. <br />