@thecb/components 4.0.16 → 4.0.17-beta.0

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.
Files changed (4) hide show
  1. package/dist/index.cjs.js +25 -13
  2. package/package.json +1 -1
  3. package/src/components/atoms/radio-button/RadioButton.js +9 -9
  4. package/src/components/molecules/payment-details/PaymentDetails.js +8 -4
package/dist/index.cjs.js CHANGED
@@ -20715,13 +20715,13 @@ var RadioButton$1 = function RadioButton(_ref2) {
20715
20715
  var buttonCenter = {
20716
20716
  on: {
20717
20717
  backgroundColor: themeValues.activeColor,
20718
- height: "1rem",
20719
- width: "1rem"
20718
+ height: "16px",
20719
+ width: "16px"
20720
20720
  },
20721
20721
  onFocused: {
20722
20722
  backgroundColor: themeValues.activeColor,
20723
- height: "1rem",
20724
- width: "1rem"
20723
+ height: "16px",
20724
+ width: "16px"
20725
20725
  },
20726
20726
  offFocused: {
20727
20727
  backgroundColor: "transparent",
@@ -20748,16 +20748,16 @@ var RadioButton$1 = function RadioButton(_ref2) {
20748
20748
  }), /*#__PURE__*/React__default.createElement(Motion, {
20749
20749
  borderWidth: "1px",
20750
20750
  borderStyle: "solid",
20751
- borderRadius: "0.75rem",
20752
- margin: "0.25rem 0.875rem 0.25rem 0.25rem",
20753
- height: "1.5rem",
20754
- width: "1.5rem",
20751
+ borderRadius: "12px",
20752
+ margin: "4px 14px 4px 4px",
20753
+ height: "24px",
20754
+ width: "24px",
20755
20755
  variants: buttonBorder,
20756
20756
  display: "flex",
20757
20757
  extraStyles: "justify-content: center; align-items: center;"
20758
20758
  }, /*#__PURE__*/React__default.createElement(Motion, {
20759
20759
  variants: buttonCenter,
20760
- borderRadius: "0.5rem"
20760
+ borderRadius: "8px"
20761
20761
  })));
20762
20762
  };
20763
20763
 
@@ -37695,7 +37695,9 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
37695
37695
  subtotal = _ref.subtotal,
37696
37696
  total = _ref.total,
37697
37697
  themeValues = _ref.themeValues;
37698
- return /*#__PURE__*/React__default.createElement(Stack, null, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
37698
+ return /*#__PURE__*/React__default.createElement(Stack, {
37699
+ childGap: "16px"
37700
+ }, lineItemElems, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
37699
37701
  padding: "0.5rem 0"
37700
37702
  }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
37701
37703
  variant: themeValues.labeledAmountSubtotal,
@@ -37798,13 +37800,19 @@ var PaymentDetails = function PaymentDetails(_ref4) {
37798
37800
  return /*#__PURE__*/React__default.createElement(React.Fragment, {
37799
37801
  key: fee.label
37800
37802
  }, /*#__PURE__*/React__default.createElement(Box, {
37801
- padding: "0.25rem 0"
37803
+ padding: "4px 0"
37802
37804
  }), /*#__PURE__*/React__default.createElement(LabeledAmount$1, _extends({
37803
37805
  key: fee.label,
37804
37806
  variant: themeValues.labeledAmountSubtotal
37805
37807
  }, fee)));
37806
37808
  });
37807
- var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
37809
+ var content = isCollapsible ? /*#__PURE__*/React__default.createElement(Stack, {
37810
+ childGap: "0"
37811
+ }, /*#__PURE__*/React__default.createElement(Box, {
37812
+ padding: "4.5px"
37813
+ }), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(Box, {
37814
+ padding: "8px"
37815
+ }), /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
37808
37816
  lineItemElems: lineItemElems,
37809
37817
  feeElems: feeElems,
37810
37818
  subtotal: subtotal,
@@ -37827,7 +37835,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
37827
37835
  variant: "h5",
37828
37836
  weight: "700",
37829
37837
  as: "h1"
37830
- }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
37838
+ }, titleText), /*#__PURE__*/React__default.createElement(Heading$1, {
37839
+ variant: "h5",
37840
+ weight: "700",
37841
+ as: "h1"
37842
+ }, displayCurrency(total)))) : /*#__PURE__*/React__default.createElement(Heading$1, {
37831
37843
  as: "h1",
37832
37844
  variant: "h3",
37833
37845
  weight: "700",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "4.0.16",
3
+ "version": "4.0.17-beta.0",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/components/atoms/radio-button/RadioButton.js CHANGED
@@ -40,13 +40,13 @@ const RadioButton = ({
40
40
  const buttonCenter = {
41
41
  on: {
42
42
  backgroundColor: themeValues.activeColor,
43
- height: "1rem",
44
- width: "1rem"
43
+ height: "16px",
44
+ width: "16px"
45
45
  },
46
46
  onFocused: {
47
47
  backgroundColor: themeValues.activeColor,
48
- height: "1rem",
49
- width: "1rem"
48
+ height: "16px",
49
+ width: "16px"
50
50
  },
51
51
  offFocused: {
52
52
  backgroundColor: "transparent",
@@ -85,15 +85,15 @@ const RadioButton = ({
85
85
  <Motion
86
86
  borderWidth="1px"
87
87
  borderStyle="solid"
88
- borderRadius="0.75rem"
89
- margin="0.25rem 0.875rem 0.25rem 0.25rem"
90
- height="1.5rem"
91
- width="1.5rem"
88
+ borderRadius="12px"
89
+ margin="4px 14px 4px 4px"
90
+ height="24px"
91
+ width="24px"
92
92
  variants={buttonBorder}
93
93
  display="flex"
94
94
  extraStyles={`justify-content: center; align-items: center;`}
95
95
  >
96
- <Motion variants={buttonCenter} borderRadius="0.5rem" />
96
+ <Motion variants={buttonCenter} borderRadius="8px" />
97
97
  </Motion>
98
98
  </Motion>
99
99
  );
package/src/components/molecules/payment-details/PaymentDetails.js CHANGED
@@ -18,7 +18,7 @@ const PaymentDetailsContent = ({
18
18
  total,
19
19
  themeValues
20
20
  }) => (
21
- <Stack>
21
+ <Stack childGap="16px">
22
22
  {lineItemElems}
23
23
  <SolidDivider />
24
24
  <Box padding="0.5rem 0">
@@ -99,7 +99,7 @@ const PaymentDetails = ({
99
99
  ));
100
100
  const feeElems = fees.map(fee => (
101
101
  <Fragment key={fee.label}>
102
- <Box padding="0.25rem 0" />
102
+ <Box padding="4px 0" />
103
103
  <LabeledAmount
104
104
  key={fee.label}
105
105
  variant={themeValues.labeledAmountSubtotal}
@@ -108,8 +108,10 @@ const PaymentDetails = ({
108
108
  </Fragment>
109
109
  ));
110
110
  const content = isCollapsible ? (
111
- <Stack>
111
+ <Stack childGap="0">
112
+ <Box padding="4.5px" />
112
113
  <SolidDivider />
114
+ <Box padding="8px" />
113
115
  <PaymentDetailsContent
114
116
  {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
115
117
  />
@@ -127,7 +129,9 @@ const PaymentDetails = ({
127
129
  <Heading variant="h5" weight="700" as="h1">
128
130
  {titleText}
129
131
  </Heading>
130
- {displayCurrency(total)}
132
+ <Heading variant="h5" weight="700" as="h1">
133
+ {displayCurrency(total)}
134
+ </Heading>
131
135
  </Cluster>
132
136
  </Box>
133
137
  ) : (