@cruk/cruk-react-components 1.1.8 → 1.2.0

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

@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-export declare type CarouselProps = {
-    /** Index in which the carousel is scrolled to on mount */
-    startPosition?: number;
-    /** call back for on position changed first prop is the possition */
-    onPositionChanged?: (position: number) => void;
-    /** show item left and right of current smaller than current item */
-    shrinkUnselectedPages?: boolean;
-    /** childrent item of the carousel */
-    children?: ReactNode;
-    /** set carousel image to full width of parent */
-    fullWidthChild?: boolean;
-};
-/**
- *
- * Light weight carousel component that works with mouse and touch events, will work with divs and much anything you chuck in children
- */
-export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => JSX.Element;
-declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => JSX.Element>;
-export default _default;

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

@@ -1,33 +0,0 @@
-import { ThemeType } from "../../types";
-export declare const CarouselWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type ThemeProps = {
-    theme: ThemeType;
-};
-declare type CarouselScrollAreaProps = {
-    smoothScrolling: boolean;
-};
-declare type CarouselCardProps = {
-    onlyChild: boolean;
-    fullWidthChild: boolean;
-};
-declare type CarouselCardInnerProps = {
-    isSelected: boolean;
-    shrinkUnselectedPages: boolean;
-    onlyChild: boolean;
-    fullWidthChild: boolean;
-};
-export declare const CarouselScrollArea: import("styled-components").StyledComponent<"ul", any, CarouselScrollAreaProps, never>;
-export declare const CarouselCard: import("styled-components").StyledComponent<"li", any, CarouselCardProps, never>;
-export declare const CarouselCardInner: import("styled-components").StyledComponent<"div", any, CarouselCardInnerProps, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VerticalAlign: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CarouselButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const DotContainer: import("styled-components").StyledComponent<"div", any, ThemeProps & {
-    count: number;
-}, never>;
-export declare const Dot: import("styled-components").StyledComponent<"button", any, {
-    theme: ThemeType;
-    selected: boolean;
-}, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
-export {};

package/lib/components/Checkbox/CheckBox.test.cypress.d.ts

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

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

@@ -1,7 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import { CheckBoxProps } from ".";
-declare const _default: Meta<CheckBoxProps>;
-export default _default;
-export declare const CheckboxDefault: Story;
-export declare const CheckboxDefaultError: Story;
-export declare const SU2CCheckbox: Story;

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

@@ -1,16 +0,0 @@
-import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
-export declare type CheckBoxProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement>;
-    /** flag for error styling */
-    hasError?: boolean;
-    /** error message text  */
-    errorMessage?: string;
-    children?: ReactNode;
-};
-/**
- * Checkboxes allow the user to select one or more items.
- *
- * The value or children becomes the label, if you want an outer label for a checkbox or group of checkboxes please use a LegendWrapper component
- */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckBoxProps, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

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

@@ -1,13 +0,0 @@
-import { ThemeType } from "../../types";
-declare type StyledLabelProps = {
-    checked: boolean;
-    disabled: boolean;
-    hasError: boolean;
-    theme: ThemeType;
-};
-export declare const CheckWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Check: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
-export declare const SelectedBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export {};

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

@@ -1,10 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import { CollapseProps } from ".";
-declare const _default: Meta<CollapseProps>;
-export default _default;
-export declare const CollapseWithTextHeader: Story<CollapseProps>;
-export declare const CollapseWithModifiedText: Story<CollapseProps>;
-export declare const CollapseWitCustomHeader: Story<CollapseProps>;
-export declare const SU2CCollapseWithTextHeader: Story<CollapseProps>;
-export declare const SU2CCollapseWithModifiedText: Story<CollapseProps>;
-export declare const SU2CCollapseWitCustomHeader: Story<CollapseProps>;

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

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

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

@@ -1,29 +0,0 @@
-import { ReactNode, HTMLAttributes } from "react";
-import { FontSizeType } from "../../types";
-export declare type CollapseProps = HTMLAttributes<HTMLElement> & {
-    /** id is required for a11y reasons as we use aria attributes which depends on an id  */
-    id: string;
-    /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */
-    headerTitleText: string;
-    /** collapse header text colour */
-    headerTitleTextColor?: string;
-    /** collapse header text size */
-    headerTitleTextSize?: FontSizeType;
-    /** collapse header font family */
-    headerTitleTextFontFamily?: string;
-    /** custom collapse header component */
-    headerComponent?: ReactNode;
-    /** flag to indicate  */
-    startOpen?: boolean;
-    /** callback function that is passed isOpen flag  */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** children */
-    children?: ReactNode;
-};
-/**
- *
- * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.
- *
- */
-declare const Collapse: ({ id, headerTitleText, headerTitleTextColor, headerTitleTextSize, headerTitleTextFontFamily, headerComponent, startOpen, onOpenChange, children, }: CollapseProps) => JSX.Element;
-export default Collapse;

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { FontSizeType } from "../../types";
-export declare const transitionDurationSeconds = 0.5;
-export declare const FlippingIcon: import("styled-components").StyledComponent<({ faIcon, color, size, ...rest }: import("../IconFa").IconFaProps) => JSX.Element, any, {
-    open: boolean;
-}, never>;
-export declare const DefaultHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("../Button").Props, "size" | keyof import("react").ButtonHTMLAttributes<HTMLElement> | "appearance" | "full" | "href" | "css" | "as" | "isIconButton"> & import("react").RefAttributes<HTMLElement>>, any, {
-    textColor?: string | undefined;
-    textSize?: FontSizeType | undefined;
-    textFontFamily?: string | undefined;
-}, never>;
-export declare const CollapseContent: import("styled-components").StyledComponent<"div", any, {
-    contentHeight: string;
-    openStatus: boolean;
-}, never>;
-export declare const CustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,8 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import { DateFieldProps } from ".";
-declare const _default: Meta<DateFieldProps>;
-export default _default;
-export declare const DateFieldWithLabel: Story<DateFieldProps>;
-export declare const DateFieldWithError: Story<DateFieldProps>;
-export declare const SU2CDateFieldWithLabel: Story<DateFieldProps>;
-export declare const SU2CDateFieldWithError: Story<DateFieldProps>;

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

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

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

@@ -1,32 +0,0 @@
-import { InputHTMLAttributes } from "react";
-export declare type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
-    /** label text */
-    label: string;
-    /** hind text */
-    hintText?: string;
-    /** day field text value  */
-    day: string;
-    /** month field text value  */
-    month: string;
-    /** year field text value  */
-    year: string;
-    /** name passed to day field input element */
-    dayName?: string;
-    /** name passed to month field input element */
-    monthName?: string;
-    /** name passed to year field input element */
-    yearName?: string;
-    /** flag of error styling on day field */
-    dayHasError?: boolean;
-    /** flag of error styling on month field */
-    monthHasError?: boolean;
-    /** flag of error styling on year field */
-    yearHasError?: boolean;
-    /** error message text */
-    errorMessage?: string;
-};
-/**
- * To be used in forms entering dates like date of birth which are known dates and would take too long to get to with a date picker
- * */
-declare const DateField: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps) => JSX.Element;
-export default DateField;

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

@@ -1,4 +0,0 @@
-export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-export declare const DateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LargeDateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Divider.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-declare type DividerProps = {
-    children?: ReactNode;
-};
-export declare const Divider: ({ children }: DividerProps) => JSX.Element;
-export default Divider;

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

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

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

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

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

@@ -1,13 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from "react";
-import { SpacingProps } from "../Spacing";
-export declare type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    as?: React.ElementType;
-};
-/**
- *
- * To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.
- *
- * Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
- */
-declare const ErrorText: FunctionComponent<ErrorTextProps>;
-export default ErrorText;

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const StyledErrorText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps>, any, {}, never>;
-export default StyledErrorText;

package/lib/components/Flex.d.ts

@@ -1,3 +0,0 @@
-import { SpacingProps } from "./Spacing";
-declare const Flex: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
-export default Flex;

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

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

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

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

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

@@ -1,11 +0,0 @@
-import { ReactNode, HTMLAttributes } from "react";
-export declare type FooterProps = HTMLAttributes<HTMLElement> & {
-    /** used to customise text in middle section, it could also be react element, this is not to be confused with the component children which is primarily for the links in the footer */
-    middleSection?: ReactNode;
-    children?: ReactNode;
-};
-/**
- * There should be only one footer component at the bottom of the body of each page. Links can be passed as children
- * */
-export declare const Footer: ({ children, middleSection }: FooterProps) => JSX.Element;
-export default Footer;

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

@@ -1,11 +0,0 @@
-export declare const StyledFooter: import("styled-components").StyledComponent<"footer", any, {}, never>;
-export declare const FooterContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterSectionLogo: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterSectionLinks: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
-export declare const StyledUL: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledLI: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const FooterSectionAddress: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledRegulatorLogo: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const StyledAddress: import("styled-components").StyledComponent<"address", any, {}, never>;

package/lib/components/GlobalStyle.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const _default: import("react").ForwardRefExoticComponent<{
-    ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
-    suppressMultiMountWarning?: boolean | undefined;
-    key?: import("react").Key | null | undefined;
-} & {
-    theme?: any;
-}>;
-export default _default;

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

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

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

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

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

@@ -1,37 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-export declare type HeaderProps = HTMLAttributes<HTMLElement> & {
-    /** flag which make header fixed to the top even when scrolling */
-    isSticky?: boolean;
-    /** text in the middle of the header */
-    siteSlogan?: string;
-    /** text to explain the content of the icon for a11y usually a description of where the link will take you */
-    logoAltText?: string;
-    /** header logo image url */
-    logoImageSrc?: string;
-    /** title of the header image component, this is mainly for the tooltip text on hover */
-    logoLinkTitle?: string;
-    /** the url of the logo link */
-    logoLinkUrl?: string;
-    /** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
-    fullWidth?: boolean;
-    children?: ReactNode;
-};
-/**
- * There should be only one header component near or at the top of the body of each page.
- *
- * ### Logos
- * It is recommended that logo images are at least 80px high if they are not SVGs and that the logo is still clearly legible when reduced to 40px high for mobile.
- * It is also recommended that the logo width doesn't exceed 350px. If you need a wide logo that is shorter than 80px to keep the aspect ratio please make sure that the logo is centered with transparent space at the top and bottom and still 80px high.
- *
- * ### Site Slogan Text (optional)
- * This is a single line of text and the character limit depends on the theme, logo and children width. This is only visible on desktop at the top of the page
- *
- * ### Right section (optional)
- * This has been kept quite open you can place any child elements in here but ideally it is narrow and its height is 50px or smaller.
- *
- * ### Accessability
- * There is a hidden skip link in the header which will only reveals itself on the first tab and to screen readers. This link helps users skip to the main page content, however this will only work with there is an element with an id of 'main' which the developer should create for every page.
- *
- */
-export declare const Header: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => JSX.Element;
-export default Header;

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

@@ -1,24 +0,0 @@
-export declare const StyledHeader: import("styled-components").StyledComponent<"header", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-}, never>;
-export declare const HeaderStickyPlaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderStickyContainer: import("styled-components").StyledComponent<"div", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-}, never>;
-export declare const HeaderMainContent: import("styled-components").StyledComponent<"div", any, {
-    fullWidth?: boolean | undefined;
-}, never>;
-export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-}, never>;
-export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const SkipToMain: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const Tagline: import("styled-components").StyledComponent<"p", any, {
-    isSmall?: boolean | undefined;
-    isSticky?: boolean | undefined;
-}, never>;

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

@@ -1,19 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import { HeadingProps } from ".";
-declare const _default: Meta<HeadingProps>;
-export default _default;
-export declare const DefaultHeading: Story;
-export declare const HeadingSize: Story;
-export declare const HeadingAligned: Story;
-export declare const H1: Story;
-export declare const H2: Story;
-export declare const H3: Story;
-export declare const H4: Story;
-export declare const H5: Story;
-export declare const H6: Story;
-export declare const SU2C_H1: Story;
-export declare const SU2C_H2: Story;
-export declare const SU2C_H3: Story;
-export declare const SU2C_H4: Story;
-export declare const SU2C_H5: Story;
-export declare const SU2C_H6: Story;

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

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

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

@@ -1,32 +0,0 @@
-import { HTMLAttributes, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
-import { FontSizeType, WordBreakType, OverflowWrapType } from "../../types";
-export declare type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    h1?: boolean;
-    h2?: boolean;
-    h3?: boolean;
-    h4?: boolean;
-    h5?: boolean;
-    h6?: boolean;
-    /** font size FontSizeType t-shirt sizes  */
-    textSize?: FontSizeType;
-    /** horizontal alignment of text */
-    textAlign?: "left" | "right" | "center";
-    /** color of text */
-    textColor?: string;
-    /** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
-    as?: ElementType;
-    /** word-break behavior */
-    wordBreak?: WordBreakType;
-    /** overflow-wrap behavior */
-    overflowWrap?: OverflowWrapType;
-};
-/**
- *
- * Use headings consistently to create a clear hierarchy throughout your service.
-Markup headings semantically using the appropriate <h#> level HTML element and
-use the corresponding heading class (h1, h2, h3, ....). Write all headings in sentence case. Heading differs from the Text component by using a different font-family and it changes the font size according to the screen width breakpoints.
- *
- */
-declare const Heading: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => JSX.Element;
-export default Heading;

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

@@ -1,50 +0,0 @@
-import { SpacingProps } from "../Spacing";
-import { ThemeType, FontSizeType, WordBreakType } from "../../types";
-export declare const H1: import("styled-components").StyledComponent<"h1", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H2: import("styled-components").StyledComponent<"h2", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H3: import("styled-components").StyledComponent<"h3", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H4: import("styled-components").StyledComponent<"h4", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H5: import("styled-components").StyledComponent<"h5", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;
-export declare const H6: import("styled-components").StyledComponent<"h6", any, SpacingProps & {
-    theme: ThemeType;
-    textSize?: FontSizeType | undefined;
-    textAlign?: "left" | "right" | "center" | undefined;
-    textColor?: string | undefined;
-    wordBreak?: WordBreakType | undefined;
-    overflowWrap?: WordBreakType | undefined;
-}, never>;

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

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

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

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