@cruk/cruk-react-components 1.2.0 → 1.2.1

package/lib/components/Icon/iconList.d.ts

@@ -0,0 +1,268 @@
+export declare const ICONS: {
+    calendar: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    check: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    checkCircle: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    chevronLeft: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    chevronRight: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    chevronRightBold: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    cog: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    copy: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    clock: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    close: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    comment: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    delete: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    edit: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    envelope: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    envelopeSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    eventName: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    facebook: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    facebookRound: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    facebookSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    flag: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    heartbeat: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    link: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    linkedin: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    linkedinSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    mapMarker: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    messengerSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    move: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    moveDown: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    moveLeft: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    moveRight: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    moveUp: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    poundSign: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    question: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    rotateLeft: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    rotateRight: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    search: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    selectImage: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    settings: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    share: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    shareSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    steps: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    sync: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    team: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    twitter: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    twitterSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    uploadPhoto: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    userLock: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    view: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    walk: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    whatsapp: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    whatsappSquare: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    zoomIn: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+    zoomOut: {
+        paths: string[];
+        width: string;
+        height: string;
+    };
+};
+export default ICONS;

package/lib/components/Icon/index.d.ts

@@ -0,0 +1,22 @@
+import { ICONS } from "./iconList";
+export declare const ICON_NAMES: {
+    [key: string]: string;
+};
+export declare type IconProps = {
+    /** name defines the visible icon */
+    name: keyof typeof ICONS;
+    /** color of icon, inherits current text colour by default */
+    color?: string;
+    /** size of ion 1.1em by default */
+    size?: string;
+};
+/**
+ * The Icon component displays an icon glyph as an `<svg>` element.
+ *
+ * System icons are designed to be simple, modern, friendly, and sometimes quirky.
+ * Each icon is reduced to its minimal form, expressing essential characteristics.
+ *
+ * This component has been deprecated in favour of IconFa which is more tree-shakable
+ * */
+declare const Icon: ({ name, color, size, ...rest }: IconProps) => JSX.Element;
+export default Icon;

package/lib/components/Icon/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledIcon: import("styled-components").StyledComponent<"svg", any, {
+    color?: string | undefined;
+    size?: string | undefined;
+}, never>;
+export default StyledIcon;

package/lib/components/IconFa/IconFa.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from "@storybook/react";
+import { IconFaProps } from ".";
+declare const _default: Meta<IconFaProps>;
+export default _default;
+export declare const IconDefault: Story<IconFaProps>;
+export declare const SU2CIcon: Story<IconFaProps>;

package/lib/components/IconFa/IconFa.test.cypress.d.ts

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

package/lib/components/IconFa/index.d.ts

@@ -0,0 +1,16 @@
+import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+export declare type IconFaProps = {
+    /** imported icon definition from "@fortawesome/free-solid-svg-icons" or "@fortawesome/free-brands-svg-icons" */
+    faIcon: IconDefinition;
+    /** color of icon, inherits current text colour by default */
+    color?: string;
+    /** size of ion 1.1em by default */
+    size?: string;
+};
+/**
+ * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.
+ *
+ * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size
+ * */
+declare const IconFa: ({ faIcon, color, size, ...rest }: IconFaProps) => JSX.Element;
+export default IconFa;

package/lib/components/IconFa/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledIcon: import("styled-components").StyledComponent<"svg", any, {
+    color?: string | undefined;
+    size?: string | undefined;
+}, never>;
+export default StyledIcon;

package/lib/components/InfoBox/InfoBox.stories.d.ts

@@ -0,0 +1,7 @@
+import { Story, Meta } from "@storybook/react";
+import { InfoBoxProps } from ".";
+declare const _default: Meta<InfoBoxProps>;
+export default _default;
+export declare const InfoBoxDefault: Story;
+export declare const TemplateWithCustomBackground: Story;
+export declare const InfoBoxWithChildren: Story;

package/lib/components/InfoBox/index.d.ts

@@ -0,0 +1,28 @@
+import { FunctionComponent, HTMLAttributes, Ref, ReactNode, ElementType } from "react";
+import { SpacingProps } from "../Spacing";
+export declare type InfoBoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+    /** background color of wrapping element, this will add default padding */
+    backgroundColor?: string;
+    /** Title text */
+    titleText: string;
+    /** Title text colour */
+    titleTextColor?: string;
+    /** Description text */
+    descriptionText: string;
+    /** Description text colour */
+    descriptionTextColor?: string;
+    /** Space for extra element underneath description */
+    children?: ReactNode;
+    /** Icon in left column usually 2em squared */
+    icon?: ReactNode;
+    ref?: Ref<HTMLElement>;
+    /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a "span" for example */
+    as?: ElementType;
+};
+/**
+   * Box is used to wrap other components to add margin and padding. The values will be in the t-shirt sizes specified in the theme sizes.
+  
+  The more specific the the target the higher priority the css will have. For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.
+   */
+declare const InfoBox: FunctionComponent<InfoBoxProps>;
+export default InfoBox;

package/lib/components/InfoBox/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ThemeType } from "../../types";
+import { BoxProps } from "../Box";
+export declare const StyledInfoBox: import("styled-components").StyledComponent<import("react").FunctionComponent<BoxProps>, any, import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    backgroundColor?: string | undefined;
+    css?: string | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
+    children?: import("react").ReactNode;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    css?: string | undefined;
+    theme: ThemeType;
+}, never>;
+export default StyledInfoBox;

package/lib/components/LabelWrapper/index.d.ts

@@ -0,0 +1,19 @@
+import { LabelHTMLAttributes, ReactNode } from "react";
+declare type LabelWrapperProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    /** label text */
+    label: string;
+    /** hint text or react element in it's place */
+    hintText?: ReactNode;
+    /** when required (required) appears in label */
+    required?: boolean;
+    /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
+    hideRequiredInLabel?: boolean;
+    children?: ReactNode;
+};
+export declare const LabelWrapper: {
+    ({ label, hintText, required, hideRequiredInLabel, children, ...otherHTMLLabelProps }: LabelWrapperProps): JSX.Element;
+    defaultProps: {
+        required: boolean;
+    };
+};
+export default LabelWrapper;

package/lib/components/LabelWrapper/styles.d.ts

@@ -0,0 +1,6 @@
+import { ThemeType } from "../../types";
+export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"span", any, {
+    hasHintText: boolean;
+    theme: ThemeType;
+}, never>;

package/lib/components/LegendWrapper/LegendWrapper.stories.d.ts

@@ -0,0 +1,10 @@
+import { Story, Meta } from "@storybook/react";
+import { LegendWrapperProps } from ".";
+declare const _default: Meta<LegendWrapperProps>;
+export default _default;
+export declare const LegendWrapperDefault: Story<LegendWrapperProps>;
+export declare const LegendWrapperRadio: Story<LegendWrapperProps>;
+export declare const LegendWrapperRadioError: Story<LegendWrapperProps>;
+export declare const LegendWrapperCheckbox: Story<LegendWrapperProps>;
+export declare const LegendWrapperErrorWithCheckbox: Story<LegendWrapperProps>;
+export declare const SU2CLegendWrapperRadioError: Story<LegendWrapperProps>;

package/lib/components/LegendWrapper/LegendWrapper.test.cypress.d.ts

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

package/lib/components/LegendWrapper/index.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from "react";
+export declare type LegendWrapperProps = HTMLAttributes<HTMLLegendElement> & {
+    children?: ReactNode;
+    /** legend text */
+    legendText: string;
+    /** error message text  */
+    errorMessage?: string;
+    /** flag for error styling */
+    hasError?: boolean;
+    /** when required (required) appears in legend */
+    required?: boolean;
+    /** hint text */
+    hintText?: ReactNode;
+};
+/**
+ * LegendWrapper allows the user to add an outer label for a checkbox / group of checkboxes / radio buttons or a group of radio buttons.
+ *
+ * hasError and errorMessage props are just props that can be passed into the component.
+ * There is no functionality checking if the children are valid/required etc this functionality will be needed to ne added outside of this component.
+ */
+export declare const LegendWrapper: ({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps) => JSX.Element;
+export default LegendWrapper;

package/lib/components/LegendWrapper/styles.d.ts

@@ -0,0 +1,12 @@
+import { ThemeType } from "../../types";
+declare type StyledFieldsetProps = {
+    hasError?: boolean;
+    theme: ThemeType;
+    hasHintText?: boolean;
+};
+export declare const LegendSpan: import("styled-components").StyledComponent<"span", any, {
+    hasHintText: boolean;
+    theme: ThemeType;
+}, never>;
+export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
+export {};

package/lib/components/Link/Link.stories.d.ts

@@ -0,0 +1,11 @@
+import { Story, Meta } from "@storybook/react";
+import { LinkProps } from ".";
+declare const _default: Meta<LinkProps>;
+export default _default;
+export declare const Default: Story<LinkProps>;
+export declare const Primary: Story<LinkProps>;
+export declare const Secondary: Story<LinkProps>;
+export declare const WithImage: Story<LinkProps>;
+export declare const SU2CDefault: Story<LinkProps>;
+export declare const SU2CPrimary: Story<LinkProps>;
+export declare const SU2CSecondary: Story<LinkProps>;

package/lib/components/Link/Link.test.cypress.d.ts

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

package/lib/components/Link/index.d.ts

@@ -0,0 +1,26 @@
+import React, { AnchorHTMLAttributes, Ref, ElementType, ReactNode } from "react";
+import { TextProps } from "../Text";
+export declare type LinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
+    /** link text hover colour */
+    textHoverColor?: string;
+    /** link appearance variant, undefined is a standarding link withing a text block */
+    appearance?: "primary" | "secondary";
+    /** styled-components polymorphism where you can use the styling of a link but convert to another element like a button */
+    ref?: Ref<HTMLElement>;
+    /** styled-component polymorphic feature so you take the styling of a link and cast the component to be a "span" for example */
+    as?: ElementType;
+    /** Component children */
+    children?: ReactNode;
+};
+/** Links are for wrapping plain text or elements to create clickable link.
+ * This is to be treated as an anchor tag with the addition of the Text component API.
+ * This component contains standard Anchor tag props like 'href' and 'target', but it also contains Text component props like 'textColor' and 'textAlign'.
+ *
+ * A link should really only be used for navigation to take a user to as new location.
+ * The onClick handler can be use for more complicated scenarios.
+ *
+ * If you want something that looks like a link but behaves like a button ie. nothing to do with navigation, please consider using Link with as='button'
+ *
+ * If you want something that looks like a button but behaves like a link ie. it takes the user to a new location, please consider using Button and simply passing it an href, it will automatically turn into a link. */
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginVertical" | "marginHorizontal" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingVertical" | "paddingHorizontal" | "textColor" | "textAlign" | "textSize" | "textWeight" | "as" | "wordBreak" | "overflowWrap" | "textHoverColor" | "appearance"> & React.RefAttributes<HTMLElement>>;
+export default Link;

package/lib/components/Link/styles.d.ts

@@ -0,0 +1,18 @@
+import { AnchorHTMLAttributes } from "react";
+import { TextProps } from "../Text";
+import { ThemeType } from "../../types";
+export declare const ChevyWithLevee: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, {}, never>;
+export declare const StyledLink: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps>, any, AnchorHTMLAttributes<HTMLElement> & import("../Spacing").SpacingProps & import("react").HTMLAttributes<HTMLElement> & {
+    textColor?: string | undefined;
+    textAlign?: "left" | "right" | "center" | "justify" | undefined;
+    textSize?: import("../../types").FontSizeType | undefined;
+    textWeight?: number | undefined;
+    as?: any;
+    wordBreak?: import("../../types").WordBreakType | undefined;
+    overflowWrap?: import("../../types").OverflowWrapType | undefined;
+    ref?: import("react").Ref<HTMLElement> | undefined;
+} & {
+    theme: ThemeType;
+    appearance?: "primary" | "secondary" | undefined;
+    textHoverColor?: string | undefined;
+}, never>;

package/lib/components/Loader/Loader.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from "@storybook/react";
+declare const _default: Meta<{}>;
+export default _default;
+export declare const LoaderDefault: Story;
+export declare const SU2CLoader: Story;

package/lib/components/Loader/Loader.test.cypress.d.ts

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

package/lib/components/Loader/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * Loaders are used after some user interaction that we assume will take some time to complete. They inform the user that their request is beeing processed and that they should wait.
+ */
+declare const Loader: () => JSX.Element;
+export default Loader;

package/lib/components/Loader/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from "@storybook/react";
+import { ModalProps } from ".";
+declare const _default: Meta<ModalProps>;
+export default _default;
+export declare const ModalDefault: Story<ModalProps>;
+export declare const SU2CModal: Story<ModalProps>;

package/lib/components/Modal/Modal.test.cypress.d.ts

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

package/lib/components/Modal/index.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { SpacingProps } from "../Spacing";
+export declare type ModalProps = SpacingProps & {
+    /** modal name used for aria-label */
+    modalName: string;
+    /** callback function called on modal close */
+    closeFunction: () => void;
+    /** flag to reveal close button with cross in the top right of modal */
+    showCloseButton?: boolean;
+    /** set max width of modal */
+    maxWidth?: string;
+    /** set space from top of view port that modal appears */
+    top?: string;
+    /** background color of dialogue */
+    backgroundColor?: string;
+    /** children components  */
+    children?: ReactNode;
+    /** width of modal */
+    width?: string;
+};
+/**
+ *
+ * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.
+ * ## How modals work
+ * - Modals are positioned over everything else in the document and remove scroll from the "body" tag so that modal content scrolls instead.
+ * - Modals are unmounted when closed.
+ * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
+ * ## Accessibility
+ * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
+ */
+declare const Modal: ({ modalName, closeFunction, showCloseButton, maxWidth, top, backgroundColor, children, width, margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft, padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft, }: ModalProps) => JSX.Element;
+export default Modal;

package/lib/components/Modal/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ThemeType } from "../../types";
+declare type ContentProps = {
+    backgroundColor?: string;
+    theme: ThemeType;
+    top: string;
+    width: string;
+    maxWidth: string;
+};
+export declare const Background: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Box").BoxProps>, any, ContentProps, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("../Button").Props, "css" | "as" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "size" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export {};

package/lib/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from "@storybook/react";
+import { PaginationProps } from ".";
+declare const _default: Meta<PaginationProps>;
+export default _default;
+export declare const PaginationDefault: Story<PaginationProps>;
+export declare const SU2CPagination: Story<PaginationProps>;

package/lib/components/Pagination/Pagination.test.cypress.d.ts

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

package/lib/components/Pagination/index.d.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent, ReactNode } from "react";
+export declare type PaginationProps = {
+    /** set current page number */
+    current: number;
+    /** total number of pages */
+    items: number;
+    /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */
+    hideLast?: boolean;
+    /** callback function which is passed the selected page number on click */
+    pagerCallback: (n: number) => void;
+    /** number of items per page */
+    perPage: number;
+    /** the name of the search param in the url that is modified on page click, defaults to 'page' */
+    searchParam?: string;
+    children?: ReactNode;
+};
+/**
+ *
+ * Pagination is used when we are viewing large amounts of data.
+Data is split into multiple pages and pagination is used to
+easily navigate through these pages.
+ */
+declare const Pagination: FunctionComponent<PaginationProps>;
+export default Pagination;