@transferwise/components 0.0.0-experimental-a90b9c1 → 0.0.0-experimental-6e333ba

package/src/IconButton/_stories/IconButton.story.tsx

@@ -18,7 +18,7 @@ import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import IconButton, { type IconButtonProps } from '../IconButton';
+import IconButton, { Props } from '../IconButton';
 import SentimentSurface from '../../SentimentSurface';
 
 /**
@@ -46,7 +46,7 @@ export default {
 
 type Story = StoryObj<typeof IconButton>;
 
-const sizes: IconButtonProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 /**
  * Explore size, priority, type, and disabled state via the controls panel.
@@ -107,7 +107,7 @@ export const Priority: Story = {
       </div>
     ),
   ],
-  render: (args: IconButtonProps) => (
+  render: (args: Props) => (
     <>
       <IconButton priority="primary" type={args.type} aria-label="Primary" onClick={fn()}>
         <Plus />
@@ -152,7 +152,7 @@ export const Type: Story = {
       </div>
     ),
   ],
-  render: (args: IconButtonProps) => (
+  render: (args: Props) => (
     <>
       <IconButton priority={args.priority} type="default" aria-label="Default" onClick={fn()}>
         <Plus />
@@ -195,7 +195,7 @@ export const Size: Story = {
       </div>
     ),
   ],
-  render: (args: IconButtonProps) => (
+  render: (args: Props) => (
     <>
       {sizes.map((size) => (
         <div
@@ -254,7 +254,7 @@ export const Disabled: Story = {
     target: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: IconButtonProps) => (
+  render: (args: Props) => (
     <IconButton disabled priority={args.priority} type={args.type} aria-label="Disabled">
       <Plus />
     </IconButton>
@@ -284,7 +284,7 @@ export const AsAnchor: Story = {
     disabled: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: IconButtonProps) => (
+  render: (args: Props) => (
     <IconButton {...args} aria-label="External link">
       <ArrowLeft />
     </IconButton>
@@ -305,7 +305,7 @@ export const SentimentAwareness: Story = {
       options: [16, 24, 32, 40, 48, 56, 72],
     },
   },
-  render: (args: IconButtonProps) => {
+  render: (args: Props) => {
     const priorities = [
       { key: 'primary', label: 'primary' },
       { key: 'secondary', label: 'secondary' },

package/src/IconButton/index.ts

@@ -1,2 +1,2 @@
-export type { IconButtonProps } from './IconButton';
+export type { Props as IconButtonProps } from './IconButton';
 export { default } from './IconButton';

package/src/Link/Link.tsx

@@ -8,7 +8,7 @@ import { LinkLarge, LinkDefault, Typography } from '../common';
 
 import messages from './Link.messages';
 
-export type LinkProps = PrimitiveAnchorProps &
+export type Props = PrimitiveAnchorProps &
   Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -26,7 +26,7 @@ const Link = ({
   onClick,
   disabled,
   ...props
-}: LinkProps) => {
+}: Props) => {
   const { formatMessage } = useIntl();
   const isButton = Boolean(onClick) && href === undefined;
   const isBlank = target === '_blank';

package/src/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { LinkProps } from './Link';
+export type { Props as LinkProps } from './Link';

package/src/Nudge/Nudge.tsx

@@ -81,7 +81,7 @@ export interface RequiredPersistProps extends BaseProps {
   isPreviouslyDismissed?: (value: boolean) => void;
 }
 
-export type NudgeProps = OptionalId | RequiredPersistProps;
+export type Props = OptionalId | RequiredPersistProps;
 
 const Nudge = ({
   mediaName,
@@ -95,7 +95,7 @@ const Nudge = ({
   id,
   className,
   action,
-}: NudgeProps) => {
+}: Props) => {
   const intl = useIntl();
   const getIsDismissed = useCallback(
     () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),

package/src/Nudge/index.ts

@@ -1,7 +1,7 @@
 export { default } from './Nudge';
 
 export type {
-  NudgeProps,
+  Props as NudgeProps,
   OptionalId as NudgeOptionalId,
   RequiredPersistProps as NudgeRequiredPersistProps,
 } from './Nudge';

package/src/Sticky/Sticky.css

@@ -0,0 +1,4 @@
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+}

package/src/Sticky/Sticky.less

@@ -0,0 +1,6 @@
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: var(
+    --wds-sticky-safe-area-inset-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+}

package/src/Sticky/Sticky.test.tsx

@@ -21,6 +21,7 @@ describe('Sticky', () => {
 
   test('renders with default props', () => {
     expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('wds-sticky');
     expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
     expect(screen.getByText('Test Content')).toBeInTheDocument();
   });

package/src/Sticky/Sticky.tsx

@@ -46,6 +46,7 @@ const Sticky: FunctionComponent<StickyProps> = ({
 }: StickyProps) => {
   return (
     <SlidingPanel
+      className="wds-sticky"
       testId={testId}
       open={open}
       position={position}

package/src/Sticky/_stories/Sticky.test.story.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Card, Home, Payments, Recipients } from '@transferwise/icons';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../../.storybook/helpers';
+import Button from '../../Button';
+import { wait } from '../../test-utils/wait';
+import Sticky from '../Sticky';
+
+const SAFE_AREA_INSET = 64;
+const DEMO_HEIGHT = 400;
+const DEMO_WIDTH = 390;
+const SAFE_AREA_VIEWPORT = 'safe-area-demo';
+
+type SafeAreaDemoStyle = CSSProperties & {
+  '--wds-sticky-safe-area-inset-bottom': string;
+};
+
+const safeAreaDemoStyle: SafeAreaDemoStyle = {
+  '--wds-sticky-safe-area-inset-bottom': `${SAFE_AREA_INSET}px`,
+  background: 'var(--color-background-screen)',
+  height: DEMO_HEIGHT,
+  overflow: 'hidden',
+};
+
+const navigationItems = [
+  { Icon: Home, label: 'Home' },
+  { Icon: Card, label: 'Card' },
+  { Icon: Recipients, label: 'Recipients' },
+  { Icon: Payments, label: 'Payments' },
+] as const;
+
+function SafeAreaBottomBar() {
+  return (
+    <nav
+      aria-label="Safe area bottom bar"
+      data-testid="safe-area-bottom-bar"
+      style={{
+        alignItems: 'center',
+        background: 'var(--color-background-elevated)',
+        borderTop: '1px solid var(--color-border-neutral)',
+        bottom: 0,
+        display: 'flex',
+        height: SAFE_AREA_INSET,
+        justifyContent: 'space-around',
+        left: 0,
+        padding: '0 8px',
+        position: 'fixed',
+        right: 0,
+        zIndex: 1031,
+      }}
+    >
+      {navigationItems.map(({ Icon, label }) => (
+        <span
+          key={label}
+          style={{
+            alignItems: 'center',
+            color: 'var(--color-content-primary)',
+            display: 'flex',
+            flexDirection: 'column',
+            fontSize: 11,
+            gap: 2,
+          }}
+        >
+          <Icon size={24} />
+          {label}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function SafeAreaDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <main style={safeAreaDemoStyle}>
+      <section style={{ maxWidth: 520, padding: 32 }}>
+        <h1 style={{ fontSize: 32, lineHeight: 1.15, margin: '0 0 16px' }}>
+          Sticky respects safe area at bottom of screen
+        </h1>
+        <Button v2 onClick={() => setOpen((currentOpen) => !currentOpen)}>
+          {open ? 'Hide Sticky' : 'Show Sticky'}
+        </Button>
+      </section>
+
+      <SafeAreaBottomBar />
+
+      <Sticky open={open} position="bottom" testId="safe-area-sticky">
+        <div className="p-a-2" data-testid="sticky-content">
+          Sticky
+        </div>
+      </Sticky>
+    </main>
+  );
+}
+
+const meta = {
+  component: Sticky,
+  parameters: {
+    controls: { disable: true },
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Sticky/Tests',
+} satisfies Meta<typeof Sticky>;
+
+export default meta;
+
+type Story = StoryObj<typeof Sticky>;
+
+const SafeAreaRegression: Story = {
+  parameters: {
+    chromatic: { delay: 500 },
+    viewport: {
+      options: {
+        [SAFE_AREA_VIEWPORT]: {
+          name: 'Safe area demo',
+          styles: { height: `${DEMO_HEIGHT}px`, width: `${DEMO_WIDTH}px` },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: SAFE_AREA_VIEWPORT,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const expectStickyAboveSafeArea = async () => {
+      await wait(400);
+
+      const sticky = canvas.getByTestId('safe-area-sticky');
+      const stickyContent = canvas.getByTestId('sticky-content');
+      const safeArea = canvas.getByTestId('safe-area-bottom-bar');
+
+      await expect(sticky).toBeVisible();
+      await expect(window.getComputedStyle(sticky).paddingBottom).toBe(`${SAFE_AREA_INSET}px`);
+      await expect(Math.round(stickyContent.getBoundingClientRect().bottom)).toBe(
+        Math.round(safeArea.getBoundingClientRect().top),
+      );
+      await expect(stickyContent.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+        safeArea.getBoundingClientRect().top,
+      );
+    };
+
+    await step('Open Sticky from the top button', async () => {
+      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
+    });
+
+    await step('Keep Sticky above the bottom safe area', expectStickyAboveSafeArea);
+
+    await step('Toggle Sticky closed and open again', async () => {
+      const hideStickyButton = canvas.getByRole('button', { name: /^hide sticky$/i });
+
+      await userEvent.click(hideStickyButton);
+      await wait(400);
+      await expect(canvas.queryByTestId('safe-area-sticky')).not.toBeInTheDocument();
+
+      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
+      await expectStickyAboveSafeArea();
+    });
+  },
+  render: () => <SafeAreaDemo />,
+};
+
+/**
+ * Reproduces the MobileNav replacement from DS-7193 with a fixed bottom safe area.
+ * It verifies that Sticky clears the inset.
+ */
+export const MobileNavSafeArea: Story = {
+  ...SafeAreaRegression,
+  ...withVariantConfig(['mobile'], SafeAreaRegression),
+};

package/src/Title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -13,9 +13,7 @@ const titleTypeMapping = {
   [Typography.TITLE_GROUP]: 'h5',
 } as const;
 
-export type TitleProps = LabelHTMLAttributes<
-  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement
-> &
+type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> &
   LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
@@ -27,32 +25,29 @@ export type TitleProps = LabelHTMLAttributes<
     type?: TitleTypes;
   };
 
-const Title = React.forwardRef<
-  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,
-  TitleProps
->(({ 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;
+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-${type}`, className)}
+        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
       />
     );
-  }
-  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-  return (
-    <HeaderTag
-      ref={ref as React.Ref<any>}
-      {...props}
-      className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
-    />
-  );
-});
-
-Title.displayName = 'Title';
+  },
+);
 
 export default Title;

package/src/Title/index.ts

@@ -1,2 +1 @@
 export { default } from './Title';
-export type { TitleProps } from './Title';

package/src/_deprecated/LegacyListItem/_stories/LegacyListItem.story.tsx

@@ -1,11 +1,12 @@
 import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
+import { ComponentProps } from 'react';
 
 import { Button, IconButton, List } from '../../..';
 import AvatarView from '../../../AvatarView';
 import Info from '../../../Info';
 import Title from '../../../Title/Title';
-import LegacyListItem, { type LegacyListItemProps } from '..';
+import LegacyListItem from '..';
 
 /**
  * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs)
@@ -21,7 +22,7 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<LegacyListItemProps>) => {
+}: Partial<ComponentProps<typeof LegacyListItem>>) => {
   return <LegacyListItem title={title} value={value} {...props} />;
 };
 

package/src/_deprecated/Select/Option/Option.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Person } from '@transferwise/icons';
 
-import Option, { type OptionProps } from './Option';
+import Option, { Props as OptionProps } from './Option';
 
 describe('Option', () => {
   const defaultProps: OptionProps<string> = {

package/src/_deprecated/Select/Option/Option.tsx

@@ -6,7 +6,7 @@ import { cloneElement, ReactElement, ReactNode } from 'react';
 import Body from '../../../Body';
 import { Typography } from '../../../common';
 
-export type OptionProps<T> = {
+export type Props<T> = {
   label: ReactNode;
   value: T;
   currency?: string;
@@ -27,7 +27,7 @@ function Option<T>({
   icon,
   selected = false,
   testId,
-}: OptionProps<T>) {
+}: Props<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
         size: 24,

package/src/_deprecated/Select/SearchBox/SearchBox.tsx

@@ -4,13 +4,13 @@ import { forwardRef, InputHTMLAttributes } from 'react';
 
 import { Input } from '../../../Inputs/Input/Input';
 
-type SearchBoxProps = {
+type Props = {
   id?: string;
   classNames?: Record<string, string>;
   focusedOptionId?: string;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;
 
-const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(
+const SearchBox = forwardRef<HTMLInputElement, Props>(
   (
     {
       id,

package/src/common/Circle/Circle.tsx

@@ -5,7 +5,7 @@ import { useMedia } from '../hooks/useMedia';
 
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
 
-export type CircleProps = {
+export type Props = {
   /**
    * Modify underlying element, `div` by default
    */
@@ -64,7 +64,7 @@ const Circle = forwardRef(function Circle(
     className,
     style,
     ...props
-  }: CircleProps,
+  }: Props,
   ref,
 ) {
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);

package/src/common/Circle/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Circle';
-export { type CircleProps } from './Circle';
+export { type Props as CircleProps } from './Circle';

package/src/index.ts

@@ -25,7 +25,6 @@ export type {
   ButtonProps as LegacyButtonProps,
   AnchorElementProps,
 } from './Button';
-export type { BodyProps } from './Body';
 export type { CardProps } from './_deprecated/Card';
 export type {
   CarouselProps,
@@ -64,7 +63,6 @@ export type {
   DefinitionListLayout,
 } from './DefinitionList';
 export type { DimmerProps } from './Dimmer';
-export type { DisplayProps } from './Display';
 export type { DrawerProps } from './Drawer';
 export type { DividerProps } from './Divider';
 export type { HeaderProps } from './Header';
@@ -91,7 +89,6 @@ export type { TextAreaProps } from './Inputs/TextArea/TextArea';
 export type { InstructionsListProps } from './InstructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
 export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
-export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
 export type { ModalProps } from './Modal';
@@ -148,7 +145,6 @@ export type { SwitchOptionProps } from './_deprecated/SwitchOption';
 export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
 export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
 export type { TileProps } from './Tile';
-export type { TitleProps } from './Title';
 export type { TooltipProps } from './Tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './Typeahead';
 export type { UploadProps } from './Upload';

package/src/main.css

@@ -32712,6 +32712,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   will-change: width;
 }
 
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+}
+
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/main.less

@@ -78,6 +78,7 @@
 @import "./Snackbar/Snackbar.less";
 @import "./StatusIcon/StatusIcon.less";
 @import "./Stepper/Stepper.less";
+@import "./Sticky/Sticky.less";
 @import "./_deprecated/Select/Select.less";
 @import "./SegmentedControl/SegmentedControl.less";
 @import "./_deprecated/Summary/Summary.less";