@transferwise/components 46.132.1 → 46.133.1

package/src/iconButton/IconButton.story.tsx

@@ -13,112 +13,265 @@ import {
   Bank,
   Freeze,
 } from '@transferwise/icons';
+import { fn } from 'storybook/test';
 import IconButton, { Props } from './IconButton';
-import { action } from 'storybook/actions';
-import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
+/**
+ * **Design guidance**: <a href="https://wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>
+ */
 export default {
   title: 'Actions/IconButton',
   component: IconButton,
+  args: {
+    onClick: fn(),
+    'aria-label': 'Action',
+  },
+  argTypes: {
+    id: { table: { category: 'Common' } },
+    className: { table: { category: 'Common' } },
+    role: { table: { category: 'Common' } },
+    tabIndex: { table: { category: 'Common' } },
+    'data-testid': { table: { category: 'Common' } },
+    onClick: { table: { category: 'Common' } },
+  },
+  parameters: {
+    docs: { toc: true },
+  },
 } satisfies Meta<typeof IconButton>;
 
 type Story = StoryObj<typeof IconButton>;
 
 const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
-const Template = ({ size, disabled }: Props) => {
-  return (
+/**
+ * Explore size, priority, type, and disabled state via the controls panel.
+ * Use `aria-label` to provide an accessible name.
+ */
+export const Playground: Story = {
+  args: {
+    size: 48,
+    priority: 'primary',
+    type: 'default',
+    disabled: false,
+  },
+  render: (args) => (
+    <IconButton {...args}>
+      <Plus />
+    </IconButton>
+  ),
+};
+
+/**
+ * Priorities set a visual hierarchy amongst the buttons displayed on the
+ * screen to help more important buttons to take precedence over others. <br />
+ * <a href="https://wise.design/components/icon-button#priorities" target="_blank">Design documentation</a>
+ */
+export const Priority: Story = {
+  args: {
+    type: 'default',
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    priority: { table: { disable: true } },
+    size: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    href: { table: { disable: true } },
+    target: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center', justifyContent: 'center' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args: Props) => (
     <>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="primary"
-        type="default"
-        onClick={action('button click')}
-      >
+      <IconButton priority="primary" type={args.type} aria-label="Primary" onClick={fn()}>
         <Plus />
       </IconButton>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="secondary"
-        type="default"
-        onClick={action('button click')}
-      >
-        <Defrost />
+      <IconButton priority="secondary" type={args.type} aria-label="Secondary" onClick={fn()}>
+        <Settings />
       </IconButton>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="tertiary"
-        type="default"
-        onClick={action('button click')}
-      >
-        <ArrowLeft />
+      <IconButton priority="tertiary" type={args.type} aria-label="Tertiary" onClick={fn()}>
+        <Star />
       </IconButton>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="minimal"
-        type="default"
-        onClick={action('button click')}
-      >
+      <IconButton priority="minimal" type={args.type} aria-label="Minimal" onClick={fn()}>
         <Menu />
       </IconButton>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="primary"
-        type="negative"
-        onClick={action('button click')}
-      >
-        <Cross />
+    </>
+  ),
+};
+
+/**
+ * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
+ * <a href="https://wise.design/components/icon-button#types" target="_blank">Design documentation</a>
+ */
+export const Type: Story = {
+  args: {
+    priority: 'primary',
+  },
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'minimal'],
+    },
+    type: { table: { disable: true } },
+    size: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    href: { table: { disable: true } },
+    target: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center', justifyContent: 'center' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args: Props) => (
+    <>
+      <IconButton priority={args.priority} type="default" aria-label="Default" onClick={fn()}>
+        <Plus />
       </IconButton>
-      <IconButton
-        size={size}
-        disabled={disabled}
-        aria-label="One step back"
-        priority="secondary"
-        type="negative"
-        onClick={action('button click')}
-      >
-        <Edit />
+      <IconButton priority={args.priority} type="negative" aria-label="Negative" onClick={fn()}>
+        <Cross />
       </IconButton>
     </>
-  );
+  ),
 };
 
-export const Basic: Story = {
-  render: () => {
-    return (
-      <div
-        style={{
-          gap: '1em',
-          display: 'grid',
-          justifyContent: 'space-between',
-          gridTemplate: `auto auto / repeat(6, min-content)`,
-        }}
-      >
-        {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
-          (variant) => (
-            <Body key={variant} type="body-default-bold">
-              {variant}
-            </Body>
-          ),
-        )}
-        {sizes.map((size) => (
-          <Template key={size} size={size} />
-        ))}
-        <Template size={72} disabled />
+/**
+ * IconButton is available in 7 sizes: 16, 24, 32, 40, 48, 56, 72. <br />
+ * <a href="https://wise.design/components/icon-button#sizes" target="_blank">Design documentation</a>
+ */
+export const Size: Story = {
+  args: {
+    priority: 'primary',
+    type: 'default',
+  },
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'minimal'],
+    },
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    size: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    href: { table: { disable: true } },
+    target: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+        <Story />
       </div>
-    );
+    ),
+  ],
+  render: (args: Props) => (
+    <>
+      {sizes.map((size) => (
+        <div
+          key={size}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}
+        >
+          <IconButton
+            size={size}
+            priority={args.priority}
+            type={args.type}
+            aria-label={`${size}px`}
+          >
+            <ArrowLeft />
+          </IconButton>
+          <span style={{ fontSize: '12px' }}>{size}px</span>
+        </div>
+      ))}
+    </>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `{[16, 24, 32, 40, 48, 56, 72].map((size) => (
+  <div key={size}>
+    <IconButton size={size} priority="primary" type="default" aria-label={\`\${size}px\`}>
+      <ArrowLeft />
+    </IconButton>
+    <span>{size}px</span>
+  </div>
+))}`,
+      },
+    },
+  },
+};
+
+/**
+ * Disabled buttons cannot be interacted with and are visually distinct.
+ */
+export const Disabled: Story = {
+  args: {
+    priority: 'primary',
+    type: 'default',
+  },
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'minimal'],
+    },
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    size: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    href: { table: { disable: true } },
+    target: { table: { disable: true } },
+    onClick: { table: { disable: true } },
   },
+  render: (args: Props) => (
+    <IconButton disabled priority={args.priority} type={args.type} aria-label="Disabled">
+      <Plus />
+    </IconButton>
+  ),
+};
+
+/**
+ * IconButton can render as an anchor element when `href` is provided.
+ */
+export const AsAnchor: Story = {
+  args: {
+    priority: 'primary',
+    type: 'default',
+    href: 'https://wise.com',
+    target: '_blank',
+  },
+  argTypes: {
+    priority: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'minimal'],
+    },
+    type: {
+      control: 'radio',
+      options: ['default', 'negative'],
+    },
+    size: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  render: (args: Props) => (
+    <IconButton {...args} aria-label="External link">
+      <ArrowLeft />
+    </IconButton>
+  ),
 };
 
 /**
@@ -126,8 +279,25 @@ export const Basic: Story = {
  * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
  */
 export const SentimentAwareness: Story = {
-  render: () => {
-    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
+  args: {
+    size: 48,
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: [16, 24, 32, 40, 48, 56, 72],
+    },
+  },
+  render: (args: Props) => {
+    const priorities = [
+      { key: 'primary', label: 'primary' },
+      { key: 'secondary', label: 'secondary' },
+      { key: 'tertiary', label: 'tertiary' },
+      { key: 'minimal', label: 'minimal' },
+      { key: 'neg-primary', label: 'negative\nprimary' },
+      { key: 'neg-secondary', label: 'negative\nsecondary' },
+      { key: 'disabled', label: 'disabled' },
+    ] as const;
     const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
 
     return (
@@ -137,21 +307,23 @@ export const SentimentAwareness: Story = {
           <div style={{ width: '82px', paddingLeft: '8px' }} />
           {priorities.map((priority) => (
             <div
-              key={priority}
+              key={priority.key}
               style={{
-                width: '32px',
+                width: `${args.size}px`,
                 textAlign: 'center',
                 fontSize: '11px',
                 fontWeight: 'bold',
                 writingMode: 'vertical-rl',
                 transform: 'rotate(180deg)',
-                height: '60px',
+                height: '80px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                whiteSpace: 'pre',
+                lineHeight: '1',
               }}
             >
-              {priority}
+              {priority.label}
             </div>
           ))}
         </div>
@@ -176,48 +348,66 @@ export const SentimentAwareness: Story = {
               {sentiment} (base)
             </div>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Plus />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Settings />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Star />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Travel />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={args.size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={args.size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Menu />
             </IconButton>
@@ -240,48 +430,66 @@ export const SentimentAwareness: Story = {
               {sentiment} (elevated)
             </div>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Primary action"
               priority="primary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Briefcase />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Secondary action"
               priority="secondary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Bank />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Tertiary action"
               priority="tertiary"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Freeze />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
               aria-label="Minimal action"
               priority="minimal"
               type="default"
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Edit />
             </IconButton>
             <IconButton
-              size={32}
+              size={args.size}
+              aria-label="Negative primary action"
+              priority="primary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Cross />
+            </IconButton>
+            <IconButton
+              size={args.size}
+              aria-label="Negative secondary action"
+              priority="secondary"
+              type="negative"
+              onClick={fn()}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={args.size}
               aria-label="Disabled action"
               priority="primary"
               type="default"
               disabled
-              onClick={action('button click')}
+              onClick={fn()}
             >
               <Cross />
             </IconButton>
@@ -292,10 +500,7 @@ export const SentimentAwareness: Story = {
   },
   parameters: {
     docs: {
-      source: { type: 'dynamic' },
-      canvas: {
-        sourceState: 'hidden',
-      },
+      canvas: { sourceState: 'hidden' },
     },
   },
 };