@transferwise/components 46.126.0 → 46.128.0

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Clock, Id, Taxi, Travel } from '@transferwise/icons';
+import { Clock, Taxi, Travel } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -144,7 +144,6 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -164,6 +163,30 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+/**
+ * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
+ * When those components are disabled, the prompt is often used to communicate to the user why they
+ * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
+ * style, and it must retain its interactivity. To bring these 2 components visually closer to each
+ * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
+ * backslash circle icon.
+ */
+export const Muted: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    muted: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return (
+      <InlinePrompt {...props} {...previewProps}>
+        Please <Link href="#">confirm your residential address</Link> to activate this feature.
+      </InlinePrompt>
+    );
+  },
+};
+
 /**
  * `InlinePrompt` can include a single instance of the `Link` component, which can be rendered as
  * either HTML anchor or button. That element will spread across the whole surface of the Prompt
@@ -194,60 +217,37 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = {
       </InlinePrompt>
     </>
   ),
-  decorators: [withComponentGrid()],
-};
-
-/**
- * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
- * When those components are disabled, the prompt is often used to communicate to the user why they
- * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
- * style, and it must retain its interactivity. To bring these 2 components visually closer to each
- * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
- * backslash circle icon.
- */
-export const Muted: StoryObj<PreviewStoryArgs> = {
-  argTypes: previewArgTypes,
-  args: {
-    muted: true,
-    previewMedia: false,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-    return (
-      <InlinePrompt {...props} {...previewProps}>
-        Please <Link href="#">confirm your residential address</Link> to activate this feature.
-      </InlinePrompt>
-    );
-  },
 };
 
 /**
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
- * It's also possible to override the default icon's accessible name announced by screen readers
- * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
-          Your travel account is set up and ready to use.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
-          Connect Wise with your taxi app to get exclusive discounts.
+        <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
+          This prompt uses default Icon, but with a custom label for screen readers.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+        <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
-          The identity document you provided has expired.
+        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -278,7 +278,6 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -306,5 +305,4 @@ export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };

package/src/prompt/InlinePrompt/InlinePrompt.test.story.tsx

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { Travel } from '@transferwise/icons';
+import { InlinePrompt } from './InlinePrompt';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+export default {
+  title: 'Prompts/InlinePrompt/Tests',
+  component: InlinePrompt,
+  tags: ['!autodocs'],
+};
+
+type Story = StoryObj<typeof InlinePrompt>;
+
+export const TinyScreen: Story = {
+  render: () => (
+    <InlinePrompt sentiment="positive" media={<Travel />}>
+      Your travel money account is now active and ready to use for international transactions.
+    </InlinePrompt>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
@@ -91,11 +92,22 @@ describe('InlinePrompt', () => {
           });
         }
 
-        it('should allow for customisation of aria label', () => {
+        it('should allow for customisation of aria label for StatusIcon', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
           expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
         });
 
+        it('should allow for customisation of aria label for a custom Icon', () => {
+          render(
+            <InlinePrompt
+              {...defaultProps}
+              sentiment={sentiment}
+              media={<Clock title={mediaLabel} />}
+            />,
+          );
+          expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
+        });
+
         it('should retain custom label while muted', () => {
           render(
             <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,
@@ -124,9 +136,16 @@ describe('InlinePrompt', () => {
       expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
     });
 
-    it('applies full width class when set to full', () => {
-      render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
-      expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--full-width');
+    describe('width', () => {
+      it('applies auto width class by default', () => {
+        render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
+        expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--auto-width');
+      });
+
+      it('strips the class if `width` is set to `full`', () => {
+        render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
+        expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--auto-width');
+      });
     });
   });
 });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -94,7 +94,7 @@ export const InlinePrompt = ({
       className={clsx(
         'wds-inline-prompt',
         {
-          'wds-inline-prompt--full-width': width === 'full',
+          'wds-inline-prompt--auto-width': width !== 'full',
           'wds-inline-prompt--muted': muted,
           'wds-inline-prompt--loading': loading,
         },

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -9,6 +9,7 @@
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -6,6 +6,7 @@
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 
   &__content-wrapper {
     display: grid;
@@ -44,4 +45,4 @@
       }
     }
   }
-}
+}

package/src/sentimentSurface/SentimentSurface.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

package/src/sentimentSurface/SentimentSurface.docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
 import * as stories from './SentimentSurface.story';
 
-<Meta title="Content/SentimentSurface/Developer Guide" />
+<Meta title="Foundations/SentimentSurface/Developer Guide" />
 
 # Developer Guide
 

package/src/sentimentSurface/SentimentSurface.less

@@ -178,12 +178,12 @@
     .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #454745, #353635, #232423,  // content-primary (default, hover, active)
-                    #454745, #353635, #232423,  // interactive-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
-                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
-                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
+                    #454745, #353635, #232423,                                            // content-primary (default, hover, active)
+                    #454745, #353635, #232423,                                            // interactive-primary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary-neutral
+                    #F1F1ED, #E7E7E1, #DFDED5,                                            // interactive-control
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17)  // background-surface
                 );
       }
       &-elevated {
@@ -191,7 +191,7 @@
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                     #454745, #353635, #232423,  // interactive-secondary
-                    #5A5C5A, #6D6F6D, #727472,  // interactive-secondary-neutral
+                    #585958, #6A6C6A, #7D7E7D,  // interactive-secondary-neutral
                     #454745, #353635, #232423,  // interactive-control
                     #454745, #353635, #232423   // background-surface
                 );
@@ -205,12 +205,12 @@
     .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
-                    #2A2C29, #414441, #595B58,  // interactive-secondary
-                    #424441, #4C4E4B, #565955,  // interactive-secondary-neutral
-                    #2A2C29, #414441, #595B58,  // interactive-control
-                    #2A2C29, #414441, #595B58   // background-surface
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // interactive-primary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary-neutral
+                    #2A2C29, #414441, #595B58,                                                       // interactive-control
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30)   // background-surface
                 );
       }
       &-elevated {

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -124,3 +124,50 @@ export const ButtonsAcrossThemes: Story = {
     </div>
   ),
 };
+
+export const NeutralSentimentOnNeutralBackground: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <SentimentSurface
+        sentiment="neutral"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+      <SentimentSurface
+        sentiment="neutral"
+        emphasis="elevated"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+    </div>
+  ),
+};

package/src/tile/Tile.test.tsx

@@ -17,16 +17,6 @@ describe(Tile, () => {
     jest.clearAllMocks();
   });
 
-  it('matches snapshot when regular size', () => {
-    const { asFragment } = render(<Tile {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('matches snapshot when small size', () => {
-    const { asFragment } = render(<Tile size={Size.SMALL} {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('calls onClick when anchor is clicked', () => {
     render(<Tile {...defaultProps} />);
 

package/src/tooltip/Tooltip.test.tsx

@@ -4,16 +4,6 @@ import { userEvent } from '@testing-library/user-event';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
-  it('renders an empty list when no items are passed', () => {
-    expect(
-      render(
-        <Tooltip label="Test Tooltip">
-          <span>Hover me</span>
-        </Tooltip>,
-      ).container,
-    ).toMatchSnapshot();
-  });
-
   it('initially is hidden (test with toBeInTheDocument)', () => {
     render(
       <Tooltip label="Test Tooltip">

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.test.js.snap

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`AccordionItem open / close renders an item closed 1`] = `
-<div>
-  <div
-    class="np-accordion-item"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="false"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color bottom"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`AccordionItem open / close renders an item open 1`] = `
-<div>
-  <div
-    class="np-accordion-item np-accordion-item--open"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="true"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color top"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-    <div
-      aria-labelledby="test-accordion-control"
-      id="test-accordion-section"
-      role="region"
-    >
-      <span
-        class="np-text-body-large np-accordion-item__content d-block"
-      >
-        Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
-      </span>
-    </div>
-  </div>
-</div>
-`;

package/src/accordion/__snapshots__/Accordion.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Accordion defaults renders an empty list when no items are passed 1`] = `<div />`;

package/src/actionButton/__snapshots__/ActionButton.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ActionButton by default renders the button 1`] = `
-<div>
-  <button
-    class="np-action-btn np-text-body-default-bold btn-priority-1"
-    type="button"
-  >
-    Personal profile
-  </button>
-</div>
-`;