@cruk/cruk-react-components 2.0.1 → 3.0.0

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

@@ -1,8 +1,28 @@
-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>;
-export declare const BowelbabeRadio: Story<RadioProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import Radio from ".";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+        hasError?: boolean | undefined;
+        errorMessage?: string | undefined;
+        children?: React.ReactNode;
+    }, "errorMessage" | "hasError" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+    args: {
+        id: string;
+        value: string;
+        disabled: boolean;
+        hasError: boolean;
+        errorMessage: string;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const RadioWithError: Story;
+export declare const RadioSU2C: Story;
+export declare const RadioErrorSU2C: Story;
+export declare const RadioBowelbabe: Story;
+export declare const RadioErrorBowelbabe: Story;

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

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

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

@@ -1,23 +1,23 @@
-import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
-export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
-    ref?: Ref<HTMLInputElement>;
-    /** flag for error styling */
-    hasError?: boolean;
-    /** error message text  */
-    errorMessage?: string;
-    children?: ReactNode;
-};
-/**
- * A single radio button which should be part of a field set of radio buttons
- *
- * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component
- */
-declare const Radio: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
-    ref?: React.Ref<HTMLInputElement> | undefined;
-    /** flag for error styling */
-    hasError?: boolean | undefined;
-    /** error message text  */
-    errorMessage?: string | undefined;
-    children?: ReactNode;
-}, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
-export default Radio;
+import React, { InputHTMLAttributes, Ref, ReactNode } from "react";
+export type RadioProps = InputHTMLAttributes<HTMLInputElement> & {
+    ref?: Ref<HTMLInputElement>;
+    /** flag for error styling */
+    hasError?: boolean;
+    /** error message text  */
+    errorMessage?: string;
+    children?: ReactNode;
+};
+/**
+ * A single radio button which should be part of a field set of radio buttons
+ *
+ * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component
+ */
+declare const Radio: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement> & {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+    /** flag for error styling */
+    hasError?: boolean | undefined;
+    /** error message text  */
+    errorMessage?: string | undefined;
+    children?: ReactNode;
+}, keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

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

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

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

@@ -1,7 +1,21 @@
-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>;
-export declare const BowelbabeRadio: Story<RadioConsentProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import RadioConsent, { RadioConsentProps } from ".";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<RadioConsentProps>;
+    args: {
+        legend: string;
+        name: string;
+        attributes: {
+            option: string;
+            value: string;
+        }[];
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof RadioConsent>;
+export declare const RadioConsentDefault: Story;
+export declare const RadioConsentSU2C: Story;
+export declare const RadioConsentBowelbabe: Story;

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

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

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

@@ -1,24 +1,24 @@
-import React, { FunctionComponent } from "react";
-export 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;
+import React, { FunctionComponent } from "react";
+export 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/RadioConsent/styles.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { ThemeType } from "../../types";
-type ThemeProp = {
-    theme: ThemeType;
-};
-export declare const StyledRadio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement> & {
-    ref?: import("react").Ref<HTMLInputElement> | undefined;
-    hasError?: boolean | undefined;
-    errorMessage?: string | undefined;
-    children?: import("react").ReactNode;
-}, keyof import("react").InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>, any, {
-    numberOfAttributes: number;
-} & 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 {};
+/// <reference types="react" />
+import { ThemeType } from "../../types";
+type ThemeProp = {
+    theme: ThemeType;
+};
+export declare const StyledRadio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    ref?: import("react").Ref<HTMLInputElement> | undefined;
+    hasError?: boolean | undefined;
+    errorMessage?: string | undefined;
+    children?: import("react").ReactNode;
+}, keyof import("react").InputHTMLAttributes<HTMLInputElement> | "hasError" | "errorMessage"> & import("react").RefAttributes<HTMLInputElement>>, any, {
+    numberOfAttributes: number;
+} & ThemeProp, never>;
+export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, {}, never>;
+export declare const StyledFieldSet: import("styled-components").StyledComponent<"fieldset", any, ThemeProp, never>;
+export {};

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

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

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

@@ -1,10 +1,24 @@
-import { Story, Meta } from "@storybook/react";
-import { SelectProps } from ".";
-declare const _default: Meta<SelectProps>;
-export default _default;
-export declare const SelectWithLabel: Story<SelectProps>;
-export declare const SelectWithError: Story<SelectProps>;
-export declare const SU2CSelectWithLabel: Story<SelectProps>;
-export declare const SU2CSelectWithError: Story<SelectProps>;
-export declare const BowelbabeSelectWithLabel: Story<SelectProps>;
-export declare const BowelbabeSelectWithError: Story<SelectProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import Select, { SelectProps } from ".";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<SelectProps>;
+    args: {
+        disabled: boolean;
+        required: boolean;
+        label: string;
+        hintText: string;
+        hasError: boolean;
+        errorMessage: undefined;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Select>;
+export declare const SelectDefault: Story;
+export declare const SelectWithError: Story;
+export declare const SelectSU2C: Story;
+export declare const SelectWithErrorSU2C: Story;
+export declare const SelectBowelbabe: Story;
+export declare const SelectWithErrorBowelbabe: Story;

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

@@ -1,21 +1,21 @@
-import { FunctionComponent, ReactNode, SelectHTMLAttributes, Ref } from "react";
-export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
-    /** error message text */
-    errorMessage?: string;
-    /** flag for error styling of component */
-    hasError?: boolean;
-    /** label text */
-    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;
+import { FunctionComponent, ReactNode, SelectHTMLAttributes, Ref } from "react";
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    /** error message text */
+    errorMessage?: string;
+    /** flag for error styling of component */
+    hasError?: boolean;
+    /** label text */
+    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,9 +1,9 @@
-import { ThemeType } from "../../types";
-type StyledSelectProps = {
-    hasError: boolean;
-    errorMessage?: string;
-    theme: ThemeType;
-};
-declare const StyledSelect: import("styled-components").StyledComponent<"select", any, StyledSelectProps, never>;
-export default StyledSelect;
-export { StyledSelect };
+import { ThemeType } from "../../types";
+type StyledSelectProps = {
+    hasError: boolean;
+    errorMessage?: string;
+    theme: ThemeType;
+};
+declare const StyledSelect: import("styled-components").StyledComponent<"select", any, StyledSelectProps, never>;
+export default StyledSelect;
+export { StyledSelect };

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

@@ -1,19 +1,19 @@
-import { SpaceType, ThemeType } from "../../types";
-export type SpacingProps = {
-    margin?: SpaceType;
-    marginTop?: SpaceType;
-    marginRight?: SpaceType;
-    marginBottom?: SpaceType;
-    marginLeft?: SpaceType;
-    marginVertical?: SpaceType;
-    marginHorizontal?: SpaceType;
-    padding?: SpaceType;
-    paddingTop?: SpaceType;
-    paddingRight?: SpaceType;
-    paddingBottom?: SpaceType;
-    paddingLeft?: SpaceType;
-    paddingVertical?: SpaceType;
-    paddingHorizontal?: SpaceType;
-};
-export declare const Spacing: (props: SpacingProps, theme: ThemeType) => string;
-export default Spacing;
+import { SpaceType, ThemeType } from "../../types";
+export type SpacingProps = {
+    margin?: SpaceType;
+    marginTop?: SpaceType;
+    marginRight?: SpaceType;
+    marginBottom?: SpaceType;
+    marginLeft?: SpaceType;
+    marginVertical?: SpaceType;
+    marginHorizontal?: SpaceType;
+    padding?: SpaceType;
+    paddingTop?: SpaceType;
+    paddingRight?: SpaceType;
+    paddingBottom?: SpaceType;
+    paddingLeft?: SpaceType;
+    paddingVertical?: SpaceType;
+    paddingHorizontal?: SpaceType;
+};
+export declare const Spacing: (props: SpacingProps, theme: ThemeType) => string;
+export default Spacing;

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

@@ -1,7 +1,17 @@
-import { Story, Meta } from "@storybook/react";
-import { StepProps } from ".";
-declare const _default: Meta<StepProps>;
-export default _default;
-export declare const StepsDefault: Story<StepProps>;
-export declare const SU2CStep: Story<StepProps>;
-export declare const BowelbabeStep: Story<StepProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import Step, { StepProps } from ".";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<StepProps>;
+    args: {
+        current: number;
+        steps: string[];
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Step>;
+export declare const StepDefault: Story;
+export declare const StepSU2C: Story;
+export declare const StepBowelbabe: Story;

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

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

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

@@ -1,15 +1,15 @@
-import { FunctionComponent, ReactNode } from "react";
-export type StepProps = {
-    /** current step number */
-    current: number;
-    /** list of step  */
-    steps: string[];
-    children?: ReactNode;
-};
-/**
- *
- * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.
- * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.
- */
-declare const Step: FunctionComponent<StepProps>;
-export default Step;
+import { FunctionComponent, ReactNode } from "react";
+export type StepProps = {
+    /** current step number */
+    current: number;
+    /** list of step  */
+    steps: string[];
+    children?: ReactNode;
+};
+/**
+ *
+ * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.
+ * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.
+ */
+declare const Step: FunctionComponent<StepProps>;
+export default Step;

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

@@ -1,13 +1,17 @@
-export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-type StepListProps = {
-    total: number;
-};
-export declare const StepList: import("styled-components").StyledComponent<"ul", any, StepListProps, never>;
-export declare const StepBar: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StepTick: import("styled-components").StyledComponent<"span", any, {}, never>;
-type StepItemProps = {
-    active: boolean;
-    done: boolean;
-};
-export declare const StepItem: import("styled-components").StyledComponent<"li", any, StepItemProps, never>;
-export {};
+import { ThemeType } from "../../types";
+export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+type StepListProps = {
+    total: number;
+};
+type ThemeProps = {
+    theme: ThemeType;
+};
+export declare const StepList: import("styled-components").StyledComponent<"ul", any, StepListProps, never>;
+export declare const StepBar: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
+export declare const StepTick: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
+type StepItemProps = {
+    active: boolean;
+    done: boolean;
+};
+export declare const StepItem: import("styled-components").StyledComponent<"li", any, StepItemProps, never>;
+export {};

package/lib/components/TestWrapper.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
-import { ThemeType } from "src/types";
-type TestThemeWrapperProps = {
-    theme?: ThemeType;
-    children?: ReactNode;
-};
-export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => JSX.Element;
-type TestWrapperProps = {
-    children?: ReactNode;
-};
-export declare const TestWrapper: ({ children }: TestWrapperProps) => JSX.Element;
-export default TestWrapper;
+import { ReactNode } from "react";
+import { ThemeType } from "src/types";
+type TestThemeWrapperProps = {
+    theme?: ThemeType;
+    children?: ReactNode;
+};
+export declare const TestThemeWrapper: ({ children, theme, }: TestThemeWrapperProps) => JSX.Element;
+type TestWrapperProps = {
+    children?: ReactNode;
+};
+export declare const TestWrapper: ({ children }: TestWrapperProps) => JSX.Element;
+export default TestWrapper;

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

@@ -1,7 +1,17 @@
-import { Story, Meta } from "@storybook/react";
-import { TextProps } from ".";
-declare const _default: Meta<TextProps>;
-export default _default;
-export declare const TextDefault: Story;
-export declare const SU2CText: Story;
-export declare const BowelbabeText: Story;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import Text, { TextProps } from ".";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<TextProps>;
+    args: {
+        children: string;
+        textColor: string;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Text>;
+export declare const TextDefault: Story;
+export declare const TextSU2C: Story;
+export declare const TextBowelbabe: Story;

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

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

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

@@ -1,26 +1,26 @@
-import { FunctionComponent, HTMLAttributes, Ref, ElementType } from "react";
-import { SpacingProps } from "../Spacing";
-import { WordBreakType, FontSizeType, ColorKeyType, OverflowWrapType } 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.
- */
-export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
-    /** text colour  */
-    textColor?: ColorKeyType | string;
-    /** text horizontal alignment  */
-    textAlign?: "left" | "right" | "center" | "justify";
-    /** font size FontSizeType t-shirt sizes  */
-    textSize?: FontSizeType;
-    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */
-    textWeight?: number;
-    /** styled-components polymorphism where you can set this to "span", "p" or "h2" it default to "p" */
-    as?: ElementType;
-    /** word-break behaviour */
-    wordBreak?: WordBreakType;
-    /** overflow-wrap behaviour */
-    overflowWrap?: OverflowWrapType;
-    /** react reference to the DOM element sometime used to scroll to or set focus after an error */
-    ref?: Ref<HTMLElement>;
-};
-export declare const Text: FunctionComponent<TextProps>;
-export default Text;
+import { FunctionComponent, HTMLAttributes, Ref, ElementType } from "react";
+import { SpacingProps } from "../Spacing";
+import { WordBreakType, FontSizeType, ColorKeyType, OverflowWrapType } 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.
+ */
+export type TextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+    /** text colour  */
+    textColor?: ColorKeyType | string;
+    /** text horizontal alignment  */
+    textAlign?: "left" | "right" | "center" | "justify";
+    /** font size FontSizeType t-shirt sizes  */
+    textSize?: FontSizeType;
+    /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */
+    textWeight?: number;
+    /** styled-components polymorphism where you can set this to "span", "p" or "h2" it default to "p" */
+    as?: ElementType;
+    /** word-break behaviour */
+    wordBreak?: WordBreakType;
+    /** overflow-wrap behaviour */
+    overflowWrap?: OverflowWrapType;
+    /** react reference to the DOM element sometime used to scroll to or set focus after an error */
+    ref?: Ref<HTMLElement>;
+};
+export declare const Text: FunctionComponent<TextProps>;
+export default Text;