@thecb/components 10.5.0-beta.3 → 10.5.0-beta.5

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 (11) hide show
  1. package/dist/index.cjs.js +16 -10
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +16 -10
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/icons/IconAdd.js +9 -3
  7. package/src/components/atoms/placeholder/Placeholder.js +5 -5
  8. package/src/components/atoms/placeholder/Placeholder.stories.js +2 -1
  9. package/src/components/molecules/modal/Modal.stories.js +3 -3
  10. package/src/components/molecules/modal/ModalControlV1.js +1 -1
  11. package/src/components/molecules/modal/ModalControlV2.js +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "10.5.0-beta.3",
3
+ "version": "10.5.0-beta.5",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/atoms/icons/IconAdd.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
 
3
- const IconAdd = () => (
3
+ const IconAdd = ({ strokeWidth = 1 }) => (
4
4
  <svg
5
5
  xmlns="http://www.w3.org/2000/svg"
6
6
  xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = () => (
15
15
  d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
16
16
  ></path>
17
17
  </defs>
18
- <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
18
+ <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
19
19
  <g transform="translate(-407 -563)">
20
20
  <g transform="translate(408 562)">
21
21
  <g transform="translate(0 2)">
@@ -25,7 +25,13 @@ const IconAdd = () => (
25
25
  </mask>
26
26
  <use className="fill" xlinkHref="#path-1"></use>
27
27
  </g>
28
- <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
28
+ <circle
29
+ className="stroke"
30
+ strokeWidth={strokeWidth}
31
+ cx="8.155"
32
+ cy="8.072"
33
+ r="8"
34
+ ></circle>
29
35
  </g>
30
36
  </g>
31
37
  </g>
package/src/components/atoms/placeholder/Placeholder.js CHANGED
@@ -16,7 +16,7 @@ import {
16
16
  IconAdd,
17
17
  PaymentMethodAddIcon
18
18
  } from "../icons";
19
- import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
19
+ import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
20
20
 
21
21
  const getLargeIcon = iconName => {
22
22
  switch (iconName) {
@@ -123,7 +123,7 @@ const Placeholder = ({
123
123
  stroke: ${
124
124
  variant === "large" ? CHARADE_GREY : themeValues.color
125
125
  };
126
- }`}
126
+ } `}
127
127
  >
128
128
  {variant === "large" ? (
129
129
  <Center intrinsic>
@@ -131,7 +131,7 @@ const Placeholder = ({
131
131
  <Text
132
132
  variant="pS"
133
133
  color={themeValues.color}
134
- weight={FONT_WEIGHT_REGULAR}
134
+ weight={FONT_WEIGHT_SEMIBOLD}
135
135
  extraStyles={`text-align: center;`}
136
136
  >
137
137
  {text}
@@ -140,12 +140,12 @@ const Placeholder = ({
140
140
  ) : (
141
141
  <Cover singleChild minHeight="100%">
142
142
  <Cluster justify="center" align="center">
143
- <IconAdd />
143
+ <IconAdd strokeWidth="2" />
144
144
  <Center intrinsic>
145
145
  <Text
146
146
  variant="pS"
147
147
  color={themeValues.color}
148
- weight={FONT_WEIGHT_REGULAR}
148
+ weight={FONT_WEIGHT_SEMIBOLD}
149
149
  extraStyles={`padding: 0 0 0 8px; text-align: center;`}
150
150
  >
151
151
  {text}
package/src/components/atoms/placeholder/Placeholder.stories.js CHANGED
@@ -13,7 +13,8 @@ const groupId = "props";
13
13
 
14
14
  const icons = {
15
15
  accounts: "accounts",
16
- properties: "properties"
16
+ properties: "properties",
17
+ payments: "payments"
17
18
  };
18
19
 
19
20
  const iconLabel = "largeIcon";
package/src/components/molecules/modal/Modal.stories.js CHANGED
@@ -30,7 +30,7 @@ export const modalV1 = () => (
30
30
  continueButtonText={text("continueButtonText", "Continue", groupId)}
31
31
  defaultWrapper={boolean("defaultWrapper", true, groupId)}
32
32
  hideModal={noop}
33
- maxHeight={text("maxHeight", null, groupId)}
33
+ maxHeight={text("maxHeight", "", groupId)}
34
34
  modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
35
35
  modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
36
36
  modalHeaderBg={text("modalHeaderBg", "white", groupId)}
@@ -67,7 +67,7 @@ export const modalV2 = () => (
67
67
  continueURL={text("continueURL", "", groupId)}
68
68
  defaultWrapper={boolean("defaultWrapper", true, groupId)}
69
69
  hideModal={noop}
70
- maxHeight={text("maxHeight", null, groupId)}
70
+ maxHeight={text("maxHeight", "", groupId)}
71
71
  modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
72
72
  modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
73
73
  modalHeaderBg={text("modalHeaderBg", "white", groupId)}
@@ -122,7 +122,7 @@ export const modalWithoutButtons = () => {
122
122
  modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
123
123
  defaultWrapper={boolean("defaultWrapper", true, groupId)}
124
124
  noButtons={boolean("noButtons", true, groupId)}
125
- maxHeight={text("maxHeight", null, groupId)}
125
+ maxHeight={text("maxHeight", "", groupId)}
126
126
  blurUnderlay={boolean("blurUnderlay", false, groupId)}
127
127
  />
128
128
  );
package/src/components/molecules/modal/ModalControlV1.js CHANGED
@@ -63,7 +63,7 @@ const Modal = ({
63
63
  // - https://react.dev/reference/react/useRef#caveats
64
64
  // - https://github.com/davidtheclark/react-aria-modal/pull/103
65
65
  // - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
66
- const modalContainerRef = useRef("[id='react-aria-modal-dialog']");
66
+ const modalContainerRef = useRef("#react-aria-modal-dialog");
67
67
 
68
68
  return (
69
69
  <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
package/src/components/molecules/modal/ModalControlV2.js CHANGED
@@ -77,7 +77,7 @@ const Modal = ({
77
77
  // - https://react.dev/reference/react/useRef#caveats
78
78
  // - https://github.com/davidtheclark/react-aria-modal/pull/103
79
79
  // - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
80
- const modalContainerRef = useRef("[id='react-aria-modal-dialog']");
80
+ const modalContainerRef = useRef("#react-aria-modal-dialog");
81
81
 
82
82
  const hasCloseButton = onlyCloseButton && !noButtons;
83
83
  const hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
@@ -106,8 +106,9 @@ const Modal = ({
106
106
  }}
107
107
  dialogStyle={{
108
108
  borderRadius: CORNER_STANDARD,
109
- width: isMobile ? "" : customWidth || "615px",
110
- overflow: "auto"
109
+ margin: SPACING_XS,
110
+ overflow: "auto",
111
+ width: isMobile ? "" : customWidth || "615px"
111
112
  }}
112
113
  underlayClickExits={underlayClickExits}
113
114
  aria-modal={true}