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

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

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

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

@@ -0,0 +1,34 @@
+export declare const addressMockData: {
+    "NN16 9XR": {
+        recordCount: number;
+        data: {
+            UPRN: string;
+            USRN: string;
+            Address: string;
+            HouseName: any;
+            AdditionalHouseName: any;
+            Street: string;
+            Locality: string;
+            Town: string;
+            Postcode: any;
+            Longitude: number;
+            Latitude: number;
+            UserDefinedAddress: string;
+            CalculatedAddress: any;
+        }[];
+    };
+};
+export declare const calendarEventMockData: {
+    "100031057713": {
+        id: number;
+        title: string;
+        subject: string;
+        start: string;
+        end: any;
+        link: string;
+        color: string;
+        textColor: string;
+        complete: boolean;
+        url: string;
+    }[];
+};

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

@@ -0,0 +1,68 @@
+import { AddressProps, SovereignProps, UnitaryProps } from '../../helpers/api-helpers';
+export interface BinCollectionProps {
+    /**
+     * Title of bin collection search
+     */
+    title?: string;
+    /**
+     * Error in the form
+     */
+    formError?: boolean;
+    /**
+     * Link to send the user to another related service page or resource.
+     */
+    relatedServiceLink?: string;
+    /**
+     * Modifies search behavior based on the specific area (e.g., different collection zones or services)
+     */
+    isSpecificArea?: boolean;
+    /**
+     * graphqlApiEndpoint of the Drupal application API
+     */
+    graphqlApiEndpoint?: string;
+    isLoading?: boolean;
+    errorText?: string;
+    addressOptions?: AddressOption[];
+    calendarEvents?: Record<string, Date[]>;
+    onAddressChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    onFormSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    resetForm?: () => void;
+}
+export interface AddressOption {
+    /**
+     * The title of the address
+     */
+    title: string;
+    /**
+     * The uprn value
+     */
+    value: string;
+    /**
+     * The address as a one line string
+     */
+    info?: string;
+}
+export interface AddressOptionInfoProps {
+    /**
+     * An array of sovereigns
+     */
+    sovereigns: SovereignProps[];
+    /**
+     * An array of Unitaries
+     */
+    unitaries: UnitaryProps[];
+    /**
+     * An array of addresses for the postcode
+     */
+    addresses: AddressProps[];
+}
+export interface CalendarEvent {
+    /**
+     * The type of the event
+     */
+    type: string;
+    /**
+     * The date value
+     */
+    date: string;
+}

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.FunctionComponent<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.test.d.ts

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

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.test.d.ts

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

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.test.d.ts

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

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

@@ -0,0 +1,35 @@
+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.test.d.ts

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

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.test.d.ts

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

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.test.d.ts

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

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,26 @@
+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.test.d.ts

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

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;
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+export interface HeadingWithIconLinkProps {
+    /**
+     * The key for the icon
+     */
+    iconKey?: string;
+    /**
+     * The link for the icons
+     */
+    link: string;
+    /**
+     * The title text for the heading
+     */
+    title: string;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { HintTextProps } from "./HintText.types";
+/**
+ * Form element - hint text
+ */
+declare const HintText: React.FC<HintTextProps>;
+export default HintText;

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

@@ -0,0 +1,6 @@
+export interface HintTextProps {
+    /**
+     * The text in the hint
+     */
+    text: string;
+}