@transferwise/components 46.106.0 → 46.108.0

package/src/main.css

@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
-@container (min-width: 375px) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -3017,11 +3021,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-.wds-list-item-prompt {
-  grid-area: prompt;
+.wds-inline-prompt {
   display: inline-flex;
-  justify-self: start;
   text-align: left;
   padding-top: calc(8px / 2);
   padding-top: calc(var(--padding-x-small) / 2);
@@ -3036,33 +3042,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   word-break: break-word;
   word-wrap: break-word;
 }
-.wds-list-item-prompt:has(a),
-.wds-list-item-prompt:has(button) {
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
   position: relative;
   z-index: 1;
 }
-.wds-list-item-prompt a,
-.wds-list-item-prompt button {
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
-.wds-list-item-prompt a:first-of-type:before,
-.wds-list-item-prompt button:first-of-type:before {
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
   content: '';
   position: absolute;
   inset: 0;
 }
-.wds-list-item-prompt.np-prompt-icon {
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  gap: var(--size-4);
-}
-.wds-list-item-prompt .np-prompt-icon {
+.wds-inline-prompt__media-wrapper {
   padding-right: calc(12px / 2);
   padding-right: calc(var(--size-12) / 2);
   padding-top: calc(4px - 1px);
@@ -3070,111 +3070,119 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-bottom: calc(4px - 1px);
   padding-bottom: calc(var(--size-4) - 1px);
 }
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.negative {
+.wds-inline-prompt--negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a,
-.wds-list-item-prompt.negative button {
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a:hover,
-.wds-list-item-prompt.negative button:hover {
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.wds-list-item-prompt.negative a:active,
-.wds-list-item-prompt.negative button:active {
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
   color: var(--color-sentiment-negative-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
   background-color: var(--color-sentiment-negative-secondary-active);
 }
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
+.wds-inline-prompt--positive {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--proposition {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a,
-.wds-list-item-prompt.positive button,
-.wds-list-item-prompt.discount button,
-.wds-list-item-prompt.savings button {
+.wds-inline-prompt--proposition a,
+.wds-inline-prompt--proposition button {
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover,
-.wds-list-item-prompt.positive button:hover,
-.wds-list-item-prompt.discount button:hover,
-.wds-list-item-prompt.savings button:hover {
+.wds-inline-prompt--proposition a:hover,
+.wds-inline-prompt--proposition button:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active,
-.wds-list-item-prompt.positive button:active,
-.wds-list-item-prompt.discount button:active,
-.wds-list-item-prompt.savings button:active {
+.wds-inline-prompt--proposition a:active,
+.wds-inline-prompt--proposition button:active {
   color: var(--color-sentiment-positive-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
   background-color: var(--color-sentiment-positive-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
   background-color: var(--color-sentiment-positive-secondary-active);
 }
-.wds-list-item-prompt.neutral {
+.wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-prompt.neutral a,
-.wds-list-item-prompt.neutral button {
+.wds-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
   background-color: var(--color-background-neutral-active);
 }
-.wds-list-item-prompt.warning {
+.wds-inline-prompt--warning {
   background-color: var(--color-sentiment-warning-secondary);
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a,
-.wds-list-item-prompt.warning button {
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a:hover,
-.wds-list-item-prompt.warning button:hover {
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
   color: var(--color-sentiment-warning-content-hover);
 }
-.wds-list-item-prompt.warning a:active,
-.wds-list-item-prompt.warning button:active {
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
   color: var(--color-sentiment-warning-content-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
 }
+.wds-list-item-prompt {
+  grid-area: prompt;
+  justify-self: start;
+}
 .wds-list-item {
   list-style: none;
   width: 100%;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;
@@ -3343,16 +3364,29 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   flex: 0 0 auto;
 }
 .wds-list-item.disabled {
-  filter: none;
   opacity: 1;
+  opacity: initial;
 }
+.wds-list-item.disabled,
 .wds-list-item.disabled label {
   cursor: not-allowed;
 }
-.wds-list-item.disabled .tw-icon-backslash-circle {
+.wds-list-item.disabled .wds-list-item-title,
+.wds-list-item.disabled .wds-list-item-title-value,
+.wds-list-item.disabled .wds-list-item-subtitle,
+.wds-list-item.disabled .wds-list-item-subtitle-value,
+.wds-list-item.disabled .wds-list-item-additional-info {
   color: #768e9c;
   color: var(--color-content-tertiary);
 }
+.wds-list-item.disabled .wds-list-item-media,
+.wds-list-item.disabled .wds-list-item-body,
+.wds-list-item.disabled .wds-list-item-additional-info {
+  opacity: 0.93;
+}
+.wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
+  opacity: 0.93;
+}
 .wds-list-item-spotlight {
   padding-left: 12px;
   padding-left: var(--size-12);
@@ -3911,6 +3945,13 @@ button.np-link {
   margin-left: 0;
   margin-left: initial;
 }
+.np-link.np-link--disabled,
+.np-link:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 :root {
   --coin-colour: #1c3108;
   --coin-size: 4.5rem;

package/src/navigationOption/NavigationOption.story.tsx

@@ -15,10 +15,13 @@ import { fn } from 'storybook/test';
 
 type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 const meta: Meta<StoryArgs> = {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
+  tags: ['deprecated'],
   argTypes: {
     href: { control: 'text' },
     title: { control: 'text' },

package/src/navigationOption/NavigationOption.tsx

@@ -8,6 +8,14 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 
 export type NavigationOptionProps = OptionProps;
 
+/**
+ * @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 NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {
     if ('href' in rest && rest.href) {

package/src/navigationOptionsList/NavigationOptionsList.story.tsx

@@ -2,9 +2,13 @@ import NavigationOption from '../navigationOption';
 
 import NavigationOptionsList from '.';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [List](?path=/docs/content-list--docs), [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 export default {
   component: NavigationOptionsList,
   title: 'Option/NavigationOptionsList',
+  tags: ['deprecated'],
 };
 
 export const Basic = () => {

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -5,6 +5,15 @@ export interface NavigationOptionListProps {
   children: React.ReactNode;
 }
 
+/**
+ * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [List source](../list/List.tsx)
+ * @see [ListItem 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 NavigationOptionList = ({ children }: NavigationOptionListProps) => {
   return (
     <ul className="np-navigation-options-list">

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/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/table/Table.story.tsx

@@ -5,7 +5,7 @@ import { TableRowType, TableRowClickableType } from './TableRow';
 
 export default {
   component: Table,
-  title: 'Option/Table',
+  title: 'Content/Table',
 } satisfies Meta<typeof Table>;
 
 type Story = StoryObj<typeof Table>;