[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,76 @@
+import { CloudWarningIcon, XIcon } from '@phosphor-icons/react';
+import React, { ReactNode } from 'react';
+import { Button } from '../../../input/button';
+
+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 ? (
+          <div className="flex flex-row items-center gap-2">
+            <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
+            <div className="h-3 w-2 rounded-lg bg-gray-5 animate-pulse" />
+            <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
+          </div>
+        ) : (
+          <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/index.ts

@@ -8,6 +8,7 @@ export * from './data-display/table/Table';
 export * from './feedback/empty';
 export * from './feedback/loader';
 export * from './feedback/skeletonLoader';
+export * from './feedback/notifications/usageBanner';
 
 // input
 export * from './input/button';

src/components/navigation/sidenav/Sidenav.tsx

@@ -18,6 +18,9 @@ export interface SidenavStorageProps {
   onUpgradeClick: () => void;
   upgradeLabel?: string;
   isLoading?: boolean;
+  barClassName?: string;
+  containerClassName?: string;
+  advertisement?: ReactNode;
 }
 
 export interface SidenavProps {
@@ -145,6 +148,9 @@ const Sidenav = ({
               onUpgradeClick={storage.onUpgradeClick}
               upgradeLabel={storage.upgradeLabel}
               isLoading={storage.isLoading}
+              barClassName={storage.barClassName}
+              containerClassName={storage.containerClassName}
+              advertisement={storage.advertisement}
             />
           )}
         </div>

src/components/navigation/sidenav/SidenavStorage.tsx

@@ -1,54 +1,49 @@
-interface SidenavStorageProps {
-  usage: string;
-  limit: string;
-  percentage: number;
-  onUpgradeClick: () => void;
-  upgradeLabel?: string;
-  isLoading?: boolean;
-}
+import { SidenavStorageProps } from './Sidenav';
 
 const SidenavStorage = ({
   usage,
   limit,
   percentage,
   onUpgradeClick,
   upgradeLabel,
-  isLoading = true,
-}: SidenavStorageProps): JSX.Element => {
-  return (
-    <div className="flex flex-col w-full gap-2.5 px-2 pb-5">
-      <div className="flex flex-row w-full justify-between">
-        <div className="flex flex-row items-center gap-2">
-          {isLoading ? (
-            <div className="flex flex-row items-center gap-2">
-              <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
-              <div className="h-3 w-2 rounded-lg bg-gray-5 animate-pulse" />
-              <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
-            </div>
-          ) : (
-            <>
-              <p className="text-gray-60 text-sm font-semibold">{usage}</p>
-              <p className="text-gray-60 text-sm">/</p>
-              <p className="text-gray-60 text-sm">{limit}</p>
-            </>
-          )}
-        </div>
-        {upgradeLabel && (
-          <button className="text-primary text-sm hover:text-primary-dark font-semibold" onClick={onUpgradeClick}>
-            {upgradeLabel}
-          </button>
+  isLoading = false,
+  barClassName = 'bg-gray-60',
+  containerClassName,
+  advertisement,
+}: SidenavStorageProps): JSX.Element => (
+  <div className={`flex flex-col w-full gap-2.5 p-3${containerClassName ? ` ${containerClassName}` : ''}`}>
+    {advertisement}
+    <div className="flex flex-row w-full justify-between">
+      <div className="flex flex-row items-center gap-2">
+        {isLoading ? (
+          <div className="flex flex-row items-center gap-2">
+            <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
+            <div className="h-3 w-2 rounded-lg bg-gray-5 animate-pulse" />
+            <div className="h-3 w-8 rounded-lg bg-gray-5 animate-pulse" />
+          </div>
+        ) : (
+          <>
+            <p className="text-gray-60 text-sm font-semibold">{usage}</p>
+            <p className="text-gray-60 text-sm">/</p>
+            <p className="text-gray-60 text-sm">{limit}</p>
+          </>
         )}
       </div>
-      <div className="flex w-full h-1.5 bg-gray-10 rounded-full">
-        <div
-          className="bg-gray-60 rounded-full"
-          style={{
-            width: `${percentage}%`,
-          }}
-        />
-      </div>
+      {upgradeLabel && (
+        <button className="text-primary text-sm hover:text-primary-dark font-semibold" onClick={onUpgradeClick}>
+          {upgradeLabel}
+        </button>
+      )}
+    </div>
+    <div className="flex w-full h-1.5 bg-gray-10 rounded-full">
+      <div
+        className={`${barClassName} rounded-full`}
+        style={{
+          width: `${percentage}%`,
+        }}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 export default SidenavStorage;

src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap

@@ -930,7 +930,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
       class="flex flex-col"
     >
       <div
-        class="flex flex-col w-full gap-2.5 px-2 pb-5"
+        class="flex flex-col w-full gap-2.5 p-3"
       >
         <div
           class="flex flex-row w-full justify-between"