@cruk/cruk-react-components 5.0.8 → 6.0.1
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/README.md +20 -7
- package/lib/{src/components → components}/AddressLookup/AddressLookup.stories.d.ts +1 -1
- package/lib/{src/components → components}/AddressLookup/index.d.ts +1 -1
- package/lib/{src/components → components}/Box/Box.stories.d.ts +1 -1
- package/lib/{src/components → components}/Box/index.d.ts +1 -1
- package/lib/{src/components → components}/Button/Button.stories.d.ts +1 -1
- package/lib/{src/components → components}/Button/index.d.ts +1 -1
- package/lib/{src/components → components}/Checkbox/Checkbox.stories.d.ts +1 -1
- package/lib/{src/components → components}/Checkbox/index.d.ts +3 -3
- package/lib/{src/components → components}/Collapse/styles.d.ts +11 -3
- package/lib/{src/components → components}/DateField/styles.d.ts +12 -6
- package/lib/components/ErrorText/styles.d.ts +16 -0
- package/lib/{src/components → components}/Footer/styles.d.ts +3 -9
- package/lib/components/GlobalStyle.d.ts +2 -0
- package/lib/components/GlobalStyleNoFontFace.d.ts +2 -0
- package/lib/{src/components → components}/InfoBox/InfoBox.stories.d.ts +1 -1
- package/lib/{src/components → components}/InfoBox/index.d.ts +1 -1
- package/lib/components/InfoBox/styles.d.ts +13 -0
- package/lib/{src/components → components}/Link/Link.stories.d.ts +4 -1
- package/lib/{src/components → components}/Link/index.d.ts +4 -1
- package/lib/components/Link/styles.d.ts +20 -0
- package/lib/components/Modal/styles.d.ts +32 -0
- package/lib/{src/components → components}/Radio/Radio.stories.d.ts +1 -1
- package/lib/{src/components → components}/Radio/index.d.ts +3 -3
- package/lib/{src/components → components}/RadioConsent/styles.d.ts +6 -3
- package/lib/{src/components → components}/Select/Selelct.stories.d.ts +1 -1
- package/lib/{src/components → components}/Select/index.d.ts +3 -3
- package/lib/{src/components → components}/Text/Text.stories.d.ts +1 -1
- package/lib/{src/components → components}/Text/index.d.ts +1 -1
- package/lib/{src/components → components}/TextAreaField/TextAreaField.stories.d.ts +1 -1
- package/lib/{src/components → components}/TextAreaField/index.d.ts +1 -1
- package/lib/{src/components → components}/TextField/TextField.stories.d.ts +1 -1
- package/lib/{src/components → components}/TextField/index.d.ts +1 -1
- package/lib/{src/components → components}/TextField/styles.d.ts +2 -6
- package/lib/components/ThemeCheatSheet.d.ts +7 -0
- package/lib/{src/hooks → hooks}/useScrollPosition.d.ts +2 -2
- package/lib/node_modules/tslib/tslib.es6.js +1 -1
- package/lib/node_modules/tslib/tslib.es6.js.map +1 -1
- package/lib/src/components/AddressLookup/index.js +1 -1
- package/lib/src/components/AddressLookup/index.js.map +1 -1
- package/lib/src/components/AddressLookup/styles.js +1 -38
- package/lib/src/components/AddressLookup/styles.js.map +1 -1
- package/lib/src/components/Avatar/index.js +1 -1
- package/lib/src/components/Avatar/index.js.map +1 -1
- package/lib/src/components/Avatar/styles.js +1 -10
- package/lib/src/components/Avatar/styles.js.map +1 -1
- package/lib/src/components/Badge/index.js +1 -1
- package/lib/src/components/Badge/index.js.map +1 -1
- package/lib/src/components/Badge/styles.js +1 -17
- package/lib/src/components/Badge/styles.js.map +1 -1
- package/lib/src/components/Box/index.js +1 -1
- package/lib/src/components/Box/index.js.map +1 -1
- package/lib/src/components/Box/styles.js +1 -13
- package/lib/src/components/Box/styles.js.map +1 -1
- package/lib/src/components/Button/index.js +1 -1
- package/lib/src/components/Button/index.js.map +1 -1
- package/lib/src/components/Button/styles.js +1 -108
- package/lib/src/components/Button/styles.js.map +1 -1
- package/lib/src/components/Carousel/Dots.js +1 -1
- package/lib/src/components/Carousel/Dots.js.map +1 -1
- package/lib/src/components/Carousel/index.js +1 -1
- package/lib/src/components/Carousel/index.js.map +1 -1
- package/lib/src/components/Carousel/styles.js +1 -96
- package/lib/src/components/Carousel/styles.js.map +1 -1
- package/lib/src/components/Checkbox/index.js +1 -1
- package/lib/src/components/Checkbox/index.js.map +1 -1
- package/lib/src/components/Checkbox/styles.js +1 -105
- package/lib/src/components/Checkbox/styles.js.map +1 -1
- package/lib/src/components/Collapse/index.js +1 -1
- package/lib/src/components/Collapse/index.js.map +1 -1
- package/lib/src/components/Collapse/styles.js +1 -31
- package/lib/src/components/Collapse/styles.js.map +1 -1
- package/lib/src/components/DateField/index.js +1 -1
- package/lib/src/components/DateField/index.js.map +1 -1
- package/lib/src/components/DateField/styles.js +1 -26
- package/lib/src/components/DateField/styles.js.map +1 -1
- package/lib/src/components/Divider.js +1 -17
- package/lib/src/components/Divider.js.map +1 -1
- package/lib/src/components/ErrorText/index.js +1 -1
- package/lib/src/components/ErrorText/index.js.map +1 -1
- package/lib/src/components/ErrorText/styles.js +1 -5
- package/lib/src/components/ErrorText/styles.js.map +1 -1
- package/lib/src/components/Flex.js +1 -7
- package/lib/src/components/Flex.js.map +1 -1
- package/lib/src/components/Fontface.js +1 -1
- package/lib/src/components/Fontface.js.map +1 -1
- package/lib/src/components/Footer/index.js +1 -1
- package/lib/src/components/Footer/index.js.map +1 -1
- package/lib/src/components/Footer/styles.js +1 -69
- package/lib/src/components/Footer/styles.js.map +1 -1
- package/lib/src/components/GlobalStyle.js +1 -37
- package/lib/src/components/GlobalStyle.js.map +1 -1
- package/lib/src/components/GlobalStyleNoFontFace.js +1 -37
- package/lib/src/components/GlobalStyleNoFontFace.js.map +1 -1
- package/lib/src/components/Header/index.js +1 -1
- package/lib/src/components/Header/index.js.map +1 -1
- package/lib/src/components/Header/styles.js +1 -109
- package/lib/src/components/Header/styles.js.map +1 -1
- package/lib/src/components/Heading/index.js +1 -1
- package/lib/src/components/Heading/index.js.map +1 -1
- package/lib/src/components/Heading/styles.js +1 -75
- package/lib/src/components/Heading/styles.js.map +1 -1
- package/lib/src/components/IconFa/index.js +1 -1
- package/lib/src/components/IconFa/index.js.map +1 -1
- package/lib/src/components/IconFa/styles.js +1 -10
- package/lib/src/components/IconFa/styles.js.map +1 -1
- package/lib/src/components/InfoBox/index.js +1 -1
- package/lib/src/components/InfoBox/index.js.map +1 -1
- package/lib/src/components/InfoBox/styles.js +1 -12
- package/lib/src/components/InfoBox/styles.js.map +1 -1
- package/lib/src/components/LabelWrapper/index.js +1 -1
- package/lib/src/components/LabelWrapper/index.js.map +1 -1
- package/lib/src/components/LabelWrapper/styles.js +1 -15
- package/lib/src/components/LabelWrapper/styles.js.map +1 -1
- package/lib/src/components/LegendWrapper/index.js +1 -1
- package/lib/src/components/LegendWrapper/index.js.map +1 -1
- package/lib/src/components/LegendWrapper/styles.js +1 -34
- package/lib/src/components/LegendWrapper/styles.js.map +1 -1
- package/lib/src/components/Link/index.js +1 -1
- package/lib/src/components/Link/index.js.map +1 -1
- package/lib/src/components/Link/styles.js +1 -29
- package/lib/src/components/Link/styles.js.map +1 -1
- package/lib/src/components/Loader/index.js +1 -1
- package/lib/src/components/Loader/index.js.map +1 -1
- package/lib/src/components/Loader/styles.js +1 -45
- package/lib/src/components/Loader/styles.js.map +1 -1
- package/lib/src/components/Modal/index.js +1 -1
- package/lib/src/components/Modal/index.js.map +1 -1
- package/lib/src/components/Modal/styles.js +1 -59
- package/lib/src/components/Modal/styles.js.map +1 -1
- package/lib/src/components/Pagination/index.js +1 -1
- package/lib/src/components/Pagination/index.js.map +1 -1
- package/lib/src/components/Pagination/styles.js +1 -92
- package/lib/src/components/Pagination/styles.js.map +1 -1
- package/lib/src/components/PopOver/index.js +1 -1
- package/lib/src/components/PopOver/index.js.map +1 -1
- package/lib/src/components/PopOver/styles.js +1 -81
- package/lib/src/components/PopOver/styles.js.map +1 -1
- package/lib/src/components/ProgressBar/index.js +1 -1
- package/lib/src/components/ProgressBar/index.js.map +1 -1
- package/lib/src/components/ProgressBar/styles.js +1 -132
- package/lib/src/components/ProgressBar/styles.js.map +1 -1
- package/lib/src/components/Radio/index.js +1 -1
- package/lib/src/components/Radio/index.js.map +1 -1
- package/lib/src/components/Radio/styles.js +1 -125
- package/lib/src/components/Radio/styles.js.map +1 -1
- package/lib/src/components/RadioConsent/index.js +1 -1
- package/lib/src/components/RadioConsent/index.js.map +1 -1
- package/lib/src/components/RadioConsent/styles.js +1 -26
- package/lib/src/components/RadioConsent/styles.js.map +1 -1
- package/lib/src/components/Select/index.js +1 -1
- package/lib/src/components/Select/index.js.map +1 -1
- package/lib/src/components/Select/styles.js +1 -41
- package/lib/src/components/Select/styles.js.map +1 -1
- package/lib/src/components/Spacing/index.js +1 -1
- package/lib/src/components/Spacing/index.js.map +1 -1
- package/lib/src/components/Step/index.js +1 -1
- package/lib/src/components/Step/index.js.map +1 -1
- package/lib/src/components/Step/styles.js +1 -79
- package/lib/src/components/Step/styles.js.map +1 -1
- package/lib/src/components/Text/index.js +1 -1
- package/lib/src/components/Text/index.js.map +1 -1
- package/lib/src/components/Text/styles.js +1 -19
- package/lib/src/components/Text/styles.js.map +1 -1
- package/lib/src/components/TextAreaField/index.js +1 -1
- package/lib/src/components/TextAreaField/index.js.map +1 -1
- package/lib/src/components/TextAreaField/styles.js +1 -29
- package/lib/src/components/TextAreaField/styles.js.map +1 -1
- package/lib/src/components/TextField/index.js +1 -1
- package/lib/src/components/TextField/index.js.map +1 -1
- package/lib/src/components/TextField/styles.js +1 -110
- package/lib/src/components/TextField/styles.js.map +1 -1
- package/lib/src/components/Totaliser/index.js +1 -1
- package/lib/src/components/Totaliser/index.js.map +1 -1
- package/lib/src/components/Totaliser/styles.js +1 -59
- package/lib/src/components/Totaliser/styles.js.map +1 -1
- package/lib/src/components/UserBlock/index.js +1 -1
- package/lib/src/components/UserBlock/index.js.map +1 -1
- package/lib/src/components/UserBlock/styles.js +1 -21
- package/lib/src/components/UserBlock/styles.js.map +1 -1
- package/lib/src/hooks/useEffectBrowser.js +1 -1
- package/lib/src/hooks/useEffectBrowser.js.map +1 -1
- package/lib/src/hooks/useKey.js +1 -1
- package/lib/src/hooks/useKey.js.map +1 -1
- package/lib/src/hooks/useLayoutEffectBrowser.js +1 -1
- package/lib/src/hooks/useLayoutEffectBrowser.js.map +1 -1
- package/lib/src/hooks/useScrollPosition.js +1 -1
- package/lib/src/hooks/useScrollPosition.js.map +1 -1
- package/lib/src/themes/bowelbabe.js +1 -1
- package/lib/src/themes/bowelbabe.js.map +1 -1
- package/lib/src/themes/cruk.js +1 -1
- package/lib/src/themes/cruk.js.map +1 -1
- package/lib/src/themes/rfl.js +1 -1
- package/lib/src/themes/rfl.js.map +1 -1
- package/lib/src/themes/su2c.js +1 -1
- package/lib/src/themes/su2c.js.map +1 -1
- package/lib/src/utils/Helper.js +1 -1
- package/lib/src/utils/Helper.js.map +1 -1
- package/lib/src/utils/debounce.js +1 -1
- package/lib/src/utils/debounce.js.map +1 -1
- package/lib/src/utils/themeUtils.js +1 -1
- package/lib/src/utils/themeUtils.js.map +1 -1
- package/package.json +15 -15
- package/lib/.storybook/main.d.ts +0 -3
- package/lib/.storybook/preview.d.ts +0 -3
- package/lib/src/components/ErrorText/styles.d.ts +0 -8
- package/lib/src/components/GlobalStyle.d.ts +0 -2
- package/lib/src/components/GlobalStyleNoFontFace.d.ts +0 -2
- package/lib/src/components/InfoBox/styles.d.ts +0 -10
- package/lib/src/components/Link/styles.d.ts +0 -12
- package/lib/src/components/Modal/styles.d.ts +0 -21
- package/lib/src/components/ThemeCheatSheet.d.ts +0 -7
- /package/lib/{src/components → components}/AddressLookup/AddressLookUp.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/AddressLookup/styles.d.ts +0 -0
- /package/lib/{src/components → components}/AllThemesWrapper.d.ts +0 -0
- /package/lib/{src/components → components}/Avatar/Avatar.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Avatar/Avatar.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Avatar/index.d.ts +0 -0
- /package/lib/{src/components → components}/Avatar/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Badge/Badge.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Badge/Badge.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Badge/index.d.ts +0 -0
- /package/lib/{src/components → components}/Badge/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Box/Box.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Box/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Button/Button.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Button/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Carousel/Carousel.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Carousel/Carousel.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Carousel/Dots.d.ts +0 -0
- /package/lib/{src/components → components}/Carousel/index.d.ts +0 -0
- /package/lib/{src/components → components}/Carousel/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Checkbox/CheckBox.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Checkbox/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Collapse/Collapse.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Collapse/Collapse.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Collapse/index.d.ts +0 -0
- /package/lib/{src/components → components}/DateField/DateField.stories.d.ts +0 -0
- /package/lib/{src/components → components}/DateField/DateField.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/DateField/index.d.ts +0 -0
- /package/lib/{src/components → components}/Divider.d.ts +0 -0
- /package/lib/{src/components → components}/ErrorText/ErrorText.stories.d.ts +0 -0
- /package/lib/{src/components → components}/ErrorText/ErrorText.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/ErrorText/index.d.ts +0 -0
- /package/lib/{src/components → components}/Flex.d.ts +0 -0
- /package/lib/{src/components → components}/Fontface.d.ts +0 -0
- /package/lib/{src/components → components}/Footer/Footer.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Footer/Footer.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Footer/index.d.ts +0 -0
- /package/lib/{src/components → components}/Header/Header.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Header/Header.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Header/index.d.ts +0 -0
- /package/lib/{src/components → components}/Header/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Heading/Heading.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Heading/Heading.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Heading/index.d.ts +0 -0
- /package/lib/{src/components → components}/Heading/styles.d.ts +0 -0
- /package/lib/{src/components → components}/IconFa/IconFa.stories.d.ts +0 -0
- /package/lib/{src/components → components}/IconFa/IconFa.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/IconFa/index.d.ts +0 -0
- /package/lib/{src/components → components}/IconFa/styles.d.ts +0 -0
- /package/lib/{src/components → components}/InfoBox/InfoBox.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/LabelWrapper/index.d.ts +0 -0
- /package/lib/{src/components → components}/LabelWrapper/styles.d.ts +0 -0
- /package/lib/{src/components → components}/LegendWrapper/LegendWrapper.stories.d.ts +0 -0
- /package/lib/{src/components → components}/LegendWrapper/LegendWrapper.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/LegendWrapper/index.d.ts +0 -0
- /package/lib/{src/components → components}/LegendWrapper/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Link/Link.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Loader/Loader.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Loader/Loader.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Loader/index.d.ts +0 -0
- /package/lib/{src/components → components}/Loader/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Modal/Modal.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Modal/Modal.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Modal/index.d.ts +0 -0
- /package/lib/{src/components → components}/Pagination/Pagination.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Pagination/Pagination.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Pagination/index.d.ts +0 -0
- /package/lib/{src/components → components}/Pagination/styles.d.ts +0 -0
- /package/lib/{src/components → components}/PopOver/PopOver.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/PopOver/Popover.stories.d.ts +0 -0
- /package/lib/{src/components → components}/PopOver/index.d.ts +0 -0
- /package/lib/{src/components → components}/PopOver/styles.d.ts +0 -0
- /package/lib/{src/components → components}/ProgressBar/ProgressBar.stories.d.ts +0 -0
- /package/lib/{src/components → components}/ProgressBar/ProgressBar.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/ProgressBar/index.d.ts +0 -0
- /package/lib/{src/components → components}/ProgressBar/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Radio/Radio.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Radio/styles.d.ts +0 -0
- /package/lib/{src/components → components}/RadioConsent/Radio.stories.d.ts +0 -0
- /package/lib/{src/components → components}/RadioConsent/RadioConsent.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/RadioConsent/index.d.ts +0 -0
- /package/lib/{src/components → components}/Select/Select.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Select/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Spacing/index.d.ts +0 -0
- /package/lib/{src/components → components}/Step/Step.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Step/Step.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Step/index.d.ts +0 -0
- /package/lib/{src/components → components}/Step/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Text/Text.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Text/styles.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/TextAreaField.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/styles.d.ts +0 -0
- /package/lib/{src/components → components}/TextField/TextField.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Totaliser/Totaliser.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Totaliser/Totaliser.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Totaliser/index.d.ts +0 -0
- /package/lib/{src/components → components}/Totaliser/styles.d.ts +0 -0
- /package/lib/{src/components → components}/UserBlock/UserBlock.stories.d.ts +0 -0
- /package/lib/{src/components → components}/UserBlock/UserBlock.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/UserBlock/index.d.ts +0 -0
- /package/lib/{src/components → components}/UserBlock/styles.d.ts +0 -0
- /package/lib/{src/components → components}/index.d.ts +0 -0
- /package/lib/{src/hooks → hooks}/useEffectBrowser.d.ts +0 -0
- /package/lib/{src/hooks → hooks}/useKey.d.ts +0 -0
- /package/lib/{src/hooks → hooks}/useLayoutEffectBrowser.d.ts +0 -0
- /package/lib/{src/themes → themes}/bowelbabe.d.ts +0 -0
- /package/lib/{src/themes → themes}/cruk.d.ts +0 -0
- /package/lib/{src/themes → themes}/rfl.d.ts +0 -0
- /package/lib/{src/themes → themes}/su2c.d.ts +0 -0
- /package/lib/{src/types.d.ts → types.d.ts} +0 -0
- /package/lib/{src/utils → utils}/Helper.d.ts +0 -0
- /package/lib/{src/utils → utils}/__tests__/testHelpers.test.d.ts +0 -0
- /package/lib/{src/utils → utils}/debounce.d.ts +0 -0
- /package/lib/{src/utils → utils}/themeUtils.d.ts +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function
|
|
1
|
+
import{__assign as n}from"../../../node_modules/tslib/tslib.es6.js";function a(a){return n(n({},a),{margin:void 0,marginTop:void 0,marginRight:void 0,marginBottom:void 0,marginLeft:void 0,marginVertical:void 0,marginHorizontal:void 0,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,paddingVertical:void 0,paddingHorizontal:void 0,$margin:a.margin,$marginTop:a.marginTop,$marginRight:a.marginRight,$marginBottom:a.marginBottom,$marginLeft:a.marginLeft,$marginVertical:a.marginVertical,$marginHorizontal:a.marginHorizontal,$padding:a.padding,$paddingTop:a.paddingTop,$paddingRight:a.paddingRight,$paddingBottom:a.paddingBottom,$paddingLeft:a.paddingLeft,$paddingVertical:a.paddingVertical,$paddingHorizontal:a.paddingHorizontal})}function i(n,a){var i=n.$margin,t=n.$marginHorizontal,o=n.$marginVertical,g=n.$marginTop,d=n.$marginRight,p=n.$marginBottom,r=n.$marginLeft,c=n.$padding,m=n.$paddingHorizontal,l=n.$paddingVertical,$=n.$paddingTop,e=n.$paddingRight,s=n.$paddingBottom,u=n.$paddingLeft,f=i?a.spacing[i]:null,v=o?a.spacing[o]:null,h=t?a.spacing[t]:null,z=g?a.spacing[g]:null,B=d?a.spacing[d]:null,H=p?a.spacing[p]:null,L=r?a.spacing[r]:null,R=f?"margin: ".concat(f," !important;"):"",T=z?"margin-top: ".concat(z," !important;"):v?"margin-top: ".concat(v," !important;"):"",V=B?"margin-right: ".concat(B," !important;"):h?"margin-right: ".concat(h," !important;"):"",b=H?"margin-bottom: ".concat(H," !important;"):v?"margin-bottom: ".concat(v," !important;"):"",j=L?"margin-left: ".concat(L," !important;"):h?"margin-left: ".concat(h," !important;"):"",x=c?a.spacing[c]:null,_=l?a.spacing[l]:null,k=m?a.spacing[m]:null,q=$?a.spacing[$]:null,w=e?a.spacing[e]:null,y=s?a.spacing[s]:null,A=u?a.spacing[u]:null,C=x?"padding: ".concat(x," !important;"):"",D=q?"padding-top: ".concat(q," !important;"):_?"padding-top: ".concat(_," !important;"):"",E=w?"padding-right: ".concat(w," !important;"):k?"padding-right: ".concat(k," !important;"):"",F=y?"padding-bottom: ".concat(y," !important;"):_?"padding-bottom: ".concat(_," !important;"):"",G=A?"padding-left: ".concat(A," !important;"):k?"padding-left: ".concat(k," !important;"):"";return"\n ".concat(R,"\n ").concat(T,"\n ").concat(V,"\n ").concat(b,"\n ").concat(j,"\n ").concat(C,"\n ").concat(D,"\n ").concat(E,"\n ").concat(F,"\n ").concat(G,"\n ")}export{i as default,i as spacing,a as spacingPropsToSpacingPropsInternal};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,CAEgB,SAAAe,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAXQkB,WACVC,EAUEnB,EAVUmB,aACZC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAPMwB,SACRM,EAME9B,EANgB8B,mBAClBD,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEiC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,WAAWQ,OAAAR,EAAgB,gBAAG,GAC9CS,EAAWN,EACb,eAAeK,OAAAL,EAAgB,gBAC/BF,EACE,eAAeO,OAAAP,EAAgB,gBAC/B,GACAS,EAAWN,EACb,iBAAiBI,OAAAJ,EAAgB,gBACjCF,EACE,iBAAiBM,OAAAN,EAAgB,gBACjC,GACAS,EAAWN,EACb,kBAAkBG,OAAAH,EAAgB,gBAClCJ,EACE,kBAAkBO,OAAAP,EAAgB,gBAClC,GACAW,EAAWN,EACb,gBAAgBE,OAAAF,EAAgB,gBAChCJ,EACE,gBAAgBM,OAAAN,EAAgB,gBAChC,GAEAW,EAAKtB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CuB,EAAKlB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DmB,EAAKlB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DmB,EAAKxB,EAAcO,EAAMD,QAAQN,GAAe,KAChDyB,EAAKxB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDyB,EAAKxB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDyB,EAAKxB,EAAeI,EAAMD,QAAQH,GAAgB,KAElDyB,EAAWP,EAAK,YAAYL,OAAAK,EAAgB,gBAAG,GAC/CQ,EAAWL,EACb,gBAAgBR,OAAAQ,EAAgB,gBAChCF,EACE,gBAAgBN,OAAAM,EAAgB,gBAChC,GACAQ,EAAWL,EACb,kBAAkBT,OAAAS,EAAgB,gBAClCF,EACE,kBAAkBP,OAAAO,EAAgB,gBAClC,GACAQ,EAAWL,EACb,mBAAmBV,OAAAU,EAAgB,gBACnCJ,EACE,mBAAmBN,OAAAM,EAAgB,gBACnC,GACAU,EAAWL,EACb,iBAAiBX,OAAAW,EAAgB,gBACjCJ,EACE,iBAAiBP,OAAAO,EAAgB,gBACjC,GAEN,MAAO,SAAAP,OACHD,EACA,UAAAC,OAAAC,mBACAC,EAAQ,UAAAF,OACRG,EACA,UAAAH,OAAAI,mBACAQ,EAAQ,UAAAZ,OACRa,EACA,UAAAb,OAAAc,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import{useTheme as
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as n}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as s,StepTick as c}from"./styles.js";function i(i){var u=i.steps,p=void 0===u?[]:u,d=i.current,f=void 0===d?1:d,y=i.children,E=r(),v=e(e({},o),E),h=Array.isArray(p)?Object.keys(p).length:0;return t.createElement(n,{theme:v},t.createElement(l,null,t.createElement(m,{$total:h},Array.isArray(p)&&p.map((function(e,r){var n="step".concat(r);return t.createElement(a,{key:n,$active:r+1===f,$done:r+1<f},t.createElement(s,null,r+1<f&&t.createElement(c,null)),e)}))),y))}export{i as Step,i as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n /** current step number */\n current: number;\n /** list of step */\n steps: string[];\n children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * 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.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const totalSteps: number = Array.isArray(steps)\n ? Object.keys(steps).length\n : 0;\n\n return (\n <ThemeProvider theme={theme}>\n <StepWrapper>\n <StepList $total={totalSteps}>\n {Array.isArray(steps) &&\n steps.map((step, i) => {\n const key = `step${i}`;\n return (\n <StepItem\n key={key}\n $active={i + 1 === current}\n $done={i + 1 < current}\n >\n <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n {step}\n </StepItem>\n );\n })}\n </StepList>\n {children}\n </StepWrapper>\n </ThemeProvider>\n );\n}\nexport default Step;\n"],"names":["Step","steps","current","children","foundTheme","useTheme","theme","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","StepItem","$active","$done","StepBar","StepTick"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n /** current step number */\n current: number;\n /** list of step */\n steps: string[];\n children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * 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.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const totalSteps: number = Array.isArray(steps)\n ? Object.keys(steps).length\n : 0;\n\n return (\n <ThemeProvider theme={theme}>\n <StepWrapper>\n <StepList $total={totalSteps}>\n {Array.isArray(steps) &&\n steps.map((step, i) => {\n const key = `step${i}`;\n return (\n <StepItem\n key={key}\n $active={i + 1 === current}\n $done={i + 1 < current}\n >\n <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n {step}\n </StepItem>\n );\n })}\n </StepList>\n {children}\n </StepWrapper>\n </ThemeProvider>\n );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","undefined","_c","current","children","foundTheme","useTheme","theme","__assign","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"2SAsBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAQC,IAAAF,EAAA,KAAIG,EAAAJ,EAAAK,QAAAA,OAAUF,IAAAC,EAAA,EAACA,EAAEE,EAAQN,EAAAM,SAChDC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQZ,GACrCa,OAAOC,KAAKd,GAAOe,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,UAAiBV,GACfC,MAAMC,QAAQZ,IACbA,EAAMqB,KAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAOC,OAAAF,GACnB,OACEP,EAACC,cAAAS,GACCF,IAAKA,EACIG,QAAAJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAACC,cAAAY,EAAS,KAAAN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,KAEHlB,GAIT"}
|
|
@@ -1,80 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
*,
|
|
4
|
-
*:after,
|
|
5
|
-
*:before {
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
}
|
|
8
|
-
text-align: center;
|
|
9
|
-
text-transform: capitalize;
|
|
10
|
-
`,r=o.ul`
|
|
11
|
-
list-style: none;
|
|
12
|
-
padding: 0;
|
|
13
|
-
margin: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
justify-content: space-between;
|
|
16
|
-
width: 100%;
|
|
17
|
-
|
|
18
|
-
${({$total:o})=>o&&t`
|
|
19
|
-
li {
|
|
20
|
-
width: ${100/o}%;
|
|
21
|
-
}
|
|
22
|
-
li:last-child span:after {
|
|
23
|
-
display: none;
|
|
24
|
-
}
|
|
25
|
-
`}
|
|
26
|
-
`,i=o.span`
|
|
27
|
-
border-radius: 50%;
|
|
28
|
-
background-clip: padding-box;
|
|
29
|
-
width: 24px;
|
|
30
|
-
height: 24px;
|
|
31
|
-
background-color: ${({theme:o})=>o.colors.stepBackground};
|
|
32
|
-
display: block;
|
|
33
|
-
margin: 0 auto 0.5em auto;
|
|
34
|
-
border: 2px solid ${({theme:o})=>o.colors.stepBorder};
|
|
35
|
-
text-indent: -999px;
|
|
36
|
-
|
|
37
|
-
&:after {
|
|
38
|
-
display: block;
|
|
39
|
-
position: absolute;
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 2px;
|
|
42
|
-
content: "";
|
|
43
|
-
background-color: transparent;
|
|
44
|
-
border-bottom: 2px solid ${({theme:o})=>o.colors.stepBorder};
|
|
45
|
-
left: 50%;
|
|
46
|
-
top: 11px;
|
|
47
|
-
margin-left: 12px;
|
|
48
|
-
}
|
|
49
|
-
`,a=o.span`
|
|
50
|
-
display: block;
|
|
51
|
-
transform: rotate(45deg);
|
|
52
|
-
transform-origin: center center;
|
|
53
|
-
height: 14px;
|
|
54
|
-
width: 8px;
|
|
55
|
-
border-bottom: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
|
|
56
|
-
border-right: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
|
|
57
|
-
margin-top: 4px;
|
|
58
|
-
margin-left: 8px;
|
|
59
|
-
`,l=o.li`
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-direction: column;
|
|
62
|
-
position: relative;
|
|
63
|
-
font-family: ${({theme:o})=>o.typography.fontFamilyBase};
|
|
64
|
-
|
|
65
|
-
${({theme:o,$active:e})=>e&&t`
|
|
66
|
-
${i} {
|
|
67
|
-
border-color: ${o.colors.tertiary};
|
|
68
|
-
}
|
|
69
|
-
`}
|
|
70
|
-
${({$done:o,theme:e})=>o&&t`
|
|
71
|
-
${i} {
|
|
72
|
-
border: none;
|
|
73
|
-
background-color: ${e.colors.tertiary};
|
|
74
|
-
&:after {
|
|
75
|
-
border-bottom: 2px solid ${e.colors.tertiary};
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
`}
|
|
79
|
-
`;export{i as StepBar,l as StepItem,r as StepList,a as StepTick,e as StepWrapper};
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o}from"styled-components";var r,e,i,a,l,d,p,s,c=t.div(r||(r=n(["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"],["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"]))),b=t.ul(i||(i=n(["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"],["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"])),(function(t){var r=t.$total;return r&&o(e||(e=n(["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "],["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "])),100/r)})),x=t.span(a||(a=n(["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"],["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"])),(function(n){return n.theme.colors.stepBackground}),(function(n){return n.theme.colors.stepBorder}),(function(n){return n.theme.colors.stepBorder})),f=t.span(l||(l=n(["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"],["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"])),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)}),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)})),g=t.li(s||(s=n(["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"],["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(t){var r=t.theme;return t.$active&&o(d||(d=n(["\n "," {\n border-color: ",";\n }\n "],["\n "," {\n border-color: ",";\n }\n "])),x,r.colors.tertiary)}),(function(t){var r=t.$done,e=t.theme;return r&&o(p||(p=n(["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "],["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "])),x,e.colors.tertiary,e.colors.tertiary)}));export{x as StepBar,g as StepItem,b as StepList,f as StepTick,c as StepWrapper};
|
|
80
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n $total: number;\n}>`\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ${({ $total }) =>\n $total &&\n css`\n li {\n width: ${100 / $total}%;\n }\n li:last-child span:after {\n display: none;\n }\n `}\n`;\n\nexport const StepBar = styled.span<{\n theme: ThemeType;\n}>`\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ${({ theme }) => theme.colors.stepBackground};\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: transparent;\n border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n`;\n\nexport const StepTick = styled.span<{\n theme: ThemeType;\n}>`\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n border-right: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n $active: boolean;\n $done: boolean;\n theme: ThemeType;\n}>`\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n ${({ theme, $active }) =>\n $active &&\n css`\n ${StepBar} {\n border-color: ${theme.colors.tertiary};\n }\n `}\n ${({ $done, theme }) =>\n $done &&\n css`\n ${StepBar} {\n border: none;\n background-color: ${theme.colors.tertiary};\n &:after {\n border-bottom: 2px solid ${theme.colors.tertiary};\n }\n }\n `}\n`;\n"],"names":["StepWrapper","styled","div","StepList","ul","$total","css","StepBar","span","theme","colors","stepBackground","stepBorder","StepTick","textLight","StepItem","li","typography","fontFamilyBase","$active","tertiary","$done"],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n $total: number;\n}>`\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ${({ $total }) =>\n $total &&\n css`\n li {\n width: ${100 / $total}%;\n }\n li:last-child span:after {\n display: none;\n }\n `}\n`;\n\nexport const StepBar = styled.span<{\n theme: ThemeType;\n}>`\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ${({ theme }) => theme.colors.stepBackground};\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: transparent;\n border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n`;\n\nexport const StepTick = styled.span<{\n theme: ThemeType;\n}>`\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n border-right: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n $active: boolean;\n $done: boolean;\n theme: ThemeType;\n}>`\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n ${({ theme, $active }) =>\n $active &&\n css`\n ${StepBar} {\n border-color: ${theme.colors.tertiary};\n }\n `}\n ${({ $done, theme }) =>\n $done &&\n css`\n ${StepBar} {\n border: none;\n background-color: ${theme.colors.tertiary};\n &:after {\n border-bottom: 2px solid ${theme.colors.tertiary};\n }\n }\n `}\n`;\n"],"names":["StepWrapper","styled","div","templateObject_1","__makeTemplateObject","StepList","ul","templateObject_3","_a","$total","css","templateObject_2","StepBar","span","templateObject_4","theme","colors","stepBackground","stepBorder","StepTick","templateObject_5","textLight","concat","StepItem","li","templateObject_8","typography","fontFamilyBase","$active","templateObject_6","tertiary","$done","templateObject_7"],"mappings":"2HAGa,oBAAAA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,SATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,IAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAEhC,kHAK8D,2EAGJ,kNAUS,uEAb/C,SAACI,GAAc,OAAPA,EAAAO,MAAaC,OAAOC,cAAb,IAGf,SAACT,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAUN,SAACV,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAOjCC,EAAWlB,EAAOY,KAE7BO,IAAAA,EAAAhB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAAA,0IAU8B,sBAKA,mDATb,SAACI,GAEJ,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IACU,SAACb,GAEH,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IAKKE,EAAWtB,EAAOuB,GAAEC,IAAAA,EAAArB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAI/B,wFAI6D,UAQ1D,OAWA,SAnBY,SAACI,GAAc,OAAPA,EAAAO,MAAaW,WAAWC,cAAjB,IAE5B,SAACnB,OAAEO,EAAKP,EAAAO,MACR,OADiBP,EAAAoB,SAEjBlB,EAAGmB,IAAAA,EAAAzB,EAAA,CAAA,WAAA,6BAAA,oBAAA,CAAA,WACQ,6BAC8B,sBADrCQ,EACgBG,EAAMC,OAAOc,SAHjC,IAMA,SAACtB,OAAEuB,EAAKvB,EAAAuB,MAAEhB,EAAKP,EAAAO,MACf,OAAAgB,GACArB,EAAGsB,IAAAA,EAAA5B,EAAA,CAAA,WAAA,wDAAA,4DAAA,+BAAA,CAAA,WACQ,wDAEkC,4DAES,iCAJlDQ,EAEoBG,EAAMC,OAAOc,SAEJf,EAAMC,OAAOc,SAN9C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,
|
|
1
|
+
import{__assign as t,__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as o}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=o(),n=t(t({},i),a),f=x.textColor,s=x.textAlign,p=x.textSize,d=x.textWeight,g=x.textFontFamily,$=x.wordBreak,c=x.overflowWrap,w=x.ref,F=e(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),W=m(F);return r.createElement(l,t({$textColor:f,$textAlign:s,$textSize:p,$textWeight:d,$textFontFamily:g,$wordBreak:$,$overflowWrap:c},W,{theme:n,ref:w}))};export{x as Text,x as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * 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.\n */\nexport type TextProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** text colour */\n textColor?: string;\n /** text horizontal alignment */\n textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n /** font size FontSizeType t-shirt sizes */\n textSize?: FontSizeType;\n /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n textWeight?: number | string;\n /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n textFontFamily?: string;\n /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n as?: ElementType;\n /** word-break behaviour */\n wordBreak?: WordBreakType;\n /** overflow-wrap behaviour */\n overflowWrap?: OverflowWrapType;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLElement>;\n };\n\nexport const Text = (props: TextProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const {\n textColor,\n textAlign,\n textSize,\n textWeight,\n textFontFamily,\n wordBreak,\n overflowWrap,\n ref,\n ...rest\n } = props;\n\n const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <TextStyled\n $textColor={textColor}\n $textAlign={textAlign}\n $textSize={textSize}\n $textWeight={textWeight}\n $textFontFamily={textFontFamily}\n $wordBreak={wordBreak}\n $overflowWrap={overflowWrap}\n {...withInternalSpacingProps}\n theme={theme}\n ref={ref as Ref<HTMLParagraphElement>}\n />\n );\n};\n\nexport default Text;\n"],"names":["Text","props","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qTA4CO,IAAMA,EAAO,SAACC,GACnB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EASEN,EAAKM,UARPC,EAQEP,EAROO,UACTC,EAOER,WANFS,EAMET,EAAKS,WALPC,EAKEV,iBAJFW,EAIEX,EAAKW,UAHPC,EAGEZ,EAHUY,aACZC,EAEEb,MADCc,IACDd,EAVE,CAUL,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAEKe,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPU,IAAKA,IAGX"}
|
|
@@ -1,20 +1,2 @@
|
|
|
1
|
-
import t from"styled-components";import{spacing as
|
|
2
|
-
font-family: ${({$textFontFamily:t,theme:e})=>t||e.typography.fontFamilyBase};
|
|
3
|
-
word-break: ${({$wordBreak:t})=>t||"normal"};
|
|
4
|
-
overflow-wrap: ${({$overflowWrap:t})=>t||"break-word"};
|
|
5
|
-
color: ${({theme:{colors:t},$textColor:e})=>e&&void 0!==t[e]?t[e]:e||t.textDark};
|
|
6
|
-
text-align: ${({$textAlign:t})=>t||"left"};
|
|
7
|
-
font-size: ${({theme:{fontSizes:t,fontSizes:{m:e}},$textSize:o})=>o?t[o]:e};
|
|
8
|
-
line-height: ${({theme:t})=>t.typography.lineHeight};
|
|
9
|
-
font-weight: ${({$textWeight:t,theme:e})=>t||e.typography.fontWeightBase};
|
|
10
|
-
padding: 0;
|
|
11
|
-
margin: 0;
|
|
12
|
-
margin-bottom: ${({as:t,theme:{spacing:{xs:e}}})=>void 0===t||"p"===t?`${e}`:0};
|
|
13
|
-
|
|
14
|
-
&:last-child {
|
|
15
|
-
margin-bottom: 0;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
${t=>e(t,t.theme)}
|
|
19
|
-
`;export{o as TextStyled};
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{spacing as o}from"../Spacing/index.js";var e,r=t.p(e||(e=n(["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"],["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"])),(function(n){var t=n.$textFontFamily,o=n.theme;return t||o.typography.fontFamilyBase}),(function(n){return n.$wordBreak||"normal"}),(function(n){return n.$overflowWrap||"break-word"}),(function(n){var t=n.theme.colors,o=n.$textColor;return o&&void 0!==t[o]?t[o]:o||t.textDark}),(function(n){return n.$textAlign||"left"}),(function(n){var t=n.theme,o=t.fontSizes,e=t.fontSizes.m,r=n.$textSize;return r?o[r]:e}),(function(n){return n.theme.typography.lineHeight}),(function(n){var t=n.$textWeight,o=n.theme;return t||o.typography.fontWeightBase}),(function(n){var t=n.as,o=n.theme.spacing.xs;return void 0===t||"p"===t?"".concat(o):0}),(function(n){return o(n,n.theme)}));export{r as TextStyled};
|
|
20
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n $textColor?: string;\n $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n $textSize?: FontSizeType;\n $textWeight?: number | string;\n as?: ElementType;\n $wordBreak?: WordBreakType;\n $overflowWrap?: OverflowWrapType;\n $textFontFamily?: string;\n theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n font-family: ${({ $textFontFamily, theme }) =>\n $textFontFamily || theme.typography.fontFamilyBase};\n word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n color: ${({ theme: { colors }, $textColor }) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.textDark};\n text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n $textSize,\n }) => ($textSize ? fontSizes[$textSize] : m)};\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-weight: ${({ $textWeight, theme }) =>\n $textWeight || theme.typography.fontWeightBase};\n padding: 0;\n margin: 0;\n margin-bottom: ${({\n as,\n theme: {\n spacing: { xs },\n },\n }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n $textColor?: string;\n $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n $textSize?: FontSizeType;\n $textWeight?: number | string;\n as?: ElementType;\n $wordBreak?: WordBreakType;\n $overflowWrap?: OverflowWrapType;\n $textFontFamily?: string;\n theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n font-family: ${({ $textFontFamily, theme }) =>\n $textFontFamily || theme.typography.fontFamilyBase};\n word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n color: ${({ theme: { colors }, $textColor }) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.textDark};\n text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n $textSize,\n }) => ($textSize ? fontSizes[$textSize] : m)};\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-weight: ${({ $textWeight, theme }) =>\n $textWeight || theme.typography.fontWeightBase};\n padding: 0;\n margin: 0;\n margin-bottom: ${({\n as,\n theme: {\n spacing: { xs },\n },\n }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","templateObject_1","__makeTemplateObject","_a","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","_b","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","xs","spacing","props"],"mappings":"+JAwBO,MAAMA,EAAaC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,oBAAA,uBAAA,eAAA,oBAAA,mBAAA,qBAAA,qBAAA,oDAAA,0DAAA,MAAA,CAAiB,oBAEG,oBACI,uBACa,eAIlC,oBACmB,mBAOV,qBACa,qBAET,oDAQa,0DAMR,SAhCtC,SAACC,OAAEC,EAAeD,EAAAC,gBAAEC,EAAKF,EAAAE,MACtC,OAAAD,GAAmBC,EAAMC,WAAWC,cAApC,IACY,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,QAAd,IACjB,SAACL,GAAsB,OAAPA,EAAAM,eAAwB,YAAjB,IAC/B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAAUR,EAAAQ,WACvC,OAAAA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE,QAFzB,IAGY,SAACT,GAAmB,OAAPA,EAAAU,YAAqB,MAAd,IACrB,SAACV,OACZW,EAGCX,EAAAE,MAFCU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASd,EAAAc,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,IACf,SAACf,OAAEgB,EAAWhB,EAAAgB,YAAEd,EAAKF,EAAAE,MAClC,OAAAc,GAAed,EAAMC,WAAWc,cAAhC,IAGe,SAACjB,OAChBkB,EAAElB,EAAAkB,GAEWC,EAAEnB,EAAAE,MAAAkB,QAAAD,GAEX,YAAe,IAAPD,GAA6B,MAAPA,EAAa,UAAGC,GAAO,CAArD,IAMJ,SAACE,GAAU,OAAAD,EAAQC,EAAOA,EAAMnB,MAAmB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import n from"./styles.js";var m=function(m){var d=m.errorMessage,l=m.hasError,p=m.hintText,c=m.label,f=m.resize,u=void 0===f?"vertical":f,h=m.lineCount,x=void 0===h?3:h,b=m.ref,v=r(m,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]),E=t(),j=e(e({},o),E);return i.createElement(a,{label:c,hintText:p,required:v.required||!1},i.createElement(n,e({},v,{"aria-invalid":l||!!d||!1,"aria-describedby":v.id&&d?"".concat(v.id,"-error"):void 0,$hasError:l||!!d||!1,$resize:u,$lineCount:x,theme:j,ref:b,"data-hj-suppress":!0})),!!d&&i.createElement(s,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},d))};export{m as TextAreaField,m as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type TextareaHTMLAttributes,\n type Ref,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type TextareaHTMLAttributes,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n /** error message text */\n errorMessage?: string;\n /** flag for error styling */\n hasError?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** resize behaviour using the resize button on the bottom right of the component */\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n /** number of visible lines of text before scroll is required this affect the height of the input field */\n lineCount?: number;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n errorMessage,\n hasError,\n hintText,\n label,\n resize = \"vertical\",\n lineCount = 3,\n ref,\n ...props\n}: TextAreaFieldProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n >\n <StyledTextArea\n {...props}\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $hasError={hasError || !!errorMessage || false}\n $resize={resize}\n $lineCount={lineCount}\n theme={theme}\n ref={ref}\n data-hj-suppress\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","undefined","_c","lineCount","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wUAiCO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAMC,IAAAF,EAAG,WAAUA,EACnBG,EAAAR,EAAAS,UAAAA,aAAY,EAACD,EACbE,EAAGV,EAAAU,IACAC,EAAKC,EAAAZ,EARoB,2EAUtBa,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,GACChB,MAAOA,EACPD,SAAUA,EACVkB,SAAUV,EAAMU,WAAY,GAE5BH,EAACC,cAAAG,EACKN,EAAA,CAAA,EAAAL,EACU,CAAA,eAAAT,KAAcD,IAAgB,EAAK,mBAE7CU,EAAMY,IAAQtB,EAAe,GAAGuB,OAAAb,EAAMY,GAAE,eAAWhB,YAE5CL,KAAcD,IAAgB,EAChCwB,QAAAnB,EACGoB,WAAAjB,EACZM,MAAOA,EACPL,IAAKA,EAEL,oBAAA,OACCT,GACDiB,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIZ,EAAMY,GAAK,GAAGC,OAAAb,EAAMY,kBAAahB,GAEpCN,GAKX"}
|
|
@@ -1,30 +1,2 @@
|
|
|
1
|
-
import o,{css as
|
|
2
|
-
resize: ${({$resize:o})=>o};
|
|
3
|
-
background-color: ${({theme:o})=>o.colors.backgroundLight};
|
|
4
|
-
background-image: none;
|
|
5
|
-
border: ${({theme:o,$hasError:e})=>`solid ${o.utilities.inputBorderWidth}\n ${e?o.colors.textError:o.colors.textInputBorder}`};
|
|
6
|
-
color: ${({theme:o})=>o.colors.textDark};
|
|
7
|
-
display: block;
|
|
8
|
-
font-family: ${({theme:o})=>o.typography.fontFamilyBase};
|
|
9
|
-
font-size: ${({theme:o})=>o.fontSizes.m};
|
|
10
|
-
padding: 6px 8px;
|
|
11
|
-
width: 100%;
|
|
12
|
-
height: ${({$lineCount:o,theme:e})=>`calc(${e.typography.lineHeight} * ${o})`};
|
|
13
|
-
|
|
14
|
-
transition: border-color 150ms linear;
|
|
15
|
-
&:hover {
|
|
16
|
-
border-color: ${({theme:o})=>o.colors.secondary};
|
|
17
|
-
}
|
|
18
|
-
&:disabled {
|
|
19
|
-
border-color: ${({theme:o})=>o.colors.disabled};
|
|
20
|
-
color: ${({theme:o})=>o.colors.disabled};
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
${({theme:o})=>o.utilities.useDefaultFocusRect?null:e`
|
|
24
|
-
&:focus {
|
|
25
|
-
outline: 0;
|
|
26
|
-
border-color: ${o.colors.tertiary};
|
|
27
|
-
}
|
|
28
|
-
`};
|
|
29
|
-
`;export{r as StyledTextArea,r as default};
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,i=o.textarea(t||(t=n(["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"],["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"])),(function(n){return n.$resize}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.$hasError;return"solid ".concat(o.utilities.inputBorderWidth,"\n ").concat(r?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.m}),(function(n){var o=n.$lineCount,r=n.theme;return"calc(".concat(r.typography.lineHeight," * ").concat(o,")")}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "],["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "])),t.colors.tertiary)}));export{i as StyledTextArea,i as default};
|
|
30
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n $hasError: boolean;\n $lineCount: number;\n $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n resize: ${({ $resize }) => $resize};\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-image: none;\n border: ${({ theme, $hasError }) => `solid ${theme.utilities.inputBorderWidth}\n ${$hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: 6px 8px;\n width: 100%;\n height: ${({ $lineCount, theme }) =>\n `calc(${theme.typography.lineHeight} * ${$lineCount})`};\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","$resize","theme","colors","backgroundLight","$hasError","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","tertiary"],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n $hasError: boolean;\n $lineCount: number;\n $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n resize: ${({ $resize }) => $resize};\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-image: none;\n border: ${({ theme, $hasError }) => `solid ${theme.utilities.inputBorderWidth}\n ${$hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: 6px 8px;\n width: 100%;\n height: ${({ $lineCount, theme }) =>\n `calc(${theme.typography.lineHeight} * ${$lineCount})`};\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","templateObject_2","__makeTemplateObject","_a","$resize","theme","colors","backgroundLight","$hasError","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","templateObject_1","tertiary"],"mappings":"2HAUA,QAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,0BAAA,2CAAA,eAAA,wCAAA,mBAAA,qDAAA,iFAAA,6CAAA,iBAAA,eAAA,OAAA,CAAqB,eACvB,0BAC6B,2CAGQ,eAC1B,wCAEgB,mBAChB,qDAIW,iFAID,6CAGD,iBACP,eAWrC,UA/BA,SAACC,GAAgB,OAAPA,EAAAC,OAAO,IACP,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,IAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAASL,EAAAK,UAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBACzD,UAAAF,OAAAD,EAAYH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,IAE3B,SAACV,GAAc,OAAPA,EAAAE,MAAaC,OAAOQ,QAAb,IAET,SAACX,GAAc,OAAPA,EAAAE,MAAaU,WAAWC,cAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAE,MAAaY,UAAUC,CAAhB,IAGlB,SAACf,OAAEgB,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MAC5B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAa,IAAtD,IAIgB,SAAChB,GAAc,OAAPA,EAAAE,MAAaC,OAAOe,SAAb,IAGf,SAAClB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IACtB,SAACnB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IAGxB,SAACnB,GAAE,IAAAE,EAAKF,EAAAE,MACR,OAACA,EAAMK,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAvB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBG,EAAMC,OAAOoB,SAJrC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,
|
|
1
|
+
import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{LabelWrapper as s}from"../LabelWrapper/index.js";import{ExtraLeft as o,StyledInputWrapper as d,StyledInput as m,ExtraRight as n,Extra as h,ExtraWrapper as b}from"./styles.js";var c=function(c){var x=c.errorMessage,p=c.extraBottom,V=c.extraLeft,E=c.extraRight,f=c.extraTop,u=c.hasError,v=c.hintText,$=c.isValid,I=c.isValidVisible,T=c.isInvalidVisible,g=c.label,j=c.hideRequiredInLabel,L=c.ref,q=e(c,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref"]),R=t(),y=r(r({},a),R),B=i.createElement(i.Fragment,null,!!V&&i.createElement(o,{theme:y},V),i.createElement(d,{$hasError:u||!!x||!1,$isValid:void 0!==$?$:!u&&!x,"aria-invalid":u||!!x||!1,$isValidVisible:I||!1,$isInvalidVisible:T||!1,theme:y},i.createElement(m,r({$hasError:u||!!x||!1,$isValid:void 0!==$?$:!u&&!x,"aria-invalid":u||!!x||!1,"aria-describedby":q.id&&x?"".concat(q.id,"-error"):void 0,$isValidVisible:I||!1,$isInvalidVisible:T||!1},q,{theme:y,"data-hj-suppress":!0,ref:L}))),!!E&&i.createElement(n,{theme:y},E));return i.createElement(s,{label:g,hintText:v,required:q.required||!1,hideRequiredInLabel:j},!!f&&i.createElement(h,{theme:y},f),E||V?i.createElement(b,null,B):B,!!p&&i.createElement(h,{theme:y},p),!!x&&i.createElement(l,{marginTop:"xxs",id:q.id?"".concat(q.id,"-error"):void 0},x))};export{c as TextField,c as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n ExtraLeft,\n ExtraRight,\n Extra,\n ExtraWrapper,\n StyledInput,\n StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n /** error message text */\n errorMessage?: string;\n /** custom component/text that appears underneath the input field */\n extraBottom?: ReactNode;\n /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n extraLeft?: ReactNode;\n /** custom component/text that appears to the right of the input field for example a search button */\n extraRight?: ReactNode;\n /** custom component/text that appears above the input field for example a url domain */\n extraTop?: ReactNode;\n /** flag for error styling */\n hasError?: boolean;\n /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n isValid?: boolean;\n /** flag to hide or show the check icon when valid */\n isValidVisible?: boolean;\n /** flag to hide or show the cross icon when invalid */\n isInvalidVisible?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n hideRequiredInLabel?: boolean;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = ({\n errorMessage,\n extraBottom,\n extraLeft,\n extraRight,\n extraTop,\n hasError,\n hintText,\n isValid,\n isValidVisible,\n isInvalidVisible,\n label,\n hideRequiredInLabel,\n ref,\n ...props\n}: TextFieldProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const renderContent = (\n <>\n {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n <StyledInputWrapper\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\" ? isValid : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n theme={theme}\n >\n <StyledInput\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n {...props}\n theme={theme}\n data-hj-suppress\n ref={ref}\n />\n </StyledInputWrapper>\n {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n </>\n );\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n hideRequiredInLabel={hideRequiredInLabel}\n >\n {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n {!!extraRight || !!extraLeft ? (\n <ExtraWrapper>{renderContent}</ExtraWrapper>\n ) : (\n renderContent\n )}\n {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default TextField;\n"],"names":["TextField","_a","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$isValid","$isInvalidVisible","StyledInput","$hasError","id","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","concat"],"mappings":"2aAoDO,IAAMA,EAAY,SAACC,GACxB,IAAAC,EAAYD,EAAAC,aACZC,EAAWF,EAAAE,YACXC,EAASH,EAAAG,UACTC,EAAUJ,EAAAI,WACVC,EAAQL,EAAAK,SACRC,EAAQN,EAAAM,SACRC,EAAQP,EAAAO,SACRC,EAAOR,EAAAQ,QACPC,EAAcT,EAAAS,eACdC,EAAgBV,EAAAU,iBAChBC,EAAKX,EAAAW,MACLC,EAAmBZ,EAAAY,oBACnBC,EAAGb,EAAAa,IACAC,EAAKC,EAAAf,EAdgB,4KAgBlBgB,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKrB,GAAamB,EAACC,cAAAE,EAAU,CAAAP,MAAOA,GAAQf,GAC1CmB,EAACC,cAAAG,aACYpB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EAA0BA,GAAWF,IAAaL,EAE7C,eAAAK,KAAcL,IAAgB,kBAC3BQ,IAAkB,EAChBmB,kBAAAlB,IAAoB,EACvCQ,MAAOA,GAEPI,EAAAC,cAACM,EAAWV,EAAA,CAAAW,UACCxB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7Ca,EAAMiB,IAAQ9B,EAAe,UAAGa,EAAMiB,GAAE,eAAWC,EAEtCC,gBAAAxB,IAAkB,EAChBmB,kBAAAlB,IAAoB,GACnCI,EAAK,CACTI,MAAOA,EAAK,oBAAA,EAEZL,IAAKA,QAGNT,GAAckB,EAAAC,cAACW,EAAW,CAAAhB,MAAOA,GAAQd,IAIhD,OACEkB,gBAACa,EAAY,CACXxB,MAAOA,EACPJ,SAAUA,EACV6B,SAAUtB,EAAMsB,WAAY,EAC5BxB,oBAAqBA,KAElBP,GAAYiB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQb,GAClCD,GAAgBD,EACjBmB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CnB,GAAeoB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQhB,KACrCD,GACDqB,gBAACiB,EAAS,CACRC,UAAU,MACVT,GAAIjB,EAAMiB,GAAK,GAAGU,OAAA3B,EAAMiB,kBAAaC,GAEpC/B,GAKX"}
|