@cruk/cruk-react-components 0.1.5

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,23 @@
+import { FunctionComponent } from 'react';
+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 is likely to change in the future to make it more tree-shakable
+ * */
+declare const Icon: FunctionComponent<IconProps>;
+export default Icon;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { FunctionComponent, ReactNode } from 'react';
+declare type LabelWrapperProps = {
+    /** 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;
+};
+export declare const LabelWrapper: FunctionComponent<LabelWrapperProps>;
+export default LabelWrapper;

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

@@ -0,0 +1,6 @@
+import { ThemeType } from 'src/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/index.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+export declare type LegendWrapperProps = {
+    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: FC<LegendWrapperProps>;
+export default LegendWrapper;

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

@@ -0,0 +1,12 @@
+import { ThemeType } from 'src/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/LegendWrapper/test.cypress.d.ts

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

@@ -0,0 +1,22 @@
+import { FC, AnchorHTMLAttributes, Ref } from 'react';
+import { TextProps } from 'src/components/Text';
+export declare type LinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
+    /** link text hover colour */
+    textHoverColor?: string;
+    /** link appearance varient, 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>;
+};
+/**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: FC<LinkProps>;
+export default Link;

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

@@ -0,0 +1,11 @@
+import { AnchorHTMLAttributes } from 'react';
+import { TextProps } from 'src/components/Text';
+import { ThemeType } from 'src/types';
+export declare const ChevyWithLevee: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps>, any, {}, never>;
+declare type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
+    theme: ThemeType;
+    appearance?: 'primary' | 'secondary';
+    textHoverColor?: string;
+};
+export declare const StyledLink: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps>, any, StyledLinkProps, never>;
+export {};

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

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

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/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+/**
+ *
+ * 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: FC<{}>;
+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/Loader/test.cypress.d.ts

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

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/index.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+export declare type ModalProps = {
+    /** modal name used for aria-label */
+    modalName: string;
+    /** callback function called on modal close */
+    closeFunction: Function;
+    /** 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;
+};
+/**
+ *
+ * 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: FC<ModalProps>;
+export default Modal;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+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, {
+    maxWidth: string;
+    top: string;
+}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").Props>, any, {}, never>;

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

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

@@ -0,0 +1,23 @@
+import { FunctionComponent } 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: Function;
+    /** 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;
+};
+/**
+ *
+ * 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;

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

@@ -0,0 +1,10 @@
+declare type PaginationStyledProps = {
+    active?: boolean;
+    name?: string;
+    disabled?: boolean;
+};
+export declare const PagerWrapper: import("styled-components").StyledComponent<"div", any, PaginationStyledProps, never>;
+export declare const PagerList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const PagerLink: import("styled-components").StyledComponent<"a", any, PaginationStyledProps, never>;
+export declare const PagerItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export {};

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

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

package/lib/components/PopOver/Popover.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from '@storybook/react';
+import { PopOverProps } from '.';
+declare const _default: Meta<PopOverProps>;
+export default _default;
+export declare const PopOverDefault: Story<PopOverProps>;
+export declare const SU2CCheckbox: Story<PopOverProps>;

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

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { PopOverPositionType } from 'src/types';
+export declare type PopOverProps = {
+    /** used for aria-label of modal */
+    modalLabel: string;
+    /** contents in side the popover modal */
+    modalContent: ReactNode;
+    /**  position that the popover opens relative to the triggering element, the trigger element is the child of the component */
+    position?: PopOverPositionType;
+    css?: string;
+    /**  popover modal max width */
+    maxWidth?: string;
+    /**  popover modal min width */
+    minWidth?: string;
+    /**  popover isOpen changed handler */
+    onPopOverIsOpenChange?: (isOpen: boolean) => void;
+};
+/**
+ * Popover is a non-modal dialog that floats around its disclosure. It's
+commonly used for displaying additional rich content on top of something.
+*/
+declare const PopOver: FC<PopOverProps>;
+export default PopOver;

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

@@ -0,0 +1,10 @@
+import { ThemeType, PopOverPositionType } from 'src/types';
+export declare const PopOverWrapper: import("styled-components").StyledComponent<"div", any, {
+    css?: string | undefined;
+}, never>;
+export declare const PopOverModal: import("styled-components").StyledComponent<"div", any, {
+    position: PopOverPositionType;
+    theme?: ThemeType | undefined;
+    maxWidth: string;
+    minWidth: string;
+}, never>;

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

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

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

@@ -0,0 +1,8 @@
+import { Story, Meta } from '@storybook/react';
+import { ProgressBarProps } from '.';
+declare const _default: Meta<ProgressBarProps>;
+export default _default;
+export declare const ProgressBarDefault: Story<ProgressBarProps>;
+export declare const ProgressBarCircular: Story<ProgressBarProps>;
+export declare const SU2CProgressBar: Story<ProgressBarProps>;
+export declare const SU2CProgressBarCircular: Story<ProgressBarProps>;

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

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+export declare type ProgressBarProps = {
+    /** percentage value of the progressbar */
+    percentage: number;
+    /** flag which converts line bar to donut chart */
+    isCircular?: boolean;
+    /** contents inside the donut chart */
+    circleContents?: ReactNode;
+    /** diameter of the donut chart */
+    circleSize?: string;
+    /** foreground colour of chart */
+    barColor?: string;
+};
+/**
+ * Provide up-to-date feedback on the progress of a workflow or action with
+simple yet flexible progress bars.
+*/
+declare const ProgressBar: FC<ProgressBarProps>;
+export default ProgressBar;

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

@@ -0,0 +1,20 @@
+export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LineProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type LineProgressBarProps = {
+    percentage: number;
+    barColor?: string;
+};
+export declare const LineProgressBar: import("styled-components").StyledComponent<"div", any, LineProgressBarProps, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
+declare type CircularColorFillProps = {
+    barColor?: string;
+};
+export declare const CircularColorFill: import("styled-components").StyledComponent<"span", any, CircularColorFillProps, never>;
+export declare const CircularLeft: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CircularRight: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CircularWrapper: import("styled-components").StyledComponent<"div", any, {
+    percentage: number;
+    circleSize: string;
+}, never>;
+export declare const CircularValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import { Story, Meta } from '@storybook/react';
+import { RadioProps } from '.';
+declare const _default: Meta<RadioProps>;
+export default _default;
+export declare const RadioDefault: Story<RadioProps>;
+export declare const RadioDefaultError: Story<RadioProps>;
+export declare const SU2CRadio: Story<RadioProps>;