fix lint issues and update stories

cultureamp · Dec 10, 2024 · 6fce372 · 6fce372
1 parent 8a9df56
commit 6fce372
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 122 deletions.
diff --git a/.changeset/hip-queens-divide.md b/.changeset/hip-queens-divide.md
@@ -1,7 +1,7 @@
 ---
-"@kaizen/components": minor
+'@kaizen/components': minor
 ---
 
 Add LinkButton component
 
-* Adds LinkButton component, stories and documentation to actions group
+- Adds LinkButton component, stories and documentation to actions group
diff --git a/packages/components/src/__actions__/LinkButton/index.ts b/packages/components/src/__actions__/LinkButton/index.ts
@@ -1 +1 @@
-export * from "./v3"
+export * from './v3'
diff --git a/packages/components/src/__actions__/LinkButton/v3/LinkButton.tsx b/packages/components/src/__actions__/LinkButton/v3/LinkButton.tsx
@@ -25,11 +25,13 @@ export const LinkButton = forwardRef(
       isFullWidth = false,
       isDisabled,
       className,
+      isReversed,
       ...otherProps
     }: LinkButtonProps,
     ref: React.ForwardedRef<HTMLAnchorElement>,
   ) => {
-    const isReversed = useReversedColors()
+    const shouldUseReverse = useReversedColors()
+    const isReversedVariant = isReversed ?? shouldUseReverse
 
     return (
       <RACLink
@@ -40,7 +42,7 @@ export const LinkButton = forwardRef(
           buttonStyles[size],
           hasHiddenLabel && buttonStyles[`${size}IconButton`],
           isDisabled && buttonStyles.isDisabled,
-          isReversed ? buttonStyles[`${variant}Reversed`] : buttonStyles[variant],
+          isReversedVariant ? buttonStyles[`${variant}Reversed`] : buttonStyles[variant],
           isFullWidth && buttonStyles.fullWidth,
           className,
         )}
@@ -65,3 +67,5 @@ export const LinkButton = forwardRef(
     )
   },
 )
+
+LinkButton.displayName = 'LinkButton'
diff --git a/packages/components/src/__actions__/LinkButton/v3/_docs/LinkButton.doc.stories.tsx b/packages/components/src/__actions__/LinkButton/v3/_docs/LinkButton.doc.stories.tsx
@@ -1,20 +1,20 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { Icon } from "~components/__future__"
-import { ReversedColors } from "~components/__utilities__/v3"
-import { LinkButton } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { VisuallyHidden } from '~components/VisuallyHidden'
+import { Icon } from '~components/__future__'
+import { ReversedColors } from '~components/__utilities__/v3'
+import { LinkButton } from '../index'
 
 const meta = {
-  title: "Actions/LinkButton/LinkButton (v3)",
+  title: 'Actions/LinkButton/LinkButton (v3)',
   component: LinkButton,
   args: {
-    children: "Label",
-    href: "#link-button-clicked",
+    children: 'Label',
+    href: '#link-button-clicked',
   },
   argTypes: {
     icon: {
-      options: ["delete", "arrow", "plus"],
+      options: ['delete', 'arrow', 'plus'],
       mapping: {
         delete: <Icon isPresentational name="delete" />,
         arrow: <Icon isPresentational name="arrow_forward" />,
@@ -36,25 +36,35 @@ export const LinkButtonOpensInNewTab: Story = {
       <>
         Label
         <VisuallyHidden> opens a new tab</VisuallyHidden>
+        <a href="#thing" target="_blank">
+          sdfasd
+        </a>
       </>
     ),
-    href: "https://www.google.com",
-    target: "_blank",
+    href: 'https://www.google.com',
+    target: '_blank',
+    rel: 'noopener noreferrer',
     icon: <Icon isPresentational name="open_in_new" shouldMirrorInRTL />,
-    iconPosition: "end",
+    iconPosition: 'end',
   },
 }
 
 export const LinkButtonVariants: Story = {
-  render: args => (
+  render: ({ children: _, ...otherArgs }) => (
     <>
-      <LinkButton {...args} variant="primary" />
-      <LinkButton {...args} variant="secondary" />
-      <LinkButton {...args} variant="tertiary" />
+      <LinkButton {...otherArgs} variant="primary">
+        Primary
+      </LinkButton>
+      <LinkButton {...otherArgs} variant="secondary">
+        Secondary
+      </LinkButton>
+      <LinkButton {...otherArgs} variant="tertiary">
+        Tertiary
+      </LinkButton>
     </>
   ),
   decorators: [
-    Story => (
+    (Story) => (
       <div className="flex gap-8">
         <Story />
       </div>
@@ -63,7 +73,7 @@ export const LinkButtonVariants: Story = {
 }
 
 export const LinkButtonVariantsReversed: Story = {
-  render: args => (
+  render: (args) => (
     <ReversedColors isReversed={true}>
       <LinkButton {...args} variant="primary" />
       <LinkButton {...args} variant="secondary" />
@@ -74,7 +84,7 @@ export const LinkButtonVariantsReversed: Story = {
     reverseColors: true,
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="flex gap-8 bg-purple-700 p-16">
         <Story />
       </div>
@@ -83,15 +93,15 @@ export const LinkButtonVariantsReversed: Story = {
 }
 
 export const LinkButtonSizes: Story = {
-  render: args => (
+  render: (args) => (
     <>
       <LinkButton {...args} size="small" />
       <LinkButton {...args} size="medium" />
       <LinkButton {...args} size="large" />
     </>
   ),
   decorators: [
-    Story => (
+    (Story) => (
       <div className="[&>*]:ms-8">
         <Story />
       </div>
@@ -108,22 +118,22 @@ export const LinkButtonWithIconStart: Story = {
 export const LinkButtonWithIconEnd: Story = {
   args: {
     icon: <Icon isPresentational name="arrow_forward" shouldMirrorInRTL />,
-    iconPosition: "end",
+    iconPosition: 'end',
   },
 }
 
 export const IconLinkButton: Story = {
   args: {
-    children: "Remove highlights from: May 8, 2024",
+    children: 'Remove highlights from: May 8, 2024',
     icon: <Icon isPresentational name="delete" />,
     hasHiddenLabel: true,
   },
 }
 
 export const DownloadIconButton: Story = {
   args: {
-    children: "Download the kaizen design system badge",
-    href: "./static/media/kaizen-badge.svg",
+    children: 'Download the kaizen design system badge',
+    href: './static/media/kaizen-badge.svg',
     icon: <Icon isPresentational name="download" />,
     hasHiddenLabel: true,
     download: true,

diff --git a/packages/components/src/__actions__/LinkButton/v3/_docs/LinkButton.spec.stories.tsx b/packages/components/src/__actions__/LinkButton/v3/_docs/LinkButton.spec.stories.tsx
@@ -1,15 +1,15 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { userEvent, waitFor, within, expect } from "@storybook/test"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { Icon } from "~components/__future__/Icon"
-import { LinkButton } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { userEvent, waitFor, within, expect } from '@storybook/test'
+import { VisuallyHidden } from '~components/VisuallyHidden'
+import { Icon } from '~components/__future__/Icon'
+import { LinkButton } from '../index'
 
 const meta = {
-  title: "Actions/LinkButton/LinkButton (v3)/LinkButton (v3) tests",
+  title: 'Actions/LinkButton/LinkButton (v3)/LinkButton (v3) tests',
   component: LinkButton,
   args: {
-    children: "Label",
+    children: 'Label',
   },
 } satisfies Meta<typeof LinkButton>
 
@@ -29,9 +29,9 @@ export const IconLinkButtonWithHiddenLabel: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement.parentElement!)
-    const linkButton = canvas.getByRole("link")
+    const linkButton = canvas.getByRole('link')
 
-    expect(linkButton).toHaveAccessibleName("Hidden label is accessible")
+    expect(linkButton).toHaveAccessibleName('Hidden label is accessible')
   },
 }
 
@@ -41,11 +41,9 @@ export const RACRenderPropsWithChildren: Story = {
       {({ isFocusVisible }) => (
         <>
           Label
-          <VisuallyHidden>
-            {isFocusVisible ? " is focused" : " is unfocused"}
-          </VisuallyHidden>
+          <VisuallyHidden>{isFocusVisible ? ' is focused' : ' is unfocused'}</VisuallyHidden>
           <Icon
-            name={isFocusVisible ? "thumb_up" : "thumb_down"}
+            name={isFocusVisible ? 'thumb_up' : 'thumb_down'}
             isPresentational
             isFilled={true}
             className="ms-8 [--icon-size:16]"
@@ -56,30 +54,26 @@ export const RACRenderPropsWithChildren: Story = {
   ),
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement.parentElement!)
-    const linkButton = canvas.getByRole("link")
+    const linkButton = canvas.getByRole('link')
 
-    await step("link icon reflects unfocused state", async () => {
-      await waitFor(() =>
-        expect(linkButton).toHaveAccessibleName("Label is unfocused")
-      )
+    await step('link icon reflects unfocused state', async () => {
+      await waitFor(() => expect(linkButton).toHaveAccessibleName('Label is unfocused'))
     })
 
-    await step("focus on link and update icon", async () => {
+    await step('focus on link and update icon', async () => {
       await userEvent.tab()
-      await waitFor(() =>
-        expect(linkButton).toHaveAccessibleName("Label is focused")
-      )
+      await waitFor(() => expect(linkButton).toHaveAccessibleName('Label is focused'))
     })
   },
 }
 
 export const RACRenderPropsWithClassName: Story = {
   args: {
-    className: ({ isFocusVisible }) => (isFocusVisible ? "!bg-gray-300" : ""),
+    className: ({ isFocusVisible }) => (isFocusVisible ? '!bg-gray-300' : ''),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement.parentElement!)
-    const linkButton = canvas.getByRole("link")
+    const linkButton = canvas.getByRole('link')
     await linkButton.focus()
   },
 }