@cruk/cruk-react-components 6.0.0 → 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/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 +1 -1
- package/lib/.storybook/main.d.ts +0 -3
- package/lib/.storybook/preview.d.ts +0 -3
- /package/lib/{src/components → components}/AddressLookup/AddressLookUp.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/AddressLookup/AddressLookup.stories.d.ts +0 -0
- /package/lib/{src/components → components}/AddressLookup/index.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.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Box/Box.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Box/index.d.ts +0 -0
- /package/lib/{src/components → components}/Box/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Button/Button.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Button/Button.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Button/index.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/Checkbox.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Checkbox/index.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}/Collapse/styles.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}/DateField/styles.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}/ErrorText/styles.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}/Footer/styles.d.ts +0 -0
- /package/lib/{src/components → components}/GlobalStyle.d.ts +0 -0
- /package/lib/{src/components → components}/GlobalStyleNoFontFace.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.stories.d.ts +0 -0
- /package/lib/{src/components → components}/InfoBox/InfoBox.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/InfoBox/index.d.ts +0 -0
- /package/lib/{src/components → components}/InfoBox/styles.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.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Link/Link.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Link/index.d.ts +0 -0
- /package/lib/{src/components → components}/Link/styles.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}/Modal/styles.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.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Radio/Radio.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Radio/index.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}/RadioConsent/styles.d.ts +0 -0
- /package/lib/{src/components → components}/Select/Select.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Select/Selelct.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Select/index.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.stories.d.ts +0 -0
- /package/lib/{src/components → components}/Text/Text.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/Text/index.d.ts +0 -0
- /package/lib/{src/components → components}/Text/styles.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/TextAreaField.stories.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/TextAreaField.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/index.d.ts +0 -0
- /package/lib/{src/components → components}/TextAreaField/styles.d.ts +0 -0
- /package/lib/{src/components → components}/TextField/TextField.stories.d.ts +0 -0
- /package/lib/{src/components → components}/TextField/TextField.test.cypress.d.ts +0 -0
- /package/lib/{src/components → components}/TextField/index.d.ts +0 -0
- /package/lib/{src/components → components}/TextField/styles.d.ts +0 -0
- /package/lib/{src/components → components}/ThemeCheatSheet.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/hooks → hooks}/useScrollPosition.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 from"react";import{useTheme as
|
|
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, { 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","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"
|
|
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 r from"react";import{useTheme as
|
|
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} 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","errorMessage","hasError","hintText","label","resize","lineCount","ref","props","foundTheme","useTheme","theme","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","
|
|
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 from"react";import{useTheme as
|
|
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} 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","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref","props","foundTheme","useTheme","theme","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$isValid","$isInvalidVisible","StyledInput","$hasError","id","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop"],"mappings":"
|
|
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"}
|