@cruk/cruk-react-components 2.0.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AddressLookup/AddressLookUp.test.cypress.d.ts +1 -1
- package/lib/components/AddressLookup/AddressLookup.stories.d.ts +36 -7
- package/lib/components/AddressLookup/index.d.ts +61 -61
- package/lib/components/AddressLookup/styles.d.ts +14 -14
- package/lib/components/Avatar/Avatar.stories.d.ts +33 -20
- package/lib/components/Avatar/Avatar.test.cypress.d.ts +1 -1
- package/lib/components/Avatar/index.d.ts +15 -15
- package/lib/components/Avatar/styles.d.ts +7 -7
- package/lib/components/Badge/Badge.stories.d.ts +26 -16
- package/lib/components/Badge/Badge.test.cypress.d.ts +1 -1
- package/lib/components/Badge/index.d.ts +28 -28
- package/lib/components/Badge/styles.d.ts +11 -11
- package/lib/components/Box/Box.stories.d.ts +20 -13
- package/lib/components/Box/Box.test.cypress.d.ts +1 -1
- package/lib/components/Box/index.d.ts +17 -17
- package/lib/components/Box/styles.d.ts +8 -8
- package/lib/components/Button/Button.stories.d.ts +39 -15
- package/lib/components/Button/Button.test.cypress.d.ts +1 -1
- package/lib/components/Button/index.d.ts +46 -46
- package/lib/components/Button/styles.d.ts +15 -13
- package/lib/components/Carousel/Carousel.stories.d.ts +15 -7
- package/lib/components/Carousel/Carousel.test.cypress.d.ts +1 -1
- package/lib/components/Carousel/Dots.d.ts +12 -12
- package/lib/components/Carousel/index.d.ts +20 -20
- package/lib/components/Carousel/styles.d.ts +33 -33
- package/lib/components/Checkbox/CheckBox.test.cypress.d.ts +1 -1
- package/lib/components/Checkbox/Checkbox.stories.d.ts +26 -8
- package/lib/components/Checkbox/index.d.ts +23 -23
- package/lib/components/Checkbox/styles.d.ts +16 -13
- package/lib/components/Collapse/Collapse.stories.d.ts +23 -13
- package/lib/components/Collapse/Collapse.test.cypress.d.ts +1 -1
- package/lib/components/Collapse/index.d.ts +29 -29
- package/lib/components/Collapse/styles.d.ts +26 -26
- package/lib/components/DateField/DateField.stories.d.ts +29 -10
- package/lib/components/DateField/DateField.test.cypress.d.ts +1 -1
- package/lib/components/DateField/index.d.ts +32 -32
- package/lib/components/DateField/styles.d.ts +9 -4
- package/lib/components/Divider.d.ts +6 -6
- package/lib/components/ErrorText/ErrorText.stories.d.ts +16 -7
- package/lib/components/ErrorText/ErrorText.test.cypress.d.ts +1 -1
- package/lib/components/ErrorText/index.d.ts +13 -13
- package/lib/components/ErrorText/styles.d.ts +7 -3
- package/lib/components/Flex.d.ts +3 -3
- package/lib/components/Fontface.d.ts +2 -2
- package/lib/components/Footer/Footer.stories.d.ts +13 -7
- package/lib/components/Footer/Footer.test.cypress.d.ts +1 -1
- package/lib/components/Footer/index.d.ts +11 -11
- package/lib/components/Footer/styles.d.ts +16 -11
- package/lib/components/GlobalStyle.d.ts +9 -9
- package/lib/components/GlobalStyleNoFontFace.d.ts +9 -9
- package/lib/components/Header/Header.stories.d.ts +20 -7
- package/lib/components/Header/Header.test.cypress.d.ts +1 -1
- package/lib/components/Header/index.d.ts +37 -37
- package/lib/components/Header/styles.d.ts +37 -31
- package/lib/components/Heading/Heading.stories.d.ts +31 -25
- package/lib/components/Heading/Heading.test.cypress.d.ts +1 -1
- package/lib/components/Heading/index.d.ts +32 -32
- package/lib/components/Heading/styles.d.ts +50 -50
- package/lib/components/Icon/Icon.stories.d.ts +15 -6
- package/lib/components/Icon/Icon.test.cypress.d.ts +1 -1
- package/lib/components/Icon/iconList.d.ts +268 -268
- package/lib/components/Icon/index.d.ts +23 -23
- package/lib/components/Icon/styles.d.ts +5 -5
- package/lib/components/IconFa/IconFa.stories.d.ts +16 -7
- package/lib/components/IconFa/IconFa.test.cypress.d.ts +1 -1
- package/lib/components/IconFa/index.d.ts +17 -17
- package/lib/components/IconFa/styles.d.ts +5 -5
- package/lib/components/InfoBox/InfoBox.stories.d.ts +22 -9
- package/lib/components/InfoBox/InfoBox.test.cypress.d.ts +1 -1
- package/lib/components/InfoBox/index.d.ts +27 -27
- package/lib/components/InfoBox/styles.d.ts +14 -14
- package/lib/components/LabelWrapper/index.d.ts +19 -19
- package/lib/components/LabelWrapper/styles.d.ts +6 -6
- package/lib/components/LegendWrapper/LegendWrapper.stories.d.ts +21 -11
- package/lib/components/LegendWrapper/LegendWrapper.test.cypress.d.ts +1 -1
- package/lib/components/LegendWrapper/index.d.ts +22 -22
- package/lib/components/LegendWrapper/styles.d.ts +12 -12
- package/lib/components/Link/Link.stories.d.ts +33 -14
- package/lib/components/Link/Link.test.cypress.d.ts +1 -1
- package/lib/components/Link/index.d.ts +37 -37
- package/lib/components/Link/styles.d.ts +22 -18
- package/lib/components/Loader/Loader.stories.d.ts +13 -6
- package/lib/components/Loader/Loader.test.cypress.d.ts +1 -1
- package/lib/components/Loader/index.d.ts +7 -7
- package/lib/components/Loader/styles.d.ts +7 -2
- package/lib/components/Modal/Modal.stories.d.ts +13 -7
- package/lib/components/Modal/Modal.test.cypress.d.ts +1 -1
- package/lib/components/Modal/index.d.ts +32 -32
- package/lib/components/Modal/styles.d.ts +27 -24
- package/lib/components/Pagination/Pagination.stories.d.ts +20 -8
- package/lib/components/Pagination/Pagination.test.cypress.d.ts +1 -1
- package/lib/components/Pagination/index.d.ts +24 -24
- package/lib/components/Pagination/styles.d.ts +14 -10
- package/lib/components/PopOver/PopOver.test.cypress.d.ts +1 -1
- package/lib/components/PopOver/Popover.stories.d.ts +18 -7
- package/lib/components/PopOver/index.d.ts +26 -24
- package/lib/components/PopOver/styles.d.ts +11 -10
- package/lib/components/ProgressBar/ProgressBar.stories.d.ts +19 -10
- package/lib/components/ProgressBar/ProgressBar.test.cypress.d.ts +1 -1
- package/lib/components/ProgressBar/index.d.ts +24 -24
- package/lib/components/ProgressBar/styles.d.ts +30 -30
- package/lib/components/Radio/Radio.stories.d.ts +28 -8
- package/lib/components/Radio/Radio.test.cypress.d.ts +1 -1
- package/lib/components/Radio/index.d.ts +23 -23
- package/lib/components/Radio/styles.d.ts +21 -19
- package/lib/components/RadioConsent/Radio.stories.d.ts +21 -7
- package/lib/components/RadioConsent/RadioConsent.test.cypress.d.ts +1 -1
- package/lib/components/RadioConsent/index.d.ts +24 -24
- package/lib/components/RadioConsent/styles.d.ts +16 -16
- package/lib/components/Select/Select.test.cypress.d.ts +1 -1
- package/lib/components/Select/Selelct.stories.d.ts +24 -10
- package/lib/components/Select/index.d.ts +21 -21
- package/lib/components/Select/styles.d.ts +9 -9
- package/lib/components/Spacing/index.d.ts +19 -19
- package/lib/components/Step/Step.stories.d.ts +17 -7
- package/lib/components/Step/Step.test.cypress.d.ts +1 -1
- package/lib/components/Step/index.d.ts +15 -15
- package/lib/components/Step/styles.d.ts +17 -13
- package/lib/components/TestWrapper.d.ts +12 -12
- package/lib/components/Text/Text.stories.d.ts +17 -7
- package/lib/components/Text/Text.test.cypress.d.ts +1 -1
- package/lib/components/Text/index.d.ts +26 -26
- package/lib/components/Text/styles.d.ts +22 -22
- package/lib/components/TextAreaField/TextAreaField.stories.d.ts +29 -10
- package/lib/components/TextAreaField/TextAreaField.test.cypress.d.ts +1 -1
- package/lib/components/TextAreaField/index.d.ts +22 -22
- package/lib/components/TextAreaField/styles.d.ts +10 -10
- package/lib/components/TextField/TextField.stories.d.ts +27 -12
- package/lib/components/TextField/TextField.test.cypress.d.ts +1 -1
- package/lib/components/TextField/index.d.ts +34 -34
- package/lib/components/TextField/styles.d.ts +18 -18
- package/lib/components/ThemeCheatSheet.d.ts +7 -7
- package/lib/components/Totaliser/Totaliser.stories.d.ts +27 -19
- package/lib/components/Totaliser/Totaliser.test.cypress.d.ts +1 -1
- package/lib/components/Totaliser/index.d.ts +22 -22
- package/lib/components/Totaliser/styles.d.ts +20 -16
- package/lib/components/UserBlock/UserBlock.stories.d.ts +23 -16
- package/lib/components/UserBlock/UserBlock.test.cypress.d.ts +1 -1
- package/lib/components/UserBlock/index.d.ts +18 -18
- package/lib/components/UserBlock/styles.d.ts +9 -4
- package/lib/components/index.d.ts +73 -73
- package/lib/docs/Docs.d.ts +2 -2
- package/lib/docs/index.d.ts +1 -1
- package/lib/es/{node_modules/tslib/tslib.es6.js → _virtual/_tslib.js} +1 -1
- package/lib/es/_virtual/_tslib.js.map +1 -0
- package/lib/es/node_modules/focus-lock/dist/es2015/index.js +1 -1
- package/lib/es/node_modules/focus-lock/dist/es2015/index.js.map +1 -1
- package/lib/es/node_modules/focus-lock/dist/es2015/utils/safe.js.map +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Combination.js +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Combination.js.map +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Lock.js +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Lock.js.map +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Trap.js +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/Trap.js.map +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/index.js +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/medium.js +1 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/medium.js.map +1 -1
- package/lib/es/node_modules/use-sidecar/dist/es2015/medium.js +1 -1
- package/lib/es/node_modules/use-sidecar/dist/es2015/medium.js.map +1 -1
- package/lib/es/src/components/AddressLookup/index.js +1 -1
- package/lib/es/src/components/AddressLookup/styles.js +1 -1
- package/lib/es/src/components/Avatar/index.js +1 -1
- package/lib/es/src/components/Avatar/styles.js +1 -1
- package/lib/es/src/components/Badge/index.js +1 -1
- package/lib/es/src/components/Badge/styles.js +1 -1
- package/lib/es/src/components/Box/index.js +1 -1
- package/lib/es/src/components/Box/styles.js +1 -1
- package/lib/es/src/components/Button/index.js +1 -1
- package/lib/es/src/components/Button/styles.js +1 -1
- package/lib/es/src/components/Carousel/Dots.js +1 -1
- package/lib/es/src/components/Carousel/styles.js +1 -1
- package/lib/es/src/components/Checkbox/index.js +1 -1
- package/lib/es/src/components/Checkbox/styles.js +1 -1
- package/lib/es/src/components/Collapse/index.js +1 -1
- package/lib/es/src/components/Collapse/styles.js +1 -1
- package/lib/es/src/components/DateField/styles.js +1 -1
- package/lib/es/src/components/Divider.js +1 -1
- package/lib/es/src/components/ErrorText/index.js +1 -1
- package/lib/es/src/components/ErrorText/styles.js +1 -1
- package/lib/es/src/components/Flex.js +1 -1
- package/lib/es/src/components/Footer/index.js +1 -1
- package/lib/es/src/components/Footer/styles.js +1 -1
- package/lib/es/src/components/GlobalStyle.js +1 -1
- package/lib/es/src/components/GlobalStyleNoFontFace.js +1 -1
- package/lib/es/src/components/Header/index.js +1 -1
- package/lib/es/src/components/Header/styles.js +1 -1
- package/lib/es/src/components/Heading/index.js +1 -1
- package/lib/es/src/components/Heading/styles.js +1 -1
- package/lib/es/src/components/Icon/index.js +1 -1
- package/lib/es/src/components/Icon/styles.js +1 -1
- package/lib/es/src/components/IconFa/index.js +1 -1
- package/lib/es/src/components/IconFa/styles.js +1 -1
- package/lib/es/src/components/InfoBox/index.js +1 -1
- package/lib/es/src/components/InfoBox/styles.js +1 -1
- package/lib/es/src/components/LabelWrapper/index.js +1 -1
- package/lib/es/src/components/LabelWrapper/styles.js +1 -1
- package/lib/es/src/components/LegendWrapper/index.js +1 -1
- package/lib/es/src/components/LegendWrapper/styles.js +1 -1
- package/lib/es/src/components/Link/index.js +1 -1
- package/lib/es/src/components/Link/styles.js +1 -1
- package/lib/es/src/components/Loader/index.js +1 -1
- package/lib/es/src/components/Loader/styles.js +1 -1
- package/lib/es/src/components/Modal/index.js +1 -1
- package/lib/es/src/components/Modal/styles.js +1 -1
- package/lib/es/src/components/Pagination/index.js +1 -1
- package/lib/es/src/components/Pagination/styles.js +1 -1
- package/lib/es/src/components/PopOver/README.md.js +1 -1
- package/lib/es/src/components/PopOver/README.md.js.map +1 -1
- package/lib/es/src/components/PopOver/index.js +1 -1
- package/lib/es/src/components/PopOver/styles.js +1 -1
- package/lib/es/src/components/ProgressBar/index.js +1 -1
- package/lib/es/src/components/ProgressBar/styles.js +1 -1
- package/lib/es/src/components/Radio/index.js +1 -1
- package/lib/es/src/components/Radio/styles.js +1 -1
- package/lib/es/src/components/RadioConsent/index.js +1 -1
- package/lib/es/src/components/RadioConsent/styles.js +1 -1
- package/lib/es/src/components/Select/index.js +1 -1
- package/lib/es/src/components/Select/styles.js +1 -1
- package/lib/es/src/components/Step/index.js +1 -1
- package/lib/es/src/components/Step/styles.js +1 -1
- package/lib/es/src/components/Text/index.js +1 -1
- package/lib/es/src/components/Text/styles.js +1 -1
- package/lib/es/src/components/TextAreaField/index.js +1 -1
- package/lib/es/src/components/TextAreaField/styles.js +1 -1
- package/lib/es/src/components/TextField/index.js +1 -1
- package/lib/es/src/components/TextField/styles.js +1 -1
- package/lib/es/src/components/Totaliser/index.js +1 -1
- package/lib/es/src/components/Totaliser/styles.js +1 -1
- package/lib/es/src/components/UserBlock/index.js +1 -1
- package/lib/es/src/components/UserBlock/styles.js +1 -1
- package/lib/es/src/themes/bowelbabe.js +1 -1
- package/lib/es/src/themes/su2c.js +1 -1
- package/lib/hocs/MdxProvider.d.ts +6 -6
- package/lib/hooks/useEffectBrowser.d.ts +3 -3
- package/lib/hooks/useKey.d.ts +6 -6
- package/lib/hooks/useLayoutEffectBrowser.d.ts +4 -4
- package/lib/hooks/useScrollPosition.d.ts +13 -13
- package/lib/themes/bowelbabe.d.ts +13 -13
- package/lib/themes/cruk.d.ts +13 -13
- package/lib/themes/su2c.d.ts +13 -13
- package/lib/types.d.ts +232 -232
- package/lib/utils/Helper.d.ts +6 -6
- package/lib/utils/__tests__/testHelpers.jest.d.ts +1 -1
- package/lib/utils/debounce.d.ts +2 -2
- package/package.json +21 -15
- package/lib/es/node_modules/detect-node-es/esm/node.js +0 -2
- package/lib/es/node_modules/detect-node-es/esm/node.js.map +0 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/AutoFocusInside.js +0 -2
- package/lib/es/node_modules/react-focus-lock/dist/es2015/AutoFocusInside.js.map +0 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/FreeFocusInside.js +0 -2
- package/lib/es/node_modules/react-focus-lock/dist/es2015/FreeFocusInside.js.map +0 -1
- package/lib/es/node_modules/react-focus-lock/dist/es2015/MoveFocusInside.js +0 -2
- package/lib/es/node_modules/react-focus-lock/dist/es2015/MoveFocusInside.js.map +0 -1
- package/lib/es/node_modules/tslib/tslib.es6.js.map +0 -1
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { InputHTMLAttributes } from "react";
|
|
2
|
-
export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
-
/** label text */
|
|
4
|
-
label: string;
|
|
5
|
-
/** hind text */
|
|
6
|
-
hintText?: string;
|
|
7
|
-
/** day field text value */
|
|
8
|
-
day: string;
|
|
9
|
-
/** month field text value */
|
|
10
|
-
month: string;
|
|
11
|
-
/** year field text value */
|
|
12
|
-
year: string;
|
|
13
|
-
/** name passed to day field input element */
|
|
14
|
-
dayName?: string;
|
|
15
|
-
/** name passed to month field input element */
|
|
16
|
-
monthName?: string;
|
|
17
|
-
/** name passed to year field input element */
|
|
18
|
-
yearName?: string;
|
|
19
|
-
/** flag of error styling on day field */
|
|
20
|
-
dayHasError?: boolean;
|
|
21
|
-
/** flag of error styling on month field */
|
|
22
|
-
monthHasError?: boolean;
|
|
23
|
-
/** flag of error styling on year field */
|
|
24
|
-
yearHasError?: boolean;
|
|
25
|
-
/** error message text */
|
|
26
|
-
errorMessage?: string;
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* 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
|
|
30
|
-
* */
|
|
31
|
-
declare const DateField: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps) => JSX.Element;
|
|
32
|
-
export default DateField;
|
|
1
|
+
import { InputHTMLAttributes } from "react";
|
|
2
|
+
export type DateFieldProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
+
/** label text */
|
|
4
|
+
label: string;
|
|
5
|
+
/** hind text */
|
|
6
|
+
hintText?: string;
|
|
7
|
+
/** day field text value */
|
|
8
|
+
day: string;
|
|
9
|
+
/** month field text value */
|
|
10
|
+
month: string;
|
|
11
|
+
/** year field text value */
|
|
12
|
+
year: string;
|
|
13
|
+
/** name passed to day field input element */
|
|
14
|
+
dayName?: string;
|
|
15
|
+
/** name passed to month field input element */
|
|
16
|
+
monthName?: string;
|
|
17
|
+
/** name passed to year field input element */
|
|
18
|
+
yearName?: string;
|
|
19
|
+
/** flag of error styling on day field */
|
|
20
|
+
dayHasError?: boolean;
|
|
21
|
+
/** flag of error styling on month field */
|
|
22
|
+
monthHasError?: boolean;
|
|
23
|
+
/** flag of error styling on year field */
|
|
24
|
+
yearHasError?: boolean;
|
|
25
|
+
/** error message text */
|
|
26
|
+
errorMessage?: string;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* 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
|
|
30
|
+
* */
|
|
31
|
+
declare const DateField: ({ label, hintText, day, month, year, dayName, monthName, yearName, dayHasError, monthHasError, yearHasError, errorMessage, onChange, onBlur, onFocus, disabled, required, }: DateFieldProps) => JSX.Element;
|
|
32
|
+
export default DateField;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { ThemeType } from "../../types";
|
|
2
|
+
type ThemeProps = {
|
|
3
|
+
theme: ThemeType;
|
|
4
|
+
};
|
|
5
|
+
export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
|
|
6
|
+
export declare const DateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
7
|
+
export declare const LargeDateTextFieldWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
8
|
+
export declare const ErrorTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
type DividerProps = {
|
|
3
|
-
children?: ReactNode;
|
|
4
|
-
};
|
|
5
|
-
export declare const Divider: ({ children }: DividerProps) => JSX.Element;
|
|
6
|
-
export default Divider;
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
type DividerProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
};
|
|
5
|
+
export declare const Divider: ({ children }: DividerProps) => JSX.Element;
|
|
6
|
+
export default Divider;
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StoryObj } from "@storybook/react";
|
|
3
|
+
import ErrorText, { ErrorTextProps } from ".";
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.FunctionComponent<ErrorTextProps>;
|
|
7
|
+
args: {
|
|
8
|
+
children: string;
|
|
9
|
+
};
|
|
10
|
+
tags: string[];
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
type Story = StoryObj<typeof ErrorText>;
|
|
14
|
+
export declare const ErrorTextDefault: Story;
|
|
15
|
+
export declare const ErrorTextSU2C: Story;
|
|
16
|
+
export declare const ErrorTextBowelbabe: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, { FunctionComponent, HTMLAttributes } from "react";
|
|
2
|
-
import { SpacingProps } from "../Spacing";
|
|
3
|
-
export type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
|
|
4
|
-
as?: React.ElementType;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
* To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.
|
|
9
|
-
*
|
|
10
|
-
* Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
|
|
11
|
-
*/
|
|
12
|
-
declare const ErrorText: FunctionComponent<ErrorTextProps>;
|
|
13
|
-
export default ErrorText;
|
|
1
|
+
import React, { FunctionComponent, HTMLAttributes } from "react";
|
|
2
|
+
import { SpacingProps } from "../Spacing";
|
|
3
|
+
export type ErrorTextProps = SpacingProps & HTMLAttributes<HTMLElement> & {
|
|
4
|
+
as?: React.ElementType;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
*
|
|
8
|
+
* To be used in forms for inline validation. Applies styling and accessibility attribute so that it will be read by screen readers.
|
|
9
|
+
*
|
|
10
|
+
* Please be aware that some input components already have this component built in and can be passed an "errorMessage" prop
|
|
11
|
+
*/
|
|
12
|
+
declare const ErrorText: FunctionComponent<ErrorTextProps>;
|
|
13
|
+
export default ErrorText;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ThemeType } from "../../types";
|
|
3
|
+
type ThemeProps = {
|
|
4
|
+
theme: ThemeType;
|
|
5
|
+
};
|
|
6
|
+
export declare const StyledErrorText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps>, any, ThemeProps, never>;
|
|
7
|
+
export default StyledErrorText;
|
package/lib/components/Flex.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { SpacingProps } from "./Spacing";
|
|
2
|
-
declare const Flex: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
|
|
3
|
-
export default Flex;
|
|
1
|
+
import { SpacingProps } from "./Spacing";
|
|
2
|
+
declare const Flex: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
|
|
3
|
+
export default Flex;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const fontFaceStyleString: string;
|
|
2
|
-
export default fontFaceStyleString;
|
|
1
|
+
export declare const fontFaceStyleString: string;
|
|
2
|
+
export default fontFaceStyleString;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FooterProps } from ".";
|
|
3
|
-
declare const _default:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
|
2
|
+
import Footer, { FooterProps } from ".";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ children, middleSection }: FooterProps) => JSX.Element;
|
|
6
|
+
render: (args: FooterProps) => JSX.Element;
|
|
7
|
+
tags: string[];
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
|
10
|
+
type Story = StoryObj<typeof Footer>;
|
|
11
|
+
export declare const FooterDefault: Story;
|
|
12
|
+
export declare const FooterSU2C: Story;
|
|
13
|
+
export declare const FooterBowelbabe: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ReactNode, HTMLAttributes } from "react";
|
|
2
|
-
export type FooterProps = HTMLAttributes<HTMLElement> & {
|
|
3
|
-
/** 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 */
|
|
4
|
-
middleSection?: ReactNode;
|
|
5
|
-
children?: ReactNode;
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* There should be only one footer component at the bottom of the body of each page. Links can be passed as children
|
|
9
|
-
* */
|
|
10
|
-
export declare const Footer: ({ children, middleSection }: FooterProps) => JSX.Element;
|
|
11
|
-
export default Footer;
|
|
1
|
+
import { ReactNode, HTMLAttributes } from "react";
|
|
2
|
+
export type FooterProps = HTMLAttributes<HTMLElement> & {
|
|
3
|
+
/** 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 */
|
|
4
|
+
middleSection?: ReactNode;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* There should be only one footer component at the bottom of the body of each page. Links can be passed as children
|
|
9
|
+
* */
|
|
10
|
+
export declare const Footer: ({ children, middleSection }: FooterProps) => JSX.Element;
|
|
11
|
+
export default Footer;
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
11
|
-
export declare const
|
|
1
|
+
import { ThemeType } from "../../types";
|
|
2
|
+
type ThemeProps = {
|
|
3
|
+
theme: ThemeType;
|
|
4
|
+
};
|
|
5
|
+
export declare const StyledFooter: import("styled-components").StyledComponent<"footer", any, ThemeProps, never>;
|
|
6
|
+
export declare const FooterContentWrapper: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
7
|
+
export declare const FooterSection: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
8
|
+
export declare const FooterSectionLogo: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
9
|
+
export declare const FooterSectionLinks: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
10
|
+
export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, ThemeProps, never>;
|
|
11
|
+
export declare const StyledUL: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
12
|
+
export declare const StyledLI: import("styled-components").StyledComponent<"li", any, ThemeProps, never>;
|
|
13
|
+
export declare const FooterSectionAddress: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
|
|
14
|
+
export declare const StyledRegulatorLogo: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
15
|
+
export declare const StyledAddress: import("styled-components").StyledComponent<"address", any, {}, never>;
|
|
16
|
+
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<{
|
|
3
|
-
ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
|
|
4
|
-
suppressMultiMountWarning?: boolean | undefined;
|
|
5
|
-
key?: import("react").Key | null | undefined;
|
|
6
|
-
} & {
|
|
7
|
-
theme?: any;
|
|
8
|
-
}>;
|
|
9
|
-
export default _default;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const _default: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
|
|
4
|
+
suppressMultiMountWarning?: boolean | undefined;
|
|
5
|
+
key?: import("react").Key | null | undefined;
|
|
6
|
+
} & {
|
|
7
|
+
theme?: any;
|
|
8
|
+
}>;
|
|
9
|
+
export default _default;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const _default: import("react").ForwardRefExoticComponent<{
|
|
3
|
-
ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
|
|
4
|
-
suppressMultiMountWarning?: boolean | undefined;
|
|
5
|
-
key?: import("react").Key | null | undefined;
|
|
6
|
-
} & {
|
|
7
|
-
theme?: any;
|
|
8
|
-
}>;
|
|
9
|
-
export default _default;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const _default: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
ref?: import("react").Ref<import("react").Component<import("styled-components").ThemedGlobalStyledClassProps<{}, import("styled-components").DefaultTheme>, any, any>> | undefined;
|
|
4
|
+
suppressMultiMountWarning?: boolean | undefined;
|
|
5
|
+
key?: import("react").Key | null | undefined;
|
|
6
|
+
} & {
|
|
7
|
+
theme?: any;
|
|
8
|
+
}>;
|
|
9
|
+
export default _default;
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { HeaderProps } from ".";
|
|
3
|
-
declare const _default:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
|
2
|
+
import Header, { HeaderProps } from ".";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => JSX.Element;
|
|
6
|
+
args: {
|
|
7
|
+
siteSlogan: string;
|
|
8
|
+
children: JSX.Element;
|
|
9
|
+
isSticky: boolean;
|
|
10
|
+
fullWidth: boolean;
|
|
11
|
+
};
|
|
12
|
+
tags: string[];
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
|
15
|
+
type Story = StoryObj<typeof Header>;
|
|
16
|
+
export declare const HeaderDefault: Story;
|
|
17
|
+
export declare const HeaderFullWidth: Story;
|
|
18
|
+
export declare const HeaderSticky: Story;
|
|
19
|
+
export declare const HeaderSU2C: Story;
|
|
20
|
+
export declare const HeaderBowelbabe: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode } from "react";
|
|
2
|
-
export type HeaderProps = HTMLAttributes<HTMLElement> & {
|
|
3
|
-
/** flag which make header fixed to the top even when scrolling */
|
|
4
|
-
isSticky?: boolean;
|
|
5
|
-
/** text in the middle of the header */
|
|
6
|
-
siteSlogan?: string;
|
|
7
|
-
/** text to explain the content of the icon for a11y usually a description of where the link will take you */
|
|
8
|
-
logoAltText?: string;
|
|
9
|
-
/** header logo image url */
|
|
10
|
-
logoImageSrc?: string;
|
|
11
|
-
/** title of the header image component, this is mainly for the tooltip text on hover */
|
|
12
|
-
logoLinkTitle?: string;
|
|
13
|
-
/** the url of the logo link */
|
|
14
|
-
logoLinkUrl?: string;
|
|
15
|
-
/** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
|
|
16
|
-
fullWidth?: boolean;
|
|
17
|
-
children?: ReactNode;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* There should be only one header component near or at the top of the body of each page.
|
|
21
|
-
*
|
|
22
|
-
* ### Logos
|
|
23
|
-
* 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.
|
|
24
|
-
* 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.
|
|
25
|
-
*
|
|
26
|
-
* ### Site Slogan Text (optional)
|
|
27
|
-
* 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
|
|
28
|
-
*
|
|
29
|
-
* ### Right section (optional)
|
|
30
|
-
* 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.
|
|
31
|
-
*
|
|
32
|
-
* ### Accessability
|
|
33
|
-
* 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.
|
|
34
|
-
*
|
|
35
|
-
*/
|
|
36
|
-
export declare const Header: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => JSX.Element;
|
|
37
|
-
export default Header;
|
|
1
|
+
import { HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
export type HeaderProps = HTMLAttributes<HTMLElement> & {
|
|
3
|
+
/** flag which make header fixed to the top even when scrolling */
|
|
4
|
+
isSticky?: boolean;
|
|
5
|
+
/** text in the middle of the header */
|
|
6
|
+
siteSlogan?: string;
|
|
7
|
+
/** text to explain the content of the icon for a11y usually a description of where the link will take you */
|
|
8
|
+
logoAltText?: string;
|
|
9
|
+
/** header logo image url */
|
|
10
|
+
logoImageSrc?: string;
|
|
11
|
+
/** title of the header image component, this is mainly for the tooltip text on hover */
|
|
12
|
+
logoLinkTitle?: string;
|
|
13
|
+
/** the url of the logo link */
|
|
14
|
+
logoLinkUrl?: string;
|
|
15
|
+
/** instead of the contents of the header being centered to max width as defined in theme it is 100% width fo viewport */
|
|
16
|
+
fullWidth?: boolean;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* There should be only one header component near or at the top of the body of each page.
|
|
21
|
+
*
|
|
22
|
+
* ### Logos
|
|
23
|
+
* 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.
|
|
24
|
+
* 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.
|
|
25
|
+
*
|
|
26
|
+
* ### Site Slogan Text (optional)
|
|
27
|
+
* 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
|
|
28
|
+
*
|
|
29
|
+
* ### Right section (optional)
|
|
30
|
+
* 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.
|
|
31
|
+
*
|
|
32
|
+
* ### Accessability
|
|
33
|
+
* 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.
|
|
34
|
+
*
|
|
35
|
+
*/
|
|
36
|
+
export declare const Header: ({ isSticky, siteSlogan, logoAltText, logoImageSrc, logoLinkTitle, logoLinkUrl, fullWidth, children, }: HeaderProps) => JSX.Element;
|
|
37
|
+
export default Header;
|
|
@@ -1,31 +1,37 @@
|
|
|
1
|
-
import { ThemeType } from "../../types";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
isSmall?: boolean;
|
|
10
|
-
isSticky?: boolean;
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
export declare const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
export declare const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
export declare const
|
|
30
|
-
export declare const
|
|
31
|
-
export {
|
|
1
|
+
import { ThemeType } from "../../types";
|
|
2
|
+
type StyledHeaderProps = {
|
|
3
|
+
theme: ThemeType;
|
|
4
|
+
isSmall?: boolean;
|
|
5
|
+
isSticky?: boolean;
|
|
6
|
+
fullWidth?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare const StyledHeader: import("styled-components").StyledComponent<"header", any, {
|
|
9
|
+
isSmall?: boolean | undefined;
|
|
10
|
+
isSticky?: boolean | undefined;
|
|
11
|
+
fullWidth?: boolean | undefined;
|
|
12
|
+
}, never>;
|
|
13
|
+
export declare const HeaderStickyPlaceHolder: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
|
|
14
|
+
type HeaderStickyProps = {
|
|
15
|
+
isSmall?: boolean;
|
|
16
|
+
isSticky?: boolean;
|
|
17
|
+
theme: ThemeType;
|
|
18
|
+
};
|
|
19
|
+
export declare const HeaderStickyContainer: import("styled-components").StyledComponent<"div", any, HeaderStickyProps, never>;
|
|
20
|
+
export declare const HeaderMainContent: import("styled-components").StyledComponent<"div", any, {
|
|
21
|
+
fullWidth?: boolean | undefined;
|
|
22
|
+
}, never>;
|
|
23
|
+
export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
24
|
+
type LogoWrapperProps = {
|
|
25
|
+
isSmall?: boolean;
|
|
26
|
+
isSticky?: boolean;
|
|
27
|
+
};
|
|
28
|
+
export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, LogoWrapperProps, never>;
|
|
29
|
+
export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
|
|
30
|
+
export declare const SkipToMain: import("styled-components").StyledComponent<"a", any, StyledHeaderProps, never>;
|
|
31
|
+
export declare const Tagline: import("styled-components").StyledComponent<"p", any, {
|
|
32
|
+
isSmall?: boolean | undefined;
|
|
33
|
+
isSticky?: boolean | undefined;
|
|
34
|
+
}, never>;
|
|
35
|
+
export declare const ChildWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
36
|
+
export declare const ChildInner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
37
|
+
export {};
|
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { HeadingProps } from ".";
|
|
3
|
-
declare const _default:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const
|
|
13
|
-
export declare const
|
|
14
|
-
export declare const
|
|
15
|
-
export declare const
|
|
16
|
-
export declare const
|
|
17
|
-
export declare const
|
|
18
|
-
export declare const
|
|
19
|
-
export declare const
|
|
20
|
-
export declare const
|
|
21
|
-
export declare const
|
|
22
|
-
export declare const
|
|
23
|
-
export declare const
|
|
24
|
-
export declare const
|
|
25
|
-
export declare const
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
|
2
|
+
import Heading, { HeadingProps } from ".";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => JSX.Element;
|
|
6
|
+
args: {};
|
|
7
|
+
tags: string[];
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
|
10
|
+
type Story = StoryObj<typeof Heading>;
|
|
11
|
+
export declare const DefaultHeading: Story;
|
|
12
|
+
export declare const HeadingSize: Story;
|
|
13
|
+
export declare const HeadingAligned: Story;
|
|
14
|
+
export declare const H1: Story;
|
|
15
|
+
export declare const H2: Story;
|
|
16
|
+
export declare const H3: Story;
|
|
17
|
+
export declare const H4: Story;
|
|
18
|
+
export declare const H5: Story;
|
|
19
|
+
export declare const H6: Story;
|
|
20
|
+
export declare const H1SU2C: Story;
|
|
21
|
+
export declare const H2SU2C: Story;
|
|
22
|
+
export declare const H3SU2C: Story;
|
|
23
|
+
export declare const H4SU2C: Story;
|
|
24
|
+
export declare const H5SU2C: Story;
|
|
25
|
+
export declare const H6SU2C: Story;
|
|
26
|
+
export declare const H1Bowelbabe: Story;
|
|
27
|
+
export declare const H2Bowelbabe: Story;
|
|
28
|
+
export declare const H3Bowelbabe: Story;
|
|
29
|
+
export declare const H4Bowelbabe: Story;
|
|
30
|
+
export declare const H5Bowelbabe: Story;
|
|
31
|
+
export declare const H6Bowelbabe: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { HTMLAttributes, ElementType } from "react";
|
|
2
|
-
import { SpacingProps } from "../Spacing";
|
|
3
|
-
import { FontSizeType, WordBreakType, OverflowWrapType } from "../../types";
|
|
4
|
-
export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
|
|
5
|
-
h1?: boolean;
|
|
6
|
-
h2?: boolean;
|
|
7
|
-
h3?: boolean;
|
|
8
|
-
h4?: boolean;
|
|
9
|
-
h5?: boolean;
|
|
10
|
-
h6?: boolean;
|
|
11
|
-
/** font size FontSizeType t-shirt sizes */
|
|
12
|
-
textSize?: FontSizeType;
|
|
13
|
-
/** horizontal alignment of text */
|
|
14
|
-
textAlign?: "left" | "right" | "center";
|
|
15
|
-
/** color of text */
|
|
16
|
-
textColor?: string;
|
|
17
|
-
/** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
|
|
18
|
-
as?: ElementType;
|
|
19
|
-
/** word-break behavior */
|
|
20
|
-
wordBreak?: WordBreakType;
|
|
21
|
-
/** overflow-wrap behavior */
|
|
22
|
-
overflowWrap?: OverflowWrapType;
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
*
|
|
26
|
-
* Use headings consistently to create a clear hierarchy throughout your service.
|
|
27
|
-
Markup headings semantically using the appropriate <h#> level HTML element and
|
|
28
|
-
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.
|
|
29
|
-
*
|
|
30
|
-
*/
|
|
31
|
-
declare const Heading: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => JSX.Element;
|
|
32
|
-
export default Heading;
|
|
1
|
+
import { HTMLAttributes, ElementType } from "react";
|
|
2
|
+
import { SpacingProps } from "../Spacing";
|
|
3
|
+
import { FontSizeType, WordBreakType, OverflowWrapType } from "../../types";
|
|
4
|
+
export type HeadingProps = SpacingProps & HTMLAttributes<HTMLElement> & {
|
|
5
|
+
h1?: boolean;
|
|
6
|
+
h2?: boolean;
|
|
7
|
+
h3?: boolean;
|
|
8
|
+
h4?: boolean;
|
|
9
|
+
h5?: boolean;
|
|
10
|
+
h6?: boolean;
|
|
11
|
+
/** font size FontSizeType t-shirt sizes */
|
|
12
|
+
textSize?: FontSizeType;
|
|
13
|
+
/** horizontal alignment of text */
|
|
14
|
+
textAlign?: "left" | "right" | "center";
|
|
15
|
+
/** color of text */
|
|
16
|
+
textColor?: string;
|
|
17
|
+
/** styled-component polymorphic feature so you take the styling of a header and cast the component to be a "span" for example */
|
|
18
|
+
as?: ElementType;
|
|
19
|
+
/** word-break behavior */
|
|
20
|
+
wordBreak?: WordBreakType;
|
|
21
|
+
/** overflow-wrap behavior */
|
|
22
|
+
overflowWrap?: OverflowWrapType;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
*
|
|
26
|
+
* Use headings consistently to create a clear hierarchy throughout your service.
|
|
27
|
+
Markup headings semantically using the appropriate <h#> level HTML element and
|
|
28
|
+
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.
|
|
29
|
+
*
|
|
30
|
+
*/
|
|
31
|
+
declare const Heading: ({ h1, h2, h3, h4, h5, h6, ...props }: HeadingProps) => JSX.Element;
|
|
32
|
+
export default Heading;
|