@thecb/components 7.9.4-beta.2 → 7.9.4-beta.3

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "7.9.4-beta.2",
3
+ "version": "7.9.4-beta.3",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
@@ -44,7 +44,6 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
44
44
 
45
45
  const StyledCheckbox = styled.div`
46
46
  display: inline-block;
47
- margin: ${({ checkboxMargin }) => checkboxMargin};
48
47
  width: 24px;
49
48
  height: 24px;
50
49
  border-radius: 2px;
@@ -113,7 +112,7 @@ const Checkbox = ({
113
112
  onKeyDown={e => handleClick(e, onChange)}
114
113
  hiddenStyles={hidden}
115
114
  background={themeValues.backgroundColor}
116
- extraStyles={`outline: none; ${extraStyles}`}
115
+ extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
117
116
  >
118
117
  <CheckboxLabelContainer>
119
118
  <CheckboxContainer data-qa="Checkbox">
@@ -139,7 +138,6 @@ const Checkbox = ({
139
138
  disabledStyles={themeValues.disabledStyles}
140
139
  disabledCheckedStyles={themeValues.disabledCheckedStyles}
141
140
  focusedStyles={themeValues.focusedStyles}
142
- checkboxMargin={checkboxMargin}
143
141
  >
144
142
  <CheckboxIcon
145
143
  viewBox="0 0 24 24"
@@ -24,7 +24,8 @@ const TermsAndConditionsControlV2 = ({
24
24
  id = "terms-and-conditions",
25
25
  displayInline = true,
26
26
  modalVariant = "default",
27
- containerBackground = ATHENS_GREY
27
+ containerBackground = ATHENS_GREY,
28
+ checkboxMargin = "0 0.5rem 0 0"
28
29
  }) => {
29
30
  const [showTerms, toggleShowTerms] = useState(false);
30
31
  const standardBoxShadow = generateShadows().standard.base;
@@ -46,10 +47,11 @@ const TermsAndConditionsControlV2 = ({
46
47
  error={hasError}
47
48
  checked={isChecked}
48
49
  onChange={onCheck}
50
+ checkboxMargin={checkboxMargin}
49
51
  />
50
52
  )}
51
53
  <Stack childGap="0.25rem">
52
- <Cluster justify="flex-start" align="flex-start" nowrap>
54
+ <Cluster justify="flex-start" align="center" nowrap>
53
55
  {description && (
54
56
  <Text color={CHARADE_GREY}>{description}&nbsp;</Text>
55
57
  )}