@transferwise/components 46.132.1 → 46.133.0

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
+import { useInputPaddings } from '../inputs/InputGroup';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
@@ -67,6 +68,8 @@ const PhoneNumberInput = ({
   const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
   const phoneNumberInputRef = useRef<HTMLInputElement>(null);
   const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const { paddingInlineStart } = useInputPaddings();
+  const hasInputGroupAddonStart = paddingInlineStart != null;
   const fieldLabelRef = useFieldLabelRef();
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
@@ -197,7 +200,13 @@ const PhoneNumberInput = ({
       <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
         {formatMessage(messages.countryCodeLabel)}
       </label>
-      <div className="tw-telephone__country-select">
+      <div
+        className={`tw-telephone__country-select${
+          hasInputGroupAddonStart
+            ? ' tw-telephone__country-select--with-input-group-addon-start'
+            : ''
+        }`}
+      >
         <SelectInput
           triggerRef={countryCodeSelectRef}
           placeholder={formatMessage(messages.selectInputPlaceholder)}

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -96,7 +96,6 @@ const getPropsForPreview = (
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   argTypes: previewArgTypes,
   args: {
     previewMedia: false,

package/src/section/Section.story.tsx

@@ -1,11 +1,10 @@
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
+import { action } from 'storybook/actions';
 import Accordion from '../accordion';
 import Card from '../card';
 import Header from '../header';
-import NavigationOption from '../navigationOption';
-
+import ListItem from '../listItem';
 import Section from './Section';
 
 export default {
@@ -105,12 +104,18 @@ export const WithCards = () => {
   );
 };
 
-export const WithNavigationOptions = () => {
+export const WithListItems = () => {
   return (
     <Section>
-      <Header title="Section with options" />
-      <NavigationOption title="Option 1" onClick={() => alert('Option 1')} />
-      <NavigationOption title="Option 2" onClick={() => alert('Option 2')} />
+      <Header title="Section with list items" />
+      <ListItem
+        title="Item 1"
+        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
+      />
+      <ListItem
+        title="Item 2"
+        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
+      />
     </Section>
   );
 };

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -32,6 +32,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
   title: 'Foundations/SentimentSurface',
+  tags: ['early-access'],
   argTypes: {
     sentiment: {
       control: 'select',
@@ -124,7 +125,6 @@ export const Playground: Story = {
       </div>
     ),
   },
-  tags: ['!autodocs'],
 };
 
 const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];

package/src/snackbar/Snackbar.test.story.tsx

@@ -1,13 +1,12 @@
-import { userEvent, within } from 'storybook/test';
+import { userEvent, within, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
-import { Mobile as MobileIcon, Theme, Switch, Bulb, Info, Coins, Team } from '@transferwise/icons';
+import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem20 } from '../test-utils';
+import { wait } from '../test-utils/wait';
+import Button from '../button';
 import { Snackbar, type SnackbarProps } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
-import Button from '../button';
-import CheckboxOption from '../checkboxOption';
-import { wait } from '../test-utils/wait';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -43,6 +42,7 @@ const Default = {
           {({ createSnackbar }) => (
             <>
               <Button
+                v2
                 block
                 onClick={() => {
                   createSnackbar({
@@ -69,36 +69,6 @@ export const Basic = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In light mode, snackbar has drop shadow"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4477"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4477
-            </a>
-          }
-          media={<Bulb />}
-        />
-        <CheckboxOption
-          title="Font size is 14 px, not 16px"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-3716"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-3716
-            </a>
-          }
-          media={<Info size="16" />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
 };
 
@@ -106,14 +76,6 @@ export const Mobile = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In mobile view, snackbar is full-width, not centered"
-          media={<MobileIcon />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   ...withVariantConfig(['mobile'], Default),
 };
@@ -136,15 +98,6 @@ export const DarkMode = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
-        <CheckboxOption
-          title="In dark mode, snackbar is inverted and has light background"
-          media={<Theme />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   play: switchToDarkMode,
   ...withVariantConfig(['dark'], Default),
@@ -167,36 +120,6 @@ export const RTL = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="In RTL, snackbar is not left aligned"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4642"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4642
-            </a>
-          }
-          media={<Switch />}
-        />
-        <CheckboxOption
-          title="In RTL, snackbar has proper padding on left and right of button"
-          content={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-4643"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-4643
-            </a>
-          }
-          media={<Switch />}
-        />
-      </div>
-    ) as React.ReactNode,
   },
   play: switchToRTL,
   ...withVariantConfig(['rtl'], Default),
@@ -217,42 +140,31 @@ export const Zoom400 = {
     ...Default.args,
     extraContext: (
       <div className="p-t-3">
-        <CheckboxOption
-          content="Snackbar isn't transparent (I'm going to make this text very long so that it will fill up the entire page and go behind the snackbar. This way, when you look at it you will easily be able to tell if the snackbar is transparent and recognize the bug because we don't want it to be transparent. Transparent is bad. When we first did rebrand we had a lot of problems with transparencies. I don't know what happened to them. I don't see them a lot anymore but I also don't remember anybody fixing them.)"
-          title={
-            <a
-              href="https://transferwise.atlassian.net/browse/DS-3716"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Bug DS-3716
-            </a>
-          }
-          media={<Coins />}
-        />
+        Snackbar isn&#39;t transparent (I&#39;m going to make this text very long so that it will
+        fill up the entire page and go behind the snackbar. This way, when you look at it you will
+        easily be able to tell if the snackbar is transparent and recognize the bug because we
+        don&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
+        lot of problems with transparencies. {lorem20}
       </div>
     ),
   },
   ...withVariantConfig(['400%'], Default),
 };
 
+/**
+ * Snackbar is only shown once even if trigger is clicked many times
+ */
 export const MultipleClicks = {
   ...Default,
   args: {
     ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        <CheckboxOption
-          title="Snackbar is only shown once even if clicked many times"
-          media={<Team />}
-        />
-      </div>
-    ),
   },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     for (let i = 0; i < 8; i += 1) {
       await userEvent.click(canvas.getByRole('button'));
     }
+
+    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
   },
 };

package/src/summary/Summary.test.story.tsx

@@ -5,7 +5,7 @@ import Summary, { type SummaryProps } from '.';
 export default {
   component: Summary,
   title: 'Content/Summary/Tests',
-  tags: ['deprecated', '!manifest'],
+  tags: ['!manifest', 'deprecated'],
 };
 
 export const LongText = () => {

package/src/switchOption/SwitchOption.story.tsx

@@ -46,7 +46,6 @@ function Template(args: SwitchOptionProps) {
 
 export const Playground = {
   render: (args: SwitchOptionProps) => <Template {...args} />,
-  tags: ['!autodocs'],
 };
 
 export const Multiple = {