@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-e9dbb78

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/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/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/main.css

@@ -1,25 +1,77 @@
-.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);
+  background-color: rgba(255,135,135,0.10196);
+  background-color: var(--critical-comms-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.critical-comms .alert-critical .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.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);
 }
-.critical-comms .status-circle.critical {
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
+.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);
 }
-@media (min-width: 768px) {
-  .critical-comms .alert-critical .alert__message {
-    flex-direction: row !important;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+.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;
+}
+@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;
   }
-  .critical-comms .alert-critical .alert__message .alert__action {
-    margin-top: 0;
-    padding-left: 16px;
-    padding-left: var(--padding-small);
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms-content {
+    padding-top: var(--critical-comms-vertical-spacing);
+    flex-wrap: wrap;
   }
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
@@ -897,9 +949,6 @@
 .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;
 }

package/src/radio/Radio.spec.tsx

@@ -0,0 +1,73 @@
+import AvatarView from '../avatarView';
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { userEvent } from '@testing-library/user-event';
+
+import Radio from '.';
+
+jest.mock('../common/hooks');
+mockMatchMedia();
+
+describe('Radio', () => {
+  const props = {
+    label: 'This is a label',
+    name: 'name',
+    onChange: jest.fn(),
+    checked: false,
+    disabled: false,
+    secondary: '',
+  };
+
+  it('shows the avatar when supplied', () => {
+    render(<Radio {...props} avatar={<AvatarView profileName="High Def" />} />);
+    expect(screen.getByText('HD')).toBeInTheDocument();
+  });
+
+  it('displays the given label', () => {
+    render(<Radio {...props} />);
+    expect(screen.getByText(props.label)).toBeInTheDocument();
+  });
+
+  it('passes radio button id', () => {
+    render(<Radio {...props} id="some-id" />);
+    expect(screen.getByRole('radio')).toHaveAttribute('id', 'some-id');
+  });
+
+  it('passes radio button name', () => {
+    render(<Radio {...props} name="a-name" />);
+    expect(screen.getByRole('radio')).toHaveAttribute('name', 'a-name');
+  });
+
+  it('handles checked state correctly', () => {
+    render(<Radio {...props} checked />);
+    expect(screen.getByRole('radio')).toBeChecked();
+  });
+
+  it('handles unchecked state correctly', () => {
+    render(<Radio {...props} checked={false} />);
+    expect(screen.getByRole('radio')).not.toBeChecked();
+  });
+
+  it('handles disabled state correctly', () => {
+    render(<Radio {...props} disabled />);
+    expect(screen.getByRole('radio')).toBeDisabled();
+  });
+
+  it('displays secondary text when supplied', () => {
+    render(<Radio {...props} secondary="additional info" />);
+    expect(screen.getByText('additional info')).toBeInTheDocument();
+  });
+
+  it('calls onChange when clicked', async () => {
+    const onChange = jest.fn();
+    render(<Radio {...props} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('radio'));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('does not call onChange when disabled', async () => {
+    const onChange = jest.fn();
+    render(<Radio {...props} disabled onChange={onChange} />);
+    await userEvent.click(screen.getByRole('radio'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/radio/Radio.story.tsx

@@ -1,11 +1,8 @@
-import { boolean, text } from '@storybook/addon-knobs';
-import { Flag } from '@wise/art';
+import { boolean } from '@storybook/addon-knobs';
 import { useState } from 'react';
-
-import Avatar, { AvatarType } from '../avatar';
-import Checkbox from '../checkbox';
-
 import Radio from './Radio';
+import AvatarView from '../avatarView';
+import { Flag } from '@wise/art';
 
 export default {
   component: Radio,
@@ -13,69 +10,42 @@ export default {
 };
 
 export const Basic = () => {
-  const [checked, setChecked] = useState(true);
+  const [selectedValue, setSelectedValue] = useState('option1');
 
   const disabled = boolean('disabled', false);
-  const label = text('label', 'This is the label');
-  const secondary = text('secondary', '');
-  const showAvatar = boolean('avatar', false);
-  const hasError = boolean('hasError', false);
 
   return (
     <>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
+      <div className={`form-group ${selectedValue === 'option1' ? 'has-error' : ''}`}>
         <Radio
-          label={label}
+          label="Without Avatar"
           name="name"
-          id="id"
-          checked={checked}
+          secondary="This is secondary text"
+          id="radioGroup1"
           disabled={disabled}
-          avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="IMP" />
-              </Avatar>
-            ) : null
-          }
-          onChange={() => setChecked(!checked)}
+          value="option1"
+          checked={selectedValue === 'option1'}
+          onChange={() => setSelectedValue('option1')}
         />
       </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
+      <div className="form-group">
         <Radio
-          label={label}
+          label="With Avatar"
           name="name"
-          id="id1"
-          checked={checked}
+          id="radioGroup2"
           disabled={disabled}
-          secondary={secondary}
           avatar={
-            showAvatar ? (
-              <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="KES" />
-              </Avatar>
-            ) : null
+            <AvatarView>
+              <Flag code="IMP" />
+            </AvatarView>
           }
-          onChange={() => setChecked(!checked)}
+          value="option1"
+          checked={selectedValue === 'option2'}
+          onChange={() => setSelectedValue('option2')}
         />
       </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-        <Checkbox
-          label={label}
-          id="id2"
-          checked={checked}
-          disabled={disabled}
-          secondary={secondary}
-          onChange={() => setChecked(!checked)}
-        />
-      </div>
-      <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-        <Checkbox
-          label={label}
-          id="id3"
-          checked={checked}
-          disabled={disabled}
-          onChange={() => setChecked(!checked)}
-        />
+      <div className="form-group">
+        <Radio label="Disabled" name="name" id="radioGroup3" disabled value="option3" />
       </div>
     </>
   );