@tpzdsp/next-toolkit 2.5.1 → 3.1.0

package/src/components/form/TextArea.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import type { ExtendProps } from '../../types/utils';
-import { cn } from '../../utils';
-
-type Props = {
-  hasError?: boolean;
-};
-
-export type TextAreaProps = ExtendProps<'textarea', Props>;
-
-export const TextArea = ({ hasError, className, ...props }: TextAreaProps) => {
-  return (
-    <textarea
-      {...props}
-      className={cn(
-        'border p-1 disabled:opacity-60 disabled:bg-gray-100',
-        hasError ? 'border-error' : 'border-black',
-        className,
-      )}
-    />
-  );
-};

package/src/components/layout/footer/Footer.tsx

@@ -1,26 +0,0 @@
-import { Copyright } from './Copyright';
-import { Licence } from './Licence';
-import { MetaLinks } from './MetaLinks';
-
-export const Footer = () => (
-  <footer className="border-2 border-t-gray-200 bg-gray-100 p-3 flex items-center justify-center">
-    <div
-      className="grid w-full max-w-7xl gap-2 grid-cols-1 md:grid-cols-[1fr_min-content]
-        grid-rows-[min-content_min-content_min-content] md:grid-rows-[min-content_min-content]"
-    >
-      <nav className="row-start-1 col-start-1 md:col-span-2 w-full pb-2">
-        <h2 className="sr-only">Support Links</h2>
-
-        <MetaLinks />
-      </nav>
-
-      <div className="row-start-2 col-start-1 pt-1">
-        <Licence />
-      </div>
-
-      <div className="row-start-3 col-start-1 md:row-start-2 md:col-start-2 w-full h-min">
-        <Copyright />
-      </div>
-    </div>
-  </footer>
-);

package/src/components/layout/footer/Licence.tsx

@@ -1,19 +0,0 @@
-import { OglLogo } from '../../images/OglLogo';
-import { ExternalLink } from '../../link/ExternalLink';
-
-export const Licence = () => (
-  <div className="flex gap-2 w-full items-center">
-    <OglLogo className="inline h-9 w-9" aria-hidden />
-
-    <span className="text-xs text-black break-words flex-auto">
-      All content is available under the{' '}
-      <ExternalLink
-        className="inline-flex break-words min-w-0 text-black"
-        href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-      >
-        Open Government Licence v3.0
-      </ExternalLink>
-      , except where otherwise stated.
-    </span>
-  </div>
-);

package/src/components/layout/footer/MetaLinks.tsx

@@ -1,36 +0,0 @@
-import { ExternalLink } from '../../link/ExternalLink';
-
-const LINKS = [
-  {
-    label: 'Accessibility statement',
-    url: '/support/faqs/275810340/275810354',
-  },
-  {
-    label: 'Cookie Policy',
-    url: '/help/cookies',
-  },
-  {
-    label: 'Terms and Conditions',
-    url: '/support/faqs/275811163/275811177',
-  },
-  {
-    label: 'Privacy',
-    url: '/support/faqs/275811163/275811229',
-  },
-  {
-    label: 'Contact Us',
-    url: '/support',
-  },
-];
-
-export const MetaLinks = () => (
-  <ul className="flex w-full flex-wrap gap-x-4 gap-y-2 md:gap-6 text-xs md:justify-start">
-    {LINKS.map((link) => (
-      <li className="flex" key={link.label}>
-        <ExternalLink className="text-black md:text-left" href={link.url}>
-          {link.label}
-        </ExternalLink>
-      </li>
-    ))}
-  </ul>
-);

package/src/components/layout/header/Header.test.tsx

@@ -1,36 +0,0 @@
-import { Header } from './Header';
-import { render, screen } from '../../../test/renderers';
-import type { NavLink } from '../../../types/navigation';
-
-const NAV_LINKS: NavLink[] = [
-  { label: 'Home', url: '/', openInNewTab: false },
-  { label: 'API', url: '/api-docs', openInNewTab: false },
-  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
-];
-
-describe('Header', () => {
-  it('renders the primary brand links and app name', async () => {
-    render(
-      <Header
-        credentials={null}
-        dspUrl="https://example.com"
-        appName="Wetlands Inventory"
-        navLinks={NAV_LINKS}
-      />,
-    );
-
-    expect(
-      screen.getByRole('link', {
-        name: /department for environment food & rural affairs/i,
-      }),
-    ).toBeInTheDocument();
-
-    expect(screen.getByRole('link', { name: /data services platform/i })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: /wetlands inventory/i })).toBeInTheDocument();
-
-    const loginLink = await screen.findByRole('link', { name: /login/i });
-
-    expect(loginLink).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /open menu/i })).toBeInTheDocument();
-  });
-});

package/src/components/layout/header/Header.tsx

@@ -1,90 +0,0 @@
-import type { ComponentType } from 'react';
-
-import { FaHouse } from 'react-icons/fa6';
-
-import { HeaderAuthClient } from './HeaderAuthClient';
-import { HeaderNavClient } from './HeaderNavClient';
-import type { Credentials } from '../../../types/auth';
-import type { NavLink } from '../../../types/navigation';
-import { DefraLogo } from '../../images/DefraLogo';
-import { EaLogo } from '../../images/EaLogo';
-import { ExternalLink } from '../../link/ExternalLink';
-import { Link } from '../../link/Link';
-
-type HeaderProps = {
-  credentials: Credentials | null;
-  dspUrl: string;
-  appName: string;
-  navLinks: NavLink[];
-  // headerAuthClientComponent: ComponentType<{ credentials: Credentials | null; hostname: string }>;
-  headerNavClientComponent?: ComponentType<{ navLinks: NavLink[] }>;
-};
-
-export const Header = ({
-  credentials,
-  dspUrl,
-  appName,
-  navLinks,
-  // headerAuthClientComponent,
-  headerNavClientComponent = HeaderNavClient,
-}: HeaderProps) => {
-  const HeaderNav = headerNavClientComponent;
-
-  return (
-    <header className="bg-black w-full text-white border-b-2 border-brand">
-      <div
-        className="grid grid-rows-[min-content_min-content] grid-cols-2 md:grid-cols-3 gap-x-4
-          gap-y-2 md:gap-y-0 py-2 px-3 border-b border-gray-500"
-      >
-        <ExternalLink
-          href="https://www.gov.uk/government/organisations/department-for-environment-food-rural-affairs"
-          className="justify-center text-white visited:text-white active:text-black hover:text-white
-            text-base"
-        >
-          <span className="flex flex-col sm:flex-row sm:items-center gap-1 flex-1">
-            <DefraLogo className="w-[50px] h-[50px]" />
-
-            <span>Department for Environment Food &amp; Rural Affairs</span>
-          </span>
-        </ExternalLink>
-
-        <ExternalLink
-          href="/"
-          className="flex gap-1 text-base items-center text-white md:justify-self-center
-            justify-self-end h-min self-center visited:text-white active:text-black
-            hover:text-white"
-        >
-          <FaHouse className="shrink-0" />
-
-          <span>Data Services Platform</span>
-        </ExternalLink>
-
-        {dspUrl ? <HeaderAuthClient hostname={dspUrl} credentials={credentials} /> : <></>}
-      </div>
-
-      <div
-        className="w-full bg-white grid grid-cols-[1fr_min-content]
-          2xs:grid-cols-[min-content_minmax(0,_1fr)_min-content] grid-rows-1 sm:grid-rows-none py-2
-          px-1 sm:px-3 items-center gap-y-4 gap-2"
-      >
-        <ExternalLink
-          href="https://www.gov.uk/government/organisations/environment-agency"
-          className="justify-self-start text-black hidden 2xs:block min-w-32"
-        >
-          <EaLogo className="text-nowrap overflow-hidden pl-2" />
-        </ExternalLink>
-
-        <Link
-          href="/"
-          className="text-center font-bold text-base sm:text-lg text-black visited:text-black
-            active:text-black hover:text-black"
-        >
-          {appName}
-        </Link>
-
-        {/* <HeaderNavClient navLinks={navLinks} /> */}
-        <HeaderNav navLinks={navLinks} />
-      </div>
-    </header>
-  );
-};

package/src/components/layout/header/HeaderAuthClient.test.tsx

@@ -1,45 +0,0 @@
-import { HeaderAuthClient } from './HeaderAuthClient';
-import { render, screen } from '../../../test/renderers';
-import type { Credentials } from '../../../types/auth';
-
-const AUTH_CREDENTIALS: Credentials = {
-  token: 'token-123',
-  user: {
-    name: 'Jamie Taylor',
-    email: 'jamie.taylor@example.com',
-    groupInfoIds: ['group-1'],
-  },
-};
-
-describe('HeaderAuthClient', () => {
-  beforeEach(() => {
-    globalThis.history.pushState({}, '', '/header-test');
-  });
-
-  it('renders guest state with login link', async () => {
-    render(<HeaderAuthClient hostname="https://example.com" credentials={null} />);
-
-    expect(screen.getByText(/welcome,/i)).toBeInTheDocument();
-    expect(screen.getByText(/guest/i)).toBeInTheDocument();
-
-    const loginLink = await screen.findByRole('link', { name: /login/i });
-
-    expect(loginLink).toHaveAttribute(
-      'href',
-      `https://example.com/login?redirect-uri=${encodeURIComponent(globalThis.location.href)}`,
-    );
-  });
-
-  it('renders authenticated state with logout link', async () => {
-    render(<HeaderAuthClient hostname="https://example.com" credentials={AUTH_CREDENTIALS} />);
-
-    expect(screen.getByText(/jamie.taylor@example.com/i)).toBeInTheDocument();
-
-    const logoutLink = await screen.findByRole('link', { name: /logout/i });
-
-    expect(logoutLink).toHaveAttribute(
-      'href',
-      `https://example.com/api/logout?redirect-uri=${encodeURIComponent(globalThis.location.href)}`,
-    );
-  });
-});

package/src/components/layout/header/HeaderAuthClient.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import type { Credentials } from '../../../types/auth';
-import { Link } from '../../link/Link';
-
-type HeaderAuthClientProps = {
-  credentials: Credentials | null;
-  hostname: string;
-};
-
-export const HeaderAuthClient = ({ hostname, credentials }: HeaderAuthClientProps) => {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  return (
-    <span
-      className="flex gap-2 justify-self-start text-base col-span-2 row-start-2 col-start-1
-        md:row-start-1 md:col-start-3 h-min md:justify-self-end self-center items-center"
-    >
-      <span className="text-base border-r border-white pr-2 wrap break-anywhere sm:break-word">
-        <span>Welcome,</span> {credentials ? credentials.user.email : 'Guest'}
-      </span>
-
-      {isClient ? (
-        <Link
-          href={`${hostname}/${credentials ? 'api/logout' : 'login'}?redirect-uri=${encodeURIComponent(window.location.href)}`}
-          className="text-white visited:text-white active:text-black hover:text-white"
-          prefetch={false}
-        >
-          <span className="text-base">{credentials ? 'Logout' : 'Login'}</span>
-        </Link>
-      ) : null}
-    </span>
-  );
-};

package/src/components/layout/header/HeaderNavClient.test.tsx

@@ -1,44 +0,0 @@
-import { HeaderNavClient } from './HeaderNavClient';
-import { render, screen, userEvent } from '../../../test/renderers';
-import type { NavLink } from '../../../types/navigation';
-
-const NAV_LINKS: NavLink[] = [
-  { label: 'Home', url: '/', openInNewTab: false },
-  { label: 'API', url: '/api-docs', openInNewTab: false },
-  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
-];
-
-describe('HeaderNavClient', () => {
-  it('renders both navigation regions', () => {
-    render(<HeaderNavClient navLinks={NAV_LINKS} />);
-
-    expect(
-      screen.getByRole('navigation', { name: /small screen navigation/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole('navigation', { name: /large screen navigation/i }),
-    ).toBeInTheDocument();
-  });
-
-  it('shows menu items in the small-screen dropdown', async () => {
-    render(<HeaderNavClient navLinks={NAV_LINKS} />);
-
-    const user = userEvent.setup();
-
-    await user.click(screen.getByRole('button', { name: /open menu/i }));
-
-    expect(await screen.findByRole('menuitem', { name: /home/i })).toBeInTheDocument();
-    expect(await screen.findByRole('menuitem', { name: /api/i })).toBeInTheDocument();
-    expect(await screen.findByRole('menuitem', { name: /support/i })).toBeInTheDocument();
-  });
-
-  it('renders large-screen links for navigation', () => {
-    render(<HeaderNavClient navLinks={NAV_LINKS} />);
-
-    const supportLink = screen.getByRole('link', { name: /support/i });
-
-    expect(supportLink).toHaveAttribute('href', 'https://example.com/support');
-    expect(screen.getByRole('link', { name: /home/i })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: /api/i })).toBeInTheDocument();
-  });
-});

package/src/components/layout/header/HeaderNavClient.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import type { NavLink } from '../../../types/navigation';
-import { DropdownMenu, type DropdownMenuItem } from '../../dropdown/DropdownMenu';
-import { ExternalLink } from '../../link/ExternalLink';
-import { Link } from '../../link/Link';
-
-type HeaderNavClientProps = {
-  navLinks: NavLink[];
-};
-
-const ExternalNavItem = ({ label, url, icon, ...props }: DropdownMenuItem<NavLink>) => (
-  <ExternalLink href={url} {...props}>
-    {icon ?? null}
-    <span>{label}</span>
-  </ExternalLink>
-);
-
-const InternalNavItem = ({ label, url, icon, ...props }: DropdownMenuItem<NavLink>) => (
-  <Link {...props} href={url}>
-    {icon ?? null}
-    <span>{label}</span>
-  </Link>
-);
-
-const NavItem = ({ url, openInNewTab, ...props }: DropdownMenuItem<NavLink>) => {
-  const isExternal = /^https?:\/\//.test(url);
-  const newTabProps = openInNewTab ? { target: '_blank' as const, rel: 'noopener noreferrer' } : {};
-
-  if (isExternal) {
-    return <ExternalNavItem url={url} {...newTabProps} {...props} />;
-  }
-
-  return <InternalNavItem url={url} {...newTabProps} {...props} />;
-};
-
-export const HeaderNavClient = ({ navLinks }: HeaderNavClientProps) => {
-  return (
-    <>
-      <nav className="block sm:hidden" aria-label="Small Screen Navigation">
-        <DropdownMenu
-          items={navLinks}
-          itemRenderer={NavItem}
-          itemClassName="text-black cursor-pointer px-2 py-1 gap-1 text-base flex items-center shrink-0"
-        />
-      </nav>
-
-      <nav
-        className="hidden sm:block col-span-full sm:col-span-1 sm:justify-self-end sm:gap-4 min-w-0
-          px-2 gap-2"
-        aria-label="Large Screen Navigation"
-      >
-        <ul className="flex flex-row gap-2 order-1 shrink-0">
-          {navLinks.map((link) => (
-            <li key={link.label} className="w-full py-1">
-              <NavItem
-                {...link}
-                className="text-black visited:text-black active:text-black hover:text-black gap-1
-                  text-base flex items-center justify-center shrink-0 w-max"
-              />
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </>
-  );
-};

package/src/components/link/ExternalLink.test.tsx

@@ -1,102 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { ExternalLink } from './ExternalLink';
-
-describe('ExternalLink', () => {
-  it('renders with children', () => {
-    render(<ExternalLink href="https://example.com">Visit Example</ExternalLink>);
-
-    const link = screen.getByRole('link', { name: /Visit Example/i });
-
-    expect(link).toBeInTheDocument();
-  });
-
-  it('sets target="_blank" to open in new tab', () => {
-    render(<ExternalLink href="https://example.com">External Link</ExternalLink>);
-
-    const link = screen.getByRole('link');
-
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-
-  it('sets rel="noopener noreferrer" for security', () => {
-    render(<ExternalLink href="https://example.com">External Link</ExternalLink>);
-
-    const link = screen.getByRole('link');
-
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-  });
-
-  it('includes screen reader text indicating new tab', () => {
-    render(<ExternalLink href="https://example.com">Visit Site</ExternalLink>);
-
-    // The accessible name should include the "(opens in new tab)" text
-    const link = screen.getByRole('link', { name: /Visit Site\(opens in new tab\)/i });
-
-    expect(link).toBeInTheDocument();
-  });
-
-  it('applies custom className', () => {
-    render(
-      <ExternalLink href="https://example.com" className="custom-class">
-        Link
-      </ExternalLink>,
-    );
-
-    const link = screen.getByRole('link');
-
-    expect(link).toHaveClass('custom-class');
-  });
-
-  it('preserves default link styling classes', () => {
-    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
-
-    const link = screen.getByRole('link');
-
-    expect(link).toHaveClass('text-link');
-    expect(link).toHaveClass('underline');
-  });
-
-  it('applies href attribute correctly', () => {
-    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
-
-    const link = screen.getByRole('link');
-
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-
-  it('forwards additional props to anchor element', () => {
-    render(
-      <ExternalLink href="https://example.com" data-testid="external-link">
-        Link
-      </ExternalLink>,
-    );
-
-    const link = screen.getByTestId('external-link');
-
-    expect(link).toBeInTheDocument();
-  });
-
-  it('renders with complex children', () => {
-    render(
-      <ExternalLink href="https://example.com">
-        <span>Complex </span>
-
-        <strong>Content</strong>
-      </ExternalLink>,
-    );
-
-    const link = screen.getByRole('link');
-
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveTextContent('Complex Content');
-  });
-
-  it('screen reader text is visually hidden but accessible', () => {
-    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
-
-    const srText = screen.getByText('(opens in new tab)', { exact: false });
-
-    expect(srText).toHaveClass('sr-only');
-  });
-});

package/src/components/link/ExternalLink.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { ExtendProps } from '../../types/utils';
-import { cn } from '../../utils';
-
-type Props = {
-  children: ReactNode;
-};
-
-export type ExternalLinkProps = ExtendProps<'a', Props>;
-
-export const ExternalLink = ({ href, className, children, ...props }: ExternalLinkProps) => (
-  <a
-    {...props}
-    className={cn(
-      `cursor-pointer text-link hover:decoration-[max(3px,_.1875rem,_.12em)] hover:text-link-hover
-      visited:text-link-visited focus:decoration-[max(3px,_.1875rem,_.12em)]
-      decoration-[max(1px,_.0625rem)] underline-offset-[0.1578em] underline outline-none
-      focus:text-focus-text focus:bg-focus inline-block`,
-      className,
-    )}
-    href={href}
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    {children}
-    <span className="sr-only"> (opens in new tab)</span>
-  </a>
-);

package/src/components/link/Link.tsx

@@ -1,26 +0,0 @@
-import NextLink from 'next/link';
-
-import type { ExtendProps } from '../../types/utils';
-import { cn } from '../../utils';
-
-type Props = {
-  href: string | object;
-};
-
-export type LinkProps = ExtendProps<typeof NextLink, Props>;
-
-export const Link = ({ href, className, children, ...props }: LinkProps) => (
-  <NextLink
-    {...props}
-    className={cn(
-      `cursor-pointer text-link hover:decoration-[max(3px,_.1875rem,_.12em)] hover:text-link-hover
-      visited:text-link-visited active:text-black focus:decoration-[max(3px,_.1875rem,_.12em)]
-      decoration-[max(1px,_.0625rem)] underline-offset-[0.1578em] underline outline-none
-      focus:text-focus-text focus:bg-focus inline-block`,
-      className,
-    )}
-    href={href}
-  >
-    <>{children}</>
-  </NextLink>
-);