@cruk/cruk-react-components 2.0.1 → 3.0.0

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

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

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

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

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

@@ -1,7 +1,16 @@
-import { Story, Meta } from "@storybook/react";
-import { IconFaProps } from ".";
-declare const _default: Meta<IconFaProps>;
-export default _default;
-export declare const IconFaDefault: Story<IconFaProps>;
-export declare const SU2CIconFa: Story<IconFaProps>;
-export declare const BowelbabeIconFa: Story<IconFaProps>;
+import { StoryObj } from "@storybook/react";
+import { IconFa } from "..";
+import { IconFaProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ faIcon, color, size, ...rest }: IconFaProps) => JSX.Element;
+    args: {
+        faIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof IconFa>;
+export declare const IconFADefault: Story;
+export declare const IconSU2C: Story;
+export declare const IconBowelbabe: Story;

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

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

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

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

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

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

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

@@ -1,9 +1,22 @@
-import { Story, Meta } from "@storybook/react";
-import { InfoBoxProps } from ".";
-declare const _default: Meta<InfoBoxProps>;
-export default _default;
-export declare const InfoBoxDefault: Story<InfoBoxProps>;
-export declare const TemplateWithCustomBackground: Story<InfoBoxProps>;
-export declare const InfoBoxWithChildren: Story<InfoBoxProps>;
-export declare const SU2CInfoBox: Story<InfoBoxProps>;
-export declare const BowelbabeInfoBox: Story<InfoBoxProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import InfoBox, { InfoBoxProps } from ".";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<InfoBoxProps>;
+    args: {
+        titleText: string;
+        titleTextColor: string;
+        descriptionText: string;
+        descriptionTextColor: string;
+        icon: JSX.Element;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof InfoBox>;
+export declare const InfoBoxDefault: Story;
+export declare const InfoBoxCustomBackground: Story;
+export declare const InfoBoxWithChildren: Story;
+export declare const InfoBoxSU2C: Story;
+export declare const InfoBoxBowelbabe: Story;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,21 @@
-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>;
-export declare const BowelbabeLegendWrapperRadioError: Story<LegendWrapperProps>;
+import { StoryObj } from "@storybook/react";
+import LegendWrapper, { LegendWrapperProps } from ".";
+declare const _default: {
+    title: string;
+    component: ({ children, legendText, required, errorMessage, hasError, hintText, ...restOfHTMLAttributes }: LegendWrapperProps) => JSX.Element;
+    args: {
+        legendText: string;
+        hintText: string;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof LegendWrapper>;
+export declare const LegendWrapperRadio: Story;
+export declare const LegendWrapperRadioError: Story;
+export declare const LegendWrapperCheckbox: Story;
+export declare const LegendWrapperCheckboxError: Story;
+export declare const LegendWrapperRadioSU2C: Story;
+export declare const LegendWrapperRadioErrorSU2C: Story;
+export declare const LegendWrapperRadioBowelbabe: Story;
+export declare const LegendWrapperRadioErrorBowelbabe: Story;

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

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

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

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

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

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

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

@@ -1,14 +1,33 @@
-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>;
-export declare const BowelbabeDefault: Story<LinkProps>;
-export declare const BowelbabePrimary: Story<LinkProps>;
-export declare const BowelbabeSecondary: Story<LinkProps>;
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import Link from ".";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Pick<Omit<React.AnchorHTMLAttributes<HTMLElement>, "nonce"> & Omit<import("../Text").TextProps, "ref" | "nonce" | "as"> & {
+        textHoverColor?: string | undefined;
+        appearance?: "primary" | "secondary" | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
+        as?: React.ElementType | undefined;
+        children?: React.ReactNode;
+    }, "slot" | "style" | "title" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | keyof import("../Spacing").SpacingProps | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "textSize" | "textAlign" | "textColor" | "wordBreak" | "overflowWrap" | "referrerPolicy" | "appearance" | "href" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "textWeight" | "textHoverColor"> & React.RefAttributes<HTMLElement>>;
+    args: {
+        appearance: undefined;
+        href: string;
+        children: string;
+        rel: undefined;
+        target: undefined;
+    };
+    tags: string[];
+};
+export default _default;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const WithImage: Story;
+export declare const DefaultSU2C: Story;
+export declare const PrimarySU2C: Story;
+export declare const SecondarySU2C: Story;
+export declare const DefaultBowelbabe: Story;
+export declare const PrimaryBowelbabe: Story;
+export declare const SecondaryBowelbabe: Story;

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

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

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

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