@transferwise/components 0.0.0-experimental-5acc778 → 0.0.0-experimental-0ffb1f6

package/src/radioOption/RadioOption.story.tsx

@@ -5,9 +5,13 @@ import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { Header, Nudge, Section, Title, Typography } from '..';
 import RadioOption, { RadioOptionProps } from './RadioOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Radio control](?path=/docs/content-listitem-listitem-radio--docs).
+ */
 export default {
   component: RadioOption,
   title: 'Option/RadioOption',
+  tags: ['deprecated'],
   argTypes: {
     disabled: { control: 'boolean' },
     secondary: { control: 'text' },

package/src/radioOption/RadioOption.tsx

@@ -15,6 +15,14 @@ export interface RadioOptionProps<T extends string | number = string>
   isContainerAligned?: boolean;
 }
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 function RadioOption<T extends string | number = ''>({
   'aria-label': ariaLabel,
   media,

package/src/select/Select.story.tsx

@@ -9,7 +9,7 @@ import Select, { SelectItem, SelectOptionItem } from './Select';
 const meta: Meta<typeof Select> = {
   component: Select,
   title: 'Forms/Select',
-  tags: ['wds:deprecated'],
+  tags: ['deprecated'],
   argTypes: {
     id: { control: 'text' },
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },

package/src/summary/Summary.story.tsx

@@ -5,9 +5,13 @@ import { Status } from '../common';
 import { InfoPresentation } from '../info';
 import Summary, { type Props as SummaryProps } from './Summary';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
+ */
 export default {
   component: Summary,
   title: 'Content/Summary',
+  tags: ['deprecated'],
   argTypes: {
     title: { control: 'text' },
   },

package/src/summary/Summary.tsx

@@ -90,6 +90,14 @@ export interface Props {
   title: ReactNode;
 }
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const Summary = ({
   action,
   as: Element = 'div',

package/src/switchOption/SwitchOption.story.tsx

@@ -6,10 +6,13 @@ import { Nudge, Title, Typography } from '..';
 
 import SwitchOption, { type SwitchOptionProps } from './SwitchOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Switch control](?path=/docs/content-listitem-listitem-switch--docs).
+ */
 const meta = {
   component: SwitchOption,
   title: 'Option/SwitchOption',
-
+  tags: ['deprecated'],
   argTypes: {
     title: { control: 'text' },
     content: { control: 'text' },

package/src/switchOption/SwitchOption.tsx

@@ -26,6 +26,14 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
   }
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const SwitchOption = ({
   checked,
   complex,

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,29 +25,16 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-const Title = React.forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
-  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
-    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
-    const isTypeSupported = mapping !== undefined;
-    if (isTypeSupported) {
-      const HeaderTag = as ?? mapping;
-      return (
-        <HeaderTag
-          ref={ref as React.Ref<any>}
-          {...props}
-          className={clsx(`np-text-${type}`, className)}
-        />
-      );
-    }
-    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-    return (
-      <HeaderTag
-        ref={ref as React.Ref<any>}
-        {...props}
-        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
-      />
-    );
-  },
-);
+function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
+  const mapping = titleTypeMapping[type];
+  const isTypeSupported = mapping !== undefined;
+
+  if (isTypeSupported) {
+    const HeaderTag = as ?? mapping;
+    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
+  }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
+}
 
 export default Title;

package/src/header/Header.accessibility.docs.mdx

@@ -1,85 +0,0 @@
-import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
-import { Bulb } from '@transferwise/icons';
-import * as stories from './Header.story';
-
-<Meta title="Typography/Header/Accessibility" />
-
-# Accessibility
-
-Given the `Header` is a key component for structuring content and conveying hierarchy, ensuring its accessibility is crucial for an inclusive experience.
-
-<NavigationOption
-  media={<Bulb size={24} />}
-  title="Design guidance"
-  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  href="https://wise.design/components/section-header#accessibility"
-/>
-
-<br />
-<br />
-
-## Semantic headings
-
-The `Header` component should always use semantic HTML heading tags (`<h1>` to `<h6>`) to convey the document structure. Avoid using non-semantic tags unless absolutely necessary.
-
-<Source dark code={`
-// ✅ semantic heading
-<Header as="h1">Main heading</Header>
-
-// ⚠️ use with care
-
-<Header as="div">Non-semantic heading</Header>
-`}/>
-
-**Additional resources:**
-
-1. [Deque: Headings must follow a logical order](https://dequeuniversity.com/rules/axe/4.2/heading-order)
-2. [MDN: Using headings](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
-
-<br />
-
-## ARIA roles
-
-If the `Header` is used in a non-semantic context, ensure it is accessible by applying appropriate ARIA roles, such as `role="heading"`, and providing a `aria-level` attribute to indicate its level in the hierarchy.
-
-<Source
-  dark
-  code={`
-// ⚠️ use with care
-<Header as="div" role="heading" aria-level="1">
-  Main heading
-</Header>
-`}
-/>
-
-<br />
-
-## Accessibility with actions
-
-When using the `Header` with actions (e.g., buttons or links), ensure the actions are accessible by providing clear labels and ARIA attributes.
-
-<Source
-  dark
-  code={`
-// ✅ accessible action
-<Header
-  as="h2"
-  action={{
-    'aria-label': 'Edit section',
-    text: 'Edit',
-    onClick: () => alert('Edit clicked'),
-  }}
->
-  Section heading
-</Header>
-`}
-/>
-
-<br />
-
-## Visual hierarchy
-
-Ensure the `Header` visually aligns with its semantic level. For example, an `<h1>` should be the largest and most prominent, while an `<h6>` should be the smallest.
-
-<Canvas of={stories.Playground} />