npm - @transferwise/components - Versions diffs - 46.82.1 → 46.83.1 - Mend

@transferwise/components 46.82.1 → 46.83.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/build/avatarLayout/AvatarLayout.js +115 -0
package/build/avatarLayout/AvatarLayout.js.map +1 -0
package/build/avatarLayout/AvatarLayout.mjs +113 -0
package/build/avatarLayout/AvatarLayout.mjs.map +1 -0
package/build/button/Button.js +1 -1
package/build/button/Button.js.map +1 -1
package/build/button/Button.mjs +1 -1
package/build/button/Button.mjs.map +1 -1
package/build/i18n/commonMessages/Button.messages.js.map +1 -0
package/build/i18n/commonMessages/Button.messages.mjs.map +1 -0
package/build/i18n/es.json +5 -0
package/build/i18n/es.json.js +5 -0
package/build/i18n/es.json.js.map +1 -1
package/build/i18n/es.json.mjs +5 -0
package/build/i18n/es.json.mjs.map +1 -1
package/build/i18n/pl.json +5 -0
package/build/i18n/pl.json.js +5 -0
package/build/i18n/pl.json.js.map +1 -1
package/build/i18n/pl.json.mjs +5 -0
package/build/i18n/pl.json.mjs.map +1 -1
package/build/i18n/ro.json +5 -0
package/build/i18n/ro.json.js +5 -0
package/build/i18n/ro.json.js.map +1 -1
package/build/i18n/ro.json.mjs +5 -0
package/build/i18n/ro.json.mjs.map +1 -1
package/build/index.js +2 -0
package/build/index.js.map +1 -1
package/build/index.mjs +1 -0
package/build/index.mjs.map +1 -1
package/build/main.css +30 -0
package/build/styles/avatarLayout/AvatarLayout.css +30 -0
package/build/styles/main.css +30 -0
package/build/types/avatarLayout/AvatarLayout.d.ts +11 -0
package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -0
package/build/types/avatarLayout/index.d.ts +3 -0
package/build/types/avatarLayout/index.d.ts.map +1 -0
package/build/types/i18n/commonMessages/Button.messages.d.ts.map +1 -0
package/build/types/index.d.ts +2 -0
package/build/types/index.d.ts.map +1 -1
package/build/types/primitives/PrimitiveAnchor/index.d.ts +3 -0
package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -0
package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts +14 -0
package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +21 -0
package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -0
package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
package/build/types/primitives/PrimitiveButton/index.d.ts +3 -0
package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -0
package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts +14 -0
package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts +21 -0
package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
package/build/types/primitives/index.d.ts +6 -0
package/build/types/primitives/index.d.ts.map +1 -0
package/build/types/primitives/types.d.ts +34 -0
package/build/types/primitives/types.d.ts.map +1 -0
package/build/types/table/Table.d.ts.map +1 -1
package/build/types/test-utils/index.d.ts.map +1 -1
package/package.json +3 -3
package/src/avatarLayout/AvatarLayout.css +30 -0
package/src/avatarLayout/AvatarLayout.less +39 -0
package/src/avatarLayout/AvatarLayout.story.tsx +285 -0
package/src/avatarLayout/AvatarLayout.tsx +93 -0
package/src/avatarLayout/index.ts +2 -0
package/src/button/Button.spec.tsx +1 -1
package/src/button/Button.tsx +1 -1
package/src/i18n/es.json +5 -0
package/src/i18n/pl.json +5 -0
package/src/i18n/ro.json +5 -0
package/src/index.ts +2 -0
package/src/main.css +30 -0
package/src/main.less +1 -0
package/src/primitives/PrimitiveAnchor/index.ts +2 -0
package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +122 -0
package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +28 -0
package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +77 -0
package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +169 -0
package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +95 -0
package/src/primitives/PrimitiveButton/index.ts +2 -0
package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +131 -0
package/src/primitives/PrimitiveButton/src/PrimitiveButton.types.ts +28 -0
package/src/primitives/PrimitiveButton/src/index.ts +6 -0
package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +73 -0
package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +230 -0
package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +114 -0
package/src/primitives/index.ts +14 -0
package/src/primitives/types.ts +40 -0
package/src/table/Table.tsx +3 -2
package/src/test-utils/index.tsx +1 -0
package/build/button/Button.messages.js.map +0 -1
package/build/button/Button.messages.mjs.map +0 -1
package/build/types/button/Button.messages.d.ts.map +0 -1
/package/build/{button → i18n/commonMessages}/Button.messages.js +0 -0
/package/build/{button → i18n/commonMessages}/Button.messages.mjs +0 -0
/package/build/types/{button → i18n/commonMessages}/Button.messages.d.ts +0 -0
/package/src/{button → i18n/commonMessages}/Button.messages.ts +0 -0

package/src/avatarLayout/AvatarLayout.story.tsx ADDED Viewed

@@ -0,0 +1,285 @@
+/* eslint-disable react/jsx-key */
+import { Meta, StoryObj } from '@storybook/react';
+import AvatarLayout, { AvatarLayoutProps } from '.';
+import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import Body from '../body';
+export default {
+  title: 'Content/AvatarLayout',
+} satisfies Meta<typeof AvatarLayout>;
+type Story = StoryObj<typeof AvatarLayout>;
+const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+export const Diagonal: Story = {
+  tags: ['autodocs'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'center',
+        textAlign: 'center',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          interactive
+          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          interactive
+          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="diagonal"
+          avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
+        />
+      ))}
+    </div>
+  ),
+};
+export const Horizontal: Story = {
+  tags: ['autodocs'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'center',
+        textAlign: 'center',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          interactive
+          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          interactive
+          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
+        />
+      ))}
+      {sizes.map((size) => (
+        <AvatarLayout
+          key={size}
+          size={size}
+          orientation="horizontal"
+          avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
+        />
+      ))}
+    </div>
+  ),
+};
+export const EdgeInstances: Story = {
+  tags: ['autodocs'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(2, min-content)`,
+      }}
+    >
+      <AvatarLayout orientation="diagonal" avatars={[]} />
+      <AvatarLayout orientation="diagonal" avatars={[{}]} />
+      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
+      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
+      <AvatarLayout
+        orientation="diagonal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-squere-dude.webp' },
+          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-square-dude.webp' },
+          {
+            asset: <Plane />,
+            style: { backgroundColor: 'var(--color-bright-pink)' },
+          },
+        ]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          {
+            asset: <Graph />,
+            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
+          },
+          {
+            asset: <Rewards />,
+            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
+          },
+        ]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
+      />
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[
+          { imgSrc: '../avatar-rectangle-fox.webp' },
+          { imgSrc: '../avatar-square-dude.webp' },
+          { asset: '7+' },
+        ]}
+      />
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
+      />
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: <Flag code="br" /> },
+          { asset: <Flag code="jp" /> },
+          { asset: '3+' },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/avatarLayout/AvatarLayout.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { clsx } from 'clsx';
+import AvatarView, { AvatarViewProps } from '../avatarView';
+type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
+  AvatarViewProps,
+  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
+>;
+export type Props = {
+  avatars: SingleAvatarType[];
+  orientation?: 'horizontal' | 'diagonal';
+} & Pick<
+  AvatarViewProps,
+  'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
+>;
+export default function AvatarLayout({
+  avatars = [],
+  orientation: orientationProp = 'horizontal',
+  size = 48,
+  className,
+  interactive,
+  ...restProps
+}: Props) {
+  const orientation =
+    size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;
+  const isDiagonal = orientation === 'diagonal';
+  const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
+  return avatars.length < 1 ? null : avatars.length === 1 ? (
+    <AvatarView {...avatars[0]}>{avatars[0].asset}</AvatarView>
+  ) : (
+    <div
+      className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--np-avatar-layout-size': `${size}px`,
+        '--np-avatar-size': `${avatarSize}px`,
+        '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
+      }}
+      {...restProps}
+    >
+      {avatars.map(({ asset, style, ...avatar }, index) => (
+        <div
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          className={clsx(
+            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },
+            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },
+          )}
+        >
+          <AvatarView
+            {...avatar}
+            size={avatarSize as Props['size']}
+            style={{
+              ...(isDiagonal && {
+                '--circle-size': `${avatarSize}px`,
+                '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,
+                '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,
+              }),
+              ...style,
+            }}
+            interactive={interactive}
+          >
+            {asset}
+          </AvatarView>
+        </div>
+      ))}
+    </div>
+  );
+}
+/** Diagonal layout have custom sizes for avatar, font and icon */
+const DIAGONAL_LAYOUT_STYLE_CONFIG = {
+  // Diagonal layout doesn't support 16 size
+  16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },
+  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },
+  32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },
+  40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },
+  48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },
+  56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },
+  72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },
+};
+/** Horizontal layout have custom offset between avatars */
+const HORIZONTAL_LAYOUT_OFFSET = {
+  16: 2,
+  24: 2,
+  32: 4,
+  40: 4,
+  48: 4,
+  56: 5,
+  72: 5,
+};

package/src/avatarLayout/index.ts ADDED Viewed

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

package/src/button/Button.spec.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { ControlType, Type, Priority, Size } from '../common';
 import { render, screen, userEvent } from '../test-utils';
 import Button from '.';
-import messages from './Button.messages';
+import messages from '../i18n/commonMessages/Button.messages';
 import { ButtonReferenceType } from './Button';
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;

package/src/button/Button.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ import {
 } from '../common';
 import ProcessIndicator from '../processIndicator';
-import messages from './Button.messages';
+import messages from '../i18n/commonMessages/Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';

package/src/i18n/es.json CHANGED Viewed

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",
+  "neptune.Table.actionHeader": "Acción",
+  "neptune.Table.emptyData": "No se han encontrado resultados",
+  "neptune.Table.loaded": "Los datos de la tabla se han cargado",
+  "neptune.Table.loading": "Los datos de la tabla se están cargando",
+  "neptune.Table.refreshPage": "Actualizar página",
   "neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
   "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
   "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",

package/src/i18n/pl.json CHANGED Viewed

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",
+  "neptune.Table.actionHeader": "Akcja",
+  "neptune.Table.emptyData": "Nie znaleziono wyników",
+  "neptune.Table.loaded": "Wczytano dane tabeli",
+  "neptune.Table.loading": "Wczytywanie danych tabeli",
+  "neptune.Table.refreshPage": "Odśwież stronę",
   "neptune.Upload.csButtonText": "Prześlij kolejny plik?",
   "neptune.Upload.csFailureText": "Przesyłanie nie powiodło się. Proszę spróbować ponownie",
   "neptune.Upload.csSuccessText": "Przesyłanie zakończone!",

package/src/i18n/ro.json CHANGED Viewed

@@ -35,6 +35,11 @@
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",
+  "neptune.Table.actionHeader": "Acțiune",
+  "neptune.Table.emptyData": "Nu s-a găsit niciun rezultat",
+  "neptune.Table.loaded": "Datele din tabel au fost încărcate",
+  "neptune.Table.loading": "Datele din tabel se încarcă",
+  "neptune.Table.refreshPage": "Reîncarcă pagina",
   "neptune.Upload.csButtonText": "Încarci un alt fișier?",
   "neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
   "neptune.Upload.csSuccessText": "Încărcare completă!",

package/src/index.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { AvatarViewProps } from './avatarView';
+export type { AvatarLayoutProps } from './avatarLayout';
 export type { BadgeProps } from './badge';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
@@ -105,6 +106,7 @@ export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarView } from './avatarView';
+export { default as avatarLayout } from './avatarLayout';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';

package/src/main.css CHANGED Viewed

@@ -505,6 +505,36 @@ div.critical-comms .critical-comms-body {
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
 }
+.np-avatar-layout {
+  display: inline-flex;
+  --np-avatar-layout-size: 48px;
+  --np-avatar-size: 32px;
+}
+.np-avatar-layout-diagonal {
+  width: var(--np-avatar-layout-size);
+  height: var(--np-avatar-layout-size);
+}
+.np-avatar-layout-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
+.np-avatar-layout-diagonal-child {
+  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
+}
+.np-avatar-layout-horizontal {
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
+  height: var(--np-avatar-layout-size);
+}
+.np-avatar-layout-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
+.np-avatar-layout-horizontal-child {
+  margin-left: calc(var(--np-avatar-offset) * -1);
+}
 .tw-badge {
   position: relative;
   display: inline-block;

package/src/main.less CHANGED Viewed

@@ -4,6 +4,7 @@
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";
+@import "./avatarLayout/AvatarLayout.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";

package/src/primitives/PrimitiveAnchor/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './src';
2	+ export * from './src';

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+import React, { forwardRef, useCallback } from 'react';
+import { clsx } from 'clsx';
+import type { PrimitiveAnchorProps } from '..';
+/**
+ * The Primitive `PrimitiveAnchor` component is customisable link element that can be
+ * used in various parts of the Wise Design System internally. It supports
+ * different states such as disabled and provides event handlers for common
+ * interactions like click, focus, blur, mouse enter, mouse leave, and key down.
+ *
+ * @see {@link PrimitiveAnchor} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}
+ */
+const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
+  (
+    {
+      children,
+      className,
+      href,
+      id,
+      disabled = false,
+      testId,
+      onClick,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const anchorClasses = clsx(
+      'wds-Anchor',
+      {
+        'wds-Anchor--disabled': disabled,
+      },
+      className,
+    );
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLAnchorElement>) => {
+        if (disabled) {
+          event.preventDefault();
+        } else {
+          onClick?.(event);
+        }
+      },
+      [disabled, onClick],
+    );
+    const handleFocus = useCallback(
+      (event: React.FocusEvent<HTMLAnchorElement>) => {
+        onFocus?.(event);
+      },
+      [onFocus],
+    );
+    const handleBlur = useCallback(
+      (event: React.FocusEvent<HTMLAnchorElement>) => {
+        onBlur?.(event);
+      },
+      [onBlur],
+    );
+    const handleMouseEnter = useCallback(
+      (event: React.MouseEvent<HTMLAnchorElement>) => {
+        onMouseEnter?.(event);
+      },
+      [onMouseEnter],
+    );
+    const handleMouseLeave = useCallback(
+      (event: React.MouseEvent<HTMLAnchorElement>) => {
+        onMouseLeave?.(event);
+      },
+      [onMouseLeave],
+    );
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+        onKeyDown?.(event);
+      },
+      [onKeyDown],
+    );
+    /**
+     * The following props are set to handle the `disabled` state for the link:
+     *
+     * - `aria-disabled`: Exposes the link as disabled to assistive technologies.
+     * - `href`: Removed when `disabled` is true to prevent navigation.
+     * - `role`: Set to 'link' when `disabled` is true to ensure the element
+     *    is still exposed as a link.
+     *
+     * For more details, refer to Scott O'Hara's article on disabling links:
+     * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
+     */
+    const anchorProps = {
+      'aria-disabled': disabled,
+      className: anchorClasses,
+      'data-testid': testId,
+      href: disabled ? undefined : href,
+      id,
+      ref,
+      role: disabled ? 'link' : undefined,
+      rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleKeyDown,
+      ...props,
+    };
+    return <a {...anchorProps}>{children}</a>;
+  },
+);
+PrimitiveAnchor.displayName = 'PrimitiveAnchor';
+export default PrimitiveAnchor;

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { BasePrimitiveProps, StyleProp } from '../..';
+/**
+ * Type aliases for an anchor component.
+ */
+export type PrimitiveAnchorAttributes = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
+/**
+ * Properties for the anchor component.
+ */
+export interface PrimitiveAnchorProps
+  extends BasePrimitiveProps,
+    StyleProp,
+    Omit<PrimitiveAnchorAttributes, 'role'> {
+  /** Content of the anchor */
+  children?: ReactNode;
+  /** The URL to navigate to when the anchor is clicked */
+  href: string;
+  /** Disable the anchor */
+  disabled?: boolean;
+  /** Reference to the anchor element */
+  ref?: PrimitiveAnchorElementRef;
+}

package/src/primitives/PrimitiveAnchor/src/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export { default } from './PrimitiveAnchor';
+export type {
+  PrimitiveAnchorProps,
+  PrimitiveAnchorAttributes,
+  PrimitiveAnchorElementRef,
+} from './PrimitiveAnchor.types';