@onfido/castor - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

package.json

 {
   "name": "@onfido/castor",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Onfido's design system.",
@@ -5,0 +5,0 @@ "author": "Onfido",

README.md

@@ -46,3 +46,3 @@ # Castor
 ```scss
-@use '~@onfido/castor';
+@use '@onfido/castor';
 ```
@@ -75,3 +75,3 @@
 ```scss
-@use '~@onfido/castor';
+@use '@onfido/castor';
 
@@ -132,3 +132,3 @@ :global {
 ```scss
-@use '~@onfido/castor';
+@use '@onfido/castor';
 
@@ -158,3 +158,3 @@ @include castor.day('class');
 ```scss
-@use '~@onfido/castor';
+@use '@onfido/castor';
 
@@ -192,3 +192,3 @@ :root {
 ```scss
-@use '~@onfido/castor';
+@use '@onfido/castor';
 
@@ -195,0 +195,0 @@ .ods-button.round {

src/components/button/button.stories.ts

 import { iconNames } from '@onfido/castor-icons';
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import { htmlMatrix, Meta, Story } from '../../../../../docs';
 import { Icon } from '../icon/icon.story';
@@ -13,2 +13,3 @@ import { Button, ButtonProps } from './button.story';
   component: Button,
+  render: Button,
   argTypes: {
@@ -32,30 +33,29 @@ children: {},
 
-export const Playground: Story<ButtonProps> = (props) => Button(props);
+export const Playground: Story<ButtonProps> = {};
 
 export const Kind = htmlMatrix(Button, { kind });
-Kind.argTypes = omit('kind');
-
 export const Variant = htmlMatrix(Button, { variant });
-Variant.argTypes = omit('variant');
-
 export const Disabled = htmlMatrix(Button, { disabled });
-Disabled.argTypes = omit('disabled');
 
-export const AsAnchor: Story<ButtonProps> = (props) =>
-  Button({ ...props, href: 'javascript:void 0' });
+export const AsAnchor: Story<ButtonProps> = {
+  args: { href: 'javascript:void 0' },
+};
 
 const [firstIconName] = iconNames;
 const icon = Icon({ name: firstIconName, ['aria-hidden']: 'true' });
-export const WithIcon: Story<ButtonProps> = (props) =>
-  Button({ ...props, children: icon + 'Button' }) +
-  Button({ ...props, children: 'Button' + icon });
+export const WithIcon: Story<ButtonProps> = {
+  render: ({ children, ...props }) =>
+    Button({ ...props, children: icon + children }) +
+    Button({ ...props, children: children + icon }),
+};
 
-export const AllCombinations = htmlMatrix(
-  Button,
-  { disabled, kind, variant },
-  (props) => Button({ ...props, children: label(props) })
-);
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(3, 1fr)',
+export const AllCombinations: Story<ButtonProps> = {
+  ...htmlMatrix(
+    (props: ButtonProps) => Button({ ...props, children: label(props) }),
+    { disabled, kind, variant }
+  ),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(3, 1fr)',
+  },
 };
@@ -62,0 +62,0 @@

src/components/checkbox/checkbox.stories.ts

@@ -1,2 +0,2 @@
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import { htmlMatrix, Meta, Story } from '../../../../../docs';
 import { Checkbox, CheckboxProps } from './checkbox.story';
@@ -11,2 +11,3 @@
   component: Checkbox,
+  render: Checkbox,
   argTypes: {
@@ -24,21 +25,17 @@ children: { description: 'Acts as a label for the `<input>`.' },
 
-export const Playground: Story<CheckboxProps> = (props) => Checkbox(props);
+export const Playground: Story<CheckboxProps> = {};
 
 export const Bordered = htmlMatrix(Checkbox, { bordered });
-Bordered.argTypes = omit('bordered');
-
 export const Invalid = htmlMatrix(Checkbox, { invalid });
-Invalid.argTypes = omit('invalid');
-
 export const Disabled = htmlMatrix(Checkbox, { disabled });
-Disabled.argTypes = omit('disabled');
 
-export const AllCombinations = htmlMatrix(
-  Checkbox,
-  { bordered, disabled, invalid },
-  (props) => Checkbox({ ...props, children: label(props) })
-);
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(2, 1fr)',
+export const AllCombinations: Story<CheckboxProps> = {
+  ...htmlMatrix(
+    (props: CheckboxProps) => Checkbox({ ...props, children: label(props) }),
+    { bordered, disabled, invalid }
+  ),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(2, 1fr)',
+  },
 };
@@ -45,0 +42,0 @@

src/components/field-label/field-label.stories.ts

@@ -14,2 +14,3 @@ import { color } from '@onfido/castor';
   component: FieldLabel,
+  render: FieldLabel,
   argTypes: omit('for'),
@@ -21,44 +22,44 @@ args: {
 
-export const Playground: Story<FieldLabelProps> = (props) => FieldLabel(props);
+export const Playground: Story<FieldLabelProps> = {};
 
-export const AsOptional: Story<FieldLabelProps> = ({ children, ...props }) =>
-  FieldLabel({
-    ...props,
-    children: html('span', {
-      children: [
-        children,
-        html('span', {
-          style: `color: ${color('content-secondary')}`,
-          children: '(optional)',
-        }),
-      ],
+export const AsOptional: Story<FieldLabelProps> = {
+  render: ({ children, ...props }) =>
+    FieldLabel({
+      ...props,
+      children: html('span', {
+        children: [
+          children,
+          html('span', {
+            style: `color: ${color('content-secondary')}`,
+            children: '(optional)',
+          }),
+        ],
+      }),
     }),
-  });
+};
 
-export const AsRequired: Story<FieldLabelProps> = ({ children, ...props }) =>
-  FieldLabel({
-    ...props,
-    children: html('span', {
-      children: [children, Asterisk()],
+export const AsRequired: Story<FieldLabelProps> = {
+  render: ({ children, ...props }) =>
+    FieldLabel({
+      ...props,
+      children: html('span', {
+        children: [children, Asterisk()],
+      }),
     }),
-  });
+};
 
 interface FieldLabelWithHelperTextProps extends FieldLabelProps {
-  label: string;
+  children: string;
   helperText: string;
 }
 
-export const WithHelperText: Story<FieldLabelWithHelperTextProps> = ({
-  label,
-  helperText,
-  ...props
-}) =>
-  FieldLabel({
-    ...props,
-    children: [label, HelperText({ children: helperText })],
-  });
-WithHelperText.argTypes = omit('children');
-WithHelperText.args = {
-  label: 'Label',
-  helperText: 'Helper text',
+export const WithHelperText: Story<FieldLabelWithHelperTextProps> = {
+  args: {
+    helperText: 'Helper text',
+  },
+  render: ({ children, helperText, ...props }) =>
+    FieldLabel({
+      ...props,
+      children: [children, HelperText({ children: helperText })],
+    }),
 };
@@ -68,84 +69,53 @@
   id: string;
-  label: string;
 }
 
-export const WithInput: Story<FieldLabelWithInputProps> = ({
-  id,
-  label,
-  ...props
-}) =>
-  Field({
-    children: [
-      FieldLabel({
-        ...props,
-        children: label,
-        for: id,
-      }),
-      Input({ id }),
-    ],
-  });
-WithInput.argTypes = omit('children');
-WithInput.args = {
-  id: 'field-label-with-input',
-  label: 'Label',
+export const WithInput: Story<FieldLabelWithInputProps> = {
+  args: {
+    id: 'field-label-with-input',
+  },
+  render: ({ id, ...props }) =>
+    Field({
+      children: [FieldLabel({ ...props, for: id }), Input({ id })],
+    }),
 };
 
 interface FieldLabelWithSelectProps extends FieldLabelProps {
+  children: string;
   id: string;
-  label: string;
 }
 
-export const WithSelect: Story<FieldLabelWithSelectProps> = ({
-  id,
-  label,
-  ...props
-}) =>
-  Field({
-    children: [
-      FieldLabel({
-        ...props,
-        children: label,
-        for: id,
-      }),
-      Select({
-        children: [
-          html('option', { children: '', selected: true }),
-          html('option', { children: 'Value A', value: 'a' }),
-          html('option', { children: 'Value B', value: 'b' }),
-          html('option', { children: 'Value C', value: 'c' }),
-        ],
-        id,
-      }),
-    ],
-  });
-WithSelect.argTypes = omit('children');
-WithSelect.args = {
-  id: 'field-label-with-select',
-  label: 'Label',
+export const WithSelect: Story<FieldLabelWithSelectProps> = {
+  args: {
+    id: 'field-label-with-select',
+  },
+  render: ({ id, ...props }) =>
+    Field({
+      children: [
+        FieldLabel({ ...props, for: id }),
+        Select({
+          children: [
+            html('option', { children: '', selected: true }),
+            html('option', { children: 'Value A', value: 'a' }),
+            html('option', { children: 'Value B', value: 'b' }),
+            html('option', { children: 'Value C', value: 'c' }),
+          ],
+          id,
+        }),
+      ],
+    }),
 };
 
 interface FieldLabelWithTextareaProps extends FieldLabelProps {
+  children: string;
   id: string;
-  label: string;
 }
 
-export const WithTextarea: Story<FieldLabelWithTextareaProps> = ({
-  id,
-  label,
-  ...props
-}) =>
-  Field({
-    children: [
-      FieldLabel({
-        ...props,
-        children: label,
-        for: id,
-      }),
-      Textarea({ id }),
-    ],
-  });
-WithTextarea.argTypes = omit('children');
-WithTextarea.args = {
-  id: 'field-label-with-textarea',
-  label: 'Label',
+export const WithTextarea: Story<FieldLabelWithTextareaProps> = {
+  args: {
+    id: 'field-label-with-textarea',
+  },
+  render: ({ id, ...props }) =>
+    Field({
+      children: [FieldLabel({ ...props, for: id }), Textarea({ id })],
+    }),
 };

src/components/icon/icon.stories.ts

@@ -8,3 +8,2 @@ import { IconProps } from '@onfido/castor';
   Meta,
-  omit,
   optionsToSummary,
@@ -20,4 +19,4 @@ Story,
   component: Icon,
+  render: Icon,
   argTypes: {
-    ...omit('aria-hidden'),
     color: {
@@ -30,3 +29,2 @@ control: { type: 'select', options: colors },
     name: {
-      type: { required: true },
       control: { type: 'select', options: iconNames },
@@ -36,2 +34,3 @@ table: {
       },
+      type: { name: 'string', required: true },
     },
@@ -46,18 +45,17 @@ 'aria-hidden': aria.hidden,
 
-export const Playground: Story<IconProps> = (props) => Icon(props);
-Playground.args = {
-  'aria-label': 'A label for an icon',
+export const Playground: Story<IconProps> = {
+  args: { 'aria-label': 'A label for an icon' },
 };
 
-export const Name = htmlMatrix(
-  Icon,
-  { name: iconNames },
-  (props) => Icon(props) + props.name
-);
-Name.args = {
-  'aria-hidden': 'true',
+export const Name: Story<IconProps> = {
+  ...htmlMatrix((props: IconProps) => Icon(props) + props.name, {
+    name: iconNames,
+  }),
+  args: {
+    'aria-hidden': 'true',
+  },
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(4, auto 1fr)',
+  },
 };
-Name.parameters = {
-  display: 'grid',
-  columns: 'repeat(4, auto 1fr)',
-};

src/components/input/input.stories.ts

@@ -29,2 +29,3 @@ import {
   component: Input,
+  render: Input,
   argTypes: {
@@ -55,9 +56,6 @@ ...omit('id', 'value'),
 
-export const Playground: Story<InputProps> = (props) => Input(props);
+export const Playground: Story<InputProps> = {};
 
 export const Invalid = htmlMatrix(Input, { invalid });
-Invalid.argTypes = omit('invalid');
-
 export const Disabled = htmlMatrix(Input, { disabled });
-Disabled.argTypes = omit('disabled');
 
@@ -70,4 +68,9 @@ interface InputWithLabelAndHelperTextProps extends InputProps {
 
-export const WithLabelAndHelperText: Story<InputWithLabelAndHelperTextProps> =
-  ({ id, label, helperText, ...props }) =>
+export const WithLabelAndHelperText: Story<InputWithLabelAndHelperTextProps> = {
+  args: {
+    id: 'input-with-label-and-helper-text',
+    label: 'Label',
+    helperText: 'Helper text',
+  },
+  render: ({ id, label, helperText, ...props }) =>
     Field({
@@ -84,17 +87,14 @@ children: [
       ],
-    });
-WithLabelAndHelperText.args = {
-  id: 'input-with-label-and-helper-text',
-  label: 'Label',
-  helperText: 'Helper text',
+    }),
 };
 
-export const AllCombinations = htmlMatrix(
-  Input,
-  { disabled, invalid },
-  (props) => Input({ ...props, value: value(props) })
-);
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(2, 1fr)',
+export const AllCombinations: Story<InputProps> = {
+  ...htmlMatrix(
+    (props: InputProps) => Input({ ...props, value: value(props) }),
+    { disabled, invalid }
+  ),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(2, 1fr)',
+  },
 };
@@ -101,0 +101,0 @@

src/components/popover/popover.stories.ts

@@ -10,3 +10,3 @@ import {
 import { Button } from '../button/button.story';
-import styles from './popover.stories.scss';
+import * as styles from './popover.stories.scss';
 import { Popover, PopoverProps } from './popover.story';
@@ -20,2 +20,3 @@
   component: Popover,
+  render: Popover,
   argTypes: {
@@ -25,3 +26,2 @@ ...omit('class'),
       control: { type: 'inline-radio', options: align },
-      defaultValue: 'center',
       table: {
@@ -35,3 +35,2 @@ defaultValue: { summary: 'center' },
       control: { type: 'inline-radio', options: position },
-      defaultValue: 'top',
       table: {
@@ -60,25 +59,27 @@ defaultValue: { summary: 'top' },
 
-type PlaygroundProps = PopoverProps & { show?: boolean };
-export const Playground: Story<PlaygroundProps> = ({ show, ...props }) =>
-  html('div', {
-    style: { position: 'relative' },
-    children: [
-      Button({ children: 'Target', kind: 'action', variant: 'primary' }),
-      show && Popover(props),
-    ],
-  });
+export const Playground: Story<PopoverProps & { show?: boolean }> = {
+  render: ({ show, ...props }) =>
+    html('div', {
+      style: { position: 'relative' },
+      children: [
+        Button({ children: 'Target', kind: 'action', variant: 'primary' }),
+        show && Popover(props),
+      ],
+    }),
+};
 
-export const ShowHideWithCSS: Story<PopoverProps> = (props) =>
-  html('div', {
-    style: { position: 'relative' },
-    children: [
-      Button({ children: 'Target', kind: 'action', variant: 'primary' }),
-      Popover({ ...props, class: styles['story-popover-on-hover'] }),
-    ],
-  });
-ShowHideWithCSS.storyName = 'show/hide with CSS';
-ShowHideWithCSS.parameters = {
-  docs: {
-    source: {
-      code: `
+export const ShowHideWithCSS: Story<PopoverProps> = {
+  render: (props) =>
+    html('div', {
+      style: { position: 'relative' },
+      children: [
+        Button({ children: 'Target', kind: 'action', variant: 'primary' }),
+        Popover({ ...props, class: styles['story-popover-on-hover'] }),
+      ],
+    }),
+  storyName: 'show/hide with CSS',
+  parameters: {
+    docs: {
+      source: {
+        code: `
 // CSS must be set outside of Castor, e.g.
@@ -93,2 +94,3 @@ // :not(:focus, :hover) + .ods-popover {
         `,
+      },
     },
@@ -98,21 +100,22 @@ },
 
-export const AllCombinations = htmlMatrix(
-  Popover,
-  { position, align }, // order is important
-  (props) =>
-    html('div', {
-      style: { position: 'relative' },
-      children: [
-        Button({ children: 'Target', kind: 'action', variant: 'primary' }),
-        Popover({ ...props, children: `${props.position} ${props.align}` }),
-      ],
-    })
-);
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(3, 1fr)',
-  style: {
-    gap: '3rem',
-    placeItems: 'center',
+export const AllCombinations: Story<PopoverProps> = {
+  ...htmlMatrix(
+    (props: PopoverProps) =>
+      html('div', {
+        style: { position: 'relative' },
+        children: [
+          Button({ children: 'Target', kind: 'action', variant: 'primary' }),
+          Popover({ ...props, children: `${props.position} ${props.align}` }),
+        ],
+      }),
+    { position, align } // order is important
+  ),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(3, 1fr)',
+    style: {
+      gap: '3rem',
+      placeItems: 'center',
+    },
   },
 };

src/components/progress/progress.stories.ts

@@ -11,3 +11,2 @@ import {
 const size = ['regular', 'large'] as const;
-
 const hideLabel = [false, true] as const;
@@ -18,2 +17,3 @@
   component: Progress,
+  render: Progress,
   argTypes: {
@@ -40,3 +40,3 @@ ...omit('aria-valuetext'),
     value: {
-      type: { required: true },
+      type: { name: 'number', required: true },
       table: { type: { summary: 'number' } },
@@ -56,22 +56,21 @@ },
 
-export const Playground: Story<ProgressProps> = (props) => Progress(props);
+export const Playground: Story<ProgressProps> = {};
 
 export const Size = htmlMatrix(Progress, { size });
-Size.argTypes = omit('size');
-
 export const HideLabel = htmlMatrix(Progress, { hideLabel });
-HideLabel.argTypes = omit('hideLabel');
 
-export const WithCustomLabel: Story<ProgressProps> = (props) => Progress(props);
-WithCustomLabel.argTypes = omit('children', 'hideLabel');
-WithCustomLabel.args = {
-  children: 'Progress: 25%',
-  hideLabel: false,
+export const WithCustomLabel: Story<ProgressProps> = {
+  args: {
+    children: 'Progress: 25%',
+    hideLabel: false,
+  },
+  argTypes: omit('children', 'hideLabel'),
 };
 
-export const AllCombinations = htmlMatrix(Progress, { hideLabel, size });
-AllCombinations.argTypes = omit('hideLabel', 'size');
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(2, 1fr)',
+export const AllCombinations: Story<ProgressProps> = {
+  ...htmlMatrix(Progress, { hideLabel, size }),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(2, 1fr)',
+  },
 };

src/components/select/select.stories.ts

@@ -15,2 +15,3 @@ import { classy, m } from '@onfido/castor';
   component: Select,
+  render: Select,
   argTypes: {
@@ -54,40 +55,37 @@ ...omit('class', 'id', 'required', 'value'),
 
-export const Playground: Story<SelectProps> = (props) => Select(props);
+export const Playground: Story<SelectProps> = {};
 
 export const Borderless = htmlMatrix(Select, { borderless });
-Borderless.argTypes = omit('borderless');
-
 export const Invalid = htmlMatrix(Select, { invalid });
-Invalid.argTypes = omit('invalid');
-
 export const Disabled = htmlMatrix(Select, { disabled });
-Disabled.argTypes = omit('disabled');
 
-export const AsRequired: Story<SelectProps> = (props) =>
-  Select({ ...props, required: true });
-AsRequired.args = {
-  children: [
-    html('option', {
-      children: 'Select an option...',
-      disabled: true,
-      selected: true,
-      value: '',
-    }),
-    html('option', { children: 'Option 1', value: 1 }),
-    html('option', { children: 'Option 2', value: 2 }),
-    html('option', { children: 'Option 3', value: 3 }),
-  ],
+export const AsRequired: Story<SelectProps> = {
+  args: {
+    children: [
+      html('option', {
+        children: 'Select an option...',
+        disabled: true,
+        selected: true,
+        value: '',
+      }),
+      html('option', { children: 'Option 1', value: 1 }),
+      html('option', { children: 'Option 2', value: 2 }),
+      html('option', { children: 'Option 3', value: 3 }),
+    ],
+    required: true,
+  },
 };
 
-export const WithEmptyModifier: Story<SelectProps> = (props) =>
-  Select({ ...props, class: classy(m('empty')) });
-WithEmptyModifier.args = {
-  children: [
-    html('option', {
-      children: 'Select an option...',
-      disabled: true,
-      selected: true,
-      value: '',
-    }),
-  ],
+export const WithEmptyModifier: Story<SelectProps> = {
+  args: {
+    children: [
+      html('option', {
+        children: 'Select an option...',
+        disabled: true,
+        selected: true,
+        value: '',
+      }),
+    ],
+    class: classy(m('empty')),
+  },
 };
@@ -102,39 +100,37 @@
 export const WithLabelAndHelperText: Story<SelectWithLabelAndHelperTextProps> =
-  ({ id, label, helperText, ...props }) =>
-    Field({
-      children: [
-        FieldLabel({
-          children: [
-            label,
-            HelperText({ children: helperText }),
-            Select({ ...props, id }),
-          ],
-          for: id,
-        }),
-      ],
-    });
-WithLabelAndHelperText.args = {
-  id: 'select-with-label-and-helper-text',
-  label: 'Label',
-  helperText: 'Helper text',
-};
+  {
+    args: {
+      id: 'select-with-label-and-helper-text',
+      label: 'Label',
+      helperText: 'Helper text',
+    },
+    render: ({ id, label, helperText, ...props }) =>
+      Field({
+        children: [
+          FieldLabel({
+            children: [
+              label,
+              HelperText({ children: helperText }),
+              Select({ ...props, id }),
+            ],
+            for: id,
+          }),
+        ],
+      }),
+  };
 
-export const AllCombinations = htmlMatrix(
-  Select,
-  { borderless, disabled, invalid },
-  (props) => Select({ ...props, children: children(props) })
-);
-AllCombinations.argTypes = omit(
-  'children',
-  'borderless',
-  'disabled',
-  'invalid'
-);
-AllCombinations.args = {
-  children: null,
+export const AllCombinations: Story<SelectProps> = {
+  ...htmlMatrix(
+    (props: SelectProps) => Select({ ...props, children: children(props) }),
+    { borderless, disabled, invalid }
+  ),
+  args: {
+    children: null,
+  },
+  argTypes: omit('children', 'borderless', 'disabled', 'invalid'),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(2, 1fr)',
+  },
 };
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(2, 1fr)',
-};
 
@@ -141,0 +137,0 @@ const children = ({ borderless, disabled, invalid }: SelectProps) => {

src/components/spinner/spinner.stories.ts

@@ -15,2 +15,3 @@ import {
   component: Spinner,
+  render: Spinner,
   argTypes: {
@@ -32,11 +33,11 @@ children: {
 
-export const Playground: Story<SpinnerProps> = (props) => Spinner(props);
+export const Playground: Story<SpinnerProps> = {};
 
 export const Size = htmlMatrix(Spinner, { size });
-Size.argTypes = omit('size');
 
-export const WithoutLabel: Story<SpinnerProps> = (props) => Spinner(props);
-WithoutLabel.argTypes = omit('children');
-WithoutLabel.args = {
-  children: null,
+export const WithoutLabel: Story<SpinnerProps> = {
+  args: {
+    children: null,
+  },
+  argTypes: omit('children'),
 };

src/components/textarea/textarea.stories.ts

@@ -20,2 +20,3 @@ import {
   component: Textarea,
+  render: Textarea,
   argTypes: {
@@ -51,12 +52,7 @@ ...omit('id'),
 
-export const Playground: Story<TextareaProps> = (props) => Textarea(props);
+export const Playground: Story<TextareaProps> = {};
 
 export const Resize = htmlMatrix(Textarea, { resize });
-Resize.argTypes = omit('resize');
-
 export const Invalid = htmlMatrix(Textarea, { invalid });
-Invalid.argTypes = omit('invalid');
-
 export const Disabled = htmlMatrix(Textarea, { disabled });
-Disabled.argTypes = omit('disabled');
 
@@ -70,29 +66,32 @@ interface TextareaWithLabelAndHelperTextProps extends TextareaProps {
 export const WithLabelAndHelperText: Story<TextareaWithLabelAndHelperTextProps> =
-  ({ id, label, helperText, ...props }) =>
-    Field({
-      children: [
-        FieldLabel({
-          children: [
-            label,
-            HelperText({ children: helperText }),
-            Textarea({ ...props, id }),
-          ],
-          for: id,
-        }),
-      ],
-    });
-WithLabelAndHelperText.args = {
-  id: 'input-with-label-and-helper-text',
-  label: 'Label',
-  helperText: 'Helper text',
-};
+  {
+    args: {
+      id: 'input-with-label-and-helper-text',
+      label: 'Label',
+      helperText: 'Helper text',
+    },
+    render: ({ id, label, helperText, ...props }) =>
+      Field({
+        children: [
+          FieldLabel({
+            children: [
+              label,
+              HelperText({ children: helperText }),
+              Textarea({ ...props, id }),
+            ],
+            for: id,
+          }),
+        ],
+      }),
+  };
 
-export const AllCombinations = htmlMatrix(
-  Textarea,
-  { disabled, invalid },
-  (props) => Textarea({ ...props, children: value(props) })
-);
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(2, 1fr)',
+export const AllCombinations: Story<TextareaProps> = {
+  ...htmlMatrix(
+    (props: TextareaProps) => Textarea({ ...props, children: value(props) }),
+    { disabled, invalid }
+  ),
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(2, 1fr)',
+  },
 };
@@ -99,0 +98,0 @@

src/components/tooltip/tooltip.stories.ts

@@ -17,6 +17,6 @@ import {
   component: Tooltip,
+  render: Tooltip,
   argTypes: {
     align: {
       control: { type: 'inline-radio', options: align },
-      defaultValue: 'center',
       table: {
@@ -30,3 +30,2 @@ defaultValue: { summary: 'center' },
       control: { type: 'inline-radio', options: position },
-      defaultValue: 'top',
       table: {
@@ -58,38 +57,41 @@ defaultValue: { summary: 'top' },
 
-export const Playground: Story<TooltipProps> = (props) =>
-  html('div', {
-    style: 'position: relative',
-    children: [
-      Button({
-        children: 'Hover or focus me',
-        kind: 'action',
-        variant: 'primary',
-      }),
-      Tooltip(props),
-    ],
-  });
-
-export const AllCombinations = htmlMatrix(
-  Tooltip,
-  { position, align }, // order is important
-  (props) =>
+export const Playground: Story<TooltipProps> = {
+  render: (props) =>
     html('div', {
       style: 'position: relative',
       children: [
-        Button({ children: 'Target', kind: 'action', variant: 'primary' }),
-        Tooltip({ ...props, children: `${props.position} ${props.align}` }),
+        Button({
+          children: 'Hover or focus me',
+          kind: 'action',
+          variant: 'primary',
+        }),
+        Tooltip(props),
       ],
-    })
-);
-AllCombinations.args = {
-  show: true,
+    }),
 };
-AllCombinations.parameters = {
-  display: 'grid',
-  columns: 'repeat(3, 1fr)',
-  style: {
-    gap: '3rem',
-    margin: '3rem',
-    placeItems: 'center',
+
+export const AllCombinations: Story<TooltipProps> = {
+  ...htmlMatrix(
+    (props: TooltipProps) =>
+      html('div', {
+        style: 'position: relative',
+        children: [
+          Button({ children: 'Target', kind: 'action', variant: 'primary' }),
+          Tooltip({ ...props, children: `${props.position} ${props.align}` }),
+        ],
+      }),
+    { position, align } // order is important
+  ),
+  args: {
+    show: true,
   },
+  parameters: {
+    display: 'grid',
+    columns: 'repeat(3, 1fr)',
+    style: {
+      gap: '3rem',
+      margin: '3rem',
+      placeItems: 'center',
+    },
+  },
 };

No alert changes

Improved metrics

Total package byte prevSize

181555

increased by0.04%

Worsened metrics

Lines of code

2158

decreased by-1.05%

No dependency changes