@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/cookieBanner/CookieBanner.tsx

@@ -1,73 +0,0 @@
-'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>
-  );
-};

package/src/components/divider/RuleDivider.stories.tsx

@@ -1,254 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { RuleDivider } from './RuleDivider';
-
-const meta = {
-  title: 'Components/RuleDivider',
-  component: RuleDivider,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof RuleDivider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider />
-    </div>
-  ),
-};
-
-export const WithText: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>OR</RuleDivider>
-    </div>
-  ),
-};
-
-export const WithLongerText: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>Continue Reading</RuleDivider>
-    </div>
-  ),
-};
-export const WithIcon: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>
-        <svg
-          className="w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-        </svg>
-      </RuleDivider>
-    </div>
-  ),
-};
-
-export const WithStyledText: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>
-        <span className="text-sm text-gray-500 uppercase tracking-wide">Section Break</span>
-      </RuleDivider>
-    </div>
-  ),
-};
-
-export const WithBoldText: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>
-        <strong className="text-gray-700">Important</strong>
-      </RuleDivider>
-    </div>
-  ),
-};
-
-export const WithColoredText: Story = {
-  render: () => (
-    <div className="w-96">
-      <RuleDivider>
-        <span className="text-blue-600 font-medium">New Content</span>
-      </RuleDivider>
-    </div>
-  ),
-};
-
-export const InContainer: Story = {
-  render: () => (
-    <div className="w-96 p-4 border rounded">
-      <p className="mb-4">This is some content above the divider.</p>
-
-      <RuleDivider>
-        <span className="text-gray-500">More below</span>
-      </RuleDivider>
-
-      <p className="mt-4">This is content below the divider.</p>
-    </div>
-  ),
-};
-
-export const FormSeparator: Story = {
-  render: () => (
-    <div className="w-80 p-6 border rounded">
-      <div className="space-y-4">
-        <div>
-          <p className="block text-sm font-medium mb-1">Email</p>
-
-          <input
-            type="email"
-            className="w-full p-2 border border-gray-300 rounded"
-            placeholder="Enter your email"
-          />
-        </div>
-
-        <div>
-          <p className="block text-sm font-medium mb-1">Password</p>
-
-          <input
-            type="password"
-            className="w-full p-2 border border-gray-300 rounded"
-            placeholder="Enter your password"
-          />
-        </div>
-      </div>
-
-      <div className="my-6">
-        <RuleDivider>
-          <span className="text-xs text-gray-400 uppercase">OR</span>
-        </RuleDivider>
-      </div>
-
-      <button className="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">
-        Continue with Google
-      </button>
-    </div>
-  ),
-};
-
-export const ContentSections: Story = {
-  render: () => (
-    <div className="max-w-2xl p-6 space-y-6">
-      <div>
-        <h2 className="text-xl font-bold mb-2">Introduction</h2>
-
-        <p className="text-gray-600">
-          This is the introduction section with some content that explains the topic.
-        </p>
-      </div>
-
-      <RuleDivider>
-        <span className="text-sm text-gray-500">Chapter 1</span>
-      </RuleDivider>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-2">Getting Started</h3>
-
-        <p className="text-gray-600">
-          Here we dive into the first chapter with detailed explanations and examples.
-        </p>
-      </div>
-
-      <RuleDivider>
-        <span className="text-sm text-gray-500">Chapter 2</span>
-      </RuleDivider>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-2">Advanced Topics</h3>
-
-        <p className="text-gray-600">This section covers more advanced concepts and use cases.</p>
-      </div>
-    </div>
-  ),
-};
-
-export const MultipleInList: Story = {
-  render: () => (
-    <div className="w-80 space-y-4">
-      <RuleDivider />
-
-      <RuleDivider>
-        <span className="text-gray-600">Section A</span>
-      </RuleDivider>
-
-      <RuleDivider>
-        <span className="text-gray-600">Section B</span>
-      </RuleDivider>
-
-      <RuleDivider>
-        <span className="text-gray-600">Section C</span>
-      </RuleDivider>
-
-      <RuleDivider />
-    </div>
-  ),
-};
-
-export const DifferentWidths: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div className="w-32">
-        <div className="text-sm mb-2">Small (w-32)</div>
-
-        <RuleDivider>
-          <span className="text-xs">OR</span>
-        </RuleDivider>
-      </div>
-
-      <div className="w-64">
-        <div className="text-sm mb-2">Medium (w-64)</div>
-
-        <RuleDivider>
-          <span className="text-sm">Continue</span>
-        </RuleDivider>
-      </div>
-
-      <div className="w-96">
-        <div className="text-sm mb-2">Large (w-96)</div>
-
-        <RuleDivider>
-          <span className="text-base">Section Divider</span>
-        </RuleDivider>
-      </div>
-    </div>
-  ),
-};
-
-export const WithButton: Story = {
-  render: () => (
-    <RuleDivider>
-      <button className="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
-        Show More
-      </button>
-    </RuleDivider>
-  ),
-};
-
-export const WithMultipleElements: Story = {
-  render: () => (
-    <RuleDivider>
-      <div className="flex items-center gap-2">
-        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fillRule="evenodd"
-            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-            clipRule="evenodd"
-          />
-        </svg>
-
-        <span className="text-sm text-green-600">Completed</span>
-      </div>
-    </RuleDivider>
-  ),
-};

package/src/components/divider/RuleDivider.test.tsx

@@ -1,164 +0,0 @@
-import { RuleDivider } from './RuleDivider';
-import { render, screen } from '../../test/renderers';
-
-describe('RuleDivider', () => {
-  it('should render with default props', () => {
-    const { container } = render(<RuleDivider />);
-
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('should render single hr element when no children provided', () => {
-    const { container } = render(<RuleDivider />);
-
-    const hrElements = container.querySelectorAll('hr');
-
-    expect(hrElements).toHaveLength(1);
-  });
-
-  it('should have correct container classes', () => {
-    const { container } = render(<RuleDivider />);
-
-    const containerElement = container.firstChild as HTMLElement;
-
-    expect(containerElement).toHaveClass('flex', 'items-center');
-  });
-
-  it('should render with children', () => {
-    render(<RuleDivider>Divider Text</RuleDivider>);
-
-    expect(screen.getByText('Divider Text')).toBeInTheDocument();
-  });
-
-  it('should render two hr elements when children are provided', () => {
-    const { container } = render(<RuleDivider>With Text</RuleDivider>);
-
-    const hrElements = container.querySelectorAll('hr');
-
-    expect(hrElements).toHaveLength(2);
-  });
-
-  it('should apply correct classes to hr elements', () => {
-    const { container } = render(<RuleDivider />);
-
-    const hrElement = container.querySelector('hr');
-
-    expect(hrElement).toHaveClass('flex-grow');
-  });
-
-  it('should apply correct classes to span when children provided', () => {
-    const { container } = render(<RuleDivider>Test Content</RuleDivider>);
-
-    const spanElement = container.querySelector('span');
-
-    expect(spanElement).toHaveClass('px-2');
-    expect(spanElement).toHaveTextContent('Test Content');
-  });
-
-  it('should render complex children correctly', () => {
-    render(
-      <RuleDivider>
-        <strong>Bold Text</strong>
-      </RuleDivider>,
-    );
-
-    expect(screen.getByText('Bold Text')).toBeInTheDocument();
-    expect(screen.getByText('Bold Text').tagName).toBe('STRONG');
-  });
-
-  it('should handle multiple text nodes as children', () => {
-    render(<RuleDivider>Multiple words here</RuleDivider>);
-
-    expect(screen.getByText('Multiple words here')).toBeInTheDocument();
-  });
-
-  it('should render icon as children', () => {
-    const IconComponent = () => <svg data-testid="test-icon" />;
-
-    render(
-      <RuleDivider>
-        <IconComponent />
-      </RuleDivider>,
-    );
-
-    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
-  });
-
-  it('should have proper structure when children provided', () => {
-    const { container } = render(<RuleDivider>Content</RuleDivider>);
-
-    const containerElement = container.firstChild as HTMLElement;
-
-    expect(containerElement.children).toHaveLength(3); // hr + span + hr
-
-    const [firstHr, span, secondHr] = containerElement.children;
-
-    expect(firstHr?.tagName).toBe('HR');
-    expect(span?.tagName).toBe('SPAN');
-    expect(secondHr?.tagName).toBe('HR');
-  });
-
-  it('should have proper structure when no children provided', () => {
-    const { container } = render(<RuleDivider />);
-
-    const containerElement = container.firstChild as HTMLElement;
-
-    expect(containerElement.children).toHaveLength(1); // only hr
-
-    const hrElement = containerElement.children[0];
-
-    expect(hrElement?.tagName).toBe('HR');
-  });
-
-  it('should handle empty string as children', () => {
-    const { container } = render(<RuleDivider>{''}</RuleDivider>);
-
-    // Empty string is falsy, so should behave like no children
-    const hrElements = container.querySelectorAll('hr');
-
-    expect(hrElements).toHaveLength(1);
-
-    const spanElement = container.querySelector('span');
-
-    expect(spanElement).not.toBeInTheDocument();
-  });
-
-  it('should handle null children correctly', () => {
-    const { container } = render(<RuleDivider>{null}</RuleDivider>);
-
-    // null should be considered falsy, so only one hr should render
-    const hrElements = container.querySelectorAll('hr');
-
-    expect(hrElements).toHaveLength(1);
-
-    const spanElement = container.querySelector('span');
-
-    expect(spanElement).not.toBeInTheDocument();
-  });
-
-  it('should handle undefined children correctly', () => {
-    const { container } = render(<RuleDivider>{undefined}</RuleDivider>);
-
-    // undefined should be considered falsy, so only one hr should render
-    const hrElements = container.querySelectorAll('hr');
-
-    expect(hrElements).toHaveLength(1);
-
-    const spanElement = container.querySelector('span');
-
-    expect(spanElement).not.toBeInTheDocument();
-  });
-
-  it('should render multiple child elements', () => {
-    render(
-      <RuleDivider>
-        <span>Text 1</span>
-
-        <span>Text 2</span>
-      </RuleDivider>,
-    );
-
-    expect(screen.getByText('Text 1')).toBeInTheDocument();
-    expect(screen.getByText('Text 2')).toBeInTheDocument();
-  });
-});

package/src/components/divider/RuleDivider.tsx

@@ -1,23 +0,0 @@
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-export type RuleDividerProps = ExtendProps<'div', Props>;
-
-export const RuleDivider = ({ children, className, ...props }: RuleDividerProps) => {
-  return (
-    <div className={cn('flex items-center', className)} {...props}>
-      <hr className="flex-grow" />
-      {children ? (
-        <>
-          <span className="px-2">{children}</span>
-
-          <hr className="flex-grow" />
-        </>
-      ) : null}
-    </div>
-  );
-};