@cruk/cruk-react-components 0.1.5 → 1.0.1

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+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<{}>;
+declare const Loader: FC;
 export default Loader;

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

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

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

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC } from "react";
 export declare type ModalProps = {
     /** modal name used for aria-label */
     modalName: string;
     /** callback function called on modal close */
-    closeFunction: Function;
+    closeFunction: () => void;
     /** flag to reveal close button with cross in the top right of modal */
-    showCloseButton?: Boolean;
+    showCloseButton?: boolean;
     /** set max width of modal */
     maxWidth?: string;
     /** set space from top of view port that modal appears */

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

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

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

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent } from "react";
 export declare type PaginationProps = {
     /** set current page number */
     current: number;
@@ -6,9 +6,9 @@ export declare type PaginationProps = {
     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*/
+    /** 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;

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

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

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

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { PopOverPositionType } from 'src/types';
+import { FC, ReactNode } from "react";
+import { PopOverPositionType } from "../../types";
 export declare type PopOverProps = {
     /** used for aria-label of modal */
     modalLabel: string;

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

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

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { ProgressBarProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { ProgressBarProps } from ".";
 declare const _default: Meta<ProgressBarProps>;
 export default _default;
 export declare const ProgressBarDefault: Story<ProgressBarProps>;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode } from "react";
 export declare type ProgressBarProps = {
     /** percentage value of the progressbar */
     percentage: number;

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

@@ -4,11 +4,11 @@ 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 LineProgressBar: import("styled-components").StyledComponent<"div", any, LineProgressBarProps, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", any, {}, never>;
 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>;

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

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

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

@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes, Ref } from 'react';
+import { FC, InputHTMLAttributes, Ref } from "react";
 export declare type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
     /** flag for error styling */

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

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

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

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

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

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+export declare type RadioConsentProps = {
+    /** because each radio has its own label this is the consent group label text */
+    legend: string;
+    /** array of option for radio constent group where option is the option name and value is the option value  */
+    attributes: Array<{
+        value: string;
+        option: string;
+    }>;
+    /** on change handler callback passed change event */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** set the value of selected option */
+    selectedValue?: string;
+    /** name of field this is what groups all the options together */
+    name: string;
+};
+/**
+ *
+ * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.
+ *
+ * This is always a controlled component that will only change state with the selectedValue prop
+ */
+declare const RadioConsent: FunctionComponent<RadioConsentProps>;
+export default RadioConsent;

package/lib/components/{RadioGroup → RadioConsent}/styles.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
+declare type ThemeProp = {
+    theme: ThemeType;
+};
 export declare const StyledRadio: import("styled-components").StyledComponent<import("react").FC<import("../Radio").RadioProps>, any, {
     numberOfAttributes: number;
-    theme: ThemeType;
-}, never>;
+} & ThemeProp, never>;
 export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, {}, never>;
 export declare const StyledFieldSet: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
+export {};

package/lib/components/Select/Selelct.stories.d.ts

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { SelectProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { SelectProps } from ".";
 declare const _default: Meta<SelectProps>;
 export default _default;
 export declare const SelectWithLabel: Story<SelectProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, SelectHTMLAttributes, Ref } from 'react';
+import { FunctionComponent, ReactNode, SelectHTMLAttributes, Ref } from "react";
 export declare type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     /** error message text */
     errorMessage?: string;
@@ -8,11 +8,14 @@ export declare type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     label: string;
     /** hind text or custom component */
     hintText?: ReactNode;
+    /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
+    hideRequiredInLabel?: boolean;
     /** react DOM reference of object used scrolling to it with errors etc */
     ref?: Ref<HTMLSelectElement>;
 };
 /**
  * Select components are used for collecting user provided information from a list of options.
+ *
  */
 declare const Select: FunctionComponent<SelectProps>;
 export default Select;

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

@@ -1,8 +1,9 @@
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
 declare type StyledSelectProps = {
     hasError: boolean;
     errorMessage?: string;
     theme: ThemeType;
 };
-export declare const StyledSelect: import("styled-components").StyledComponent<"select", any, StyledSelectProps, never>;
-export {};
+declare const StyledSelect: import("styled-components").StyledComponent<"select", any, StyledSelectProps, never>;
+export default StyledSelect;
+export { StyledSelect };

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

@@ -1,4 +1,4 @@
-import { SpaceType, ThemeType } from 'src/types';
+import { SpaceType, ThemeType } from "../../types";
 export declare type SpacingProps = {
     margin?: SpaceType;
     marginTop?: SpaceType;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { StepProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { StepProps } from ".";
 declare const _default: Meta<StepProps>;
 export default _default;
 export declare const StepsDefault: Story<StepProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent } from "react";
 export declare type StepProps = {
     /** current step number */
     current: number;

package/lib/components/TestWrapper.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ThemeType } from 'src/types';
+import { FC } from "react";
+import { ThemeType } from "src/types";
 declare type TestThemeWrapperProps = {
     theme?: ThemeType;
 };

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { TextProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { TextProps } from ".";
 declare const _default: Meta<TextProps>;
 export default _default;
 export declare const TextDefault: Story;

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

@@ -1,6 +1,6 @@
-import { FunctionComponent, HTMLAttributes, Ref } from 'react';
-import { SpacingProps } from 'src/components/Spacing';
-import { WordBreakType, FontSizeType, ColorKeyType } from 'src/types';
+import { FunctionComponent, HTMLAttributes, Ref } from "react";
+import { SpacingProps } from "../Spacing";
+import { WordBreakType, FontSizeType, ColorKeyType } from "../../types";
 /**
  * Text is to be used as the main paragraph component (or span using as="span"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.
  */
@@ -8,7 +8,7 @@ export declare type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
     /** text colour  */
     textColor?: ColorKeyType | string;
     /** text horizontal alignment  */
-    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    textAlign?: "left" | "right" | "center" | "justify";
     /** font size FontSizeType t-shirt sizes  */
     textSize?: FontSizeType;
     /** font weight theme.typography{fontWeightHeavy/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */

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

@@ -1,12 +1,20 @@
-import { SpacingProps } from 'src/components/Spacing';
-import { WordBreakType, FontSizeType, ThemeType } from 'src/types';
+import { SpacingProps } from "../Spacing";
+import { WordBreakType, FontSizeType, ThemeType, ColorKeyType } from "../../types";
 export declare type TextStyledProps = SpacingProps & {
-    textColor?: string;
-    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    textColor?: ColorKeyType;
+    textAlign?: "left" | "right" | "center" | "justify";
     textSize?: FontSizeType;
     textWeight?: number;
     as?: any;
     wordBreak?: WordBreakType;
     theme: ThemeType;
 };
-export declare const TextStyled: import("styled-components").StyledComponent<"p", any, TextStyledProps, never>;
+export declare const TextStyled: import("styled-components").StyledComponent<"p", any, SpacingProps & {
+    textColor?: keyof import("../../types").ColorsType | undefined;
+    textAlign?: "left" | "right" | "center" | "justify" | undefined;
+    textSize?: FontSizeType | undefined;
+    textWeight?: number | undefined;
+    as?: any;
+    wordBreak?: WordBreakType | undefined;
+    theme: ThemeType;
+}, never>;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { TextAreaFieldProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { TextAreaFieldProps } from ".";
 declare const _default: Meta<TextAreaFieldProps>;
 export default _default;
 export declare const TextAreaFieldDefault: Story<TextAreaFieldProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, TextareaHTMLAttributes, Ref } from 'react';
+import { FunctionComponent, ReactNode, TextareaHTMLAttributes, Ref } from "react";
 export declare type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** error message text */
     errorMessage?: string;
@@ -9,8 +9,8 @@ export declare type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElem
     /** label text */
     label: string;
     /** resize behaviour using the resize button on the bottom right of the component */
-    resize?: 'both' | 'vertical' | 'horizontal' | 'none';
-    /** number of visible lines of text before scroll is required this affect the height of the input field*/
+    resize?: "both" | "vertical" | "horizontal" | "none";
+    /** number of visible lines of text before scroll is required this affect the height of the input field */
     lineCount?: number;
     /** react reference to the DOM element sometime used to scroll to or set focus after an error */
     ref?: Ref<HTMLTextAreaElement>;

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

@@ -1,9 +1,10 @@
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
 declare type StyledTextareaProps = {
     hasError: boolean;
-    resize: 'both' | 'vertical' | 'horizontal' | 'none';
+    resize: "both" | "vertical" | "horizontal" | "none";
     lineCount: number;
     theme: ThemeType;
 };
-export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
-export {};
+declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
+export default StyledTextArea;
+export { StyledTextArea };

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { TextFieldProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { TextFieldProps } from ".";
 declare const _default: Meta<TextFieldProps>;
 export default _default;
 export declare const TextFieldDefault: Story<TextFieldProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { FunctionComponent, InputHTMLAttributes, ReactNode, Ref } from "react";
 export declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
     /** error message text  */
     errorMessage?: string;

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

@@ -1,4 +1,4 @@
-import { ThemeType } from 'src/types';
+import { ThemeType } from "../../types";
 declare type ExtraProps = {
     theme: ThemeType;
 };

package/lib/components/ThemeCheatSheet.d.ts

@@ -1,9 +1,7 @@
-import React from 'react';
-import { ThemeType } from '../types';
-declare type Props = {
-    theme?: ThemeType;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Props>, "children"> & {
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & {
     theme?: any;
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { TotaliserProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { TotaliserProps } from ".";
 declare const _default: Meta<TotaliserProps>;
 export default _default;
 export declare const TotaliserWithTarget: Story<TotaliserProps>;

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactChild } from 'react';
+import { FunctionComponent, ReactChild } from "react";
 export declare type TotaliserProps = {
     /** financial total as a number */
     total: number;

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

@@ -1,18 +1,16 @@
 /// <reference types="react" />
-import { ThemeType } from 'src/types';
-export declare const DetailWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BubbleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {
+    isCompact?: boolean | undefined;
+}, never>;
 export declare const Total: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const BubbleText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const GiftAid: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const Summary: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type TotaliserWrapperProps = {
     isCompact: boolean;
 };
 export declare const TotaliserWrapper: import("styled-components").StyledComponent<"div", any, TotaliserWrapperProps, never>;
 export declare const CompactWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type StyledProgressBarProps = {
-    theme: ThemeType;
-    isCompact: boolean;
-};
-export declare const StyledProgressBar: import("styled-components").StyledComponent<import("react").FC<import("../ProgressBar").ProgressBarProps>, any, StyledProgressBarProps, never>;
+export declare const StyledProgressBar: import("styled-components").StyledComponent<import("react").FC<import("../ProgressBar").ProgressBarProps>, any, {}, never>;
 export {};

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

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/react';
-import { UserBlockProps } from '.';
+import { Story, Meta } from "@storybook/react";
+import { UserBlockProps } from ".";
 declare const _default: Meta<UserBlockProps>;
 export default _default;
 export declare const UserBlockDefault: Story;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode, HTMLAttributes } from 'react';
+import { FC, ReactNode, HTMLAttributes } from "react";
 export declare type UserBlockProps = HTMLAttributes<HTMLElement> & {
     /** name component or text */
     name?: ReactNode;
@@ -9,7 +9,7 @@ export declare type UserBlockProps = HTMLAttributes<HTMLElement> & {
     /** extra content component appears underneath name */
     extra?: ReactNode;
     /** size of avatar component */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: "s" | "m" | "l" | "xl";
 };
 /**
  * Display an avatar with title and subtitle