@tpzdsp/next-toolkit 1.2.8 → 1.3.0

package/src/components/form/TextArea.tsx

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

package/src/components/googleAnalytics/GlobalVars.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+
+import Script from 'next/script';
+
+type GlobalVarsProps = {
+  analyticsId: string;
+};
+
+const GlobalVarsComponent = ({ analyticsId }: GlobalVarsProps) => {
+  console.log(`Global Vars: ${analyticsId}`); // Debugging line to check the ID
+
+  return (
+    <>
+      {/*
+        Set global variables on the window object.
+        Any further global variables can be added after these.
+       */}
+      <Script
+        id="global-vars"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.swirrl = window.swirrl ?? {};
+          window.swirrl.gtagUACode = "${analyticsId}";
+        `,
+        }}
+      />
+    </>
+  );
+};
+
+export const GlobalVars = memo(GlobalVarsComponent);

package/src/components/googleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+import Script from 'next/script';
+
+type GoogleAnalyticsProps = {
+  analyticsId: string;
+};
+
+const GoogleAnalyticsComponent = ({ analyticsId }: GoogleAnalyticsProps) => {
+  console.log(`Google Analytics ID: ${analyticsId}`); // Debugging line to check the ID
+
+  return <Script src={`https://www.googletagmanager.com/gtag/js?id=${analyticsId}`} />;
+};
+
+export const GoogleAnalytics = memo(GoogleAnalyticsComponent);

package/src/components/index.ts

@@ -1,8 +1,13 @@
 // Default components - these can be used in server or client-side rendering
+export { BackToTop } from './backToTop/BackToTop';
 export { Button } from './Button/Button';
 export { Card } from './Card/Card';
+export { Chip } from './chip/Chip';
+export { CookieBanner } from './cookieBanner/CookieBanner';
 export { Container } from './container/Container';
 export { ErrorText } from './ErrorText/ErrorText';
+export { GlobalVars } from './googleAnalytics/GlobalVars';
+export { GoogleAnalytics } from './googleAnalytics/GoogleAnalytics';
 export { Heading } from './Heading/Heading';
 export { Hint } from './Hint/Hint';
 export { DefraLogo } from './images/DefraLogo';
@@ -12,10 +17,15 @@ export { ExternalLink } from './link/ExternalLink';
 export { Link } from './link/Link';
 export { Paragraph } from './Paragraph/Paragraph';
 export { RuleDivider } from './divider/RuleDivider';
+export { SkipLink } from './skipLink/SkipLink';
+export { Input } from './form/Input';
+export { TextArea } from './form/TextArea';
 
 // Export default component types
+export type { BackToTopProps } from './backToTop/BackToTop';
 export type { ButtonProps } from './Button/Button';
 export type { CardProps } from './Card/Card';
+export type { ChipProps } from './chip/Chip';
 export type { ContainerProps } from './container/Container';
 export type { ErrorTextProps } from './ErrorText/ErrorText';
 export type { HeadingProps } from './Heading/Heading';
@@ -24,6 +34,9 @@ export type { ExternalLinkProps } from './link/ExternalLink';
 export type { LinkProps } from './link/Link';
 export type { ParagraphProps } from './Paragraph/Paragraph';
 export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
+export type { SkipLinkProps } from './skipLink/SkipLink';
+export type { InputProps } from './form/Input';
+export type { TextAreaProps } from './form/TextArea';
 
 // Client components - these require 'use client' directive
 export { DropdownMenu } from './dropdown/DropdownMenu';

package/src/components/skipLink/SkipLink.stories.tsx

@@ -0,0 +1,346 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SkipLink } from './SkipLink';
+
+const meta = {
+  title: 'Components/SkipLink',
+  component: SkipLink,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A skip link component that allows users to jump to the main content, improving accessibility for keyboard and screen reader users.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mainContentId: {
+      control: 'text',
+      description: 'The ID of the main content element to skip to',
+      defaultValue: 'main-content',
+    },
+  },
+} satisfies Meta<typeof SkipLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default skip link with the standard main content ID.',
+      },
+    },
+  },
+};
+
+export const CustomTarget: Story = {
+  args: {
+    mainContentId: 'custom-main',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skip link with a custom target ID.',
+      },
+    },
+  },
+};
+
+export const WithMainContent: Story = {
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <header className="bg-blue-600 text-white p-4">
+        <nav>
+          <ul className="flex space-x-4">
+            <li>
+              <a href="#" className="hover:underline">
+                Home
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                About
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                Services
+              </a>
+            </li>
+
+            <li>
+              <a href="#" className="hover:underline">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <main id="main-content" className="p-8">
+        <h1 className="text-3xl font-bold mb-6">Main Content</h1>
+
+        <p className="mb-4">
+          This is the main content area. Use Tab key to navigate to the skip link at the top, then
+          press Enter to jump directly here.
+        </p>
+
+        <p className="mb-4">
+          The skip link is invisible by default but becomes visible when focused, providing an
+          accessible way for keyboard users to bypass navigation.
+        </p>
+
+        <div className="space-y-4">
+          <p>Sample content paragraph 1.</p>
+
+          <p>Sample content paragraph 2.</p>
+
+          <p>Sample content paragraph 3.</p>
+        </div>
+      </main>
+
+      <footer className="bg-gray-800 text-white p-4 mt-8">
+        <p>&copy; 2024 Example Site. All rights reserved.</p>
+      </footer>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete page layout showing how the skip link works in context. Use Tab to focus the skip link, then Enter to jump to main content.',
+      },
+    },
+  },
+};
+
+export const CustomTargetWithContent: Story = {
+  args: {
+    mainContentId: 'article-content',
+  },
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <header className="bg-green-600 text-white p-4">
+        <h1 className="text-xl font-bold">Site Header</h1>
+      </header>
+
+      <nav className="bg-gray-200 p-4">
+        <ul className="flex space-x-4">
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 1
+            </a>
+          </li>
+
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 2
+            </a>
+          </li>
+
+          <li>
+            <a href="#" className="text-blue-600 hover:underline">
+              Navigation Link 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <aside className="bg-yellow-100 p-4">
+        <h2 className="font-bold mb-2">Sidebar</h2>
+
+        <p>Some sidebar content that users might want to skip.</p>
+      </aside>
+
+      <article id="article-content" className="p-8 bg-white">
+        <h1 className="text-3xl font-bold mb-6">Article Title</h1>
+
+        <p className="mb-4">
+          This skip link targets a custom ID &quot;article-content&quot; instead of the default
+          &quot;main-content&quot;.
+        </p>
+
+        <p className="mb-4">
+          This demonstrates how the component can be configured for different page layouts and
+          content structures.
+        </p>
+      </article>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Skip link with custom target ID, demonstrating flexibility for different page structures.',
+      },
+    },
+  },
+};
+
+export const FocusedState: Story = {
+  args: {
+    mainContentId: 'article-content-focused',
+  },
+  render: (args) => (
+    <div className="min-h-screen relative">
+      <style>
+        {`
+          .skip-link {
+            position: relative !important;
+            top: 0 !important;
+            display: block !important;
+          }
+        `}
+      </style>
+
+      <SkipLink {...args} />
+
+      <div className="p-8">
+        <h1 className="text-2xl font-bold mb-4">Skip Link in Focused State</h1>
+
+        <p className="mb-4">
+          This story shows how the skip link appears when focused. Normally it&apos;s hidden
+          off-screen until a user tabs to it.
+        </p>
+
+        <main id="main-content-focused" className="mt-8 p-4 border-2 border-dashed border-gray-400">
+          <h2 className="text-xl font-bold mb-2">Main Content Target</h2>
+
+          <p>This is where users will land when they activate the skip link.</p>
+        </main>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the visual appearance of the skip link when focused (normally hidden off-screen).',
+      },
+    },
+  },
+};
+
+export const AccessibilityTest: Story = {
+  args: {
+    mainContentId: 'article-content-accessibility',
+  },
+  render: (args) => (
+    <div className="min-h-screen">
+      <SkipLink {...args} />
+
+      <div className="p-8">
+        <h1 className="text-2xl font-bold mb-6">Accessibility Testing</h1>
+
+        <div className="bg-blue-50 border border-blue-200 rounded p-4 mb-6">
+          <h2 className="font-bold text-blue-800 mb-2">Testing Instructions:</h2>
+
+          <ol className="list-decimal list-inside space-y-1 text-blue-700">
+            <li>Use Tab key to navigate to the skip link (it will appear at the top)</li>
+
+            <li>Press Enter or Space to activate the skip link</li>
+
+            <li>Verify that focus moves to the main content below</li>
+
+            <li>Test with screen reader for proper announcement</li>
+          </ol>
+        </div>
+
+        <nav className="mb-8">
+          <h2 className="text-lg font-semibold mb-3">Navigation Menu</h2>
+
+          <ul className="space-y-2">
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 1
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 2
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 3
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 4
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="#"
+                className="text-blue-600 hover:underline focus:outline-2 focus:outline-blue-500"
+              >
+                Link 5
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        <main
+          id="main-content-accessibility"
+          className="p-6 bg-green-50 border border-green-200 rounded"
+        >
+          <h2 className="text-xl font-bold mb-4 text-green-800">Main Content Area</h2>
+
+          <p className="mb-4">
+            If the skip link worked correctly, focus should now be on this main content area,
+            bypassing all the navigation links above.
+          </p>
+
+          <p className="mb-4">
+            This is particularly important for users who rely on keyboard navigation or screen
+            readers, as it saves them from having to tab through all navigation elements on every
+            page.
+          </p>
+
+          <button
+            className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 focus:outline-2
+              focus:outline-green-500"
+          >
+            Interactive Element
+          </button>
+        </main>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete accessibility testing scenario with instructions for manual testing.',
+      },
+    },
+  },
+};

package/src/components/skipLink/SkipLink.test.tsx

@@ -0,0 +1,22 @@
+import { SkipLink } from './SkipLink';
+import { render, screen, userEvent } from '../../test/renderers';
+
+describe('SkipLink Component', () => {
+  it('should render correctly', () => {
+    render(<SkipLink />);
+
+    expect(screen.getByRole('link', { name: /skip to main content/i })).toBeInTheDocument();
+  });
+
+  it('should be focusable', async () => {
+    render(<SkipLink />);
+
+    const user = userEvent.setup();
+
+    await user.tab();
+
+    const link = screen.getByRole('link', { name: /skip to main content/i });
+
+    expect(link).toHaveFocus();
+  });
+});

package/src/components/skipLink/SkipLink.tsx

@@ -0,0 +1,19 @@
+import { Link } from '../link/Link';
+
+export type SkipLinkProps = {
+  mainContentId?: string;
+};
+
+export const SkipLink = ({ mainContentId = 'main-content' }: SkipLinkProps) => {
+  return (
+    <nav aria-label="Skip navigation">
+      <Link
+        className="bg-focus focus:relative focus:top-0 w-full absolute -top-full text-black
+          visited:text-black hover:text-black p-3 skip-link"
+        href={`#${mainContentId}`}
+      >
+        Skip to main content
+      </Link>
+    </nav>
+  );
+};

package/src/map/MapComponent.tsx

@@ -12,7 +12,7 @@ import { LayerSwitcherControl } from './LayerSwitcherControl';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
 import { getPopupPositionClass } from './utils';
-import type { MapConfig, PopupDirection } from '../types/map';
+import type { PopupDirection } from '../types/map';
 
 export type MapComponentProps = {
   osMapsApiKey?: string;
@@ -63,8 +63,6 @@ export const MapComponent = ({
     mapRef,
     mapConfig: { center, zoom },
     setMap,
-    setMapConfig,
-    map,
     isDrawing,
   } = useMap();
 
@@ -159,42 +157,11 @@ export const MapComponent = ({
       });
     });
 
-    if (!map) {
-      setMap(newMap);
-    }
+    setMap(newMap);
 
-    return () => {
-      newMap?.setTarget();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // This is a rare case where we want to run this only once.
 
-  // Update map config when map is moved
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-
-    const view = map.getView();
-    const moveHandler = () => {
-      const center = view.getCenter();
-
-      if (center) {
-        setMapConfig((prev: MapConfig) => ({
-          ...prev,
-          center,
-          zoom: view.getZoom()!,
-        }));
-      }
-    };
-
-    map.on('moveend', moveHandler);
-
-    return () => {
-      map.un('moveend', moveHandler);
-    };
-  }, [map, setMapConfig]);
-
   const closePopup = () => {
     setPopupFeatures([]);
     setPopupCoordinate(null);

package/src/utils/http.ts

@@ -6,6 +6,7 @@ export const MimeTypes = {
   GeoJson: 'application/geo+json',
   Png: 'image/png',
   XJsonLines: 'application/x-jsonlines',
+  Csv: 'text/csv',
 } as const;
 
 export const Http = {

package/src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './utils';
 export * from './auth';
 export * from './constants';
-export * from './http';