@transferwise/components 0.0.0-experimental-8ef2fe2 → 0.0.0-experimental-1ffdc56

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,76 +1,11 @@
-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);
+.np-theme-personal .critical-comms .alert-critical {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative) !important;
 }
-@media (max-width: 767px) {
-  div.critical-comms {
-    display: inline;
-    display: initial;
-  }
+.np-theme-personal .critical-comms .alert-critical .np-text-title-body {
+  color: var(--color-contrast-overlay);
 }
-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 {
+.np-theme-personal .critical-comms .action__desktop {
   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;
-  }
+  align-items: center;
 }

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,78 +1,17 @@
-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-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);
+.np-theme-personal {
+  .critical-comms {
+    .alert-critical {
+      color: var(--color-contrast-overlay);
+      background-color: var(--color-sentiment-negative) !important;
+
+      .np-text-title-body {
+        color: var(--color-contrast-overlay);
       }
     }
-  }
-
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media (--screen-sm-max) {
-    display: initial;
-  }
-
-  .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;
+    .action__desktop {
+      display: flex;
+      align-items: center;
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,6 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import CriticalCommsBanner from '.';
+import { Variant } from '../common';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CriticalCommsBanner,
@@ -8,12 +10,14 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
-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 Basic = storyConfig(
+  {
+    args: {
+      title: 'Your account is overdrawn',
+      subtitle: 'Add money within the next 30 days',
+      action: { label: 'Take action', href: 'https://wise.com' },
+      variant: Variant.DESKTOP,
+    },
   },
-};
+  { variants: ['default', 'dark', 'rtl'] },
+);

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,13 +1,6 @@
-import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import Alert from '../alert';
 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;
@@ -19,50 +12,15 @@ export type CriticalCommsBannerProps = {
 };
 
 function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
-  const { isModern } = useTheme();
   return (
     <div className={clsx('critical-comms', className)}>
-      <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>
+      <Alert
+        title={title}
+        message={subtitle}
+        action={{ target: action?.href, text: action?.label }}
+        className={className}
+        type="critical"
+      />
     </div>
   );
 }

package/src/i18n/en.json

@@ -27,6 +27,7 @@
   "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/main.css

@@ -1,78 +1,13 @@
-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;
-  }
-}
-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;
+.np-theme-personal .critical-comms .alert-critical {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative) !important;
 }
-@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%;
-  }
+.np-theme-personal .critical-comms .alert-critical .np-text-title-body {
+  color: var(--color-contrast-overlay);
 }
-div.critical-comms .critical-comms-body {
+.np-theme-personal .critical-comms .action__desktop {
   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;
-  }
+  align-items: center;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 0.875rem;
@@ -939,6 +874,9 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
+.critical-comms .wds-Button {
+  --Button-background: var(--color-contrast-overlay);
+}
 [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
   scale: -1 1;
 }
@@ -4477,6 +4415,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.critical {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);

package/src/statusIcon/StatusIcon.css

@@ -17,6 +17,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.critical {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);

package/src/statusIcon/StatusIcon.less

@@ -24,6 +24,10 @@
   background-color: var(--color-sentiment-negative);
 }
 
+.status-circle.critical {
+  background-color: var(--color-background-screen);
+}
+
 .status-circle.neutral {
   background-color: var(--color-content-secondary);
 }

package/src/statusIcon/StatusIcon.messages.ts

@@ -19,6 +19,12 @@ export default defineMessages({
     description:
       'Visually hidden label read by screen readers, describing the Warning icon – normally a prefix to remaining visible content, e.g. validation result.',
   },
+  criticalLabel: {
+    id: 'neptune.StatusIcon.iconLabel.critical',
+    defaultMessage: 'Critical:',
+    description:
+      'Visually hidden label read by screen readers, describing the Critical icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
   pendingLabel: {
     id: 'neptune.StatusIcon.iconLabel.pending',
     defaultMessage: 'Pending:',

package/src/statusIcon/StatusIcon.tsx

@@ -52,6 +52,10 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
+    [Sentiment.CRITICAL]: {
+      Icon: Alert,
+      defaultIconLabel: intl.formatMessage(messages.criticalLabel),
+    },
     [Sentiment.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
@@ -76,7 +80,10 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
+  const iconColor =
+    sentiment === 'warning' || sentiment === 'pending' || sentiment === 'critical'
+      ? 'dark'
+      : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return (