@kaizen/components 0.0.0-canary-button-codemod-canary-20250212054517 → 0.0.0-canary-stacking-context-fix-20250225001220

package/src/__rc__/Button/_docs/Button.docs.stories.tsx

@@ -2,7 +2,17 @@ import React from 'react'
 import { action } from '@storybook/addon-actions'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Badge } from '~components/Badge'
-import { Icon } from '~components/__rc__'
+import { EmptyState } from '~components/EmptyState'
+import {
+  Icon,
+  Menu,
+  MenuItem,
+  MenuPopover,
+  MenuTrigger,
+  Select,
+  Tooltip,
+  TooltipTrigger,
+} from '~components/__rc__'
 import { ReversedColors } from '~components/__utilities__/v3'
 import { Button } from '../index'
 
@@ -15,7 +25,7 @@ const meta = {
   },
   argTypes: {
     icon: {
-      options: ['delete', 'arrow', 'plus'],
+      options: ['delete', 'arrow', 'add'],
       mapping: {
         delete: <Icon isPresentational name="delete" />,
         arrow: <Icon isPresentational name="arrow_forward" />,
@@ -60,13 +70,6 @@ export const ButtonVariantsReversed: Story = {
     reverseColors: true,
     backgrounds: { default: 'Purple 700' },
   },
-  decorators: [
-    (Story) => (
-      <div className="flex gap-8">
-        <Story />
-      </div>
-    ),
-  ],
 }
 
 export const ButtonSizes: Story = {
@@ -136,3 +139,255 @@ export const ButtonWithBadge: Story = {
     ),
   },
 }
+
+// Dos and Donts
+
+export const DoExamplePrimaryAndSecondary: Story = {
+  render: () => {
+    return (
+      <>
+        <Button variant="primary" className="me-8">
+          Submit
+        </Button>
+        <Button variant="secondary">Cancel</Button>
+      </>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const DontExamplePrimaryAndSecondary: Story = {
+  render: () => {
+    return (
+      <>
+        <Button variant="primary" className="me-8">
+          Submit
+        </Button>
+        <Button variant="primary">Cancel</Button>
+      </>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex gap-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const DoExampleCta: Story = {
+  render: () => {
+    return (
+      <>
+        <EmptyState
+          headingProps={{ children: 'Lorem', variant: 'heading-2', tag: 'span' }}
+          bodyText="Ipsum dolor sit amet consectetur adipisicing elit."
+        >
+          <Button size="large">Action</Button>
+        </EmptyState>
+      </>
+    )
+  },
+}
+
+export const DoExampleDefaultToMediumSize: Story = {
+  render: () => {
+    return (
+      <>
+        <Select items={[]} label="Choose country"></Select>
+        <Button className="mt-8">Save</Button>
+      </>
+    )
+  },
+}
+
+export const DontExampleDefaultToMediumSize: Story = {
+  render: () => {
+    return (
+      <>
+        <Select items={[]} label="Choose country"></Select>
+        <Button className="mt-8" variant="primary" size="small">
+          Save
+        </Button>
+      </>
+    )
+  },
+}
+
+export const DoExampleUseIconsSparingly: Story = {
+  args: {
+    children: 'Add user',
+    icon: <Icon isPresentational name="add" />,
+    iconPosition: 'end',
+  },
+}
+
+export const DontExampleUseIconsSparingly: Story = {
+  args: {
+    children: 'Add user',
+    icon: <Icon isPresentational name="star" />,
+    iconPosition: 'end',
+  },
+}
+
+export const DoExampleUseTooltips: Story = {
+  args: {
+    children: 'Delete',
+    icon: <Icon isPresentational name="delete" />,
+    hasHiddenLabel: true,
+    variant: 'tertiary',
+  },
+  render: (args) => (
+    <TooltipTrigger>
+      <Button {...args} />
+      <Tooltip>Delete content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const DontExampleUseTooltips: Story = {
+  args: {
+    children: 'Delete',
+    icon: <Icon isPresentational name="delete" />,
+    hasHiddenLabel: true,
+    variant: 'tertiary',
+  },
+}
+
+export const DoExampleMenuButton: Story = {
+  render: () => (
+    <MenuTrigger defaultOpen={false}>
+      <Button
+        variant="secondary"
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
+        iconPosition="end"
+      >
+        Manage
+      </Button>
+      <MenuPopover>
+        <Menu>
+          <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
+          <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
+        </Menu>
+      </MenuPopover>
+    </MenuTrigger>
+  ),
+}
+
+export const DoExampleKebabMenuButton: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <MenuTrigger defaultOpen={false}>
+        <Button
+          variant="secondary"
+          icon={<Icon name="more_horiz" isPresentational />}
+          iconPosition="end"
+          hasHiddenLabel
+        >
+          Manage
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
+            <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
+            <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+      <Tooltip>Manage</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const DoExampleMinimalPunctuation: Story = {
+  args: {
+    children: 'View tour',
+    variant: 'secondary',
+  },
+}
+
+export const DontExampleMinimalPunctuation: Story = {
+  args: {
+    children: "What's new?",
+    variant: 'secondary',
+  },
+}
+
+export const DoExampleSecondPerson: Story = {
+  args: {
+    children: 'View your reports',
+    variant: 'secondary',
+  },
+}
+
+export const DontExampleSecondPerson: Story = {
+  args: {
+    children: 'View my reports',
+    variant: 'secondary',
+  },
+}
+
+export const DoExampleFunctionalLabels: Story = {
+  args: {
+    children: 'Edit report',
+    variant: 'secondary',
+  },
+}
+
+export const DontExampleFunctionalLabels: Story = {
+  args: {
+    children: 'Edit',
+    variant: 'secondary',
+  },
+}
+
+export const DoExampleClearAndConciseLabels: Story = {
+  args: {
+    children: 'Save',
+    variant: 'secondary',
+  },
+}
+
+export const DontExampleClearAndConciseLabels: Story = {
+  args: {
+    children: 'Go to next step',
+    variant: 'secondary',
+  },
+}
+
+export const DoExampleDeclareContext: Story = {
+  args: {
+    children: 'Create survey',
+    variant: 'secondary',
+  },
+}
+
+export const DontExampleDeclareContext: Story = {
+  args: {
+    children: 'Create',
+    variant: 'secondary',
+  },
+}
+
+export const DoExampleTertiaryButtonWithIcons: Story = {
+  args: {
+    children: 'Edit cycle',
+    variant: 'tertiary',
+    icon: <Icon isPresentational name="edit" />,
+  },
+}
+
+export const DontExampleTertiaryButtonWithIcons: Story = {
+  args: {
+    children: 'Edit cycle',
+    variant: 'tertiary',
+  },
+}

package/src/__rc__/Icon/constants.ts

@@ -130,6 +130,7 @@ export const iconDefaultSet = [
   'sentiment_satisfied',
   'sentiment_very_satisfied',
   'settings',
+  'share',
   'sms',
   'south_east',
   'star',

package/src/__rc__/Tabs/subcomponents/Tab/Tab.module.css

@@ -23,7 +23,6 @@
   }
 
   &:focus-visible {
-    background: var(--color-blue-100);
     color: var(--color-blue-500);
     border-color: var(--color-blue-500);
   }
@@ -37,9 +36,13 @@
   }
 
   &:not([data-disabled]):hover {
-    background: var(--color-blue-100);
+    background: var(--color-blue-200);
     color: var(--color-blue-500);
   }
+
+  &:not([data-disabled]):active {
+    background: var(--color-blue-100);
+  }
 }
 
 .tab[data-selected] {

package/src/__rc__/Tabs/subcomponents/TabList/TabList.module.css

@@ -3,7 +3,7 @@
 }
 
 .tabList {
-  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-bottom: 1px solid var(--color-gray-300);
   padding: var(--spacing-6) 0 0;
   width: 100%;
   height: 100%;
@@ -42,7 +42,7 @@
 
 .leftArrow,
 .leftArrow:hover {
-  border-right: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-right: 1px solid var(--color-gray-300);
 }
 
 .rightArrow {
@@ -51,10 +51,17 @@
 
 .rightArrow,
 .rightArrow:hover {
-  border-left: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  border-left: 1px solid var(--color-gray-300);
 }
 
 .leftArrow:hover,
 .rightArrow:hover {
-  background: var(--color-gray-200);
+  background: var(--color-blue-200);
+  color: var(--color-blue-500);
+}
+
+.leftArrow:active,
+.rightArrow:active {
+  background: var(--color-blue-100);
+  color: var(--color-blue-500);
 }

package/codemods/upgradeV1Buttons/index.ts

@@ -1,19 +0,0 @@
-import { transformComponentsInDir } from '../utils'
-import { upgradeV1Buttons } from './upgradeV1Buttons'
-
-const run = (): void => {
-  console.log('It is recommended that the `upgradeIconV1` codemod be run prior to this')
-  console.log('---')
-  console.log('~(-_- ~) Running V1 Buttons upgrade (~ -_-)~')
-
-  const targetDir = process.argv[2]
-  if (!targetDir) {
-    process.exit(1)
-  }
-
-  transformComponentsInDir(targetDir, ['IconButton', 'Button'], (tagNames) => [
-    upgradeV1Buttons(tagNames),
-  ])
-}
-
-run()

package/codemods/upgradeV1Buttons/transformV1ButtonAttributes.spec.ts

@@ -1,202 +0,0 @@
-import ts from 'typescript'
-import { parseJsx } from '../__tests__/utils'
-import { createJsxElementWithChildren, printAst } from '../utils'
-import { transformV1ButtonAttributes } from './transformV1ButtonAttributes'
-
-export const mockedTransformer =
-  (kaioComponentName: string) =>
-  (context: ts.TransformationContext) =>
-  (rootNode: ts.Node): ts.Node => {
-    const visit = (node: ts.Node): ts.Node => {
-      if (ts.isJsxSelfClosingElement(node)) {
-        const { targetComponentName, newAttributes, childrenValue } = transformV1ButtonAttributes(
-          node,
-          kaioComponentName,
-        )
-        return createJsxElementWithChildren(targetComponentName, newAttributes, childrenValue)
-      }
-      return ts.visitEachChild(node, visit, context)
-    }
-    return ts.visitNode(rootNode, visit)
-  }
-
-const transformInput = (
-  sourceFile: ts.SourceFile,
-  kaioComponentName: string = 'Button',
-): string => {
-  const result = ts.transform(sourceFile, [mockedTransformer(kaioComponentName)])
-  const transformedSource = result.transformed[0] as ts.SourceFile
-  return printAst(transformedSource)
-}
-
-describe('transformV1ButtonAttributes()', () => {
-  it('changes label to children', () => {
-    const inputAst = parseJsx('<Button label="Pancakes" />')
-    const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
-    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('replaces IconButton with Button and changes label to children and adds hasHiddenLabel', () => {
-    const inputAst = parseJsx('<IconButton icon={icon} label="Pancakes" />')
-    const outputAst = parseJsx(
-      '<Button icon={icon} variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>',
-    )
-    expect(transformInput(inputAst, 'IconButton')).toEqual(printAst(outputAst))
-  })
-
-  it('replaces V1 Buttons with LinkButton if href exists', () => {
-    const inputAst = parseJsx('<Button label="Pancakes" href="#" />')
-    const outputAst = parseJsx(
-      '<LinkButton href="#" variant="secondary" size="large">Pancakes</LinkButton>',
-    )
-    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  it('replaces V1 Buttons with LinkButton if component prop exists', () => {
-    const inputAst = parseJsx('<Button label="Pancakes" component={Component} />')
-    const outputAst = parseJsx(
-      '<LinkButton component={Component} variant="secondary" size="large">Pancakes</LinkButton>',
-    )
-    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-  })
-
-  describe('transform existing props', () => {
-    it('changes onClick to onPress', () => {
-      const inputAst = parseJsx('<Button label="Pancakes" onClick={handleClick} />')
-      const outputAst = parseJsx(
-        '<Button onPress={handleClick} variant="secondary" size="large">Pancakes</Button>',
-      )
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    it('changes reversed to isReversed', () => {
-      const inputAst = parseJsx(`
-        <>
-          <Button label="Pancakes" reversed />
-          <Button label="Pancakes" reversed={false} />
-        </>
-      `)
-      const outputAst = parseJsx(`
-        <>
-          <Button isReversed variant="secondary" size="large">Pancakes</Button>
-          <Button isReversed={false} variant="secondary" size="large">Pancakes</Button>
-        </>
-      `)
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    it('changes classNameOverride to className', () => {
-      const inputAst = parseJsx('<Button label="Pancakes" classNameOverride="hello" />')
-      const outputAst = parseJsx(
-        '<Button className="hello" variant="secondary" size="large">Pancakes</Button>',
-      )
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    it('changes data-automation-id to data-testid', () => {
-      const inputAst = parseJsx('<Button label="Pancakes" data-automation-id="pancakes" />')
-      const outputAst = parseJsx(
-        '<Button data-testid="pancakes" variant="secondary" size="large">Pancakes</Button>',
-      )
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    it('changes disabled to isDisabled', () => {
-      const inputAst = parseJsx(`
-        <>
-          <Button label="Pancakes" disabled />
-          <Button label="Pancakes" disabled={false} />
-        </>
-      `)
-      const outputAst = parseJsx(`
-        <>
-          <Button isDisabled variant="secondary" size="large">Pancakes</Button>
-          <Button isDisabled={false} variant="secondary" size="large">Pancakes</Button>
-        </>
-      `)
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    it('changes newTabAndIUnderstandTheAccessibilityImplications to target="_blank" and rel="noopener noreferrer"', () => {
-      const inputAst = parseJsx(
-        '<Button label="Pancakes" newTabAndIUnderstandTheAccessibilityImplications />',
-      )
-      const outputAst = parseJsx(
-        '<Button target="_blank" rel="noopener noreferrer" variant="secondary" size="large">Pancakes</Button>',
-      )
-      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-    })
-
-    describe('transform variant', () => {
-      it('changes default (undefined) for Button to variant secondary', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" />')
-        const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('changes default (undefined) for IconButton to variant tertiary', () => {
-        const inputAst = parseJsx('<IconButton label="Pancakes" />')
-        const outputAst = parseJsx(
-          '<Button variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>',
-        )
-        expect(transformInput(inputAst, 'IconButton')).toEqual(printAst(outputAst))
-      })
-
-      it('changes primary to variant primary', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" primary />')
-        const outputAst = parseJsx('<Button variant="primary" size="large">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('changes secondary to variant tertiary', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" secondary />')
-        const outputAst = parseJsx('<Button variant="tertiary" size="large">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('removes destructive', () => {
-        const inputAst = parseJsx(`
-          <>
-            <Button label="Pancakes" destructive />
-            <Button label="Pancakes" primary destructive />
-            <Button label="Pancakes" secondary destructive />
-          </>
-        `)
-        const outputAst = parseJsx(`
-          <>
-            <Button variant="secondary" size="large">Pancakes</Button>
-            <Button variant="primary" size="large">Pancakes</Button>
-            <Button variant="tertiary" size="large">Pancakes</Button>
-          </>
-        `)
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-    })
-
-    describe('transform size', () => {
-      it('changes default (undefined) to large', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" />')
-        const outputAst = parseJsx('<Button variant="secondary" size="large">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('changes small to medium', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" size="small" />')
-        const outputAst = parseJsx('<Button size="medium" variant="secondary">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('changes regular to large', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" size="regular" />')
-        const outputAst = parseJsx('<Button size="large" variant="secondary">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-
-      it('does not change a non-string value', () => {
-        const inputAst = parseJsx('<Button label="Pancakes" size={size} />')
-        const outputAst = parseJsx('<Button size={size} variant="secondary">Pancakes</Button>')
-        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
-      })
-    })
-  })
-})