@transferwise/components 45.12.0 → 45.14.0

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -0,0 +1,101 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentProps } from 'react';
+
+import Avatar from '../avatar/Avatar';
+import { ProfileType, Sentiment } from '../common';
+
+import AvatarWrapper from './AvatarWrapper';
+
+export default {
+  component: AvatarWrapper,
+  title: 'Content/AvatarWrapper',
+} satisfies Meta<typeof AvatarWrapper>;
+
+type Story = StoryObj<typeof AvatarWrapper>;
+
+export const All: Story = {
+  args: {
+    avatarProps: { outlined: true },
+  },
+  render: (args) => {
+    const avatarProps = args.avatarProps as ComponentProps<typeof Avatar>;
+    const badgeUrl = 'https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg';
+
+    return (
+      <div style={{ maxWidth: '300px', display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div>
+            <b>No Badges</b>
+          </div>{' '}
+          Personal
+          <div>
+            <AvatarWrapper profileType={ProfileType.PERSONAL} avatarProps={avatarProps} />
+          </div>
+          Business
+          <div>
+            <AvatarWrapper profileType={ProfileType.BUSINESS} avatarProps={avatarProps} />
+          </div>
+          Avatar
+          <div>
+            <AvatarWrapper
+              url="https://wise.com/web-art/assets/flags/jpy.svg"
+              profileType={ProfileType.BUSINESS}
+              avatarProps={avatarProps}
+            />
+          </div>
+          Initials
+          <div>
+            <AvatarWrapper name="Any Aname" avatarProps={avatarProps} />
+          </div>
+          Default
+          <div>
+            <AvatarWrapper avatarProps={avatarProps} />
+          </div>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div>
+            <b>Badges</b>
+          </div>
+          Personal
+          <div>
+            <AvatarWrapper
+              badgeUrl={badgeUrl}
+              badgeAltText="wise fast flag badge"
+              profileType={ProfileType.PERSONAL}
+              avatarProps={avatarProps}
+            />
+          </div>
+          Business
+          <div>
+            <AvatarWrapper
+              badgeStatusIcon={Sentiment.POSITIVE}
+              profileType={ProfileType.BUSINESS}
+              avatarProps={avatarProps}
+            />
+          </div>
+          Avatar
+          <div>
+            <AvatarWrapper
+              badgeStatusIcon={Sentiment.NEGATIVE}
+              url="https://wise.com/web-art/assets/flags/hrk.svg"
+              profileType={ProfileType.BUSINESS}
+              avatarProps={avatarProps}
+            />
+          </div>
+          Initials
+          <div>
+            <AvatarWrapper
+              badgeStatusIcon={Sentiment.NEUTRAL}
+              name="A A"
+              avatarProps={avatarProps}
+            />
+          </div>
+          Default
+          <div>
+            <AvatarWrapper badgeStatusIcon={Sentiment.PENDING} avatarProps={avatarProps} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -0,0 +1,119 @@
+import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { useState, useEffect } from 'react';
+
+import Avatar, { AvatarProps, AvatarType } from '../avatar';
+import Badge, { BadgeProps } from '../badge';
+import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
+import StatusIcon from '../statusIcon/StatusIcon';
+
+interface OptionalBadgeProps {
+  url?: string;
+  altText?: string;
+  statusIcon?: Sentiment;
+  children: React.ReactNode;
+}
+
+const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
+  if (url) {
+    return (
+      <Badge badge={<img src={url} alt={altText} />} {...rest}>
+        {children}
+      </Badge>
+    );
+  }
+  if (statusIcon) {
+    return (
+      <Badge badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />} {...rest}>
+        {children}
+      </Badge>
+    );
+  }
+  return <>{children}</>;
+};
+
+export interface AvatarWrapperProps {
+  url?: string;
+  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
+  profileId?: string;
+  badgeUrl?: string;
+  badgeAltText?: string;
+  badgeStatusIcon?: Sentiment;
+  name?: string;
+  avatarProps?: AvatarProps;
+  badgeProps?: BadgeProps;
+}
+
+const AvatarWrapper = ({
+  url,
+  profileType,
+  profileId,
+  badgeUrl,
+  badgeAltText,
+  badgeStatusIcon,
+  name,
+  avatarProps,
+  badgeProps,
+}: AvatarWrapperProps) => {
+  const [hasImageLoadError, setImageLoadError] = useState(false);
+  const isBusinessProfile = profileType === ProfileType.BUSINESS;
+
+  // Reset the errored state when url changes
+  useEffect(() => setImageLoadError(false), [url]);
+
+  const getAvatarProps = () => {
+    if (url && !hasImageLoadError) {
+      return {
+        type: AvatarType.THUMBNAIL,
+        children: <img src={url} alt="avatar" onError={() => setImageLoadError(true)} />,
+        ...avatarProps,
+      };
+    }
+    if (profileType) {
+      return {
+        type: AvatarType.ICON,
+        children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
+        ...avatarProps,
+      };
+    }
+    if (name) {
+      return {
+        type: AvatarType.INITIALS,
+        children: <>{getInitials(name)}</>,
+        backgroundColorSeed: profileId?.toString(),
+        ...avatarProps,
+      };
+    }
+    return {
+      type: AvatarType.ICON,
+      children: <ProfileIcon size="24" />,
+      ...avatarProps,
+    };
+  };
+
+  return (
+    <OptionalBadge
+      url={badgeUrl}
+      altText={badgeAltText}
+      statusIcon={badgeStatusIcon}
+      {...badgeProps}
+    >
+      <Avatar size={Size.MEDIUM} {...getAvatarProps()} />
+    </OptionalBadge>
+  );
+};
+
+function getInitials(name: string) {
+  const allInitials = name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+
+  return allInitials[0] + allInitials.slice(-1);
+}
+
+export default AvatarWrapper;

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <img
+      alt="avatar"
+      src="https://wise.com"
+    />
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-briefcase "
+      data-testid="briefcase-icon"
+      role="presentation"
+    >
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M21.428 6.429H18V3.857A.86.86 0 0 0 17.143 3H6.857A.86.86 0 0 0 6 3.857V6.43H2.571a.86.86 0 0 0-.857.857v12.857a.86.86 0 0 0 .857.857h18.857a.86.86 0 0 0 .858-.857V7.286a.86.86 0 0 0-.858-.857ZM7.714 4.714h8.572V6.43H7.714V4.714Zm8.572 3.429v11.143H7.714V8.143h8.572Zm-12.857 0H6v11.143H3.429V8.143ZM20.57 19.286H18V8.143h2.571v11.143Z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-person "
+      data-testid="person-icon"
+      role="presentation"
+    >
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType with a badge status icon passed renders the badge 1`] = `
+<div
+  class="tw-badge tw-badge-border-light tw-badge-sm"
+>
+  <div
+    class="tw-badge__children"
+  >
+    <div
+      class="tw-avatar tw-avatar--48 tw-avatar--icon"
+    >
+      <div
+        class="tw-avatar__content"
+      >
+        <span
+          aria-hidden="true"
+          class="tw-icon tw-icon-person "
+          data-testid="person-icon"
+          role="presentation"
+        >
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tw-badge__content"
+  >
+    <span
+      class="status-circle status-circle-sm positive"
+      data-testid="status-icon"
+    >
+      <span
+        aria-hidden="true"
+        class="tw-icon tw-icon-check status-icon light"
+        data-testid="check-icon"
+        role="presentation"
+      >
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+        >
+          <path
+            d="M20.143 6.427 9.557 16.97 4.2 11.57 3 12.77l5.957 6a.846.846 0 0 0 .6.257.846.846 0 0 0 .6-.257L21.343 7.627l-1.2-1.2Z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
+<div
+  class="tw-badge tw-badge-border-light tw-badge-lg"
+>
+  <div
+    class="tw-badge__children"
+  >
+    <div
+      class="tw-avatar tw-avatar--48 tw-avatar--icon"
+    >
+      <div
+        class="tw-avatar__content"
+      >
+        <span
+          aria-hidden="true"
+          class="tw-icon tw-icon-person "
+          data-testid="person-icon"
+          role="presentation"
+        >
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="tw-badge__content"
+  >
+    <img
+      alt="badge alt text"
+      src="https://badge.com"
+    />
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-person "
+      data-testid="person-icon"
+      role="presentation"
+    >
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;

package/src/avatarWrapper/index.ts

@@ -0,0 +1,3 @@
+import AvatarWrapper from './AvatarWrapper';
+
+export default AvatarWrapper;

package/src/badge/Badge.css

@@ -0,0 +1 @@
+.tw-badge{--badge-size:16px;--badge-mask:2px;--badge-mask-offset:calc(var(--badge-size)/2);--badge-border-color:hsla(0,0%,100%,.08);display:inline-block;position:relative}.tw-badge.tw-badge-md{--badge-size:20px;--badge-mask:2px}.tw-badge.tw-badge-lg{--badge-size:24px;--badge-mask:3px}.tw-badge.tw-badge-border-dark{--badge-border-color:rgba(0,0,0,.08)}.tw-badge>.tw-badge__children{-webkit-mask-image:radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),transparent 0,transparent calc(var(--badge-size)/2 + var(--badge-mask)),#000 calc(var(--badge-size)/2 + var(--badge-mask) + .5px));mask-image:radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),transparent 0,transparent calc(var(--badge-size)/2 + var(--badge-mask)),#000 calc(var(--badge-size)/2 + var(--badge-mask) + .5px))}[dir=rtl] .tw-badge>.tw-badge__children{-webkit-mask-image:radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),transparent 0,transparent calc(var(--badge-size)/2 + var(--badge-mask)),#000 calc(var(--badge-size)/2 + var(--badge-mask) + .5px));mask-image:radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),transparent 0,transparent calc(var(--badge-size)/2 + var(--badge-mask)),#000 calc(var(--badge-size)/2 + var(--badge-mask) + .5px))}.tw-badge>.tw-badge__content{align-items:center;border-radius:50%;bottom:0;box-sizing:border-box;display:flex;height:var(--badge-size);justify-content:center;overflow:hidden;position:absolute;right:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--badge-size)}[dir=rtl] .tw-badge>.tw-badge__content{left:0;right:auto}.tw-badge>.tw-badge__content *{max-height:100%;max-width:100%}.tw-badge.tw-badge-border-dark>.tw-badge.tw-badge-border-dark__children,.tw-badge.tw-badge-border-dark>.tw-badge.tw-badge-border-light__children,.tw-badge.tw-badge-border-light>.tw-badge.tw-badge-border-dark__children,.tw-badge.tw-badge-border-light>.tw-badge.tw-badge-border-light__children{-webkit-mask-image:none;mask-image:none}.tw-badge.tw-badge-border-dark>.tw-badge.tw-badge-border-dark__content,.tw-badge.tw-badge-border-dark>.tw-badge.tw-badge-border-light__content,.tw-badge.tw-badge-border-light>.tw-badge.tw-badge-border-dark__content,.tw-badge.tw-badge-border-light>.tw-badge.tw-badge-border-light__content{border-color:var(--badge-border-color);border-style:solid inset solid solid;border-width:1px}

package/src/badge/Badge.less

@@ -0,0 +1,94 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+
+@badge-size-sm: 16px;
+@badge-size-md: 20px;
+@badge-size-lg: 24px;
+
+@badge-mask-sm: 2px;
+@badge-mask-md: 2px;
+@badge-mask-lg: 3px;
+
+@badge-border-light: rgba(255, 255, 255, 0.08);
+@badge-border-dark: rgba(0, 0, 0, 0.08);
+
+.tw-badge {
+  position: relative;
+  display: inline-block;
+
+  --badge-size: @badge-size-sm;
+  --badge-mask: @badge-mask-sm;
+  --badge-mask-offset: calc(var(--badge-size) / 2);
+  --badge-border-color: @badge-border-light;
+
+  &.tw-badge-md {
+    --badge-size: @badge-size-md;
+    --badge-mask: @badge-mask-md;
+  }
+
+  &.tw-badge-lg {
+    --badge-size: @badge-size-lg;
+    --badge-mask: @badge-mask-lg;
+  }
+
+  &.tw-badge-border-dark {
+    --badge-border-color: @badge-border-dark;
+  }
+
+  & > &__children {
+    // Not possible to add a logical property (inset-inline-start) to replace left position inside a gradient.
+    // RTL direction sorted out with conditional attributes.
+
+    mask-image:
+      radial-gradient(
+        circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
+        transparent 0,
+        transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
+        black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
+      );
+
+    [dir="rtl"] & {
+      mask-image:
+        radial-gradient(
+          circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
+          transparent 0,
+          transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
+          black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
+        );
+    }
+  }
+
+  & > &__content {
+    position: absolute;
+    width: var(--badge-size);
+    height: var(--badge-size);
+    bottom: 0;
+    .right(0);
+
+    box-sizing: border-box;
+    border-radius: 50%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    user-select: none;
+
+    & * {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &.tw-badge-border-light,
+  &.tw-badge-border-dark {
+    & > &__children {
+      mask-image: none;
+    }
+
+    & > &__content {
+      border-style: solid inset solid solid;
+      border-width: 1px;
+      border-color: var(--badge-border-color);
+    }
+  }
+}

package/src/badge/Badge.spec.js

@@ -0,0 +1,36 @@
+import { render, cleanup, screen } from '../test-utils';
+
+import Badge from '.';
+
+describe('Badge', () => {
+  const defaultProps = {
+    badge: <div />,
+  };
+  const childText = 'badge-child';
+  const child = <div>{childText}</div>;
+
+  const renderBadge = (props = {}, children = child) => {
+    return render(
+      <Badge {...defaultProps} {...props}>
+        {children}
+      </Badge>,
+    );
+  };
+
+  afterEach(cleanup);
+
+  it('renders the badge content', () => {
+    const badgeText = 'badge-text';
+    const badge = <div>{badgeText}</div>;
+
+    renderBadge({ badge });
+
+    expect(screen.getByText(badgeText).parentElement).toHaveClass('tw-badge__content');
+  });
+
+  it('renders badge children', () => {
+    renderBadge();
+
+    expect(screen.getByText(childText).parentElement).toHaveClass('tw-badge__children');
+  });
+});

package/src/badge/Badge.story.js

@@ -0,0 +1,68 @@
+import { text, select } from '@storybook/addon-knobs';
+
+import { default as AvatarComponent, AvatarType } from '../avatar';
+import { Size, Theme } from '../common';
+
+import Badge from './Badge';
+
+export default {
+  component: Badge,
+  title: 'Content/Badge',
+  excludeStories: ['ExampleBadgeCss'],
+};
+
+export const ExampleBadgeCss = {
+  background: 'var(--color-content-positive)',
+  width: '100%',
+  height: '100%',
+  color: 'white',
+  fontSize: '10px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+export const Avatar = () => {
+  const BadgeText = text('BadgeText', 'B');
+  const border = select('Border', [null, Theme.LIGHT, Theme.DARK]);
+
+  return (
+    <div>
+      <div style={{ display: 'inline', margin: 8 }}>
+        <Badge
+          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
+          border={border}
+          size={Size.LARGE}
+        >
+          <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
+            AA
+          </AvatarComponent>
+        </Badge>
+      </div>
+
+      <div style={{ display: 'inline', margin: 8 }}>
+        <Badge
+          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
+          border={border}
+          size={Size.MEDIUM}
+        >
+          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
+            AA
+          </AvatarComponent>
+        </Badge>
+      </div>
+
+      <div style={{ display: 'inline', margin: 8 }}>
+        <Badge
+          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
+          border={border}
+          size={Size.SMALL}
+        >
+          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
+            AA
+          </AvatarComponent>
+        </Badge>
+      </div>
+    </div>
+  );
+};

package/src/badge/Badge.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { ReactElement, ReactNode } from 'react';
+
+import {
+  Size,
+  Theme,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
+  ThemeDark,
+  ThemeLight,
+  CommonProps,
+} from '../common';
+
+export type BadgeProps = {
+  badge: ReactNode;
+  children: ReactNode;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  border?: ThemeDark | ThemeLight;
+} & CommonProps;
+
+const Badge = ({
+  badge,
+  className = undefined,
+  size = Size.SMALL,
+  border = Theme.LIGHT,
+  children,
+}: BadgeProps): ReactElement => {
+  const classes: string = classNames(
+    'tw-badge',
+    {
+      [`tw-badge-border-${border}`]: border,
+      [`tw-badge-${size}`]: size,
+    },
+    className,
+  );
+
+  return (
+    <div className={classes}>
+      <div className="tw-badge__children">{children}</div>
+      <div className="tw-badge__content">{badge}</div>
+    </div>
+  );
+};
+
+export default Badge;

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';