@tpzdsp/next-toolkit 1.2.9 → 1.3.0

package/src/components/backToTop/BackToTop.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { type KeyboardEvent, useCallback, useEffect, useState } from 'react';
+
+import { LuArrowUp } from 'react-icons/lu';
+
+export type BackToTopProps = {
+  /** Scroll threshold in pixels before button appears */
+  threshold?: number;
+  /** Position from bottom in pixels */
+  bottom?: number;
+  /** Position from left in pixels */
+  left?: number;
+  /** Custom className for styling */
+  className?: string;
+};
+
+export const BackToTop = ({
+  threshold = 600,
+  bottom = 16,
+  left = 8,
+  className = '',
+}: BackToTopProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Throttle scroll events for better performance
+  const throttle = useCallback((func: () => void, delay: number) => {
+    let timeoutId: number | null = null;
+    let lastExecTime = 0;
+
+    return () => {
+      const currentTime = Date.now();
+
+      if (currentTime - lastExecTime > delay) {
+        func();
+        lastExecTime = currentTime;
+      } else {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+
+        timeoutId = window.setTimeout(
+          () => {
+            func();
+            lastExecTime = Date.now();
+          },
+          delay - (currentTime - lastExecTime),
+        );
+      }
+    };
+  }, []);
+
+  // Show button when page is scrolled down
+  const toggleVisibility = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      setIsVisible(window.pageYOffset > threshold);
+    }
+  }, [threshold]);
+
+  // Scroll to top smoothly
+  const scrollToTop = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const throttledToggleVisibility = throttle(toggleVisibility, 100);
+
+    // Check initial scroll position
+    toggleVisibility();
+
+    window.addEventListener('scroll', throttledToggleVisibility, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', throttledToggleVisibility);
+    };
+  }, [toggleVisibility, throttle]);
+
+  // Handle keyboard interaction
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        scrollToTop();
+      }
+    },
+    [scrollToTop],
+  );
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      className={`
+        fixed z-50 inline-flex items-center gap-1
+        bg-white text-link border border-gray-300
+        rounded-md px-3 py-2 shadow-lg
+        hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+        transition-all duration-200 ease-in-out
+        ${className}
+      `.trim()}
+      // className={`fixed bottom-4 left-2 text-link gap-1 inline-flex items-center bg-white
+      //   ${className}`.trim()}
+      style={{
+        bottom: `${bottom}px`,
+        left: `${left}px`,
+      }}
+      onClick={scrollToTop}
+      onKeyDown={handleKeyDown}
+      aria-label="Scroll back to top of page"
+      title="Back to top"
+    >
+      <LuArrowUp size={20} aria-hidden="true" />
+
+      <span className="hidden sm:inline">Back to top</span>
+
+      <span className="sr-only sm:hidden">Back to top</span>
+    </button>
+  );
+};

package/src/components/chip/Chip.stories.tsx

@@ -0,0 +1,40 @@
+import { AiFillChrome } from 'react-icons/ai';
+
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Chip, type ChipProps } from './Chip';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+export default {
+  children: 'Chip',
+  component: Chip,
+} as Meta;
+
+const Template: StoryFn<ChipProps> = (args) => <Chip {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Chip',
+};
+
+export const JustText = Template.bind({});
+JustText.args = {
+  children: 'Hello, this is some simple text',
+};
+
+export const ParagraphOfText = Template.bind({});
+ParagraphOfText.args = {
+  children: <Paragraph className="pb-0">Hello, this is a paragraph of text</Paragraph>,
+};
+
+export const TextWithIcon = Template.bind({});
+TextWithIcon.args = {
+  children: (
+    <div className="flex items-center justify-center gap-2">
+      <AiFillChrome className="text-base" />
+
+      <Paragraph className="pb-0">Hello, this is a paragraph of text</Paragraph>
+    </div>
+  ),
+};

package/src/components/chip/Chip.test.tsx

@@ -0,0 +1,31 @@
+import { Chip } from './Chip';
+import { render, screen } from '../../test/renderers';
+
+describe('Chip component', () => {
+  it('should render children correctly', () => {
+    render(
+      <Chip>
+        <p>Hello, World!</p>
+      </Chip>,
+    );
+
+    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
+  });
+
+  it('should merge custom className correctly', () => {
+    render(<Chip className="bg-red-500 rounded-lg">Custom</Chip>);
+    const element = screen.getByText('Custom');
+
+    expect(element).toHaveClass('bg-red-500');
+    expect(element).toHaveClass('rounded-lg');
+  });
+
+  it('should override conflicting className using twMerge', () => {
+    render(<Chip className="px-2">Custom</Chip>);
+    const element = screen.getByText('Custom');
+
+    // Should NOT have original 'pt-[12px]' due to twMerge override
+    expect(element?.className).not.toMatch(/px-3/);
+    expect(element).toHaveClass('px-2');
+  });
+});

package/src/components/chip/Chip.tsx

@@ -0,0 +1,20 @@
+import { twMerge } from 'tailwind-merge';
+
+export type ChipProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const Chip = ({ className, children }: ChipProps) => {
+  return (
+    <span
+      className={twMerge(
+        `inline-flex items-center rounded-lg bg-gray-200 px-3 py-1 text-sm font-medium
+        text-gray-800`,
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/cookieBanner/CookieBanner.stories.tsx

@@ -0,0 +1,258 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CookieBanner } from './CookieBanner';
+
+const meta = {
+  title: 'Components/CookieBanner',
+  component: CookieBanner,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Cookie banner component for displaying cookie consent options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CookieBanner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default cookie banner (hidden by default with inline style).',
+      },
+    },
+  },
+};
+
+export const Visible: Story = {
+  render: () => (
+    <div>
+      <style>
+        {`
+          #cookie-banner {
+            display: block !important;
+          }
+        `}
+      </style>
+
+      <CookieBanner />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cookie banner with visibility forced on for demonstration purposes.',
+      },
+    },
+  },
+};
+
+export const VisibleWithBackground: Story = {
+  render: () => (
+    <div className="min-h-screen bg-gray-100">
+      <CookieBanner />
+
+      <div className="p-8">
+        <h1 className="text-2xl font-bold mb-4">Sample Page Content</h1>
+
+        <p className="mb-4">
+          This demonstrates how the cookie banner would appear on a real page. The banner is
+          positioned at the bottom of the screen.
+        </p>
+
+        <p className="mb-4">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Cookie banner shown in context with page content, positioned at the bottom of the screen.',
+      },
+    },
+  },
+};
+
+export const InteractiveDemo: Story = {
+  render: () => {
+    const handleAcceptAll = () => {
+      alert('All cookies accepted!');
+      // In a real implementation, this would hide the banner
+      const banner = document.getElementById('cookie-banner');
+
+      if (banner) {
+        banner.style.display = 'none';
+      }
+    };
+
+    const handleRejectAdditional = () => {
+      alert('Additional cookies rejected!');
+      // In a real implementation, this would hide the banner
+      const banner = document.getElementById('cookie-banner');
+
+      if (banner) {
+        banner.style.display = 'none';
+      }
+    };
+
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <style>
+          {`
+            #cookie-banner {
+              display: block !important;
+              background-color: white;
+              border-top: 2px solid #1f2937;
+              position: fixed;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              z-index: 1000;
+              box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
+
+        <div className="p-8">
+          <h1 className="text-3xl font-bold mb-6">Interactive Cookie Banner Demo</h1>
+
+          <p className="mb-4 text-lg">
+            Click either button on the cookie banner below to see the interaction.
+          </p>
+
+          <p className="mb-4">
+            This story demonstrates the banner in a more realistic context with interactive
+            behavior.
+          </p>
+
+          <div className="space-y-4">
+            <p>Sample page content continues here...</p>
+
+            <p>More content to show page scrolling behavior...</p>
+
+            <p>The cookie banner remains fixed at the bottom.</p>
+          </div>
+        </div>
+
+        <div id="cookie-banner" role="region" aria-label="cookie banner">
+          <div className="mx-auto max-w-[960px] p-[1rem]">
+            <h3 className="mb-4 text-base font-bold text-govukBlack">
+              Tell us whether you accept cookies
+            </h3>
+
+            <p className="mb-4 text-sm text-black">
+              We use essential cookies to give you the best online experience. Without them, this
+              service will not work.
+            </p>
+
+            <p className="mb-4 text-sm text-black">
+              We also use non-essential cookies to analyze site usage to continually improve the
+              services we provide you with.
+            </p>
+
+            <p className="mb-4 text-sm text-black">
+              Full details of cookies collected, and the functionality to change your cookie
+              preference at any time can be accessed on our{' '}
+              <a
+                href="https://environment.data.gov.uk/help/cookies"
+                className="text-blue-600 underline hover:text-blue-800"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Cookie Policy Page
+              </a>
+              .
+            </p>
+
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr_1fr]">
+              <div>
+                <button
+                  className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
+                    appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
+                    py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
+                    antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
+                    focus:outline focus:outline-offset-0 focus:outline-yellow-500"
+                  id="accept-all-cookies"
+                  type="button"
+                  onClick={handleAcceptAll}
+                >
+                  Accept all cookies
+                </button>
+              </div>
+
+              <div>
+                <button
+                  className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
+                    appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
+                    py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
+                    antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
+                    focus:outline focus:outline-offset-0 focus:outline-yellow-500"
+                  onClick={handleRejectAdditional}
+                >
+                  Reject additional cookies
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive version with working buttons that demonstrate the expected behavior.',
+      },
+    },
+  },
+};
+
+export const MobileView: Story = {
+  render: () => (
+    <div className="max-w-sm mx-auto bg-gray-100 min-h-screen">
+      <style>
+        {`
+          #cookie-banner {
+            display: block !important;
+            background-color: white;
+            border-top: 1px solid #ccc;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+          }
+        `}
+      </style>
+
+      <div className="p-4">
+        <h1 className="text-xl font-bold mb-4">Mobile View</h1>
+
+        <p className="mb-4 text-sm">This shows how the cookie banner appears on mobile devices.</p>
+      </div>
+
+      <CookieBanner />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cookie banner optimized for mobile viewport to test responsive behavior.',
+      },
+    },
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};

package/src/components/cookieBanner/CookieBanner.test.tsx

@@ -0,0 +1,68 @@
+import { CookieBanner } from './CookieBanner';
+import { render, screen, userEvent } from '../../test/renderers';
+
+const handlePush = vi.fn();
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: handlePush,
+  }),
+}));
+
+describe('CookieBanner', () => {
+  it('should render cookie banner content', () => {
+    render(<CookieBanner />);
+
+    expect(
+      screen.getByRole('heading', {
+        name: /tell us whether you accept cookies/i,
+        hidden: true,
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText(/we use essential cookies to give you the best online experience/i),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText(/we also use non-essential cookies to analyze site usage/i),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByText(
+        /full details of cookies collected, and the functionality to change your cookie preference/i,
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole('link', { name: /cookie policy page/i, hidden: true })).toHaveAttribute(
+      'href',
+      'https://environment.data.gov.uk/help/cookies',
+    );
+
+    expect(
+      screen.getByRole('button', { name: /accept all cookies/i, hidden: true }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('button', {
+        name: /reject additional cookies/i,
+        hidden: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should navigate to cookie preference page on "Reject additional cookies" click', async () => {
+    const user = userEvent.setup();
+
+    render(<CookieBanner />);
+
+    await user.click(
+      screen.getByRole('button', {
+        name: /reject additional cookies/i,
+        hidden: true,
+      }),
+    );
+
+    expect(handlePush).toHaveBeenCalled();
+  });
+});

package/src/components/cookieBanner/CookieBanner.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Script from 'next/script';
+
+import { ExternalLink } from '@tpzdsp/next-toolkit/components';
+
+const helpCookieUrl = 'https://environment.data.gov.uk/help/cookies';
+
+export const CookieBanner = () => {
+  const router = useRouter();
+
+  const setPreferences = () => {
+    router.push(helpCookieUrl);
+  };
+
+  return (
+    <div id="cookie-banner" role="region" aria-label="cookie banner" style={{ display: 'none' }}>
+      <Script src="https://environment.data.gov.uk/shared/cookie-banner.js"></Script>
+
+      <div className="mx-auto max-w-[960px] p-[1rem]">
+        <h3 className="mb-4 text-base font-bold text-govukBlack">
+          Tell us whether you accept cookies
+        </h3>
+
+        <p className="mb-4 text-sm text-black">
+          We use essential cookies to give you the best online experience. Without them, this
+          service will not work.
+        </p>
+
+        <p className="mb-4 text-sm text-black">
+          We also use non-essential cookies to analyze site usage to continually improve the
+          services we provide you with.
+        </p>
+
+        <p className="mb-4 text-sm text-black">
+          Full details of cookies collected, and the functionality to change your cookie preference
+          at any time can be accessed on our{' '}
+          <ExternalLink href={helpCookieUrl}>Cookie Policy Page</ExternalLink>.
+        </p>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr_1fr]">
+          <div>
+            <button
+              className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
+                appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
+                py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
+                antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
+                focus:outline focus:outline-offset-0 focus:outline-yellow-500"
+              id="accept-all-cookies"
+              type="submit"
+            >
+              Accept all cookies
+            </button>
+          </div>
+
+          <div>
+            <button
+              className="focus:outline-3 relative box-border inline-block w-full cursor-pointer
+                appearance-none rounded-none border-2 border-transparent bg-green-500 px-[10px]
+                py-[7px] text-center align-top text-base font-normal leading-[19px] text-white
+                antialiased shadow-[0_2px_0_#002413] focus:bg-green-600 hover:bg-green-600
+                focus:outline focus:outline-offset-0 focus:outline-yellow-500"
+              onClick={setPreferences}
+            >
+              Reject additional cookies
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};