@kaizen/components 1.71.0 → 1.72.0

package/src/Tooltip/_docs/v2/Tooltip.mdx

@@ -1,130 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as TooltipStories from './Tooltip.stories'
-
-<Meta of={TooltipStories} />
-
-# Tooltip (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/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"
-/>
-
-<KAIOInstallation exportNames="Tooltip" family="overlays" version="2" />
-
-## Overview
-
-Adds a popover that will show on hover or focus of the child element, with simple text content.
-
-<Canvas of={TooltipStories.Playground} />
-<Controls of={TooltipStories.Playground} />
-
-## Accessibility
-
-This component wasn't built with accessibility in mind, as a result it's quite easy to implement a tooltip in a non-accessible way. A rethink and rewrite is likely for the future.
-
-There's two major accessibility concerns here:
-
-- Keyboard only users
-- Screen reader (or similar assistive tech) users
-
-Failure to meet either of these requirements will result in a critical issue where some people are completely unable to access the information.
-
-### Keyboard accessibility
-
-For keyboard accessibility, you need to make sure the child you are passing is a focusable element. It's best to keep the contents of this component simple. E.g. just a button:
-
-```jsx
-<Tooltip text="Opens in a new tab">
-  <Button href="/path" label="Go somewhere" />
-</Tooltip>
-```
-
-### Screen reader accessibility
-
-Though it won't guarantee the best screen reader accessibility, a good start is to make sure your _direct_ children element is semantic (not a div or span).
-
-When your direct child element is semantic, this component will add an `aria-describedby` to that element. E.g. for the link example above, the resulting mark up will be:
-
-```html
-<a href="path" aria-describedby="tooltip">Go somewhere</a>
-<!-- (in a portal) -->
-<div id="tooltip-id">Opens in a new tab</div>
-```
-
-Resulting in a screen reader announcement like:
-`Go somewhere, link, Opens in a new tab`
-
-Again, try to keep the contents of your children as simple as possible, ideally only a single natively focusable element like the example above.
-
-When your direct child is not semantic, you will get a console warning like this:
-`<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info.`
-
-### Tooltips, Kaizen components and avoiding common pitfalls
-
-While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with [accessible roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) like `button`, `link` or `heading`, will be readable to assistive technologies.
-
-We've created some guidance below with the most common cases for `Tooltip` and how to ensure the additional context is read to the user.
-
-#### Button and IconButton
-
-<Canvas of={TooltipStories.ButtonsWithTooltip} />
-
-While Kaizen buttons are compatible with `Tooltip`, caution is advised when using the custom `component` render prop.
-
-```JSX
-  <Tooltip text="Contact customer support.">
-    <Button
-      {...buttonProps}
-      component={() => (
-        // The most immediate child is a `div`, which has no `role`.
-        <div>
-          <button type="button">
-            Help
-          </button>
-        </div>
-      )}
-    />
-  </Tooltip>
-```
-
-In the example above, the `div` in now the direct descendant of `Tooltip`, therefore will no longer be accessible to assistive technologies.
-
-#### ButtonGroup
-
-The `Tooltip` component must wrap the children of `ButtonGroup` to be accessible to screen readers.
-
-<Canvas of={TooltipStories.ButtonGroupWithTooltip} />
-
-#### Table headers and tooltips
-
-While the composable `Tooltip` is not exposed in the Kaizen `Table`, it is important to call out that the `tooltipInfo` prop in `TableHeaderRowCell` must also have an `onClick` or `href` to be announced to assistive technologies.
-
-<Canvas of={TooltipStories.TableHeadersWithTooltips} />
-
-Without either of these, the `Tooltip` content will not be readable to keyboard users or assistive technologies.
-
-#### Tags
-
-Seen in the example below simple `Tag`s with plain text as `children` will not accessible to keyboard users or assistive technologies as it's direct descendant is a `div` with no semantic `role`.
-
-<Canvas of={TooltipStories.TagWithHoverOnlyTooltip} />
-
-While `Tooltip` should be avoided if there are no interactive states within the `Tag`, internal elements like buttons or links can be wrapped in a `Tooltip` component to add necessary context.
-
-<Canvas of={TooltipStories.TagWithTooltip} />
-
-The [future Tag](?path=/docs/components-tag-future--docs#overview) offers a composable solution for those needing to add more context to an interactive `Tag`.
-
-#### Form components and tooltips
-
-While a `Tooltip` can seem like a natural pairing when space is a commodity, form elements still require a concise label that is _ideally_ visible (See MDN's guide on [Tooltip best practices](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role#best_practices)).
-
-<Canvas of={TooltipStories.CheckboxFieldTooltip} />
-
-In the example above, the `Tooltip` content `"Select all users"` is accessible to screen readers via keyboard navigation, however will not be announced when the input receives focus. This a limitation of `CheckboxField` and form components where the immediate `children` of `Tooltip` is a wrapper.
-
-<Canvas of={TooltipStories.CheckboxFieldWithDescriptionTooltip} />
-
-In these instances, `aria-describedby` can be leveraged to provide a description to the input.

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

@@ -1,47 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Tooltip } from '../../index'
-import * as TooltipV1Stories from '../Tooltip.stories'
-
-const meta = {
-  title: 'Components/Tooltip/Tooltip (v2)',
-  component: Tooltip,
-  args: {
-    text: 'Example tooltip text.',
-  },
-  decorators: [
-    (Story) => (
-      <div className="flex mt-[60px] gap-12">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Tooltip>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = TooltipV1Stories.Playground
-
-export const OverflowScroll: Story = TooltipV1Stories.OverflowScroll
-
-export const ButtonsWithTooltip: Story = TooltipV1Stories.ButtonsWithTooltip
-
-export const ButtonGroupWithTooltip: Story = TooltipV1Stories.ButtonsWithTooltip
-
-export const TableHeadersWithTooltips: Story = TooltipV1Stories.TableHeadersWithTooltips
-
-export const TagWithHoverOnlyTooltip: Story = TooltipV1Stories.TagWithHoverOnlyTooltip
-
-export const TagWithTooltip: Story = TooltipV1Stories.TagWithTooltip
-
-export const TagWithCheckboxField: Story = TooltipV1Stories.TagWithCheckboxField
-
-export const CheckboxFieldTooltip: Story = TooltipV1Stories.CheckboxFieldTooltip
-
-export const CheckboxFieldWithDescriptionTooltip: Story =
-  TooltipV1Stories.CheckboxFieldWithDescriptionTooltip

package/src/__rc__/index.ts

@@ -1,7 +0,0 @@
-export * from './Button'
-export * from './Icon'
-export * from './Menu'
-export * from './Select'
-export * from './Tag'
-export * from './Tabs'
-export * from './Tooltip'

package/src/__utilities__/v3.ts

@@ -1 +0,0 @@
-export * from './ReversedColors/v3'