@transferwise/components 0.0.0-experimental-c239b44 → 0.0.0-experimental-e0993c8

package/src/listItem/ListItem.tsx

@@ -62,8 +62,8 @@ export type ListItemProps = {
    * Can be only rendered if `subtitle` is also provided.
    */
   additionalInfo?: ReactNode;
-  value?: ReactNode;
-  subvalue?: ReactNode;
+  valueTitle?: ReactNode;
+  valueSubtitle?: ReactNode;
   /**
    * Requires one of the following as a sole child: <br />
    * `<ListItem.AvatarView />`,
@@ -107,8 +107,8 @@ export const ListItem = ({
   inverted,
   media,
   spotlight,
-  value,
-  subvalue,
+  valueTitle,
+  valueSubtitle,
   control = null,
   disabled,
   className,
@@ -123,8 +123,8 @@ export const ListItem = ({
   const ids: ListItemContextData['ids'] = {
     title: `${idPrefix}_title`,
     ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),
-    ...(value ? { value: `${idPrefix}_value` } : {}),
-    ...(subvalue ? { subvalue: `${idPrefix}_subvalue` } : {}),
+    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),
+    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),
     control: `${idPrefix}_control`,
     ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),
     ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),
@@ -142,8 +142,8 @@ export const ListItem = ({
   const titlesAndValues = [
     inverted ? ids.subtitle : ids.title,
     inverted ? ids.title : ids.subtitle,
-    inverted ? ids.subvalue : ids.value,
-    inverted ? ids.value : ids.subvalue,
+    inverted ? ids.valueSubtitle : ids.valueTitle,
+    inverted ? ids.valueTitle : ids.valueSubtitle,
   ].join(' ');
   const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');
 
@@ -283,35 +283,36 @@ export const ListItem = ({
               })()}
             </span>
 
-            {(value || subvalue) && (
+            {(valueTitle || valueSubtitle) && (
               <span
                 className={clsx('wds-list-item-value', {
-                  'flex-column': value !== undefined || subvalue !== undefined,
-                  'wds-list-item-body-center': (value && !subvalue) || (!value && subvalue),
+                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
+                  'wds-list-item-body-center':
+                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
                 })}
               >
                 {(() => {
                   const values = [];
-                  if (value) {
+                  if (valueTitle) {
                     values.push(
                       <Body
-                        key={ids.value}
-                        id={ids.value}
+                        key={ids.valueTitle}
+                        id={ids.valueTitle}
                         type={Typography.BODY_LARGE_BOLD}
                         className="wds-list-item-title-value"
                       >
-                        {value}
+                        {valueTitle}
                       </Body>,
                     );
                   }
-                  if (subvalue) {
+                  if (valueSubtitle) {
                     values.push(
                       <Body
-                        key={ids.subvalue}
-                        id={ids.subvalue}
+                        key={ids.valueSubtitle}
+                        id={ids.valueSubtitle}
                         className="wds-list-item-subtitle-value"
                       >
-                        {subvalue}
+                        {valueSubtitle}
                       </Body>,
                     );
                   }

package/src/listItem/ListItemContext.tsx

@@ -10,8 +10,8 @@ export type ListItemContextData = {
   ids: {
     title: string;
     subtitle?: string;
-    value?: string;
-    subvalue?: string;
+    valueTitle?: string;
+    valueSubtitle?: string;
     additionalInfo?: string;
     control: string;
     prompt?: string;

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -57,7 +57,7 @@ const variants = [
       </ListItem.AvatarView>
     }
   />,
-  <ListItem key="value" title="With value" value="100 GBP" subvalue="100 USD" />,
+  <ListItem key="value" title="With value" valueTitle="100 GBP" valueSubtitle="100 USD" />,
   <ListItem
     key="prompt"
     title="With prompt"
@@ -84,7 +84,7 @@ const variants = [
   <ListItem
     key="button-value"
     title="Button + value"
-    value="42 EUR"
+    valueTitle="42 EUR"
     control={
       <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
         Pay
@@ -101,12 +101,12 @@ const variants = [
         <Bank />
       </ListItem.AvatarView>
     }
-    value="1,000 USD"
+    valueTitle="1,000 USD"
   />,
   <ListItem
     key="prompt-value"
     title="Prompt + value"
-    value="10 GBP"
+    valueTitle="10 GBP"
     prompt={<ListItem.Prompt sentiment="warning">Warning prompt!</ListItem.Prompt>}
   />,
   <ListItem
@@ -128,7 +128,7 @@ const variants = [
         <Savings />
       </ListItem.AvatarView>
     }
-    value="999 GBP"
+    valueTitle="999 GBP"
     prompt={
       <ListItem.Prompt sentiment="positive">
         <Link href="https://wise.com">See details</Link>
@@ -144,7 +144,7 @@ const variants = [
         <Savings />
       </ListItem.AvatarView>
     }
-    value="999 GBP"
+    valueTitle="999 GBP"
     prompt={
       <ListItem.Prompt sentiment="positive">
         <Link href="https://wise.com">See details</Link>

package/src/listItem/_stories/ListItem.story.tsx

@@ -55,8 +55,8 @@ export default {
   args: {
     title: 'List item title',
     subtitle: 'Subtitle goes here',
-    value: '100 GBP',
-    subvalue: '100 USD',
+    valueTitle: '100 GBP',
+    valueSubtitle: '100 USD',
     disabled: false,
     spotlight: undefined,
     inverted: false,
@@ -325,7 +325,7 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
  * Due to platform limitations, the component is unable to automagically adjust its content to
  * all possible configurations. <br />
  * By default, it'll follow a CSS grid `1fr max-content` ratio of left side content (`title` and
- * `subtitle`) to the right side content (`value` and `subvalue`).
+ * `subtitle`) to the right side content (`valueTitle` and `valueSubtitle`).
  *
  * To adjust the width of the right side content, you can use `valueColumnWidth` prop which accepts
  * a number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration.
@@ -345,8 +345,8 @@ export const ContentRatio: StoryObj<PreviewStoryArgs> = {
   args: {
     valueColumnWidth: 70,
     subtitle: lorem5,
-    value: `${lorem5} ${lorem5}`,
-    subvalue: lorem5,
+    valueTitle: `${lorem5} ${lorem5}`,
+    valueSubtitle: lorem5,
     previewInteractivity: 'fully-interactive',
     previewPrompt: 'interactive',
     previewMedia: 'image',
@@ -448,7 +448,14 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
  */
 export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise({
   argTypes: {
-    ...hideControls(['title', 'subtitle', 'value', 'subvalue', 'valueColumnWidth', 'inverted']),
+    ...hideControls([
+      'title',
+      'subtitle',
+      'valueTitle',
+      'valueSubtitle',
+      'valueColumnWidth',
+      'inverted',
+    ]),
   },
   args: {
     subtitle: lorem10,
@@ -730,8 +737,8 @@ export const Disabled: Story = {
 
 /**
  * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
- * That said, most of them should be fed with plain text only. The exception is `value`
- * and `subvalue` which can be augmented with sentiment colours, strikethrough or bold
+ * That said, most of them should be fed with plain text only. The exception is `valueTitle`
+ * and `valueSubtitle` which can be augmented with sentiment colours, strikethrough or bold
  * styles. <br />
  *
  * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
@@ -753,13 +760,13 @@ export const StylingLabels: Story = {
       <List>
         <ListItem
           {...args}
-          value={<Emphasis text="<negative>100 GBP</negative>" />}
-          subvalue={<s>125 GBP</s>}
+          valueTitle={<Emphasis text="<negative>100 GBP</negative>" />}
+          valueSubtitle={<s>125 GBP</s>}
         />
         <ListItem
           {...args}
-          value={<Emphasis text="<positive>100 GBP</positive>" />}
-          subvalue={<strong>125 GBP</strong>}
+          valueTitle={<Emphasis text="<positive>100 GBP</positive>" />}
+          valueSubtitle={<strong>125 GBP</strong>}
         />
       </List>
     );

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -42,8 +42,8 @@ const infoWithLink = (
   </ListItem.AdditionalInfo>
 );
 
-const value = '100 GBP';
-const subvalue = '200 USD';
+const valueTitle = '100 GBP';
+const valueSubtitle = '200 USD';
 const prompt = <ListItem.Prompt sentiment="positive">Finally, there is a prompt.</ListItem.Prompt>;
 const promptWithLink = (
   <ListItem.Prompt sentiment="positive">
@@ -71,35 +71,35 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
   const variants = [
     { title },
-    { title, value },
+    { title, valueTitle },
     { title, subtitle },
-    { title, value, subvalue },
+    { title, valueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
-    { title, subtitle, value },
-    { title, subtitle, value, inverted: true },
-    { title, subtitle, value, subvalue },
-    { title, subtitle, value, subvalue, inverted: true },
+    { title, subtitle, valueTitle },
+    { title, subtitle, valueTitle, inverted: true },
+    { title, subtitle, valueTitle, valueSubtitle },
+    { title, subtitle, valueTitle, valueSubtitle, inverted: true },
     { media, title },
-    { media, title, value },
+    { media, title, valueTitle },
     { media, title, subtitle },
-    { media, title, value, subvalue },
-    { media, title, value },
-    { media, title, subvalue },
+    { media, title, valueTitle, valueSubtitle },
+    { media, title, valueTitle },
+    { media, title, valueSubtitle },
     { media, title, subtitle },
-    { media, title, subtitle, value },
-    { media, title, subtitle, value, subvalue },
+    { media, title, subtitle, valueTitle },
+    { media, title, subtitle, valueTitle, valueSubtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
     isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
-    { media, title, subtitle, additionalInfo, value },
-    { media, title, subtitle, additionalInfo, value, subvalue },
-    { media, title, subtitle, additionalInfo, value, subvalue, prompt },
+    { media, title, subtitle, additionalInfo, valueTitle },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
     {
       media,
       title,
       subtitle,
       additionalInfo,
-      value,
-      subvalue,
+      valueTitle,
+      valueSubtitle,
       prompt: promptWithLink,
     },
     {
@@ -107,8 +107,8 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
       title,
       subtitle,
       additionalInfo,
-      value,
-      subvalue,
+      valueTitle,
+      valueSubtitle,
       prompt: promptWithLink,
       inverted: true,
     },
@@ -117,8 +117,8 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
       title,
       subtitle,
       additionalInfo,
-      value,
-      subvalue,
+      valueTitle,
+      valueSubtitle,
       prompt: promptWithLink,
       spotlight: 'active',
     },
@@ -127,8 +127,8 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
       title,
       subtitle,
       additionalInfo,
-      value,
-      subvalue,
+      valueTitle,
+      valueSubtitle,
       prompt: promptWithLink,
       spotlight: 'inactive',
     },
@@ -137,8 +137,8 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
       title,
       subtitle,
       additionalInfo,
-      value,
-      subvalue,
+      valueTitle,
+      valueSubtitle,
       prompt: promptWithLink,
       spotlight: 'inactive',
       disabled: true,
@@ -186,8 +186,8 @@ export const ButtonControlLabel: Story = {
       <ListItem
         title="Fully interactive button."
         subtitle="It uses default content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.button}
         prompt={PROMPTS.nonInteractive}
@@ -197,8 +197,8 @@ export const ButtonControlLabel: Story = {
         inverted
         title="Fully interactive button."
         subtitle="It uses inverted content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.button}
         prompt={PROMPTS.nonInteractive}
@@ -207,8 +207,8 @@ export const ButtonControlLabel: Story = {
       <ListItem
         title="Fully interactive button as HTML anchor."
         subtitle="It uses default content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
@@ -218,8 +218,8 @@ export const ButtonControlLabel: Story = {
         inverted
         title="Fully interactive button as HTML anchor."
         subtitle="It uses inverted content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
@@ -228,8 +228,8 @@ export const ButtonControlLabel: Story = {
       <ListItem
         title="Partially interactive button."
         subtitle="It uses default content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.partialButton}
         prompt={PROMPTS.nonInteractive}
@@ -239,8 +239,8 @@ export const ButtonControlLabel: Story = {
         inverted
         title="Partially interactive button."
         subtitle="It uses inverted content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.partialButton}
         prompt={PROMPTS.nonInteractive}
@@ -249,8 +249,8 @@ export const ButtonControlLabel: Story = {
       <ListItem
         title="Partially interactive button as HTML anchor."
         subtitle="It uses default content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
@@ -260,8 +260,8 @@ export const ButtonControlLabel: Story = {
         inverted
         title="Partially interactive button as HTML anchor."
         subtitle="It uses inverted content hierarchy."
-        value="100 GBP"
-        subvalue="200 USD"
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
         additionalInfo={ADDITIONAL_INFO.nonInteractive}
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}

package/src/listItem/test-utils.tsx

@@ -15,7 +15,7 @@ export const renderWithListItemContext = (ui: React.ReactNode): RenderResult =>
         ids: {
           title: 'title',
           additionalInfo: 'additional-info',
-          value: 'value',
+          valueTitle: 'value-title',
           control: 'control',
           prompt: 'prompt',
         },

package/src/main.css

@@ -2433,30 +2433,48 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   fill: var(--color-interactive-primary);
 }
 .np-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 24px;
+  grid-column-gap: var(--size-24);
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  align-items: center;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   max-width: 100%;
   padding: 8px 0;
   padding: var(--size-8) 0;
+  width: 100%;
+}
+.np-header--group {
+  align-items: flex-end;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-  -moz-column-gap: var(--size-24);
-       column-gap: var(--size-24);
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
+  margin: 0;
 }
-.np-header__button {
-  margin-inline: calc(16px * -1);
-  margin-inline: calc(var(--size-16) * -1);
-  margin-bottom: calc(4px * -1);
-  margin-bottom: calc(var(--size-4) * -1);
+.np-header__action {
+  margin: 0;
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+.np-header__action-link {
+  margin-bottom: -0.5px;
+}
+.np-header__action-button {
+  margin-right: -17px;
+}
+@media (max-width: 320px) {
+  .np-header__action-button {
+    margin-right: -12.5px;
+  }
 }
 .tw-image {
   max-width: none;

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
+import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,16 +25,29 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-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)} />;
-}
+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)}
+      />
+    );
+  },
+);
 
 export default Title;