@thecb/components 9.2.11-beta.0 → 9.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.11-beta.0",
+  "version": "9.2.11",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -15,6 +15,7 @@ export const termsAndConditions = () => (
     html={text("html", "terms and conditions summary", groupId)}
     terms={text("terms", "terms and conditions modal text", groupId)}
     error={boolean("error", false, groupId)}
+    description={text("description", "I definitely agree to the", groupId)}
   />
 );
 

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -10,7 +10,8 @@ import {
 } from "../../../constants/colors";
 import { generateShadows } from "../../../util/generateShadows";
 import { useScrollTo } from "../../../hooks";
-import { TermsAndConditionsModalLinkId } from "../terms-and-conditions-modal/TermsAndConditionsModal";
+
+const TermsAndConditionsTitleDivId = "terms-and-conditions-title";
 
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
@@ -58,7 +59,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
-              labelledById={TermsAndConditionsModalLinkId}
+              labelledById={TermsAndConditionsTitleDivId}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>
@@ -67,6 +68,7 @@ const TermsAndConditionsControlV2 = ({
               align="center"
               nowrap
               extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
+              id={TermsAndConditionsTitleDivId}
             >
               {description && <Text color={CHARADE_GREY}>{description}</Text>}
               {terms && (

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -5,8 +5,6 @@ import { Box } from "../../atoms/layouts";
 import { fallbackValues } from "./TermsAndConditionsModal.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-export const TermsAndConditionsModalLinkId = "terms-and-conditions-link";
-
 const TermsAndConditionsModal = ({
   link,
   title = "Terms & Conditions",
@@ -46,7 +44,6 @@ const TermsAndConditionsModal = ({
     }}
   >
     <Text
-      id={TermsAndConditionsModalLinkId}
       variant={linkVariant}
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}