@nnc-digital/nnc-design-system 0.4.3

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

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

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

@@ -0,0 +1,26 @@
+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/library/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,9 @@
+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/library/components/Autocomplete/Autocomplete.storydata.d.ts

@@ -0,0 +1,47 @@
+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/library/components/Autocomplete/Autocomplete.types.d.ts

@@ -0,0 +1,70 @@
+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;
+}

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

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

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

@@ -0,0 +1,6 @@
+export interface BackToTopProps {
+    /**
+     * Should the back to top button be displayed?
+     */
+    isActive: boolean;
+}

package/build/library/components/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ButtonProps } from "./Button.types";
+/**
+ * Primary UI component for user interaction
+ */
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/build/library/components/Button/Button.types.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+export interface ButtonProps {
+    /**
+     * Is this the principal Button on the page?
+     */
+    primary?: boolean;
+    /**
+     * How large should the Button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button label
+     */
+    text?: string;
+    /**
+     * Button title optional
+     */
+    title?: string;
+    /**
+     * The URL for where to load when a user clicks on the Button
+     */
+    url: string;
+    /**
+     * Is the link to an external page?
+     */
+    isExternal?: boolean;
+    /**
+     * Is the button disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * onClick
+     */
+    onClick?: Function;
+    /**
+     * Optional override for the colour
+     */
+    colourOverride?: string;
+    /**
+     * Button contents
+     */
+    children?: React.ReactNode;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CardProps } from './Card.types';
+/**
+ * A card component with header, footer and content
+ */
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

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

@@ -0,0 +1,36 @@
+export interface CardProps {
+    /**
+     * Optional card header
+     */
+    header?: string | null;
+    /**
+     * The card content as a string of html
+     */
+    content?: string | null;
+    /**
+     * Optional large image
+     * */
+    imageLarge?: string | null;
+    /**
+     * Optional small image
+     */
+    imageSmall?: string | null;
+    /**
+     * Optional image alt text
+     */
+    imageAltText?: string | null;
+    /**
+     * The optional footer link
+     */
+    footerLink?: CardFooterLinkProps | null;
+}
+export interface CardFooterLinkProps {
+    /**
+     * The url for the link
+     */
+    url: string;
+    /**
+     * The text for the link
+     */
+    title: string;
+}

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

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

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

@@ -0,0 +1,36 @@
+export interface CheckboxListFilterProps {
+    /**
+     * What to show in the checkboxes
+     */
+    options: Array<CheckboxValsProps>;
+    /**
+     * Which fields are checked
+     */
+    checked: Array<string>;
+    /**
+     * The label text
+     */
+    label: string | null;
+    /**
+     * The hint text
+     */
+    hint: string | null;
+    /**
+     * The id for the hint aria-describedby
+     */
+    hintId?: string;
+    /**
+     * Should the legend be displayed
+     */
+    displayLegend: boolean;
+}
+export interface CheckboxValsProps {
+    /**
+     * Text shown in dropdown
+     */
+    title: string;
+    /**
+     * Filter sent to the all seeing server
+     */
+    value: string;
+}

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

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

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export interface ColumnProps {
+    /**
+     * Available column sizes for small screen
+     */
+    small?: 'full' | 'one-half' | 'one-third' | 'two-thirds' | 'one-quarter' | 'three-quarters' | 'auto';
+    /**
+     * Available column sizes for small screen
+     */
+    medium?: 'full' | 'one-half' | 'one-third' | 'two-thirds' | 'one-quarter' | 'three-quarters' | 'auto';
+    /**
+     * Available column sizes for small screen
+     */
+    large?: 'full' | 'one-half' | 'one-third' | 'two-thirds' | 'one-quarter' | 'three-quarters' | 'auto';
+    /**
+     * Should the column have padding
+     */
+    hasPadding?: boolean;
+    /**
+     * Option to display the border
+     * Should only used for demonstrating grid
+     */
+    hasBorder?: boolean;
+    /**
+     * Is the column within a list
+     */
+    isList?: boolean;
+    /**
+     * Any optional classes to add to the column
+     */
+    classes?: string;
+    /**
+     * The contents of the column
+     */
+    children?: React.ReactNode;
+}

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

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

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

@@ -0,0 +1,2 @@
+import { CustomSearchProps } from './CustomSearch.types';
+export declare const ExampleCustomSearchProps: CustomSearchProps;

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

@@ -0,0 +1,34 @@
+export interface CustomSearchProps {
+    /**
+     * Field name for search box
+     */
+    fieldName: string;
+    /**
+     * The search box id
+     */
+    id?: string;
+    /**
+     * The search box label
+     */
+    label: string;
+    /**
+     * Should the label be visible
+     */
+    hasHiddenLabel?: boolean;
+    /**
+     * Form submission method
+     */
+    method: string;
+    /**
+     * Where to submit the form
+     */
+    path: string;
+    /**
+     * Optional placeholder text
+     */
+    placeholder?: string | null;
+    /**
+     * The search button text
+     */
+    searchText: string;
+}

package/build/library/components/DropDownFilter/DropDownFilter.d.ts

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

package/build/library/components/DropDownFilter/DropDownFilter.types.d.ts

@@ -0,0 +1,32 @@
+export interface DropDownFilterProps {
+    /**
+     * ID of the select
+     */
+    id?: string;
+    /**
+     * What question are we asking?
+     */
+    label: string;
+    /**
+   * What to show in the dropdown
+   */
+    options: Array<DropDownFilterOptionsProps>;
+    /**
+     * Which value is auto selected
+     */
+    selected: string;
+    /**
+   * Hide label, but visible for screen readers (totally optional)
+   */
+    hideLabel?: boolean;
+}
+export interface DropDownFilterOptionsProps {
+    /**
+    * Text shown in dropdown
+    */
+    title: string;
+    /**
+     * Filter sent to the all seeing server
+     */
+    value: string;
+}

package/build/library/components/DropDownSelect/DropDownSelect.d.ts

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

package/build/library/components/DropDownSelect/DropDownSelect.types.d.ts

@@ -0,0 +1,36 @@
+export interface DropDownSelectProps {
+    /**
+     * ID for the dropdown
+     */
+    id?: string;
+    /**
+     * What question are we asking?
+     */
+    label: string;
+    /**
+     * Which value is auto selected
+     */
+    selected?: string;
+    /**
+     * What to show in the dropdown
+     */
+    options: Array<DropDownSelectOptionsProps>;
+    /**
+     * A function tfor what happnens if the select is changed (totally optional)
+     */
+    onChange?: (e: any) => void;
+    /**
+     * Hide label, but visible for screen readers (totally optional)
+     */
+    hideLabel?: boolean;
+}
+export interface DropDownSelectOptionsProps {
+    /**
+     * Text shown in dropdown
+     */
+    title: string;
+    /**
+     * Filter sent to the all seeing server
+     */
+    value: string;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DynamicIconProps } from './DynamicIcon.types';
+/**
+ * Display a dynamic service icon with hover effect
+ */
+declare const DynamicIcon: React.FunctionComponent<DynamicIconProps>;
+export default DynamicIcon;

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

@@ -0,0 +1,10 @@
+export interface DynamicIconProps {
+    /**
+     * What level of heading is this?
+     */
+    level?: number;
+    /**
+     * The icon
+     */
+    icon: string;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FileDownloadProps } from './FileDownload.types';
+/**
+ * A styled file download link
+ */
+declare const FileDownload: React.FunctionComponent<FileDownloadProps>;
+export default FileDownload;

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

@@ -0,0 +1,22 @@
+export interface FileDownloadProps {
+    /**
+     * The title of the file, not including the file extension
+     **/
+    title: string;
+    /**
+     * The type of file
+     **/
+    type: string;
+    /**
+     * A URL to download the file
+     **/
+    url: string;
+    /**
+     * The size of the file in KB or MB
+     **/
+    size: string;
+    /**
+     * Should the file be marked as archived
+     */
+    archived: boolean;
+}

package/build/library/components/FormButton/FormButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormButtonProps } from "./FormButton.types";
+/**
+ * Primary UI component for user interaction
+ */
+declare const FormButton: React.FC<FormButtonProps>;
+export default FormButton;

package/build/library/components/FormButton/FormButton.types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface FormButtonProps {
+    /**
+     * Button label
+     */
+    text: string;
+    /**
+     * Is this the principal Button on the page?
+     */
+    primary?: boolean;
+    /**
+     * How large should the Button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button type, defaults to submit
+     */
+    type?: string;
+    /**
+     * Is the button disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Is the button disabled?
+     */
+    onClick?: React.ReactNode | ((e: any) => void);
+}

package/build/library/components/FormWithLine/FormWithLine.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FormWithLineProps } from './FormWithLine.types';
+/**
+ * Form element - a container with a line on the left
+ */
+declare const FormWithLine: React.FC<FormWithLineProps>;
+export default FormWithLine;

package/build/library/components/FormWithLine/FormWithLine.types.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface FormWithLineProps {
+    /**
+     * The colour of the line
+     */
+    lineColour?: string;
+    /**
+     * An optional boolean to hide the line
+     */
+    hideLine?: boolean;
+    /**
+     * The role of the form
+     */
+    formRole?: string;
+    /**
+     * The method of the form
+     */
+    formMethod?: string;
+    /**
+     * The url of the form
+     */
+    formURL?: string;
+    /**
+     * An optional boolean to set the form as an error - if true, the lineColour will be replaced with red
+     */
+    isError?: boolean;
+    /**
+     * An optional string to explain the error
+     */
+    errorSummary?: string;
+    /**
+     * An optional function to be called on the submit of the form
+     */
+    onSubmit?: React.ReactNode | ((e: any) => void);
+    /**
+     * The FormWithLine contents
+     */
+    children: React.ReactNode;
+}

package/build/library/components/Heading/Heading.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { HeadingProps } from "./Heading.types";
+/**
+ * A heading of different levels
+ */
+declare const Heading: React.FC<HeadingProps>;
+export default Heading;

package/build/library/components/Heading/Heading.types.d.ts

@@ -0,0 +1,10 @@
+export interface HeadingProps {
+    /**
+     * What level of heading is this?
+     */
+    level?: number;
+    /**
+     * WThe text of the title
+     */
+    text: string;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HeadingWithIconProps } from './HeadingWithIcon.types';
+/**
+ * A Heading With an Icon - used for service landing pages
+ */
+declare const HeadingWithIcon: React.FunctionComponent<HeadingWithIconProps>;
+export default HeadingWithIcon;

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

@@ -0,0 +1,18 @@
+export interface HeadingWithIconProps {
+    /**
+     * What level of heading is this?
+     */
+    level?: number;
+    /**
+     * The text of the title
+     */
+    text: string;
+    /**
+     * The icon
+     */
+    icon: string;
+    /**
+     * Should there be a hover effect on the icon
+     */
+    hasHover?: boolean;
+}