@nnc-digital/nnc-design-system 1.0.0-beta2 → 1.0.0-beta21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nnc-digital/nnc-design-system",
-  "version": "1.0.0-beta2",
+  "version": "1.0.0-beta21",
   "description": "Design system for West & North Northamptonshire Councils, two unitary councils encompassing Wellingborough, Corby, Daventry, East Northants, Kettering, Northampton, Northamptonshire County and South Northants.",
   "main": "build/index.js",
   "repository": {
@@ -18,12 +18,23 @@
     "build"
   ],
   "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": "./build/index.esm.js",
+      "import": "./build/index.esm.js",
+      "require": "./build/index.js",
+      "default": "./build/index.esm.js"
+    },
+    "./build/*": "./build/*",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "rollup -c",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
+    "storybook:test": "vitest --project storybook",
+    "storybook": "storybook dev -p 6006 --no-open",
     "storybook:export": "storybook build",
     "generate": "node ./util/create-component",
     "prepublishOnly": "npm run build",
@@ -45,36 +56,37 @@
     "react-dom": ">=18.2.0",
     "styled-components": "^6.1.1"
   },
-  "resolutions": {
-    "@storybook/react/webpack": "^5"
-  },
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@etchteam/storybook-addon-status": "^4.2.4",
+    "@etchteam/storybook-addon-status": "^8.0.0",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.3",
+    "@mdx-js/loader": "3.1.1",
+    "@mdx-js/mdx": "3.1.1",
+    "@mdx-js/react": "3.1.1",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/react": "^7.5.3",
+    "@storybook/addon-a11y": "10.2.0",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/addon-links": "10.2.0",
+    "@storybook/addon-vitest": "^10.2.0",
+    "@storybook/react": "10.2.0",
+    "@storybook/react-vite": "10.2.0",
     "@testing-library/jest-dom": "6.0",
     "@testing-library/react": "^14.0.0",
     "@types/google.maps": "^3.50.5",
-    "@types/jest": "^29.2.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/styled-components": "^5.1.19",
     "@typescript-eslint/eslint-plugin": "6.0",
     "@typescript-eslint/parser": "6.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "axios": "^1",
-    "babel-jest": "^29.0.0",
-    "babel-loader": "^9.0.0",
-    "babel-preset-react-app": "^10.0.1",
+    "blank-module": "^0.0.1",
     "colors": "^1.4.0",
     "dayjs": "^1.10.7",
     "eslint": "^8.9.0",
@@ -83,13 +95,14 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^10.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29.3.1",
+    "jsdom": "^27.4.0",
     "jsuri": "^1.3.1",
-    "node-sass": "^8.0.0",
+    "path-browserify": "^1.0.1",
+    "playwright": "^1.58.0",
     "react": "~18",
+    "react-docgen-typescript": "^2.4.0",
     "react-dom": "~18",
     "rollup": "^3.29.4",
     "rollup-plugin-copy": "^3.4.0",
@@ -97,22 +110,20 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.34",
-    "sass-loader": "^13.0.0",
+    "storybook": "10.2.0",
     "styled-components": "^6.1.1",
-    "ts-jest": "^29",
     "typescript": "^5.5.2",
-    "webpack": "^5.69.0"
+    "vite": "^7.3.1",
+    "vite-plugin-node-polyfills": "^0.25.0",
+    "vitest": "^4.0.18"
   },
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@storybook/react-webpack5": "^7.5.3",
     "core-js": "^3.20.2",
     "downshift": "^6.1.7",
     "html-react-parser": "^3.0.16",
-    "react-lazy-progressive-image": "^1.5.5",
     "react-qr-code": "^2.0.11",
     "sanitize-html": "^2.6.1",
-    "storybook": "^7.5.3",
     "stylis": "^4.3.0"
   }
 }

package/build/ThemeVars.types.d.ts

@@ -1,60 +0,0 @@
-export interface ThemeVars {
-    theme_name: string;
-    full_name: string;
-    cardinal_name: string;
-    is_memorial: boolean;
-    council_link?: string;
-    other_council_link?: string;
-    other_council_name?: string;
-    other_council_action?: string;
-    twitter_link?: string;
-    linkedin_link?: string;
-    facebook_link?: string;
-    instagram_link?: string;
-    youtube_link?: string;
-    breakpointsVals: ThemeBreakpointTypes;
-    breakpoints: ThemeBreakpointTypes;
-    fontstack: string;
-    colours: ThemeColourTypes;
-    fontSizes: ThemeSizeTypes;
-    border_width: string;
-    border_width_error: string;
-    border_width_thin: string;
-    border_radius: string;
-    border_radius_large: string;
-    spacingSizes: ThemeSizeTypes;
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-}
-export interface ThemeBreakpointTypes {
-    s: string;
-    m: string;
-    l: string;
-    xl: string;
-}
-export interface ThemeColourTypes {
-    black: string;
-    grey_darkest: string;
-    grey_dark: string;
-    grey: string;
-    grey_light: string;
-    white: string;
-    action: string;
-    action_light: string;
-    action_dark: string;
-    positive: string;
-    negative: string;
-    visited?: string;
-    focus: string;
-    placeholder: string;
-    secondary?: string;
-}
-export interface ThemeSizeTypes {
-    extra_small: string;
-    small: string;
-    medium: string;
-    large: string;
-    x_large?: string;
-}

package/build/jest.setup.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom/jest-globals';
-import '@testing-library/jest-dom';

package/build/library/components/Autocomplete/Autocomplete.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/BackToTop/BackToTop.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/BinCollection/BinCollection.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/Card/Card.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/CheckboxListFilter/CheckboxListFilter.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/Column/Column.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/CustomSearch/CustomSearch.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/DynamicIcon/DynamicIcon.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/FileDownload/FileDownload.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/HeadingWithIcon/HeadingWithIcon.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/HeadingWithIconLink/HeadingWithIconLink.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/Pagination/Pagination.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/PostCodeSearch/PostCodeSearch.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/PromotedLinks/PromotedLinks.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/RadioCheckboxInput/RadioCheckboxInput.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/Row/Row.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/StaticMap/StaticMap.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/components/SummaryList/SummaryList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryAddToShortList/DirectoryAddToShortList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryDocumentList/DirectoryDocumentList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryService/DirectoryService.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryService/DirectoryServiceTransform.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryServiceList/DirectoryServiceList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/DirectoryShortList/DirectoryShortList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/ServiceContact/ServiceContact.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/directory/ServiceSocialLinks/ServiceSocialLinks.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/Accordion/Accordion.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/Cards/Cards.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/CouncilTaxAlphabeticalDirectory/CouncilTaxAlphabeticalDirectory.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/GoogleMap/GoogleMap.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/Image/Image.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/ImageAndText/ImageAndText.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/InquestSchedule/InquestSchedule.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/RoadworksList/RoadworksList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/SearchBox/SearchBox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/Video/Video.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/slices/WarningText/WarningText.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/AlertBanner/AlertBanner.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/AlertBannerService/AlertBannerService.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/BackLink/BackLink.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Breadcrumbs/Breadcrumbs.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Contents/Contents.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/ContentsNavigation/ContentsNavigation.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Footer/Footer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/FullWidthContainer/FullWidthContainer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Header/Header.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/HeroImage/HeroImage.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/HomeHero/HomeHero.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/NewsArticleFeaturedBlock/NewsArticleFeaturedBlock.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/NewsArticleList/NewsArticleList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/PageMain/PageMain.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/PromoBanner/PromoBanner.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/PromoBlock/PromoBlock.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/SearchResultsList/SearchResultsList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Searchbar/Searchbar.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/SectionLinks/SectionLinks.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/SectionLinksSidebar/SectionLinksSidebar.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/ServicesLinksBoxed/ServicesLinksBoxed.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/ServicesLinksList/ServicesLinksList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/SkipToMainContent/SkipToMainContent.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/library/structure/Summary/Summary.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/src/index.d.ts

@@ -1,43 +0,0 @@
-import Autocomplete from './library/components/Autocomplete/Autocomplete';
-import BackToTop from './library/components/BackToTop/BackToTop';
-import Button from './library/components/Button/Button';
-import BinCollection from './library/components/BinCollection/BinCollection';
-import DynamicIcon from './library/components/DynamicIcon/DynamicIcon';
-import Heading from './library/components/Heading/Heading';
-import HeadingWithIcon from './library/components/HeadingWithIcon/HeadingWithIcon';
-import Map from './library/components/Map/Map';
-import MapMarker from './library/components/MapMarker/MapMarker';
-import Pagination from './library/components/Pagination/Pagination';
-import CheckboxListFilter from './library/components/CheckboxListFilter/CheckboxListFilter';
-import DropDownFilter from './library/components/DropDownFilter/DropDownFilter';
-import PromotedLinks from './library/components/PromotedLinks/PromotedLinks';
-import StaticMap from './library/components/StaticMap/StaticMap';
-import TextInput from './library/components/TextInput/TextInput';
-export { Autocomplete, BackToTop, Button, BinCollection, DynamicIcon, Heading, HeadingWithIcon, Map, MapMarker, Pagination, CheckboxListFilter, DropDownFilter, PromotedLinks, StaticMap, TextInput, };
-import Accordion from './library/slices/Accordion/Accordion';
-import BlockQuote from './library/slices/BlockQuote/BlockQuote';
-import CallToAction from './library/slices/CallToAction/CallToAction';
-import CouncilTaxAlphabeticalDirectory from './library/slices/CouncilTaxAlphabeticalDirectory/CouncilTaxAlphabeticalDirectory';
-import Cards from './library/slices/Cards/Cards';
-import DownloadableFiles from './library/slices/DownloadableFiles/DownloadableFiles';
-import Divider from './library/slices/Divider/Divider';
-import GoogleMap from './library/slices/GoogleMap/GoogleMap';
-import Image from './library/slices/Image/Image';
-import ImageAndText from './library/slices/ImageAndText/ImageAndText';
-import InquestSchedule from './library/slices/InquestSchedule/InquestSchedule';
-import Promotions from './library/slices/Promotions/Promotions';
-import RoadworksList from './library/slices/RoadworksList/RoadworksList';
-import SearchBox from './library/slices/SearchBox/SearchBox';
-import Video from './library/slices/Video/Video';
-import WarningText from './library/slices/WarningText/WarningText';
-import WarningTextDisclaimer from './library/slices/WarningTextDisclaimer/WarningTextDisclaimer';
-export { Accordion, BlockQuote, CallToAction, Cards, CouncilTaxAlphabeticalDirectory, Divider, DownloadableFiles, GoogleMap, Image, ImageAndText, InquestSchedule, Promotions, RoadworksList, SearchBox, Video, WarningText, WarningTextDisclaimer, };
-export * from './library/structure/PageStructures';
-export { GDS_theme, north_theme, west_theme, lb_theme_north, lb_theme_west } from './themes/theme_generator';
-export { GlobalStyleReset } from './themes/GlobalStyleReset.jsx';
-import DirectoryService from './library/directory/DirectoryService/DirectoryService';
-import DirectoryServiceList from './library/directory/DirectoryServiceList/DirectoryServiceList';
-import DirectoryShortList from './library/directory/DirectoryShortList/DirectoryShortList';
-import { DirectoryShortListProvider, useDirectoryShortListContext } from './library/contexts/DirectoryShortListProvider/DirectoryShortListProvider';
-import DirectoryDocumentList from './library/directory/DirectoryDocumentList/DirectoryDocumentList';
-export { DirectoryService, DirectoryServiceList, DirectoryShortList, DirectoryShortListProvider, useDirectoryShortListContext, DirectoryDocumentList, };

package/build/src/library/components/AlphabeticalDirectory/AlphabeticalDirectory.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { AlphabeticalDirectoryProps } from "./AlphabeticalDirectory.types";
-declare const AlphabeticalDirectory: React.FC<AlphabeticalDirectoryProps>;
-export default AlphabeticalDirectory;

package/build/src/library/components/AlphabeticalDirectory/AlphabeticalDirectory.types.d.ts

@@ -1,26 +0,0 @@
-export interface AlphabeticalDirectoryProps {
-    /**
-     * What is this?
-     */
-    data: Array<AlphabeticalDirectoryLetterProps>;
-}
-export interface AlphabeticalDirectoryLetterProps {
-    /**
-     * What is this?
-     */
-    group: string;
-    /**
-     * Data to show in directory
-     */
-    children: Array<AlphabeticalDirectoryDataProps>;
-}
-export interface AlphabeticalDirectoryDataProps {
-    /**
-     * What is this?
-     */
-    title: string;
-    /**
-     * Data to show in directory
-     */
-    url: string;
-}

package/build/src/library/components/Autocomplete/Autocomplete.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { AutocompleteProps } from './Autocomplete.types';
-/**
- * Autocomplete input; Downshift wrapped around our Input component but with the capability to
- * accept a list of suggestions which are presented to the user as they type and which they can
- * click on to select. If viewing in Storybook, try typing the name of a fruit in the story examples.
- */
-declare const Autocomplete: React.FunctionComponent<AutocompleteProps>;
-export default Autocomplete;

package/build/src/library/components/Autocomplete/Autocomplete.storydata.d.ts

@@ -1,47 +0,0 @@
-export declare const EmptyWithHiddenLabelData: {
-    id: string;
-    name: string;
-    labelText: string;
-    hasHiddenLabel: boolean;
-    placeholder: string;
-    suggestions: string[];
-    minimumMatchLength: number;
-};
-export declare const NoMatchingSuggestionEnlargedWithHiddenLabelData: {
-    id: string;
-    name: string;
-    labelText: string;
-    value: string;
-    isLarge: boolean;
-    hasHiddenLabel: boolean;
-    placeholder: string;
-    suggestions: string[];
-    minimumMatchLength: number;
-};
-export declare const DisplayingSuggestionsData: {
-    id: string;
-    name: string;
-    value: string;
-    showSuggestions: boolean;
-    placeholder: string;
-    suggestions: string[];
-    minimumMatchLength: number;
-};
-export declare const DisplayingSuggestionsLargeData: {
-    id: string;
-    name: string;
-    value: string;
-    showSuggestions: boolean;
-    isLarge: boolean;
-    placeholder: string;
-    suggestions: string[];
-    minimumMatchLength: number;
-};
-export declare const SuggestionChosenData: {
-    id: string;
-    name: string;
-    value: string;
-    placeholder: string;
-    suggestions: string[];
-    minimumMatchLength: number;
-};

package/build/src/library/components/Autocomplete/Autocomplete.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/src/library/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,78 +0,0 @@
-export interface AutocompleteProps {
-    /**
-     * ID attribute of the Downshift control (subsidiary label/input/menu list get IDs based upon this)
-     */
-    id?: string;
-    /**
-     * Name attribute of the input control
-     */
-    name?: string;
-    /**
-     * Text content of the label for the control, if empty will use placeholder
-     */
-    labelText?: string;
-    /**
-     * If you want the label visually hidden (but available for screen readers)
-     */
-    hasHiddenLabel?: boolean;
-    /**
-     * Default value of the input control
-     */
-    value?: string;
-    /**
-     * Size of the input control
-     */
-    size?: number;
-    /**
-     * Placeholder within the input control
-     */
-    placeholder?: string;
-    /**
-     * For slightly larger display in some circumstances
-     */
-    isLarge?: boolean;
-    /**
-     * Set to true if there will be a button adjacent on the right (affects right-hand border radii)
-     */
-    hasAdjacentButton?: boolean;
-    /**
-     * Controls the input control's error state
-     */
-    isErrored?: boolean;
-    /**
-     * Text to display if input control is in error state
-     */
-    errorText?: string;
-    /**
-     * Array of suggestion strings
-     */
-    suggestions?: string[];
-    /**
-     * Controls whether suggestions are shown immediately (if value set also)
-     */
-    showSuggestions?: boolean;
-    /**
-     * The minimum number of characters that need to be typed before matches in the suggestions list are looked for
-     */
-    minimumMatchLength?: number;
-    /**
-     * The maximum number of matched suggestions shown in the dropdown list
-     */
-    maximumMatchesShown?: number;
-    /**
-     * Callback function for when a suggestion is selected
-     */
-    onSelect?: (selectedValue: string) => void;
-    /**
-     * Callback function for when input value changes
-     */
-    onChange?: (inputValue: string) => void;
-    /**
-     * Is the field required?
-     */
-    required?: boolean;
-    /**
-     * Is the autocomplete on a light background?
-     */
-    hasLightBackground?: boolean;
-}

package/build/src/library/components/BackToTop/BackToTop.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { BackToTopProps } from './BackToTop.types';
-declare const BackToTop: React.FunctionComponent<BackToTopProps>;
-export default BackToTop;

package/build/src/library/components/BackToTop/BackToTop.test.d.ts

@@ -1 +0,0 @@
-export {};