[PB-6491]:feat/usage advertisements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/feedback/notifications/usageBanner/UsageWarningBanner.tsx

@@ -0,0 +1,73 @@
+import { CloudWarningIcon, XIcon } from '@phosphor-icons/react';
+import React, { ReactNode } from 'react';
+import { Button } from '../../../input/button';
+import Skeleton from '../../skeleton/Skeleton';
+
+export interface UsageWarningBannerProps {
+  title: string;
+  description: ReactNode;
+  usage: string;
+  limit: string;
+  percentage: number;
+  upgradeLabel: string;
+  closeButtonLabel: string;
+  onUpgradeClick: () => void;
+  onCloseButtonClick: () => void;
+  barClassName?: string;
+  isLoading?: boolean;
+}
+
+const UsageWarningBanner: React.FC<UsageWarningBannerProps> = ({
+  title,
+  description,
+  usage,
+  limit,
+  percentage,
+  upgradeLabel,
+  closeButtonLabel,
+  onUpgradeClick,
+  onCloseButtonClick,
+  barClassName = 'bg-yellow-60',
+  isLoading = false,
+}) => (
+  <div className="flex flex-col w-full px-4 py-3 rounded-xl bg-alert border-alert-dark border h-min">
+    <div className="flex flex-col w-full gap-1">
+      <div className="flex flex-row justify-between items-center">
+        <span className="flex flex-row items-center gap-2">
+          <CloudWarningIcon weight="fill" className="size-5 text-yellow-60" />
+          <p className="text-sm font-semibold text-gray-80">{title}</p>
+        </span>
+        <button
+          type="button"
+          aria-label={closeButtonLabel}
+          onClick={onCloseButtonClick}
+          className="flex items-center justify-center"
+        >
+          <XIcon className="size-5 text-gray-53 cursor-pointer" />
+        </button>
+      </div>
+      <div className="text-xs font-medium text-gray-52">{description}</div>
+    </div>
+    <div className="flex flex-row items-center gap-6 h-10">
+      <div className="flex flex-1 flex-col gap-1">
+        <div className="flex w-full h-1.5 bg-gray-10 rounded-full">
+          <div className={`${barClassName} h-full rounded-full`} style={{ width: `${percentage}%` }} />
+        </div>
+        {isLoading ? (
+          <Skeleton />
+        ) : (
+          <span className="flex flex-row gap-1">
+            <p className="text-gray-60 text-xs">{usage}</p>
+            <p className="text-gray-60 text-xs">/</p>
+            <p className="text-gray-60 text-xs">{limit}</p>
+          </span>
+        )}
+      </div>
+      <Button variant="secondary" size="medium" onClick={onUpgradeClick}>
+        {upgradeLabel}
+      </Button>
+    </div>
+  </div>
+);
+
+export default UsageWarningBanner;

src/components/feedback/notifications/usageBanner/__test__/UsageWarningBanner.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { UsageWarningBanner, UsageWarningBannerProps } from '../';
+
+const renderBanner = (overrides: Partial<UsageWarningBannerProps> = {}) => {
+  const props: UsageWarningBannerProps = {
+    title: 'Storage almost full',
+    description: 'You are running out of space',
+    usage: '10 GB',
+    limit: '20 GB',
+    percentage: 50,
+    upgradeLabel: 'Upgrade now',
+    closeButtonLabel: 'Close',
+    onUpgradeClick: vi.fn(),
+    onCloseButtonClick: vi.fn(),
+    isLoading: false,
+    ...overrides,
+  };
+
+  return { props, ...render(<UsageWarningBanner {...props} />) };
+};
+
+describe('UsageWarningBanner', () => {
+  it('colours the progress bar with the style chosen by the consumer', () => {
+    const { container } = renderBanner({ barClassName: 'bg-danger' });
+
+    expect(container.querySelector('.bg-danger')).toBeTruthy();
+  });
+
+  it('fills the bar in proportion to the storage used', () => {
+    const { container } = renderBanner({ barClassName: 'bg-yellow-60', percentage: 73 });
+
+    const bar = container.querySelector<HTMLElement>('.bg-yellow-60');
+    expect(bar?.style.width).toBe('73%');
+  });
+
+  it('renders the rich description provided by the consumer', () => {
+    renderBanner({
+      description: (
+        <p>
+          You have used <strong>90%</strong> of your storage
+        </p>
+      ),
+    });
+
+    expect(screen.getByText('90%').tagName).toBe('STRONG');
+  });
+
+  it('shows a loading placeholder instead of the usage figures while data loads', () => {
+    const { container } = renderBanner({ isLoading: true });
+
+    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
+    expect(screen.queryByText('10 GB')).toBeNull();
+    expect(screen.queryByText('20 GB')).toBeNull();
+  });
+
+  it('shows the used and total storage once data has loaded', () => {
+    renderBanner({ isLoading: false });
+
+    expect(screen.getByText('10 GB')).toBeTruthy();
+    expect(screen.getByText('20 GB')).toBeTruthy();
+  });
+
+  it('notifies the parent when the user chooses to upgrade', () => {
+    const onUpgradeClick = vi.fn();
+    renderBanner({ onUpgradeClick });
+
+    screen.getByRole('button', { name: 'Upgrade now' }).click();
+
+    expect(onUpgradeClick).toHaveBeenCalledOnce();
+  });
+
+  it('notifies the parent when the user dismisses the banner', () => {
+    const onCloseButtonClick = vi.fn();
+    renderBanner({ onCloseButtonClick, closeButtonLabel: 'Close' });
+
+    screen.getByRole('button', { name: 'Close' }).click();
+
+    expect(onCloseButtonClick).toHaveBeenCalledOnce();
+  });
+});

src/components/feedback/notifications/usageBanner/index.ts

@@ -0,0 +1,2 @@
+export { default as UsageWarningBanner } from './UsageWarningBanner';
+export type { UsageWarningBannerProps } from './UsageWarningBanner';

src/components/feedback/skeleton/Skeleton.tsx

@@ -0,0 +1,14 @@
+import SkeletonItem from './SkeletonItem';
+
+/**
+ * Loading placeholder for the "usage / limit" amount (e.g. "8GB / 100GB").
+ */
+const Skeleton = (): React.ReactElement => (
+  <div className="flex flex-row items-center gap-2">
+    <SkeletonItem className="h-3 w-8" />
+    <SkeletonItem className="h-3 w-2" />
+    <SkeletonItem className="h-3 w-8" />
+  </div>
+);
+
+export default Skeleton;

src/components/feedback/skeleton/SkeletonItem.tsx

@@ -0,0 +1,9 @@
+export interface SkeletonItemProps {
+  className?: string;
+}
+
+const SkeletonItem = ({ className }: SkeletonItemProps): React.ReactElement => (
+  <div className={`rounded-lg bg-gray-5 animate-pulse${className ? ` ${className}` : ''}`} />
+);
+
+export default SkeletonItem;

src/components/feedback/skeleton/__test__/Skeleton.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Skeleton } from '../';
+
+describe('Skeleton', () => {
+  it('should match snapshot', () => {
+    const skeleton = render(<Skeleton />);
+    expect(skeleton).toMatchSnapshot();
+  });
+
+  it('should render three skeleton items', () => {
+    const { container } = render(<Skeleton />);
+
+    const items = container.querySelectorAll('.animate-pulse');
+    expect(items).toHaveLength(3);
+  });
+});

src/components/feedback/skeleton/__test__/SkeletonItem.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { SkeletonItem } from '../';
+
+describe('SkeletonItem', () => {
+  it('should match snapshot', () => {
+    const skeleton = render(<SkeletonItem />);
+    expect(skeleton).toMatchSnapshot();
+  });
+
+  it('should render a pulsing placeholder', () => {
+    const { container } = render(<SkeletonItem />);
+
+    const item = container.firstChild as HTMLElement;
+    expect(item).toHaveClass('animate-pulse');
+    expect(item).toHaveClass('rounded-lg');
+    expect(item).toHaveClass('bg-gray-5');
+  });
+
+  it('should append the provided className', () => {
+    const { container } = render(<SkeletonItem className="h-3 w-8" />);
+
+    const item = container.firstChild as HTMLElement;
+    expect(item).toHaveClass('h-3');
+    expect(item).toHaveClass('w-8');
+    expect(item).toHaveClass('animate-pulse');
+  });
+});

src/components/feedback/skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap

@@ -0,0 +1,90 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton > should match snapshot 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex flex-row items-center gap-2"
+      >
+        <div
+          class="rounded-lg bg-gray-5 animate-pulse h-3 w-8"
+        />
+        <div
+          class="rounded-lg bg-gray-5 animate-pulse h-3 w-2"
+        />
+        <div
+          class="rounded-lg bg-gray-5 animate-pulse h-3 w-8"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex flex-row items-center gap-2"
+    >
+      <div
+        class="rounded-lg bg-gray-5 animate-pulse h-3 w-8"
+      />
+      <div
+        class="rounded-lg bg-gray-5 animate-pulse h-3 w-2"
+      />
+      <div
+        class="rounded-lg bg-gray-5 animate-pulse h-3 w-8"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;