@cruk/cruk-react-components 6.2.0 → 6.2.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/src/components/RadioConsent/index.js +1 -1
- package/lib/src/components/RadioConsent/index.js.map +1 -1
- package/lib/src/components/RadioConsent/styles.d.ts +3 -11
- package/lib/src/components/RadioConsent/styles.js +1 -1
- package/lib/src/components/RadioConsent/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import{crukTheme as
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{Radio as l}from"../Radio/index.js";import{StyledFieldSet as m,StyledLegend as a,OptionWrapper as s}from"./styles.js";function u(u){var i=n(),c=e(e({},o),i),d=u.legend,p=u.attributes,f=u.onChange,v=u.selectedValue,h=void 0===v?"":v,E=u.name;return t.createElement(r,{theme:c},t.createElement(m,null,t.createElement(a,null,d),t.createElement(s,null,p.map(function(e){return t.createElement(l,{key:e.value,checked:h===e.value,onChange:f,name:E,value:e.value},e.option)}))))}export{u as RadioConsent,u as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport StyledRadio from \"../Radio\";\nimport { StyledFieldSet, StyledLegend, OptionWrapper } from \"./styles\";\n\ntype Attribute = {\n value: string;\n option: string;\n};\n\nexport type RadioConsentProps = {\n /** because each radio has its own label this is the consent group label text */\n legend: string;\n /** array of option for radio constent group where option is the option name and value is the option value */\n attributes: Attribute[];\n /** on change handler callback passed change event */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /** set the value of selected option */\n selectedValue?: string;\n /** name of field this is what groups all the options together */\n name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <StyledFieldSet>\n <StyledLegend>{legend}</StyledLegend>\n <OptionWrapper>\n {attributes.map((item: Attribute) => (\n <StyledRadio\n key={item.value}\n checked={selectedValue === item.value}\n onChange={onChange}\n name={name}\n value={item.value}\n >\n {item.option}\n </StyledRadio>\n ))}\n </OptionWrapper>\n </StyledFieldSet>\n </ThemeProvider>\n );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","foundTheme","useTheme","theme","__assign","defaultTheme","legend","attributes","onChange","_a","selectedValue","name","React","createElement","ThemeProvider","StyledFieldSet","StyledLegend","OptionWrapper","map","item","StyledRadio","key","value","checked","option"],"mappings":"sUA+BM,SAAUA,EAAaC,GAC3B,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAEGK,EAA2DN,EAAKM,OAAxDC,EAAmDP,EAAKO,WAA5CC,EAAuCR,EAAKQ,SAAlCC,EAA6BT,EAAKU,cAAlCA,OAAa,IAAAD,EAAG,GAAEA,EAAEE,EAASX,EAAKW,KAExE,OACEC,EAAAC,cAACC,EAAa,CAACX,MAAOA,GACpBS,EAAAC,cAACE,EAAc,KACbH,EAAAC,cAACG,EAAY,KAAEV,GACfM,EAAAC,cAACI,EAAa,KACXV,EAAWW,IAAI,SAACC,GAAoB,OACnCP,EAAAC,cAACO,EAAW,CACVC,IAAKF,EAAKG,MACVC,QAASb,IAAkBS,EAAKG,MAChCd,SAAUA,EACVG,KAAMA,EACNW,MAAOH,EAAKG,OAEXH,EAAKK,OAR2B,KAe/C"}
|
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
import { type ThemeType } from "../../types";
|
|
2
|
-
type StyleRadioWidthProp = {
|
|
3
|
-
$numberOfAttributes: number;
|
|
4
|
-
theme: ThemeType;
|
|
5
|
-
};
|
|
6
|
-
export declare const StyledRadio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").InputHTMLAttributes<HTMLInputElement> & {
|
|
7
|
-
ref?: import("react").Ref<HTMLInputElement>;
|
|
8
|
-
hasError?: boolean;
|
|
9
|
-
errorMessage?: string;
|
|
10
|
-
children?: import("react").ReactNode;
|
|
11
|
-
}, StyleRadioWidthProp>> & string & Omit<(props: import("../Radio").RadioProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
12
2
|
export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {
|
|
13
3
|
theme: ThemeType;
|
|
14
4
|
}>> & string;
|
|
15
5
|
export declare const StyledFieldSet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {
|
|
16
6
|
theme: ThemeType;
|
|
17
7
|
}>> & string;
|
|
18
|
-
export {
|
|
8
|
+
export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
9
|
+
theme: ThemeType;
|
|
10
|
+
}>> & string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import e from"styled-components";var i,o,r,t=e.legend(i||(i=n(["\n display: block;\n float: left;\n font-family: ",";\n\n // increase font size for desktop\n @media (min-width: ",") {\n font-size: ",";\n }\n"],["\n display: block;\n float: left;\n font-family: ",";\n\n // increase font size for desktop\n @media (min-width: ",") {\n font-size: ",";\n }\n"])),function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml}),a=e.fieldset(o||(o=n(["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 "," 0;\n"],["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 "," 0;\n"])),function(n){return n.theme.spacing.s}),l=e.div(r||(r=n(["\n display: flex;\n flex-direction: row;\n"],["\n display: flex;\n flex-direction: row;\n"])));export{l as OptionWrapper,a as StyledFieldSet,t as StyledLegend};
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledLegend = styled.legend<{\n theme: ThemeType;\n}>`\n display: block;\n float: left;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n // increase font size for desktop\n @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n font-size: ${({ theme }) => theme.fontSizes.ml};\n }\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n theme: ThemeType;\n}>`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n`;\n\nexport const OptionWrapper = styled.div<{\n theme: ThemeType;\n}>`\n display: flex;\n flex-direction: row;\n`;\n"],"names":["StyledLegend","styled","legend","templateObject_1","__makeTemplateObject","_a","theme","typography","fontFamilyBase","breakpoint","desktopLarge","fontSizes","ml","StyledFieldSet","fieldset","templateObject_2","spacing","s","OptionWrapper","div","templateObject_3"],"mappings":"iHAGO,UAAMA,EAAeC,EAAOC,OAAMC,IAAAA,EAAAC,EAAA,CAAA,uDAAA,kEAAA,uBAAA,YAAA,CAEvC,uDAG6D,kEAGI,uBACjB,cAJjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,WAAWC,cAAjB,EAGT,SAACH,GAAc,OAAPA,EAAAC,MAAaG,WAAWC,YAAjB,EACrB,SAACL,GAAc,OAAPA,EAAAC,MAAaK,UAAUC,EAAhB,GAInBC,EAAiBZ,EAAOa,SAAQC,IAAAA,EAAAX,EAAA,CAAA,oQAAA,SAAA,CAE3C,oQAY4C,WAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaU,QAAQC,CAAd,GAGlBC,EAAgBjB,EAAOkB,IAAGC,IAAAA,EAAAhB,EAAA,CAAA,gDAAA,CAErC"}
|