@kaizen/components 1.81.1 → 2.0.0

package/src/TitleBlockZen/types.ts

@@ -1,193 +0,0 @@
-import { type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
-import type { ButtonProps, CustomButtonProps } from '~components/Button'
-import { type MenuItemProps } from '~components/Menu'
-import { type Select } from '~components/Select'
-import { type NavigationTabProps } from './subcomponents/NavigationTabs'
-
-/**
- * @param TitleBlockProps ### Accessing internal types of TitleBlockProps
- * If you want access to types like `PrimaryActionProps` (for example, in the scenario
- * where you want to create an object containing menu items to be passed in for the primary
- * menu button), you can use the shorthand:
- * ```
- * const myMenu: TitleBlockProps["primaryAction"] = ...
- * ```
- * This will ensure that `myMenu` has a type of `PrimaryActionProps`.
- */
-export type TitleBlockProps = {
-  children?: React.ReactNode
-  title: string
-  variant?: TitleBlockVariant
-  breadcrumb?: TitleBlockBreadcrumbType
-  avatar?: JSX.Element | TitleBlockAvatarProps
-  subtitle?: React.ReactNode
-  sectionTitle?: string
-  sectionTitleDescription?: string
-  renderSectionTitle?: (renderProps: SectionTitleRenderProps) => React.ReactNode
-  pageSwitcherSelect?: TitleBlockSelectProps
-  handleHamburgerClick?: (event: React.MouseEvent) => void
-  primaryAction?: PrimaryActionProps
-  defaultAction?: DefaultActionProps
-  secondaryActions?: SecondaryActionsProps
-  secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
-  navigationTabs?: NavigationTabs
-  collapseNavigationAreaWhenPossible?: boolean
-  textDirection?: TextDirection
-  surveyStatus?: SurveyStatus
-  id?: string
-  titleAutomationId?: string
-  breadcrumbAutomationId?: string
-  breadcrumbTextAutomationId?: string
-  avatarAutomationId?: string
-  subtitleAutomationId?: string
-  sectionTitleAutomationId?: string
-  sectionTitleDescriptionAutomationId?: string
-  autoHideMobileActionsMenu?: boolean
-}
-
-/**
- * ### PrimaryActionProps
- *
- * The primary action (the "main" button in the top right) can either be a Button,
- * or a Button that reveals a Menu (a menu button).
- *
- * For a button, pass in an object containing the same props you would normally use
- * for a Button component.
- *
- * For a menu button, pass in a `MenuGroup`:
- * ```typescript
- * {
- *   label: string
- *   menuItems: MenuItemProps[]
- * }
- * ```
- * Using the `label`, the Title Block will render a Button with a chevron icon and your `menuItems` will appear
- * in the dropdown menu when you click it. (`MenuItemProps` is a type imported from the `Menu` component.)
- */
-
-export type PrimaryActionProps =
-  | (TitleBlockMenuGroup & { badge?: TitleBlockBadgeProps })
-  | ((TitleBlockButtonProps | TitleBlockCustomButtonProps) & {
-      badge?: TitleBlockBadgeProps
-    })
-
-/**
- * ### SecondaryActionsProps
- *
- * Secondary actions can only be buttons or button menus
- * (a button that reveals a dropdown menu).
- *
- * **IMPORTANT:** The visual order of these from left to right should always be:
- * ```text
- * buttons -> menu buttons
- * ```
- *
- * For a button, pass in an object containing the same props you would normally use
- * for a Button component.
- *
- * For a menu button, pass in a `MenuGroup`:
- *
- * ```typescript
- * {
- *   label: string
- *   menuItems: MenuItemProps[]
- * }
- * ```
- * (`MenuItemProps` is imported from the Menu component.)
- *
- */
-export type SecondaryActionsProps = SecondaryActionItemProps[]
-
-export type SecondaryActionItemProps =
-  | TitleBlockMenuGroup
-  | (ButtonWithHrefNotOnClick | ButtonWithOnClickNotHref | TitleBlockCustomButtonProps)
-
-export type TitleBlockBadgeProps = {
-  text: string
-  animateChange?: boolean
-}
-
-export type TitleBlockButtonProps = TitleBlockDistributiveOmit<
-  ButtonProps,
-  'onClick' | 'component'
-> & {
-  onClick?: (e: any) => void
-}
-
-export type TitleBlockCustomButtonProps = TitleBlockDistributiveOmit<
-  TitleBlockButtonProps,
-  'component'
-> & {
-  className?: string
-  component: (props: CustomButtonProps) => JSX.Element
-}
-
-export type TitleBlockMenuItemProps = MenuItemProps | TitleBlockCustomButtonProps
-
-export type ButtonWithHrefNotOnClick = TitleBlockDistributiveOmit<ButtonProps, 'onClick'>
-export type ButtonWithOnClickNotHref = TitleBlockDistributiveOmit<TitleBlockButtonProps, 'href'>
-
-export type TitleBlockMenuGroup = {
-  label: string
-  menuItems: TitleBlockMenuItemProps[]
-}
-
-export type TitleBlockSelectProps = React.ComponentProps<typeof Select>
-
-/*
-  This type exists to support omitting keys from a union or intersection type in a distributive manner. `Omit` out of the box will cause you to lose any union or intersection information about the type,
-  thus you might lose the ability to access some fields that only exist conditionally based on another (e.g. discriminated unions).
-  `T extends any ? Omit<T, K>` is a trick used to spread the action of Omit across every variant within the union or intersection.
-  So, if T is something like `{foo: string} | {bar: string}`, it becomes `Omit<{foo: string}, K> | Omit<{bar: string}, K>
-  https://davidgomes.com/pick-omit-over-union-types-in-typescript/
-*/
-export type TitleBlockDistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never
-
-export type TitleBlockAvatarProps =
-  | Omit<GenericAvatarProps, 'size'>
-  | Omit<CompanyAvatarProps, 'size'>
-
-export type DefaultActionProps = TitleBlockButtonProps | TitleBlockCustomButtonProps
-
-export type SectionTitleRenderProps = Pick<
-  TitleBlockProps,
-  | 'sectionTitle'
-  | 'sectionTitleAutomationId'
-  | 'sectionTitleDescription'
-  | 'sectionTitleDescriptionAutomationId'
->
-
-export type TitleBlockVariant = 'admin' | 'education' // the default is wisteria bg (AKA "reporting")
-
-export type NavigationTabs = React.ReactElement<NavigationTabProps>[]
-
-export type TextDirection = 'ltr' | 'rtl'
-
-export type SurveyStatus = {
-  text: string
-  status: 'draft' | 'live' | 'scheduled' | 'closed' | 'sentimentPositive' | 'default'
-}
-
-export type TitleBlockBreadcrumbType = {
-  text: string
-  path?: string
-  handleClick?: (event: React.MouseEvent) => void
-  /**
-   * Custom render for the breadcrumb. Commonly used to replace the parent link with a router link component.
-   * Props given to the breadcrumb component will be passed back, along with a decorated className and children.
-   * It is up to you to reapply them to your custom component.
-   */
-  render?: (props: CustomBreadcrumbProps) => JSX.Element
-}
-
-export type TitleBlockBreadcrumbProps = {
-  breadcrumb: TitleBlockBreadcrumbType
-  automationId: string
-  textAutomationId: string
-  textDirection?: TextDirection
-}
-
-export type CustomBreadcrumbProps = TitleBlockBreadcrumbProps & {
-  className: string
-  children: React.ReactNode
-}

package/src/Tooltip/Tooltip.spec.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { render, screen, waitFor } from '@testing-library/react'
-import { Button } from '~components/Button'
-import { Tooltip } from './index'
-
-describe('<Tooltip />', () => {
-  describe('Linking the tooltip to the inner element with aria-describedby', () => {
-    it('adds an accessible description when wrapping Kaizen Button', async () => {
-      render(
-        <Tooltip
-          text="Tooltip popup description for Kaizen Button"
-          display="inline"
-          isInitiallyVisible
-          position="below"
-        >
-          <Button label="More info" />
-        </Tooltip>,
-      )
-
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'More info' })).toHaveAccessibleDescription(
-          'Tooltip popup description for Kaizen Button',
-        )
-      })
-    })
-
-    it("doesn't add an accessible description if the tooltip is inactive", async () => {
-      render(
-        <Tooltip text="Tooltip popup description for button" display="inline" position="below">
-          <Button label="More info" />
-        </Tooltip>,
-      )
-
-      await waitFor(() => {
-        expect(screen.queryByRole('tooltip')).toBe(null)
-        expect(screen.getByRole('button', { name: 'More info' })).not.toHaveAttribute(
-          'aria-describedby',
-        )
-      })
-    })
-
-    // Non-semantic elements without roles should not have aria-description on them.
-    // They won't read to all screen readers as expected and may be reported in Storybook's accessibility tab (which uses Axe under the hood)
-    it("doesn't add an accessible description when wrapping a non-semantic element", async () => {
-      const warn = vi.spyOn(console, 'warn').mockImplementation(vi.fn())
-
-      render(
-        <Tooltip
-          text="Tooltip popup description for div"
-          display="inline"
-          isInitiallyVisible
-          position="below"
-        >
-          <div>Non semantic element</div>
-        </Tooltip>,
-      )
-      await waitFor(() => {
-        expect(screen.getByText('Non semantic element')).not.toHaveAttribute('aria-describedby')
-        expect(warn).toHaveBeenCalledWith(
-          '<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.',
-        )
-      })
-    })
-  })
-
-  it('adds an accessible description when wrapping a semantic element', async () => {
-    render(
-      <Tooltip
-        text="Tooltip popup description for div"
-        display="inline"
-        isInitiallyVisible
-        position="below"
-      >
-        <div role="textbox" contentEditable="true" aria-multiline="true" />
-      </Tooltip>,
-    )
-    await waitFor(() => {
-      expect(screen.getByRole('textbox')).toHaveAccessibleDescription(
-        'Tooltip popup description for div',
-      )
-    })
-  })
-})

package/src/Tooltip/utils/isSemanticElement.spec.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { vi } from 'vitest'
-import { Button, IconButton } from '~components/Button'
-import { Icon } from '~components/__next__'
-import { isSemanticElement } from './isSemanticElement'
-
-describe('isSemanticElement', () => {
-  it('returns true if provided a native element with a semantic role', () => {
-    expect(
-      isSemanticElement(
-        <button onClick={vi.fn()} type="button">
-          click
-        </button>,
-      ),
-    ).toBe(true)
-    expect(isSemanticElement(<a href="/">link</a>)).toBe(true)
-  })
-
-  it('returns false if provided a non-semantic element', () => {
-    expect(isSemanticElement(<span>click</span>)).toBe(false)
-    expect(isSemanticElement(<div>link</div>)).toBe(false)
-  })
-
-  it('returns true if provided one of the Kaizen components from the allowed list', () => {
-    expect(isSemanticElement(<Button label="Click" />)).toBe(true)
-    expect(isSemanticElement(<IconButton label="click" />)).toBe(true)
-  })
-
-  it('will return true if provided a non-semantic element with a semantic role', () => {
-    expect(
-      isSemanticElement(
-        <span tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
-          custom semantic el
-        </span>,
-      ),
-    ).toBe(true)
-    expect(
-      isSemanticElement(
-        <div tabIndex={0} role="button" onKeyDown={vi.fn()} onClick={vi.fn()}>
-          custom semantic el
-        </div>,
-      ),
-    ).toBe(true)
-    expect(
-      isSemanticElement(<div role="textbox" contentEditable="true" aria-multiline="true" />),
-    ).toBe(true)
-  })
-
-  it("returns false if provided an element using a role 'presentation' or 'none'", () => {
-    expect(isSemanticElement(<Icon name="add" isPresentational />)).toBe(false)
-    expect(isSemanticElement(<span role="none">Hello</span>)).toBe(false)
-  })
-})

package/src/__next__/Button/_docs/Button--api-specification.mdx

@@ -1,188 +0,0 @@
-import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
-import * as exampleStories from './Button.docs.stories'
-import * as specStories from './Button.spec.stories'
-
-<Meta title="Components/Button/Button (next)/API Specification" />
-
-# Button API Specification (next)
-
-Updated Nov 19, 2024
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Button"
-  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/branch/sPhYSlgPScLOAOYfAbkaI5/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364&node-type=canvas&m=dev"
-  designGuidelines="/?path=/docs/components-button-button-next-usage-guidelines--docs"
-/>
-
-<KAIOInstallation exportNames={'Button'} isNext />
-
-## Overview
-
-`Button` allows users to perform an action. If the component needs to navigate somewhere and can be opened in a new tab, use a <LinkTo pageId="components-linkbutton-api-specification--docs">LinkButton</LinkTo> instead.
-
-The following example and table showcases the essential props that enable the core functionality of `Button`. For the remaining suite of API options refer to [this section](#additional-api-options).
-
-<Canvas of={exampleStories.Playground} />
-
-<Controls
-  of={exampleStories.Playground}
-  className="mb-64"
-  include={[
-    'children',
-    'hasHiddenLabel',
-    'className',
-    'size',
-    'variant',
-    'isReversed',
-    'onPress',
-    'icon',
-    'iconPosition',
-    'isFullWidth',
-    'isDisabled',
-    'isPending',
-    'pendingLabel',
-    'hasHiddenPendingLabel',
-  ]}
-/>
-
-## Buttons and links
-
-The `Button` component does not support the `href` property or have any inbuilt routing support. This component is intended as a semantic button and should only be used to perform actions on a page. We advise against passing in an `anchor` tag as a child of the `Button` as this can lead to accessibility issues.
-
-A separate <LinkTo pageId="components-linkbutton-api-specification--docs">LinkButton</LinkTo> component has been created to handle page navigation and client side routing.
-
-## API
-
-This is built on top of [React Aria's Button component](https://react-spectrum.adobe.com/react-aria/Button.html#props) and seeks to provide a flexible API with convenient abstractions that handles variants, sizes, pending states and icons.
-
-### Variants
-
-`Button` supports the following variants: `primary`, `secondary` and `tertiary`. If the `variant` prop is not specified, the default will be `primary`.
-
-<Canvas of={exampleStories.ButtonVariants} />
-
-Reversed variants are handled via the `ReversedColors` Provider.
-
-<DocsStory of={exampleStories.ButtonVariantsReversed} expanded={false} />
-
-To enable the reversed theme, you will need to wrap the component or application in the `ReversedColors` provider, ie:
-
-```tsx
-import { Button } from '@kaizen/components/next'
-import { ReversedColors } from '@kaizen/components'
-// application code
-
-return (
-  <ReversedColors isReversed={true}>
-    <Button {...buttonProps} />
-  </ReversedColors>
-)
-```
-
-### Sizes
-
-Button supports the following sizes: `small`, `medium` and `large`. If the `size` prop is not specified, the default will be `medium`.
-
-<Canvas of={exampleStories.ButtonSizes} />
-
-### `onPress` vs `onClick`
-
-One key change to the `Button`&apos;s API is the shift from `onClick` to React Aria's implementation of `onPress`. This approach has been adopted as it provides better support for consistent touch events across device types, such mobile, desktop and tablet. You can read more about the development and reason behind this pattern [here](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html#touch-interactions).
-
-Functionally this does not change the way we pass actions into `Button`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
-
-```tsx
-<Button label="Submit" onClick={(e) => submit(e)} />
-```
-
-Can safely be replaced with the following:
-
-```tsx
-<Button onPress={(e) => submit(e)}>Submit</Button>
-```
-
-### Button content and children
-
-Labels and any button content can be passed into the `Button` as `children`. Content wrapped by the `Button` will be spaced evenly relative to the `size` prop.
-
-```tsx
-<Button variant="secondary" onPress={(e) => submit(e)}>
-  Label
-</Button>
-```
-
-While in most cases, `children` will be a `ReactNode`, `Button` also accepts a render function with React Aria's `ButtonRenderProps`. This allows for more advanced styling and rendering options by hooking into React Aria's internal button state. You can read more about this [here](https://react-spectrum.adobe.com/react-aria/Button.html#styling).
-
-### Icons and positioning
-
-The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `Button`. When paired with the [Icon component](/docs/illustrations-icon-icon-next-api-specification--docs), this will scale the icon to the `Button`'s `size` prop.
-
-<Canvas of={exampleStories.ButtonWithIconStart} />
-
-Set the position of the icon using the `iconPosition` prop. This will ensure content is flipped in `RTL` layouts. Note that icons will need the [shouldMirrorInRTL](/docs/illustrations-icon-icon-next-api-specification--docs#mirror-in-rtl) prop set to `true` when mirroring is required.
-
-<Canvas of={exampleStories.ButtonWithIconEnd} />
-
-### Icon-only `Button` and `hasHiddenLabel`
-
-To achieve an icon-only `Button` (previously: `IconButton`) use the `icon` prop and set `hasHiddenLabel` to `true`. This will visually hide the button's `children` and `pendingLabel`, while still announcing the content to screen readers.
-
-<Canvas of={exampleStories.IconButton} className="mb-32" />
-
-This pattern ensures that the `Button`'s accessible name is determined by its children, which helps to announce relevant content to the screen readers, as with the [pending state](#pending-state). You can learn more about this [accessible pattern here](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels).
-
-### Pending state
-
-`isPending` and `pendingLabel` are used to indicate that an interaction is in progress. This will disable the `Button`'s press events while rendering a loading spinner and `pendingLabel`.
-
-<Canvas of={specStories.PendingButton} />
-
-This can be paired with the `hasHiddenPendingLabel` prop to visually hide the `pendingLabel` and maintain the content width. This is ideal for avoid layout shifts when space is a commodity.
-
-The `pendingLabel` should be short and declarative as this will be announced to a screen reader regardless of its visibility.
-
-<Canvas of={specStories.PendingButtonWithHiddenPendingLabel} />
-
-As mentioned in the [previous section](#icon-only-button-and-hashiddenlabel), an icon-only `Button` uses `hasHiddenLabel` to visually hide both the `pendingLabel` and child content, so `hasHiddenPendingLabel` is not needed.
-
-<Canvas of={specStories.PendingIconButton} />
-
-### Full width Buttons
-
-If a button is statically the full width of a container you can use the `isFullWidth` property.
-
-<Canvas of={exampleStories.ButtonFullWidth} />
-
-For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
-
-## Use a menu to show additional actions
-
-Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
-
-<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />
-
-## Additional API options
-
-The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.
-
-You can learn more about React Aria's Button API and advance configuration options [here](https://react-spectrum.adobe.com/react-aria/Button.html#props).
-
-<ArgTypes
-  of={exampleStories.Playground}
-  exclude={[
-    'children',
-    'hasHiddenLabel',
-    'className',
-    'size',
-    'variant',
-    'onPress',
-    'icon',
-    'iconPosition',
-    'isFullWidth',
-    'isDisabled',
-    'isPending',
-    'pendingLabel',
-    'hasHiddenPendingLabel',
-  ]}
-/>

package/src/__next__/Button/_docs/Button--migration-guide.mdx

@@ -1,88 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Components/Button/Migration guide" />
-
-# Button migration guide
-
-## Audience
-
-This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
-
-## Purpose
-
-This guide provides instructions for migrating button usage from `deprecated` (`@kaizen/components`) `Button` and `IconButton` components to `next` (`@kaizen/components/next`) `Button` and `LinkButton` components.
-
-This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
-
-## Key API differences
-
-Below is a list of notable changes when migrating to the new `Button` and `LinkButton` component:
-
-- `label` is now handled as `Children` .
-- Variants, such as `primary` and `secondary`, are now controlled as by the single `variant` prop and some values will be remapped in the codemod.
-  - `primary` `boolean` becomes `variant="primary"`.
-  - `secondary` `boolean` becomes `variant="tertiary"`.
-  - `destructive` `boolean` is removed and will default to the `primary` variant.
-- `size` props have been adjusted to include `small`, `medium` and `large` and some values will be remapped in the codemod.
-  - `small` becomes `medium`
-  - `regular` becomes `large`
-- `onClick` and other event handlers now reflect the RAC event ecosystems, ie: `onPress`.
-  - You can see more about the RAC event ecosystem [here](https://react-spectrum.adobe.com/react-aria/Button.html#events).
-- `Button` and `LinkButton` now exist as separate components.
-  - The intent is to more closely align to the semantic roles of an anchor or button and should be used accordingly.
-- `LinkButton` handles native navigation via `href` out of the box but additional config can be used to allow for client side routing - [see here](/docs/components-linkbutton-api-specification--docs#client-side-routing).
-  - `onPress` can still be used in place of `onClick` for pushing to routers and tracking events.
-- `IconButton` has been superseded by icon props and the [icon-only pattern](/docs/components-button-button-next-api-specification--docs#icon-only-button-and-hashiddenlabel).
-- `working`, `workingLabel` and `workingLabelHidden` has been updated to `isPending`, `pendingLabel` and `hasHiddenPendingLabel` to better reflect the state of the button.
-  - This is not available in the `LinkButton` component
-- `badge` prop has been removed and should be handled within the `Children` where required.
-- Reversed styles should be handled by the `ReversedColors` Provider but for ease of migration, the `isReversed` prop `boolean` exists.
-
-## Codemod
-
-To assist in migration we have created the `upgradeV1Buttons` codemod.
-
-This will loop through the given directory and update all instances of Button to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#kaizen-codemods) on how to run kaizen codemods using the CLI within your repository, ie:
-
-```bash
-pnpm kaizen-codemod src upgradeV1Buttons
-```
-
-Note that there are cases where props that no longer exist will be left in the codebase to throw type error and provide feedback to the engineer. This is intentional and identifies area's where manual updates are required.
-
-### Pre-requisites
-
-It is also recommended that the `upgradeIconV1` codemod is run before `upgradeV1Buttons` to ensure that all icons are updated to the new `Icon` component that uses the Material icons CDN. There is likely to be a number of visual diffs in this migration so it is recommended to do this separately if viable. Seem more about this [here](/docs/components-icon-icon-future-api-specification--docs#set-up).
-
-### Codemod gotchas
-
-If you're facing any issues not captured below, reach out to the [#help_design_system](https://cultureamp.slack.com/archives/C0189KBPM4Y) channel on Slack.
-
-#### `icon` props and sizing
-
-While the `icon` prop supports any `JSX` element, only the latest [Icon component](/docs/components-icon-icon-future-api-specification--docs) will be able to handle relative sizing and spacing automatically within the Button. We recommend running the `upgradeIconV1` codemod before this to convert all icons to the latest implementation. See the guidance here on using the [Material Icons CDN](/docs/guides-app-starter--docs#5-link-to-google-material-symbols-cdn).
-
-#### `component` props type errors
-
-Based off Metabase queries, `component` render props is used in consuming repositories to wrap Button content with a routing solution, such as NextJS's `Link` component. To ensure a safe migration, the codemod will update any usages to a `LinkButton` with the `component` prop still passed in. This will cause an intentional type error to provide feedback and make it easier to find in the codebase for a manual update. This should be able to be converted to use client side routing by following the [LinkButton API docs](https://cultureamp.design/?path=/docs/components-linkbutton-api-specification--docs).
-
-#### `badge` props type errors
-
-The codemod will continue to pass `badge` props into the new implementation so it will throw a type error and provide feedback to engineers. This will need to be manually composed within the `Children` if required, ie:
-
-```
-import { Badge } from "@kaizen/components"
-import { Button } from "@kaizen/components/next"
-
-<Button>Label<Badge classNameOverride="ms-8" variant="success">New</Badge></Button>
-```
-
-#### Link related props type errors
-
-If no `href` or `component` props are passed to the component you may get type errors for having anchor related props passed into a Button, ie: `target`, `rel`.
-
-This will cause a type error that can be corrected by either using the `LinkButton` (if intended) or removing all anchor related props as they shouldn't exist on semantic buttons.
-
-## More information
-
-For more information on the about each of the new API's, we recommend referring the [Button](/docs/components-button-button-next-api-specification--docs) or [LinkButton](/docs/components-linkbutton-api-specification--docs) API specifications.