@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,24 +1,76 @@
-.critical-comms .alert-critical {
-  color: var(--color-contrast-overlay) !important;
-  background-color: var(--color-sentiment-negative) !important;
-}
-.critical-comms .alert-critical .np-text-title-body {
-  color: var(--color-contrast-overlay);
-}
-.critical-comms .status-circle.critical {
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-}
-@media (min-width: 768px) {
-  .critical-comms .alert-critical .alert__message {
-    flex-direction: row !important;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+div.critical-comms {
+  --critical-comms-background-color: var(--color-background-negative);
+  --critical-comms-title-color: var(--color-content-negative);
+  --critical-comms-subtitle-color: var(--color-content-secondary);
+  --critical-comms-subtitle-color-padding-left: var(--size-16);
+  --critical-comms-vertical-spacing: var(--size-8);
+  background-color: rgba(255,135,135,0.10196);
+  background-color: var(--critical-comms-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.np-theme-personal div.critical-comms,
+.np-theme-personal--dark div.critical-comms {
+  --critical-comms-background-color: var(--color-sentiment-negative);
+  --critical-comms-title-color: var(--color-contrast);
+  --critical-comms-subtitle-color: var(--color-contrast);
+  --critical-comms-subtitle-color-padding-left: 0;
+  --critical-comms-vertical-spacing: var(--size-16);
+  padding: 24px;
+  padding: var(--padding-medium);
+}
+.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
+.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
+  color: var(--color-contrast);
+}
+.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
+.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
+  width: 48px;
+  height: 48px;
+}
+.np-theme-personal div.critical-comms .cta-btn,
+.np-theme-personal--dark div.critical-comms .cta-btn {
+  background-color: var(--color-contrast);
+}
+.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
+.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
+  outline-color: var(--color-contrast);
+}
+@media (max-width: 767px) {
+  div.critical-comms {
+    display: inline;
+    display: initial;
   }
-  .critical-comms .alert-critical .alert__message .alert__action {
-    margin-top: 0;
-    padding-left: 16px;
-    padding-left: var(--padding-small);
+}
+div.critical-comms .critical-comms--title {
+  color: var(--critical-comms-title-color);
+}
+div.critical-comms .critical-comms--subtitle {
+  color: var(--critical-comms-subtitle-color);
+}
+div.critical-comms .critical-comms--cta {
+  padding-left: 0;
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms--cta {
+    padding-left: var(--critical-comms-subtitle-color-padding-left);
+    padding-top: var(--critical-comms-vertical-spacing);
+    min-width: 100%;
+  }
+}
+div.critical-comms .critical-comms-body {
+  display: flex;
+  width: 100%;
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms-body {
+    flex-direction: column;
+  }
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms-content {
+    padding-top: var(--critical-comms-vertical-spacing);
+    flex-wrap: wrap;
   }
 }

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,32 +1,78 @@
-.critical-comms {
-  .alert-critical {
-    color: var(--color-contrast-overlay) !important;
-    background-color: var(--color-sentiment-negative) !important;
+div.critical-comms {
+  --critical-comms-background-color: var(--color-background-negative);
+  --critical-comms-title-color: var(--color-content-negative);
+  --critical-comms-subtitle-color: var(--color-content-secondary);
+  --critical-comms-subtitle-color-padding-left: var(--size-16);
+  --critical-comms-vertical-spacing: var(--size-8);
 
-    .np-text-title-body {
-      color: var(--color-contrast-overlay);
+  .np-theme-personal &,
+  .np-theme-personal--dark & {
+    --critical-comms-background-color: var(--color-sentiment-negative);
+    --critical-comms-title-color: var(--color-contrast);
+    --critical-comms-subtitle-color: var(--color-contrast);
+    --critical-comms-subtitle-color-padding-left: 0;
+    --critical-comms-vertical-spacing: var(--size-16);
+
+    padding: var(--padding-medium);
+
+    .tw-icon-alert-circle-fill {
+      color: var(--color-contrast);
+
+      svg {
+        width: 48px;
+        height: 48px;
+      }
+    }
+
+    .cta-btn {
+      background-color: var(--color-contrast);
+
+      &:not(.disabled,:disabled):focus {
+        outline-color: var(--color-contrast);
+      }
     }
   }
 
-  .status-circle.critical {
-    background-color: var(--color-background-screen);
+  background-color: var(--critical-comms-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media (--screen-sm-max) {
+    display: initial;
   }
-}
 
-@media (--screen-md) {
-  .critical-comms {
-    .alert-critical {
-      .alert__message {
-        flex-direction: row !important;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-
-        .alert__action {
-          margin-top: 0;
-          padding-left: var(--padding-small);
-        }
-      }
+  .critical-comms--title {
+    color: var(--critical-comms-title-color);
+  }
+
+  .critical-comms--subtitle {
+    color: var(--critical-comms-subtitle-color);
+  }
+
+  .critical-comms--cta {
+    padding-left: 0;
+
+    @media (--screen-sm-max) {
+      padding-left: var(--critical-comms-subtitle-color-padding-left);
+      padding-top: var(--critical-comms-vertical-spacing);
+      min-width: 100%;
+    }
+  }
+
+  .critical-comms-body {
+    display: flex;
+    width: 100%;
+
+    @media (--screen-sm-max) {
+      flex-direction: column;
+    }
+  }
+
+  .critical-comms-content {
+    @media (--screen-sm-max) {
+      padding-top: var(--critical-comms-vertical-spacing);
+      flex-wrap: wrap;
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,6 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import CriticalCommsBanner from '.';
-import { storyConfig } from '../test-utils';
 
 export default {
   component: CriticalCommsBanner,
@@ -9,33 +8,12 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
-export const Basic = {
+type Story = StoryObj<typeof CriticalCommsBanner>;
+
+export const Basic: Story = {
   args: {
     title: 'Your account is overdrawn',
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
 };
-
-export const Variants = storyConfig(
-  {
-    args: {
-      title: 'Your account is overdrawn',
-      subtitle: 'Add money within the next 30 days',
-      action: { label: 'Take action', href: 'https://wise.com' },
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-export const Mobile = storyConfig(
-  {
-    tags: ['!autodocs'],
-    args: {
-      title: 'Your account is overdrawn',
-      subtitle: 'Add money within the next 30 days',
-      action: { label: 'Take action', href: 'https://wise.com' },
-    },
-  },
-  { variants: ['default', 'dark', 'rtl', 'mobile'] },
-);

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,6 +1,13 @@
-import Alert from '../alert';
+import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
+import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 
+import Avatar, { AvatarType } from '../avatar';
+import Body from '../body';
+import Button from '../button';
+import { ControlType, Priority, Size, Typography } from '../common';
+import Title from '../title';
+
 export type CriticalCommsBannerProps = {
   title: string;
   subtitle?: string;
@@ -12,15 +19,50 @@ export type CriticalCommsBannerProps = {
 };
 
 function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
+  const { isModern } = useTheme();
   return (
     <div className={clsx('critical-comms', className)}>
-      <Alert
-        title={title}
-        message={subtitle}
-        action={{ target: action?.href, text: action?.label }}
-        className={className}
-        type="critical"
-      />
+      <div className="critical-comms-body">
+        <Avatar
+          size={Size.MEDIUM}
+          type={AvatarType.ICON}
+          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}
+          backgroundColor={
+            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'
+          }
+        >
+          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
+        </Avatar>
+        <div className="critical-comms-content d-flex align-items-center flex-grow-1">
+          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
+            <Title
+              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
+              className="critical-comms--title"
+            >
+              {title}
+            </Title>
+            <Body className="critical-comms--subtitle">{subtitle}</Body>
+          </div>
+          {action ? (
+            <div className="critical-comms--cta">
+              <Button
+                block={isModern}
+                size={Size.SMALL}
+                type={ControlType.NEGATIVE}
+                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}
+                className="cta-btn"
+                onClick={() => {
+                  if (action) {
+                    window.location.href = action.href;
+                  }
+                }}
+              >
+                {action.label}
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </div>
     </div>
   );
 }

package/src/field/Field.story.tsx

@@ -12,7 +12,7 @@ import Info from '../info';
 
 export default {
   component: Field,
-  title: 'Forms/Field',
+  title: 'Field',
   tags: ['autodocs'],
   argTypes: {
     messageIconLabel: {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -9,9 +9,10 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
+        aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >

package/src/i18n/en.json

@@ -27,7 +27,6 @@
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",
   "neptune.SelectOption.selected.action.label": "Change chosen option",
-  "neptune.StatusIcon.iconLabel.critical": "Critical:",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/i18n/ja.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
   "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
   "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
+  "neptune.UploadButton.maximumFiles": "最大ファイル数：{maxFiles}個",
   "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
   "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
   "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",

package/src/i18n/pt.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
   "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
   "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
+  "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
   "neptune.UploadButton.uploadFile": "Enviar arquivo",
   "neptune.UploadButton.uploadFiles": "Enviar arquivos",
   "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",

package/src/i18n/ru.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Все типы файлов",
   "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
   "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
+  "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Загрузить файл",
   "neptune.UploadButton.uploadFiles": "Загрузить файлы",
   "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",

package/src/i18n/zh-HK.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",
+  "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
   "neptune.UploadButton.uploadFile": "上載檔案",
   "neptune.UploadButton.uploadFiles": "上載檔案",
   "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",

package/src/index.ts

@@ -11,6 +11,7 @@ export type { AvatarProps } from './avatar';
 export type { AvatarViewProps } from './avatarView';
 export type { AvatarLayoutProps } from './avatarLayout';
 export type { BadgeProps } from './badge';
+export type { ButtonProps } from './button';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
 export type { CheckboxProps } from './checkbox';

package/src/inputs/SelectInput.story.tsx

@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../button';
+import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import { Field } from '../field/Field';

package/src/label/Label.story.tsx

@@ -3,7 +3,7 @@ import { Label } from './Label';
 
 export default {
   component: Label,
-  title: 'Forms/Label',
+  title: 'Label',
   tags: ['autodocs'],
 };
 

package/src/link/Link.tsx

@@ -1,14 +1,13 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { PrimitiveAnchor } from '../primitives';
-import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
+export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -25,30 +24,22 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
-  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const classNames = clsx(
-    'np-link',
-    'd-inline-flex',
-    {
-      [`np-text-${type}`]: type,
-    },
-    className,
-  );
+  const { formatMessage } = useIntl();
 
   return (
-    <PrimitiveAnchor
+    <a
       href={href}
       target={target}
-      className={classNames}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </PrimitiveAnchor>
+    </a>
   );
 };