@transferwise/components 46.83.2 → 46.84.0

package/src/flowNavigation/FlowNavigation.spec.js

@@ -15,11 +15,6 @@ jest.mock('./animatedLabel', () => {
     );
   };
 });
-jest.mock('./backButton', () => {
-  return function ({ className, label }) {
-    return <div className={className}>BackButton{label}</div>;
-  };
-});
 
 describe('FlowNavigation', () => {
   beforeEach(() => {
@@ -171,14 +166,18 @@ describe('FlowNavigation', () => {
     it('renders BackButton with AnimatedLabel if onGoBack is provided and activeStep > 0', () => {
       const { rerender } = render(<FlowNavigation {...props} onGoBack={jest.fn()} />);
 
-      expect(screen.queryByText('BackButton')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /back to previous step/i }),
+      ).not.toBeInTheDocument();
 
       rerender(<FlowNavigation {...props} activeStep={1} />);
-      expect(screen.queryByText('BackButton')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /back to previous step/i }),
+      ).not.toBeInTheDocument();
 
       rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
 
-      expect(screen.getByText('BackButton')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /back to previous step/i })).toBeInTheDocument();
       expect(screen.getByText('AnimatedLabel')).toBeInTheDocument();
     });
 

package/src/flowNavigation/FlowNavigation.tsx

@@ -10,7 +10,8 @@ import Stepper, { type Step } from '../stepper/Stepper';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
-import BackButton from './backButton';
+import IconButton from '../iconButton';
+import { ArrowLeft } from '@transferwise/icons';
 
 export interface FlowNavigationProps {
   activeStep?: number;
@@ -66,7 +67,15 @@ const FlowNavigation = ({
         leftContent={
           <>
             {!screenSm && displayGoBack ? (
-              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
+              <IconButton
+                size={40}
+                priority="tertiary"
+                type="default"
+                aria-label={intl.formatMessage(messages.back)}
+                onClick={onGoBack}
+              >
+                <ArrowLeft />
+              </IconButton>
             ) : (
               <div className="np-flow-header__left">{logo}</div>
             )}

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

@@ -8,9 +8,33 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
     <div
       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"
     >
-      <div>
-        BackButton
-      </div>
+      <button
+        aria-disabled="false"
+        aria-label="back to previous step"
+        aria-live="off"
+        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"
+      >
+        <span
+          class="tw-icon tw-icon-arrow-left "
+          data-testid="arrow-left-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="none"
+            viewBox="0 0 24 24"
+            width="16"
+          >
+            <path
+              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+            />
+          </svg>
+        </span>
+      </button>
       <div
         class="m-x-1"
         data-testid="activeLabel-1"

package/src/i18n/de.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",
+  "neptune.Table.actionHeader": "Aktion",
+  "neptune.Table.emptyData": "Keine Ergebnisse gefunden",
+  "neptune.Table.loaded": "Tabellendaten wurden geladen",
+  "neptune.Table.loading": "Tabellendaten werden geladen",
+  "neptune.Table.refreshPage": "Seite aktualisieren",
   "neptune.Upload.csButtonText": "Eine andere Datei hochladen?",
   "neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
   "neptune.Upload.csSuccessText": "Fertig hochgeladen!",

package/src/i18n/fr.json

@@ -18,7 +18,7 @@
   "neptune.DateLookup.year": "année",
   "neptune.FlowNavigation.back": "revenir à l'étape précédente",
   "neptune.Info.ariaLabel": "Plus d'informations",
-  "neptune.Label.optional": "(Facultatif)",
+  "neptune.Label.optional": "(facultatif)",
   "neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
   "neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Sélectionnez une devise",
@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",
+  "neptune.Table.actionHeader": "Action",
+  "neptune.Table.emptyData": "Aucun résultat trouvé",
+  "neptune.Table.loaded": "Les données du tableau ont été chargées",
+  "neptune.Table.loading": "Chargement des données du tableau",
+  "neptune.Table.refreshPage": "Rafraichir la page",
   "neptune.Upload.csButtonText": "Envoyer un autre fichier ?",
   "neptune.Upload.csFailureText": "Échec du téléchargement. Veuillez réessayer",
   "neptune.Upload.csSuccessText": "Téléchargement terminé !",

package/src/i18n/it.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",
+  "neptune.Table.actionHeader": "Azione",
+  "neptune.Table.emptyData": "Nessun risultato trovato",
+  "neptune.Table.loaded": "I dati della tabella sono stati caricati",
+  "neptune.Table.loading": "I dati della tabella sono in fase di caricamento",
+  "neptune.Table.refreshPage": "Aggiorna la pagina",
   "neptune.Upload.csButtonText": "Carica un altro documento?",
   "neptune.Upload.csFailureText": "Caricamento fallito. Per favore riprova",
   "neptune.Upload.csSuccessText": "Caricamento completato!",

package/src/i18n/pt.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",
   "neptune.Summary.statusPending": "Pendente",
+  "neptune.Table.actionHeader": "Ação",
+  "neptune.Table.emptyData": "Nenhum resultado encontrado",
+  "neptune.Table.loaded": "Os dados da tabela foram carregados",
+  "neptune.Table.loading": "Os dados da tabela estão sendo carregados",
+  "neptune.Table.refreshPage": "Atualizar página",
   "neptune.Upload.csButtonText": "Enviar outro documento?",
   "neptune.Upload.csFailureText": "Falha no envio. Por favor, tente novamente",
   "neptune.Upload.csSuccessText": "Envio concluído!",

package/src/i18n/ru.json

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",
+  "neptune.Table.actionHeader": "Действие",
+  "neptune.Table.emptyData": "Ничего не найдено",
+  "neptune.Table.loaded": "Данные таблицы загружены",
+  "neptune.Table.loading": "Данные таблицы загружаются",
+  "neptune.Table.refreshPage": "Обновить страницу",
   "neptune.Upload.csButtonText": "Загрузить другой файл?",
   "neptune.Upload.csFailureText": "Загрузка не удалась. Пожалуйста, попробуйте снова",
   "neptune.Upload.csSuccessText": "Загрузка завершена!",

package/src/iconButton/IconButton.css

@@ -0,0 +1,82 @@
+.np-icon-button {
+  border: none;
+}
+.np-icon-button-tertiary-default {
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-icon-button-primary-default {
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-icon-button-primary-negative {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-primary-hover);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: var(--color-white);
+}
+.np-icon-button-minimal-default {
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-color: transparent;
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.np-icon-button-secondary-default {
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-interactive-neutral-hover);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-interactive-neutral-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-default,
+.np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: var(--color-interactive-control);
+}
+.np-icon-button-secondary-negative {
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: var(--color-white);
+}
+.np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: var(--color-contrast-overlay);
+}

package/src/iconButton/IconButton.less

@@ -0,0 +1,55 @@
+.np-icon-button {
+  border: none;
+  &-tertiary-default {
+    .colors(--color-interactive-primary, --color-background-neutral);
+  }
+
+  &-primary-default {
+    .colors(--color-interactive-control, --color-interactive-accent);
+  }
+
+  &-primary-negative {
+    .colors(--color-contrast-overlay, --color-sentiment-negative-primary);
+
+    .np-theme-personal--bright-green & {
+      color: var(--color-white);
+    }
+  }
+
+  &-minimal-default {
+    .colors(--color-interactive-primary, --color-background-screen);
+    background-color: transparent;
+  }
+
+  &-secondary-default {
+    .colors(--color-interactive-primary, --color-interactive-neutral);
+
+    .np-theme-personal--bright-green &,
+    .np-theme-personal--forest-green & {
+      color: var(--color-interactive-control);
+    }
+  }
+
+  &-secondary-negative {
+    .colors(--color-sentiment-negative-primary, --color-sentiment-negative-secondary);
+
+    .np-theme-personal--bright-green & {
+      color: var(--color-white);
+    }
+    .np-theme-personal--forest-green & {
+      color: var(--color-contrast-overlay);
+    }
+  }
+
+  .colors(@icon-color, @bg-color) {
+    color: var(@icon-color);
+    background-color: var(@bg-color);
+
+    &:not(.disabled, :disabled):hover {
+      background-color:~"var(@{bg-color}-hover)";
+    }
+    &:not(.disabled, :disabled):active {
+      background-color:~"var(@{bg-color}-active)";
+    }
+  }
+}

package/src/iconButton/IconButton.story.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable react/jsx-key */
+import { Meta, StoryObj } from '@storybook/react';
+import { ArrowLeft } from '@transferwise/icons';
+import IconButton, { Props } from './IconButton';
+import { action } from '@storybook/addon-actions';
+import Body from '../body';
+
+export default {
+  title: 'Actions/IconButton',
+} satisfies Meta<typeof IconButton>;
+
+type Story = StoryObj<typeof IconButton>;
+
+const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
+
+const Template = ({ size, disabled }: Props) => {
+  return (
+    <>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="primary"
+        type="default"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="secondary"
+        type="default"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="tertiary"
+        type="default"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="minimal"
+        type="default"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="primary"
+        type="negative"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+      <IconButton
+        size={size}
+        disabled={disabled}
+        aria-label="One step back"
+        priority="secondary"
+        type="negative"
+        onClick={action('button click')}
+      >
+        <ArrowLeft />
+      </IconButton>
+    </>
+  );
+};
+
+export const Basic: Story = {
+  tags: ['autodocs'],
+  render: () => {
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(6, min-content)`,
+        }}
+      >
+        {['Primary', 'Secondary', 'Tertiary', 'Text', 'Neg primary', 'Neg secondary'].map(
+          (variant) => (
+            <Body type="body-default-bold">{variant}</Body>
+          ),
+        )}
+        {sizes.map((size) => (
+          <Template size={size} />
+        ))}
+        <Template size={72} disabled />
+      </div>
+    );
+  },
+};

package/src/iconButton/IconButton.tsx

@@ -0,0 +1,51 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';
+import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
+import Circle from '../common/circle';
+import { clsx } from 'clsx';
+
+export type Props = {
+  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
+  type?: 'default' | 'negative';
+  'data-testid'?: string;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &
+  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;
+
+const IconButton = forwardRef(function IconButton(
+  {
+    size = 48,
+    href = '#',
+    children,
+    className,
+    priority = 'primary',
+    type = 'default',
+    ...props
+  }: Props,
+  ref,
+) {
+  const isLink = href !== '#';
+  return (
+    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`
+    <Circle
+      ref={ref}
+      as={isLink ? PrimitiveAnchor : PrimitiveButton}
+      size={size}
+      fixedSize
+      className={clsx(
+        'np-icon-button',
+        `np-icon-button-${priority}-${type}`,
+        {
+          disabled: props.disabled,
+        },
+        className,
+      )}
+      {...(isLink ? { href } : {})}
+      {...props}
+    >
+      {children}
+    </Circle>
+  );
+});
+
+export default IconButton;

package/src/iconButton/index.ts

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

package/src/index.ts

@@ -95,6 +95,7 @@ export type { TypeaheadOption, TypeaheadProps } from './typeahead';
 export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 export type { WithIdProps } from './withId';
+export type { IconButtonProps } from './iconButton';
 
 /**
  * Components
@@ -111,6 +112,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
 export { default as Button } from './button';
+export { default as IconButton } from './iconButton';
 export { default as Carousel } from './carousel';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';

package/src/main.css

@@ -535,6 +535,88 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+.np-icon-button {
+  border: none;
+}
+.np-icon-button-tertiary-default {
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-icon-button-primary-default {
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-icon-button-primary-negative {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-primary-hover);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: var(--color-white);
+}
+.np-icon-button-minimal-default {
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-color: transparent;
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.np-icon-button-secondary-default {
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-interactive-neutral-hover);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-interactive-neutral-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-default,
+.np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: var(--color-interactive-control);
+}
+.np-icon-button-secondary-negative {
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: var(--color-white);
+}
+.np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: var(--color-contrast-overlay);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -2201,38 +2283,6 @@ button.np-option {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}
 .np-flow-navigation {
   width: 100%;
   min-height: 97px;
@@ -4950,6 +5000,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
+@import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -30,7 +31,6 @@
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
-@import "./flowNavigation/backButton/BackButton.less";
 @import "./flowNavigation/FlowNavigation.less";
 @import "./header/Header.less";
 @import "./image/Image.less";

package/src/summary/Summary.css

@@ -67,6 +67,10 @@
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/summary/Summary.less

@@ -72,6 +72,9 @@
       padding-right: 0;
     }
   }
+  &__description-icon {
+    margin-top: var(--size-4);
+  }
 
   &__action {
     margin-top: var(--size-4);