@nnc-digital/nnc-design-system 1.0.0-alpha39 → 1.0.0-alpha40

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

@@ -0,0 +1,52 @@
+import { CustomSearchProps } from '../../components/CustomSearch/CustomSearch.types';
+import { BreadcrumbProp } from '../Breadcrumbs/Breadcrumbs.types';
+export interface HeroImageProps {
+    /**
+     * Headline text, optional. Intention to use page title if missing.
+     */
+    headline?: string;
+    /**
+     * Any text after the headline and before the call to action, optional
+     */
+    content?: string;
+    /**
+     * URL of the hero image (min 400pix high)
+     */
+    imageLarge?: string;
+    /**
+     * URL of the a smaller version of the image for lazy loading
+     */
+    imageSmall?: string;
+    /**
+     * URL of the hero video
+     */
+    heroVideoUrl?: string;
+    /**
+     * Optional alt text for the image - ideally the image should be decorative only and not require a long description
+     */
+    imageAltText?: string;
+    /**
+     * Optional call to action text
+     */
+    callToActionText?: string;
+    /**
+     * Optional call to action link URL
+     */
+    callToActionURL?: string;
+    /**
+     * Is the call to action a primary button
+     */
+    callToActionIsPrimary?: boolean;
+    /**
+     * Set to true to put the text and call to action on a white box, false to overlay on a darkened image
+     */
+    backgroundBox: boolean;
+    /**
+     * An optional breadcrumb. If not set then the breadcrumb is not shown
+     */
+    breadcrumb?: BreadcrumbProp;
+    /**
+     * An optional custom search
+     */
+    customSearch?: CustomSearchProps;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HomeHeroProps } from './HomeHero.types';
+/**
+ * The Hero that should appear at the top of the home page.
+ */
+declare const HomeHero: React.FunctionComponent<HomeHeroProps>;
+export default HomeHero;

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

@@ -0,0 +1,14 @@
+/**
+ * Example data for the HomeHero stories
+ */
+export declare const HomeHeroCommon: {
+    searchSuggestions: string[];
+    imagesArray: {
+        image1440x810: string;
+        image144x81: string;
+    }[];
+};
+export declare const HomeHeroPromotedLinks: {
+    title: string;
+    url: string;
+}[];

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

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

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

@@ -0,0 +1,54 @@
+export interface HomeHeroProps {
+    /**
+     * The line of text before the logo
+     */
+    topline?: string;
+    /**
+     * URL of an alternative logo to override the preset ones (520 x 150 px)
+     */
+    imageOverrideLogo?: string;
+    /**
+     * Alt text for overridden logo
+     */
+    imageOverrideLogoAltText?: string;
+    /**
+    * The line of text after the logo
+    */
+    strapline?: string;
+    /**
+     * The images for the hero, minimum of one
+     */
+    imagesArray: Array<HeroImageProp>;
+    /**
+     * The main promoted links, an array that should be from 1-4, preferably 3
+     */
+    promotedLinksArray: Array<PromotedLinkProp>;
+    /**
+     * Array of suggestion strings for autocomplete search input
+     */
+    searchSuggestions?: string[];
+}
+export interface HeroImageProp {
+    /**
+     * The url of the image
+     */
+    image1440x810: string;
+    /**
+     * The url of the image in 10x smaller for lazy loading
+     */
+    image144x81: string;
+    /**
+     * Optional alt text for the image - this should only be included if the image contains content that is important to users and not purely decorative
+     */
+    imageAltText?: string;
+}
+export interface PromotedLinkProp {
+    /**
+     * The title of the link
+     */
+    title: string;
+    /**
+     * The url of the link
+     */
+    url: string;
+}

package/build/library/structure/MaxWidthContainer/MaxWidthContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MaxWidthContainerProps } from './MaxWidthContainer.types';
+/**
+ * A container for holding the main content of a page
+ */
+declare const MaxWidthContainer: React.FC<MaxWidthContainerProps>;
+export default MaxWidthContainer;

package/build/library/structure/MaxWidthContainer/MaxWidthContainer.types.d.ts

@@ -0,0 +1,22 @@
+export interface MaxWidthContainerProps {
+    /**
+     * Any unique class names to apply to the page container outer div
+     */
+    classes?: string;
+    /**
+     * Remove background colour
+     */
+    noBackground?: boolean;
+    /**
+     * Remove bottom padding
+     */
+    noPadding?: boolean;
+    /**
+     * Allow overflow to be visible in inner div (only makes sense with padding allowed)
+     */
+    overflowVisible?: boolean;
+    /**
+     * The MaxWidthContainer contents
+     */
+    children?: React.ReactNode;
+}

package/build/library/structure/MemorialHero/MemorialHero.d.ts

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

package/build/library/structure/MemorialHero/MemorialHero.types.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface MemorialHeroProps {
+    /**
+   * Full sized image
+   */
+    src: string;
+    /**
+     * smaller version as a placeholder for lazy loading
+     */
+    placeholder: string;
+    /**
+     * Alt text for hero
+     */
+    alt: string;
+    /**
+     * The name of the sites theme
+     */
+    theme: object;
+    /**
+     * Pass through any children to be shown
+     */
+    children: React.ReactNode;
+    /**
+     * Anthing in this section will be themed as defined
+     */
+    councilServices: React.ReactNode;
+}

package/build/library/structure/NewsArticleDate/NewsArticleDate.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NewsArticleDateProps } from './NewsArticleDate.types';
+/**
+ * The date of the news article
+ */
+declare const NewsArticleDate: React.FunctionComponent<NewsArticleDateProps>;
+export default NewsArticleDate;

package/build/library/structure/NewsArticleDate/NewsArticleDate.types.d.ts

@@ -0,0 +1,10 @@
+export interface NewsArticleDateProps {
+    /**
+     * The text in the hint
+     */
+    text: string;
+    /**
+     * The format for the date
+     */
+    format?: string;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NewsArticleFeaturedBlockProps } from './NewsArticleFeaturedBlock.types';
+/**
+ * Block displaying up to 9 news article tiles, with image, title and date for each
+ */
+declare const NewsArticleFeaturedBlock: React.FunctionComponent<NewsArticleFeaturedBlockProps>;
+export default NewsArticleFeaturedBlock;

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

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

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

@@ -0,0 +1,23 @@
+export interface NewsArticleFeaturedBlockProps {
+    /**
+     * Array of news article data
+     */
+    articles: Array<NewsArticleProps>;
+    /**
+     * Optionally do not display the title
+     */
+    withoutTitle?: boolean;
+    /**
+     * Optionally add a button to view all news
+     */
+    viewAllLink?: string;
+}
+export interface NewsArticleProps {
+    id: string;
+    url: string;
+    title: string;
+    date: number;
+    image720x405: string;
+    image72x41: string;
+    imageAltText?: string;
+}

package/build/library/structure/NewsArticleFilterAccordion/NewsArticleFilterAccordion.d.ts

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

package/build/library/structure/NewsArticleFilterAccordion/NewsArticleFilterAccordion.types.d.ts

@@ -0,0 +1,7 @@
+import { AccordionSectionProps } from '../../slices/Accordion/Accordion.types';
+export interface NewsArticleFilterAccordionProps {
+    /**
+     * What is this?
+     */
+    sections: Array<AccordionSectionProps>;
+}

package/build/library/structure/NewsArticleImage/NewsArticleImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NewsArticleImageProps } from './NewsArticleImage.types';
+/**
+ * An image for a news article
+ */
+declare const NewsArticleImage: React.FunctionComponent<NewsArticleImageProps>;
+export default NewsArticleImage;

package/build/library/structure/NewsArticleImage/NewsArticleImage.types.d.ts

@@ -0,0 +1,18 @@
+export interface NewsArticleImageProps {
+    /**
+     * The url of the image
+     */
+    image1440x810: string;
+    /**
+     * The url of the image in 10x smaller for lazy loading
+     */
+    image144x81: string;
+    /**
+     * Optional alt text for the image - this should only be included if the image contains content that is important to users and not purely decorative
+     */
+    imageAltText?: string;
+    /**
+     * An optional caption to be presented underneath the image
+     */
+    imageCaption?: string;
+}

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

@@ -0,0 +1,7 @@
+import { NewsArticleListProps } from './NewsArticleList.types';
+export declare const NewsArticleFilters: {
+    articleType: any;
+    services: any;
+    searchTerm: any;
+};
+export declare const newsArticleData: NewsArticleListProps;

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

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

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

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

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

@@ -0,0 +1,28 @@
+export interface NewsArticleListProps {
+    /**
+     * Array of results
+     */
+    results: Array<NewsArticleProps>;
+    /**
+     * The total number of results
+     */
+    totalResults?: number;
+    /**
+     * The current page number
+     */
+    pageNumber?: number;
+    /**
+     * What we're currently sorting by
+     */
+    sortBy?: string;
+}
+export interface NewsArticleProps {
+    id: string;
+    title: string;
+    excerpt: string;
+    date: number;
+    image720x405: string;
+    image72x41: string;
+    imageAltText?: string;
+    url: string;
+}

package/build/library/structure/NewsArticleListHeader/NewsArticleListHeader.d.ts

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

package/build/library/structure/NewsArticleListHeader/NewsArticleListHeader.types.d.ts

@@ -0,0 +1,6 @@
+import { SortByValsProps } from './../../components/SortBy/SortBy.types';
+export interface NewsArticleListHeaderProps {
+    totalResults: number;
+    sortBy: string;
+    sortByOptions: Array<SortByValsProps>;
+}

package/build/library/structure/NewsArticleOldBanner/NewsArticleOldBanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NewsArticleOldBannerProps } from './NewsArticleOldBanner.types';
+/**
+ * Displayed when a news article is older than 1 year
+ */
+declare const NewsArticleOldBanner: React.FunctionComponent<NewsArticleOldBannerProps>;
+export default NewsArticleOldBanner;

package/build/library/structure/NewsArticleOldBanner/NewsArticleOldBanner.types.d.ts

@@ -0,0 +1,2 @@
+export interface NewsArticleOldBannerProps {
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PageMainProps } from './PageMain.types';
+/**
+ * A container for holding the main content of a page
+ */
+declare const PageMain: React.FunctionComponent<PageMainProps>;
+export default PageMain;

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

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

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

@@ -0,0 +1,14 @@
+export interface PageMainProps {
+    /**
+     * Any unique class names to apply to the page container
+     */
+    classes?: string;
+    /**
+     * Should the paragraph text be full width?
+     */
+    fullWidthText?: boolean;
+    /**
+     * The PageMain contents
+     */
+    children?: React.ReactNode;
+}

package/build/library/structure/PageSidebar/PageSidebar.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PageSidebarProps } from "./PageSidebar.types";
+/**
+ * A container for holding the main content of a page
+ */
+declare const PageSidebar: React.FC<PageSidebarProps>;
+export default PageSidebar;

package/build/library/structure/PageSidebar/PageSidebar.types.d.ts

@@ -0,0 +1,6 @@
+export interface PageSidebarProps {
+    /**
+     * All children content within the page
+     */
+    children: React.ReactNode;
+}

package/build/library/structure/PageStructures.d.ts

@@ -0,0 +1,42 @@
+import AccessibleLinks from './AccessibleLinks/AccessibleLinks';
+import AlertBanner from './AlertBanner/AlertBanner';
+import AlertBannerService from './AlertBannerService/AlertBannerService';
+import BackLink from './BackLink/BackLink';
+import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
+import Contents from './Contents/Contents';
+import ContentsNavigation from './ContentsNavigation/ContentsNavigation';
+import CookieBanner from './CookieBanner/CookieBanner';
+import DisplayDate from './DisplayDate/DisplayDate';
+import Footer from './Footer/Footer';
+import FullWidthContainer from './FullWidthContainer/FullWidthContainer';
+import Header from './Header/Header';
+import HeroImage from './HeroImage/HeroImage';
+import HomeHero from './HomeHero/HomeHero';
+import MaxWidthContainer from './MaxWidthContainer/MaxWidthContainer';
+import MemorialHero from './MemorialHero/MemorialHero';
+import NewsArticleDate from './NewsArticleDate/NewsArticleDate';
+import NewsArticleFeaturedBlock from './NewsArticleFeaturedBlock/NewsArticleFeaturedBlock';
+import NewsArticleFilterAccordion from './NewsArticleFilterAccordion/NewsArticleFilterAccordion';
+import NewsArticleImage from './NewsArticleImage/NewsArticleImage';
+import NewsArticleList from './NewsArticleList/NewsArticleList';
+import NewsArticleListHeader from './NewsArticleListHeader/NewsArticleListHeader';
+import NewsArticleOldBanner from './NewsArticleOldBanner/NewsArticleOldBanner';
+import PageMain from './PageMain/PageMain';
+import PageSidebar from './PageSidebar/PageSidebar';
+import PageTitle from './PageTitle/PageTitle';
+import PageWithSidebarContainer from './PageWithSidebarContainer/PageWithSidebarContainer';
+import PageWrapper from './PageWrapper/PageWrapper';
+import PhaseBanner from './PhaseBanner/PhaseBanner';
+import PromoBanner from './PromoBanner/PromoBanner';
+import PromoBlock from './PromoBlock/PromoBlock';
+import Searchbar from './Searchbar/Searchbar';
+import SearchResultsList from './SearchResultsList/SearchResultsList';
+import SectionLinks from './SectionLinks/SectionLinks';
+import SectionLinksMobileContents from './SectionLinksMobileContents/SectionLinksMobileContents';
+import SectionLinksSidebar from './SectionLinksSidebar/SectionLinksSidebar';
+import ServiceLinksBoxed from './ServicesLinksBoxed/ServicesLinksBoxed';
+import ServicesLinksList from './ServicesLinksList/ServicesLinksList';
+import SignpostLinks from './SignpostLinks/SignpostLinks';
+import SkipToMainContent from './SkipToMainContent/SkipToMainContent';
+import Summary from './Summary/Summary';
+export { AccessibleLinks, AlertBanner, AlertBannerService, BackLink, Breadcrumbs, Contents, ContentsNavigation, CookieBanner, DisplayDate, Footer, FullWidthContainer, Header, HeroImage, HomeHero, MaxWidthContainer, MemorialHero, NewsArticleDate, NewsArticleFeaturedBlock, NewsArticleFilterAccordion, NewsArticleImage, NewsArticleList, NewsArticleListHeader, NewsArticleOldBanner, PhaseBanner, PageMain, PageSidebar, PageTitle, PageWithSidebarContainer, PageWrapper, PromoBanner, PromoBlock, Searchbar, SearchResultsList, SectionLinks, SectionLinksMobileContents, SectionLinksSidebar, ServiceLinksBoxed, ServicesLinksList, SignpostLinks, SkipToMainContent, Summary, };

package/build/library/structure/PageTitle/PageTitle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PageTitleProps } from "./PageTitle.types";
+/**
+ * A container for holding the main content of a page
+ */
+declare const PageTitle: React.FC<PageTitleProps>;
+export default PageTitle;

package/build/library/structure/PageTitle/PageTitle.types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface PageTitleProps {
+    /**
+     * Any unique class names to apply to the page container
+     */
+    classes?: string;
+    /**
+     * The PageTitle contents
+     */
+    children?: React.ReactNode;
+}

package/build/library/structure/PageWithSidebarContainer/PageWithSidebarContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PageWithSidebarContainerProps } from './PageWithSidebarContainer.types';
+/**
+ * A container for holding the main content of a page
+ */
+declare const PageWithSidebarContainer: React.FunctionComponent<PageWithSidebarContainerProps>;
+export default PageWithSidebarContainer;

package/build/library/structure/PageWithSidebarContainer/PageWithSidebarContainer.types.d.ts

@@ -0,0 +1,10 @@
+export interface PageWithSidebarContainerProps {
+    /**
+     * Rare occassions trhe sidebar is on the left
+     */
+    sidebarLeft?: boolean;
+    /**
+     * All children content within the page
+     */
+    children: React.ReactNode;
+}

package/build/library/structure/PageWrapper/PageWrapper.d.ts

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

package/build/library/structure/PageWrapper/PageWrapper.types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface PageWrapperProps {
+    /**
+     *
+     */
+    children: React.ReactNode;
+    /**
+     * which background colour from the theme to choose
+     */
+    colour: string;
+}

package/build/library/structure/PhaseBanner/PhaseBanner.d.ts

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

package/build/library/structure/PhaseBanner/PhaseBanner.types.d.ts

@@ -0,0 +1,3 @@
+export interface PhaseBannerProps {
+    isHome?: boolean;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PromoBannerProps } from './PromoBanner.types';
+/**
+ * Promotional banner used as the first wide line in a promotional block,
+ * incorporated within PromoBlock use.
+ */
+declare const PromoBanner: React.FunctionComponent<PromoBannerProps>;
+export default PromoBanner;

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

@@ -0,0 +1,9 @@
+export declare const PromoBannerContentText = "We\u2019re looking for people to do this amazing thing in an amazing manner, during an amazing time of amazingness.";
+export declare const PromoBannerContent: JSX.Element;
+export declare const PromoBannerData: {
+    title: string;
+    ctaUrl: string;
+    ctaText: string;
+    image1440x810: string;
+    image144x81: string;
+};

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

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

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

@@ -0,0 +1,26 @@
+export interface PromoBannerProps {
+    /**
+     * Title of the promo banner
+     */
+    title: string;
+    /**
+     * Call to action text
+     */
+    ctaText: string;
+    /**
+     * Call to action url
+     */
+    ctaUrl: string;
+    /**
+     * The url of the image
+     */
+    image1440x810: string;
+    /**
+     * The url of the image in 10x smaller for lazy loading
+     */
+    image144x81: string;
+    /**
+     * The children used for the text section of the promo banner
+     */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PromoBlockProps } from './PromoBlock.types';
+/**
+ * Promotional campaign block, showing a tile for each campaign, similar to news article featured block.
+ * Note that the main promotional campaign is to be displayed above these in a PromoBanner.
+ */
+declare const PromoBlock: React.FunctionComponent<PromoBlockProps>;
+export default PromoBlock;

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

@@ -0,0 +1,5 @@
+import { PromoProps } from './PromoBlock.types';
+/**
+ * Example data for the PromoBlock stories
+ */
+export declare const PromoBlocksData: Array<PromoProps>;

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

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

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

@@ -0,0 +1,36 @@
+export interface PromoBlockProps {
+    /**
+     * The promo tiles to show
+     */
+    promos: Array<PromoProps>;
+}
+export interface PromoProps {
+    /**
+     * The title of the promo
+     */
+    title: string;
+    /**
+     * Basic HTML content (no embedded slices) for the promo main body
+     */
+    content: string;
+    /**
+     * Text for the call to action link
+     */
+    callToActionText: string;
+    /**
+     * URL for the call to action link
+     */
+    callToActionURL: string;
+    /**
+     * Medium image (larger only used by main promo banner)
+     */
+    imageMedium: string;
+    /**
+     * Small placeholder image for lazy loading medium image
+     */
+    imageSmall: string;
+    /**
+     * Alt text for image
+     */
+    imageAltText?: string;
+}

package/build/library/structure/SearchHeader/SearchHeader.d.ts

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