@kaizen/components 0.0.0-canary-introduce-next-entrypoint-20250225031042 → 0.0.0-canary-react-19-peer-20250303022312

package/src/Link/subcomponents/LinkContent.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import styles from '../Link.module.css'
+
+export type LinkContentProps = {
+  children: ReactNode
+  icon?: JSX.Element
+  iconPosition?: 'start' | 'end'
+  isUnderlined: boolean
+}
+
+const LinkIcon = ({ icon }: { icon: JSX.Element }): JSX.Element => (
+  <span className={styles.icon}>{icon}</span>
+)
+
+export const LinkContent = ({
+  children,
+  icon,
+  iconPosition,
+  isUnderlined,
+}: LinkContentProps): JSX.Element => {
+  const iconPositionStyling = iconPosition === 'start' ? styles.iconStart : styles.iconEnd
+
+  return (
+    <span className={mergeClassNames(styles.linkContent, isUnderlined && styles.isUnderlined)}>
+      {icon && iconPosition === 'start' && <LinkIcon icon={icon} />}
+      <span className={mergeClassNames(icon && iconPositionStyling)}>{children}</span>
+      {icon && iconPosition === 'end' && <LinkIcon icon={icon} />}
+    </span>
+  )
+}

package/src/LinkButton/_docs/LinkButton--api-specification.mdx

@@ -163,63 +163,7 @@ For resizing on smaller screens, consider using the `className` prop to leverage
 
 ## Client side routing
 
-To enable client side routing with the `LinkButton`, you will need to wrap your application in a [RouterProvider](https://react-spectrum.adobe.com/react-aria/routing.html#routerprovider) from the `react-aria-components` library. The allows you to set the `navigation` method that performs the client side routing in the `LinkButton` component. Refer to the framework specific guidance below for [Next.js](#nextjs-config-example) or [React Router](#react-router-config-example).
-
-### Next.js config example
-
-The following example demonstrates how you might use the React Aria's `RouterProvider` with `Next.js`'s Pages router. This will allow the `LinkButton` to navigate using the `router.push` method.
-
-```tsx
-// ...imports
-import type { AppProps } from 'next/app'
-import { type NextRouter } from 'next/router'
-import { RouterProvider as RacRouterProvider } from 'react-aria-components'
-
-// This provides the correct types for `routerOptions` based on the routing solution. As the component agnostic to routing technology this must defined here
-declare module 'react-aria-components' {
-  interface RouterConfig {
-    // index 2 is the types for the pages routerOptions
-    routerOptions: NonNullable<Parameters<NextRouter['push']>[2]>
-  }
-}
-
-function App({ Component, pageProps, router }: AppProps) {
-  return (
-    <FrontendServices {...config}>
-      {/* application code */}
-      <RacRouterProvider navigate={(href, opts) => router.push(href, undefined, opts)}>
-        <Component {...pageProps} />
-      </RacRouterProvider>
-      {/* application code */}
-    </FrontendServices>
-  )
-}
-
-export default App
-```
-
-The implementation in your application would then look something like this:
-
-```tsx
-import { useRouter } from 'next/router'
-import { LinkButton } from '@kaizen/components'
-
-const Component = () => {
-  const router = useRouter()
-
-  return (
-    <>
-      <LinkButton href="http://google.com">External link</LinkButton>
-      <LinkButton href={`${router.pathname}/path-1`}>Internal link</LinkButton>
-      <LinkButton href={`${router.pathname}/path-2`} routerOptions={{ scroll: false }}>
-        Link with routerOptions
-      </LinkButton>
-    </>
-  )
-}
-```
-
-Additional config options for Next.js can be found in the React Aria's documentation on the [RouterProvider](https://react-spectrum.adobe.com/react-aria/routing.html#nextjs), including the alternative setup for the [App router](https://react-spectrum.adobe.com/react-aria/routing.html##app-router).
+Please refer to the [client side routing](/docs/guides-client-side-routing--docs) for more information on how to set up client side routing with the `LinkButton`.
 
 ### React Router config example
 

package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx

@@ -6,7 +6,7 @@ import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { GenericModal, ModalAccessibleLabel, ModalBody, ModalHeader } from '../index'
 
 const meta: Meta<typeof GenericModal> = {
-  title: 'Components/Modals/GenericModal/Tests',
+  title: 'Components/Modals/GenericModal (primitive)/Tests',
   component: GenericModal,
 }
 

package/src/Modal/GenericModal/_docs/GenericModal.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { GenericModal } from '../index'
 
 const meta = {
-  title: 'Components/Modals/GenericModal',
+  title: 'Components/Modals/GenericModal (primitive)',
   component: GenericModal,
   args: {
     children: 'Example content',

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -4,7 +4,7 @@ import { expect, waitFor, within } from '@storybook/test'
 import { GenericTile } from './GenericTile'
 
 const meta: Meta<typeof GenericTile> = {
-  title: 'Components/Tiles/GenericTile/Tests',
+  title: 'Components/Tiles/GenericTile (primitive)/Tests',
   component: GenericTile,
   args: {
     title: 'Title',

package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { GenericTile, type GenericTileProps } from '../index'
 
 export default {
-  title: 'Components/Tiles/GenericTile',
+  title: 'Components/Tiles/GenericTile (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -114,7 +114,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   display: flex;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
   transform: translateY(-0.0833em);
 
   .hasSubtitle & {
@@ -434,7 +433,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
     width: $tab-container-height-small;
     height: $tab-container-height-small;
     background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
-    z-index: $ca-z-index-sticky;
+    z-index: 1;
   }
 
   .adminVariant & {
@@ -503,7 +502,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   cursor: pointer;
   display: flex;
   position: absolute;
-  z-index: $ca-z-index-sticky;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
@@ -573,9 +571,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   // We are using visually hidden here instead of display:none so that a screen reader
   // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
   @include visually-hidden;
-
-  z-index: $ca-z-index-sticky - 1;
-
   @include ca-position($start: -2 * $ca-grid);
 
   position: absolute;

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

@@ -0,0 +1,81 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+
+<Meta title="Components/Button/Migration Guide" />
+
+# Button Migration Guide (next)
+
+This is a short guide to assist in migration from the old to new `Button` and `LinkButton` component.
+
+## 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 an 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 passed `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 should 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.

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

@@ -9,7 +9,7 @@ import * as IconStories from './Icon.docs.stories'
 Updated September 4, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__v2__/Icon"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Icon"
   designGuidelines="/?path=/docs/illustrations-icon-v2-usage-guidelines--docs"
 />
 

package/src/__next__/Icon/_docs/Icon--usage-guidelines.mdx

@@ -9,7 +9,7 @@ import * as IconStories from './Icon.docs.stories'
 Updated September 13, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/next"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Icon"
   apiSpecification="/?path=/docs/illustrations-icon-v3-api-specification--docs"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-3974"
 />

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

@@ -10,7 +10,7 @@ import * as exampleStories from './Menu.stories'
 Updated December 16, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
   designGuidelines="/?path=/docs/components-menu-menu-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"

package/src/__next__/Menu/_docs/Menu--usage-guidelines.mdx

@@ -10,7 +10,7 @@ import * as MenuStories from './Menu.stories'
 Updated July 6, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"

package/src/__next__/Select/_docs/Select.mdx

@@ -4,10 +4,10 @@ import * as SelectStories from './Select.stories'
 
 <Meta of={SelectStories} />
 
-# Select (future)
+# Select (next)
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Select"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
 

package/src/__next__/Select/_docs/Select.stickersheet.stories.tsx

@@ -14,7 +14,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Select/Select (future)',
+  title: 'Components/Select/Select (next)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/__next__/Select/_docs/Select.stories.tsx

@@ -7,7 +7,7 @@ import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/Select/Select (future)',
+  title: 'Components/Select/Select (next)',
   component: Select,
   argTypes: {
     items: {

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

@@ -7,7 +7,7 @@ import * as TabsStories from './Tabs.stories'
 # Tabs (next)
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tabs"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A28886&mode=design&t=AGMmnoJia9RscurE-1"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs"
 

package/src/__next__/Tag/RemovableTag/_docs/RemovableTag.mdx

@@ -6,7 +6,7 @@ import * as RemovableTagStories from './RemovableTag.stories'
 
 # RemovableTag (next)
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tag/RemovableTag.tsx" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tag/RemovableTag" />
 
 <KAIOInstallation exportNames="RemovableTag" isNext />
 

package/src/__next__/Tooltip/_docs/ApiSpecification.mdx

@@ -10,7 +10,7 @@ import * as exampleStories from './Tooltip.stories'
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="/?path=/docs/overlays-tooltip-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"

package/src/__next__/Tooltip/_docs/Tooltip.docs.stories.tsx

@@ -3,11 +3,12 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { Button, IconButton } from '~components/Button'
 import { FieldMessage } from '~components/FieldMessage'
+import { Focusable } from '~components/Focusable'
 import { Input } from '~components/Input'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
 import { Icon } from '~components/__next__/Icon'
-import { Focusable, Tooltip, TooltipTrigger } from '../index'
+import { Tooltip, TooltipTrigger } from '../index'
 import * as TestStories from './Tooltip.spec.stories'
 
 const meta = {

package/src/__next__/Tooltip/_docs/Tooltip.mdx

@@ -13,7 +13,7 @@ import WhenToUsePng from './assets/tooltip_variant.png'
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
   designGuidelines="/?path=/docs/overlays-tooltip-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -3,11 +3,12 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
 import { Button, IconButton } from '~components/Button'
+import { Focusable } from '~components/Focusable'
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '~components/Tabs'
 import { Text } from '~components/Text'
 import { Icon } from '~components/__next__/Icon'
 import { Tag } from '~components/__next__/Tag'
-import { Focusable, Tooltip, TooltipTrigger } from '../index'
+import { Tooltip, TooltipTrigger } from '../index'
 
 const meta = {
   title: 'Components/Tooltip/Tooltip (next)/Tests',

package/src/__next__/Tooltip/_docs/Tooltip.stories.tsx

@@ -2,8 +2,9 @@ import React, { type FunctionComponent } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { Button } from '~components/Button'
+import { Focusable } from '~components/Focusable'
 import { Tag } from '~components/__next__'
-import { Focusable, Tooltip, TooltipTrigger } from '../index'
+import { Tooltip, TooltipTrigger } from '../index'
 import * as testStories from './Tooltip.spec.stories'
 
 const meta = {

package/src/__next__/Tooltip/index.ts

@@ -1,3 +1,2 @@
 export * from './Tooltip'
 export * from './TooltipTrigger'
-export * from './subcomponents/Focusable'

package/src/__next__/index.ts

@@ -5,3 +5,7 @@ export * from './Select'
 export * from './Tag'
 export * from './Tabs'
 export * from './Tooltip'
+
+// This Focusable component was originally exported from here, but since moved to the main entry point because there's no name clash.
+// This is just here to keep backwards compatibility until the 2.0 release
+export * from '../Focusable'

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './ErrorPage'
 export * from './FieldGroup'
 export * from './FieldMessage'
 export * from './Filter'
+export * from './Focusable'
 export * from './GuidanceBlock'
 export * from './Heading'
 export * from './Icon'
@@ -29,6 +30,7 @@ export * from './Input'
 export * from './KaizenProvider'
 export * from './Label'
 export * from './LabelledMessage'
+export * from './Link'
 export * from './LikertScaleLegacy'
 export * from './LinkButton'
 export * from './Loading'

package/dist/cjs/__next__/Tooltip/subcomponents/Focusable/Focusable.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__G7IVs"
-};
-module.exports = styles;

package/dist/esm/__next__/Tooltip/subcomponents/Focusable/Focusable.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__G7IVs"
-};
-export { styles as default };