@transferwise/components 0.0.0-experimental-809f516 → 0.0.0-experimental-fd6654d

package/src/item/ItemIconButton.tsx

@@ -0,0 +1,17 @@
+import { useContext, useEffect } from 'react';
+import { default as IconButtonComp, IconButtonProps } from '../iconButton';
+import { ItemContext, ItemContextData } from './Item';
+
+export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
+  partialInteractivity?: boolean;
+};
+
+export const IconButton = function (props: ItemIconButtonProps) {
+  const { setControlType } = useContext<ItemContextData>(ItemContext);
+
+  useEffect(() => {
+    setControlType('icon-button');
+  }, []);
+
+  return <IconButtonComp {...props} size={32} />;
+};

package/src/item/ItemMedia.tsx

@@ -0,0 +1,52 @@
+import { default as AvatarViewComp, AvatarViewProps } from '../avatarView';
+import { default as AvatarLayoutComp, AvatarLayoutProps } from '../avatarLayout';
+import { default as ImageComp, ImageProps } from '../image/Image';
+import { clsx } from 'clsx';
+
+type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
+
+export type ItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarView = ({ className, size = 48, ...props }: ItemAvatarViewProps) => {
+  return (
+    <AvatarViewComp
+      {...props}
+      size={size}
+      className={clsx('np-item-media-avatar-view', className)}
+    />
+  );
+};
+
+export type ItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarLayout = ({ className, size = 48, ...props }: ItemAvatarLayoutProps) => {
+  return (
+    <AvatarLayoutComp
+      {...props}
+      size={size}
+      className={clsx('np-item-media-avatar-layout', className)}
+    />
+  );
+};
+
+export type ItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
+  SizeProp & {
+    alt?: string;
+  };
+
+/**
+ * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
+ */
+export const Image = ({ alt = '', size = 48, ...props }: ItemImageProps) => {
+  return (
+    <div
+      className={clsx('np-item-media-image')}
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--item-media-image-size': `${size}px`,
+      }}
+    >
+      <ImageComp {...props} alt={alt} />
+    </div>
+  );
+};

package/src/item/ItemNavigation.tsx

@@ -0,0 +1,16 @@
+import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
+import { ButtonProps } from '../button/Button.types';
+import Item, { ItemContext, ItemContextData } from './Item';
+import { useContext, useEffect } from 'react';
+
+export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
+
+export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
+  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
+
+  useEffect(() => {
+    setControlType('navigation');
+  }, []);
+
+  return baseItemProps?.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
+};

package/src/item/index.ts

@@ -0,0 +1,6 @@
+export type { Props as ItemProps } from './Item';
+export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
+export type { ItemCheckboxProps } from './ItemCheckbox';
+export type { ItemImageProps, ItemAvatarViewProps, ItemAvatarLayoutProps } from './ItemMedia';
+
+export { default } from './Item';

package/src/item/prompt/Prompt.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen, mockMatchMedia } from '../../test-utils';
+import { ItemPrompt } from './Prompt';
+import { Sentiment } from '../../common';
+
+mockMatchMedia();
+
+describe('ItemPrompt', () => {
+  it('renders the aria-label when provided', () => {
+    const ariaLabel = 'Test aria-label';
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
+      >
+        Positive prompt
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+
+  it('applies the interactive class when href is provided', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
+      >
+        Interactive link
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('applies the interactive class when onClick is provided', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
+      >
+        Interactive button
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('does not apply the interactive class when no action is provided', () => {
+    render(<ItemPrompt type={Sentiment.POSITIVE}>Non-interactive prompt</ItemPrompt>);
+
+    expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
+  });
+
+  it('renders the children content', () => {
+    render(<ItemPrompt type={Sentiment.POSITIVE}>This is a child prompt</ItemPrompt>);
+
+    expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
+  });
+
+  it('spreads additional props to the wrapper element', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{
+          href: 'https://example.com',
+          target: '_blank',
+          'aria-label': 'Custom props prompt',
+        }}
+      >
+        Custom props prompt
+      </ItemPrompt>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

package/src/item/prompt/Prompt.story.tsx

@@ -0,0 +1,170 @@
+import Link from '../../link';
+import { Sentiment } from '../../common';
+import { ItemPrompt, ItemPromptProps } from './Prompt';
+import { lorem40 } from '../../test-utils';
+import { StoryObj } from '@storybook/react';
+
+export default {
+  component: ItemPrompt,
+  title: 'Content/Item/Prompt',
+  args: {
+    type: Sentiment.NEGATIVE,
+    children: 'You have done a terrible thing',
+  },
+  argTypes: {
+    type: {
+      options: [
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.NEUTRAL,
+        Sentiment.WARNING,
+        'discount',
+        'savings',
+      ],
+      control: { type: 'radio' },
+      description: 'The type of prompt to display',
+    },
+    action: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      type: {
+        name: 'string',
+        required: true,
+        description: 'The content of the prompt',
+      },
+    },
+  },
+};
+
+type CustomStory = StoryObj<
+  ItemPromptProps & {
+    interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
+  }
+>;
+
+export const Basic: CustomStory = {
+  args: {
+    interactivity: 'none',
+  },
+  argTypes: {
+    interactivity: {
+      options: ['none', 'full-button', 'full-anchor', 'link'],
+      control: { type: 'radio' },
+      description: 'The type of interactivity to display',
+    },
+  },
+  render: ({ interactivity, ...args }) => {
+    return (
+      <div>
+        <ItemPrompt
+          type={args.type}
+          action={
+            interactivity === 'full-anchor'
+              ? { href: 'wise.com' }
+              : interactivity === 'full-button'
+                ? {
+                    onClick: () => {
+                      console.log('clicked');
+                    },
+                  }
+                : undefined
+          }
+        >
+          {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
+        </ItemPrompt>
+      </div>
+    );
+  },
+};
+
+export const Variants = () => {
+  return (
+    <>
+      <div className="m-b-2">
+        <ItemPrompt type={Sentiment.POSITIVE}>
+          Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt type={Sentiment.NEGATIVE}>
+          Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt type={Sentiment.NEUTRAL}>
+          Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt type={Sentiment.WARNING}>
+          Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt type="discount">
+          Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt type="savings">
+          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt
+          type="discount"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'hidden anchor tags are accessible, right?',
+          }}
+        >
+          The whole prompt is secretly clickable
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt
+          type="negative"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'clickable <a>',
+          }}
+        >
+          The whole prompt is secretly clickable as an anchor tag
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt
+          type="warning"
+          action={{
+            onClick: () => {
+              console.log('clicked');
+            },
+            'aria-label': 'clickable button',
+          }}
+        >
+          The whole prompt is secretly clickable as a button
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2">
+        <ItemPrompt
+          type="neutral"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'clickable prompt',
+          }}
+        >
+          The whole prompt is secretly clickable
+        </ItemPrompt>
+      </div>
+      <div className="m-b-2" style={{ maxWidth: '300px' }}>
+        <ItemPrompt type="warning">The prompt has very long text that wraps {lorem40}</ItemPrompt>
+      </div>
+    </>
+  );
+};

package/src/item/prompt/Prompt.tsx

@@ -0,0 +1,44 @@
+import { Confetti, Tags } from '@transferwise/icons';
+import { Sentiment } from '../../common';
+import StatusIcon from '../../statusIcon';
+import { clsx } from 'clsx';
+import { LinkProps } from '../../link';
+import Body from '../../body';
+
+export type ItemPromptProps = {
+  type:
+    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
+    | 'discount'
+    | 'savings';
+  children: React.ReactNode;
+  action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
+};
+
+export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
+  const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
+
+  const icon =
+    type === 'discount' ? (
+      <Tags size={16} />
+    ) : type === 'savings' ? (
+      <Confetti size={16} />
+    ) : (
+      <StatusIcon size={16} sentiment={type} />
+    );
+
+  return (
+    <Wrapper
+      className={clsx(
+        'np-item-prompt',
+        type,
+        (action?.href || action?.onClick) && 'np-prompt-interactive',
+      )}
+      {...(action ?? {})}
+    >
+      <div className="np-prompt-icon">{icon}</div>
+      <Body>{children}</Body>
+    </Wrapper>
+  );
+};
+
+export default ItemPrompt;

package/src/main.css

@@ -2648,6 +2648,191 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.np-item-interactive {
+  cursor: pointer;
+}
+.np-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.np-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.np-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-item-value {
+  flex: 0 0 auto;
+}
+.np-item-control {
+  flex: 0 0 auto;
+}
+.np-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-item-spotlight-active:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-item-spotlight-active:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.np-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.np-item-spotlight-inactive:hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.np-item-spotlight-inactive:active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.np-item-prompt {
+  display: inline-flex;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.np-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.np-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.np-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.np-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.np-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.np-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.np-item-prompt.positive,
+.np-item-prompt.discount,
+.np-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a,
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.np-item-prompt.positive a:hover,
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.np-item-prompt.positive a:active,
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.np-item-prompt.positive:hover,
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.np-item-prompt.positive:active,
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.np-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.np-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.np-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.np-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.np-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.np-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.np-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/test-utils/assets/apple-pay-logo.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="165.52107px" height="105.9651px" viewBox="0 0 165.52107 105.9651" enable-background="new 0 0 165.52107 105.9651"
+	 xml:space="preserve">
+<g>
+	<path id="XMLID_4_" d="M150.69807,0H14.82318c-0.5659,0-1.1328,0-1.69769,0.0033c-0.47751,0.0034-0.95391,0.0087-1.43031,0.0217
+		c-1.039,0.0281-2.0869,0.0894-3.1129,0.2738c-1.0424,0.1876-2.0124,0.4936-2.9587,0.9754
+		c-0.9303,0.4731-1.782,1.0919-2.52009,1.8303c-0.73841,0.7384-1.35721,1.5887-1.83021,2.52
+		c-0.4819,0.9463-0.7881,1.9166-0.9744,2.9598c-0.18539,1.0263-0.2471,2.074-0.2751,3.1119
+		c-0.0128,0.4764-0.01829,0.9528-0.0214,1.4291c-0.0033,0.5661-0.0022,1.1318-0.0022,1.6989V91.142
+		c0,0.5671-0.0011,1.13181,0.0022,1.69901c0.00311,0.4763,0.0086,0.9527,0.0214,1.4291
+		c0.028,1.03699,0.08971,2.08469,0.2751,3.11069c0.1863,1.0436,0.4925,2.0135,0.9744,2.9599
+		c0.473,0.9313,1.0918,1.7827,1.83021,2.52c0.73809,0.7396,1.58979,1.3583,2.52009,1.8302
+		c0.9463,0.4831,1.9163,0.7892,2.9587,0.9767c1.026,0.1832,2.0739,0.2456,3.1129,0.2737c0.4764,0.0108,0.9528,0.0172,1.43031,0.0194
+		c0.56489,0.0044,1.13179,0.0044,1.69769,0.0044h135.87489c0.5649,0,1.13181,0,1.69659-0.0044
+		c0.47641-0.0022,0.95282-0.0086,1.4314-0.0194c1.0368-0.0281,2.0845-0.0905,3.11301-0.2737
+		c1.041-0.1875,2.0112-0.4936,2.9576-0.9767c0.9313-0.4719,1.7805-1.0906,2.52011-1.8302c0.7372-0.7373,1.35599-1.5887,1.8302-2.52
+		c0.48299-0.9464,0.78889-1.9163,0.97429-2.9599c0.1855-1.026,0.2457-2.0737,0.2738-3.11069
+		c0.013-0.4764,0.01941-0.9528,0.02161-1.4291c0.00439-0.5672,0.00439-1.1319,0.00439-1.69901V14.8242
+		c0-0.5671,0-1.1328-0.00439-1.6989c-0.0022-0.4763-0.00861-0.9527-0.02161-1.4291c-0.02811-1.0379-0.0883-2.0856-0.2738-3.1119
+		c-0.18539-1.0432-0.4913-2.0135-0.97429-2.9598c-0.47421-0.9313-1.093-1.7816-1.8302-2.52
+		c-0.73961-0.7384-1.58881-1.3572-2.52011-1.8303c-0.9464-0.4818-1.9166-0.7878-2.9576-0.9754
+		c-1.0285-0.1844-2.0762-0.2457-3.11301-0.2738c-0.47858-0.013-0.95499-0.0183-1.4314-0.0217C151.82988,0,151.26297,0,150.69807,0
+		L150.69807,0z"/>
+	<path id="XMLID_3_" fill="#FFFFFF" d="M150.69807,3.532l1.67149,0.0032c0.4528,0.0032,0.90561,0.0081,1.36092,0.0205
+		c0.79201,0.0214,1.71849,0.0643,2.58209,0.2191c0.7507,0.1352,1.38029,0.3408,1.9845,0.6484
+		c0.5965,0.3031,1.14301,0.7003,1.62019,1.1768c0.479,0.4797,0.87671,1.0271,1.18381,1.6302
+		c0.30589,0.5995,0.51019,1.2261,0.64459,1.9823c0.1544,0.8542,0.1971,1.7832,0.21881,2.5801
+		c0.01219,0.4498,0.01819,0.8996,0.0204,1.3601c0.00429,0.5569,0.0042,1.1135,0.0042,1.6715V91.142
+		c0,0.558,0.00009,1.1136-0.0043,1.6824c-0.00211,0.4497-0.0081,0.8995-0.0204,1.3501c-0.02161,0.7957-0.0643,1.7242-0.2206,2.5885
+		c-0.13251,0.7458-0.3367,1.3725-0.64429,1.975c-0.30621,0.6016-0.70331,1.1484-1.18022,1.6251
+		c-0.47989,0.48-1.0246,0.876-1.62819,1.1819c-0.5997,0.3061-1.22821,0.51151-1.97151,0.6453
+		c-0.88109,0.157-1.84639,0.2002-2.57339,0.2199c-0.4574,0.0103-0.9126,0.01649-1.37889,0.0187
+		c-0.55571,0.0043-1.1134,0.0042-1.6692,0.0042H14.82318c-0.0074,0-0.0146,0-0.0221,0c-0.5494,0-1.0999,0-1.6593-0.0043
+		c-0.4561-0.00211-0.9112-0.0082-1.3512-0.0182c-0.7436-0.0201-1.7095-0.0632-2.5834-0.2193
+		c-0.74969-0.1348-1.3782-0.3402-1.9858-0.6503c-0.59789-0.3032-1.1422-0.6988-1.6223-1.1797
+		c-0.4764-0.4756-0.8723-1.0207-1.1784-1.6232c-0.3064-0.6019-0.5114-1.2305-0.64619-1.9852
+		c-0.15581-0.8626-0.19861-1.7874-0.22-2.5777c-0.01221-0.4525-0.01731-0.9049-0.02021-1.3547l-0.0022-1.3279l0.0001-0.3506V14.8242
+		l-0.0001-0.3506l0.0021-1.3251c0.003-0.4525,0.0081-0.9049,0.02031-1.357c0.02139-0.7911,0.06419-1.7163,0.22129-2.5861
+		c0.1336-0.7479,0.3385-1.3765,0.6465-1.9814c0.3037-0.5979,0.7003-1.1437,1.17921-1.6225
+		c0.477-0.4772,1.02309-0.8739,1.62479-1.1799c0.6011-0.3061,1.2308-0.5116,1.9805-0.6465c0.8638-0.1552,1.7909-0.198,2.5849-0.2195
+		c0.4526-0.0123,0.9052-0.0172,1.3544-0.0203l1.6771-0.0033H150.69807"/>
+	<g>
+		<g>
+			<path d="M45.1862,35.64053c1.41724-1.77266,2.37897-4.15282,2.12532-6.58506c-2.07464,0.10316-4.60634,1.36871-6.07207,3.14276
+				c-1.31607,1.5192-2.4809,3.99902-2.17723,6.3293C41.39111,38.72954,43.71785,37.36345,45.1862,35.64053"/>
+			<path d="M47.28506,38.98252c-3.38211-0.20146-6.25773,1.91951-7.87286,1.91951c-1.61602,0-4.08931-1.81799-6.76438-1.76899
+				c-3.48177,0.05114-6.71245,2.01976-8.4793,5.15079c-3.63411,6.2636-0.95904,15.55471,2.57494,20.65606
+				c1.71618,2.5238,3.78447,5.30269,6.50976,5.20287c2.57494-0.10104,3.58421-1.66732,6.71416-1.66732
+				c3.12765,0,4.03679,1.66732,6.76252,1.61681c2.82665-0.05054,4.59381-2.52506,6.30997-5.05132
+				c1.96878-2.877,2.77473-5.65498,2.82542-5.80748c-0.0507-0.05051-5.45058-2.12204-5.50065-8.33358
+				c-0.05098-5.20101,4.23951-7.6749,4.44144-7.82832C52.3832,39.4881,48.5975,39.08404,47.28506,38.98252"/>
+		</g>
+		<g>
+			<path d="M76.73385,31.94381c7.35096,0,12.4697,5.06708,12.4697,12.44437c0,7.40363-5.22407,12.49704-12.65403,12.49704h-8.13892
+				v12.94318h-5.88037v-37.8846H76.73385z M68.41059,51.9493h6.74732c5.11975,0,8.0336-2.75636,8.0336-7.53479
+				c0-4.77792-2.91385-7.50845-8.00727-7.50845h-6.77365V51.9493z"/>
+			<path d="M90.73997,61.97864c0-4.8311,3.70182-7.79761,10.26583-8.16526l7.56061-0.44614v-2.12639
+				c0-3.07185-2.07423-4.90959-5.53905-4.90959c-3.28251,0-5.33041,1.57492-5.82871,4.04313h-5.35574
+				c0.31499-4.98859,4.56777-8.66407,11.3941-8.66407c6.69466,0,10.97377,3.54432,10.97377,9.08388v19.03421h-5.43472v-4.54194
+				h-0.13065c-1.60125,3.07185-5.09341,5.01441-8.71623,5.01441C94.52078,70.30088,90.73997,66.94038,90.73997,61.97864z
+				 M108.56641,59.4846v-2.17905l-6.8,0.41981c-3.38683,0.23649-5.30306,1.73291-5.30306,4.09579
+				c0,2.41504,1.99523,3.99046,5.04075,3.99046C105.46823,65.81161,108.56641,63.08108,108.56641,59.4846z"/>
+			<path d="M119.34167,79.9889v-4.5946c0.4193,0.10483,1.36425,0.10483,1.83723,0.10483c2.6252,0,4.04313-1.10245,4.90908-3.9378
+				c0-0.05267,0.49931-1.68025,0.49931-1.70658l-9.97616-27.64562h6.14268l6.98432,22.47371h0.10432l6.98433-22.47371h5.9857
+				l-10.34483,29.06304c-2.36186,6.69517-5.0924,8.84789-10.81577,8.84789C121.17891,80.12006,119.76098,80.06739,119.34167,79.9889
+				z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/test-utils/fake-data.ts

@@ -1,6 +1,11 @@
+export const lorem5 = 'Lorem ipsum dolor sit amet.';
+
 export const lorem10 =
   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
 
+export const lorem20 =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
+
 export const lorem40 =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';