@thecb/components 9.2.10-beta.5 → 9.2.10-beta.6
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/dist/index.cjs.js +7 -14
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +7 -14
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/checkbox/Checkbox.js +1 -3
- package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js +1 -1
- package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js +1 -3
- package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js +7 -4
package/package.json
CHANGED
|
@@ -95,8 +95,7 @@ const Checkbox = ({
|
|
|
95
95
|
checkboxMargin = "0 16px 0 0",
|
|
96
96
|
extraStyles,
|
|
97
97
|
textExtraStyles,
|
|
98
|
-
dataQa = null
|
|
99
|
-
checkboxAriaLabel = ""
|
|
98
|
+
dataQa = null
|
|
100
99
|
}) => {
|
|
101
100
|
const [focused, setFocused] = useState(false);
|
|
102
101
|
|
|
@@ -123,7 +122,6 @@ const Checkbox = ({
|
|
|
123
122
|
id={`checkbox-${name}`}
|
|
124
123
|
disabled={disabled}
|
|
125
124
|
name={name}
|
|
126
|
-
aria-label={checkboxAriaLabel || `${title} checkbox`}
|
|
127
125
|
checked={checked}
|
|
128
126
|
onChange={onChange}
|
|
129
127
|
tabIndex="-1"
|
|
@@ -27,11 +27,11 @@ const Terms = () => (
|
|
|
27
27
|
export const termsAndConditions = () => (
|
|
28
28
|
<TermsAndConditions
|
|
29
29
|
onCheck={noop}
|
|
30
|
+
title="Agree to the terms and conditions"
|
|
30
31
|
isChecked={boolean("isChecked", false, groupId)}
|
|
31
32
|
terms={<Terms />}
|
|
32
33
|
error={boolean("error", false, groupId)}
|
|
33
34
|
initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
|
|
34
|
-
checkboxAriaLabel="I agree to the Terms and Conditions"
|
|
35
35
|
/>
|
|
36
36
|
);
|
|
37
37
|
|
|
@@ -11,8 +11,7 @@ const TermsAndConditionsControlV1 = ({
|
|
|
11
11
|
terms,
|
|
12
12
|
error = false,
|
|
13
13
|
linkVariant,
|
|
14
|
-
initialFocusSelector = ""
|
|
15
|
-
checkboxAriaLabel = ""
|
|
14
|
+
initialFocusSelector = ""
|
|
16
15
|
}) => {
|
|
17
16
|
const [showTerms, toggleShowTerms] = useState(false);
|
|
18
17
|
return (
|
|
@@ -24,7 +23,6 @@ const TermsAndConditionsControlV1 = ({
|
|
|
24
23
|
error={error}
|
|
25
24
|
checked={isChecked}
|
|
26
25
|
onChange={onCheck}
|
|
27
|
-
aria-label={checkboxAriaLabel}
|
|
28
26
|
/>
|
|
29
27
|
<Box padding="0 0 0 58px">
|
|
30
28
|
<Stack>
|
|
@@ -27,8 +27,7 @@ const TermsAndConditionsControlV2 = ({
|
|
|
27
27
|
containerBackground = ATHENS_GREY,
|
|
28
28
|
checkboxMargin = "4px 8px 4px 4px",
|
|
29
29
|
modalTitle = "Terms and Conditions",
|
|
30
|
-
initialFocusSelector = ""
|
|
31
|
-
checkboxAriaLabel = ""
|
|
30
|
+
initialFocusSelector = ""
|
|
32
31
|
}) => {
|
|
33
32
|
const [showTerms, toggleShowTerms] = useState(false);
|
|
34
33
|
const standardBoxShadow = generateShadows().standard.base;
|
|
@@ -49,7 +48,11 @@ const TermsAndConditionsControlV2 = ({
|
|
|
49
48
|
borderRadius={displayInline ? "0" : "4px"}
|
|
50
49
|
>
|
|
51
50
|
<Stack childGap="0">
|
|
52
|
-
{html &&
|
|
51
|
+
{html && (
|
|
52
|
+
<Box padding="0" id={`${id}_label`}>
|
|
53
|
+
{html}
|
|
54
|
+
</Box>
|
|
55
|
+
)}
|
|
53
56
|
<Cluster justify="flex-start" align="center" nowrap>
|
|
54
57
|
{showCheckbox && (
|
|
55
58
|
<Checkbox
|
|
@@ -59,7 +62,7 @@ const TermsAndConditionsControlV2 = ({
|
|
|
59
62
|
onChange={onCheck}
|
|
60
63
|
checkboxMargin={checkboxMargin}
|
|
61
64
|
extraStyles={`align-self: flex-start;`}
|
|
62
|
-
aria-
|
|
65
|
+
aria-labelledby={`${id}_label`}
|
|
63
66
|
/>
|
|
64
67
|
)}
|
|
65
68
|
<Stack childGap="0.25rem" fullHeight>
|