@thecb/components 6.0.2 → 6.0.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.
Files changed (8) hide show
  1. package/dist/index.cjs.js +4 -2
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +4 -2
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/molecules/modal/Modal.js +70 -57
  7. package/src/components/molecules/modal/Modal.stories.js +52 -3
  8. package/src/.DS_Store +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "6.0.2",
3
+ "version": "6.0.3",
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/molecules/modal/Modal.js CHANGED
@@ -34,6 +34,7 @@ const Modal = ({
34
34
  useDangerButton = false,
35
35
  defaultWrapper = true,
36
36
  onlyCloseButton = false,
37
+ noButtons = false, // for instances where modal is closed automatically
37
38
  maxHeight,
38
39
  underlayClickExits = true,
39
40
  noBorder,
@@ -98,69 +99,81 @@ const Modal = ({
98
99
  align="center"
99
100
  childGap="0rem"
100
101
  >
101
- {!onlyCloseButton ? (
102
- <Fragment>
103
- {isMobile ? (
104
- <Stack childGap="1rem" direction="row">
105
- <Box width="100%" padding="0">
106
- <ButtonWithAction
107
- variant="secondary"
108
- action={cancelAction ? cancelAction : hideModal}
109
- text={cancelButtonText}
110
- dataQa={cancelButtonText}
111
- extraStyles={buttonExtraStyles}
112
- className="modal-cancel-button"
113
- />
114
- </Box>
115
- <Box width="100%" padding="0">
116
- <ButtonWithAction
117
- variant={useDangerButton ? "danger" : "primary"}
118
- action={continueAction}
119
- text={continueButtonText}
120
- dataQa={continueButtonText}
121
- isLoading={isLoading}
122
- extraStyles={buttonExtraStyles}
123
- className="modal-continue-button"
124
- />
125
- </Box>
126
- </Stack>
102
+ {!noButtons && (
103
+ <>
104
+ {!onlyCloseButton ? (
105
+ <Fragment>
106
+ {isMobile ? (
107
+ <Stack childGap="1rem" direction="row">
108
+ <Box width="100%" padding="0">
109
+ <ButtonWithAction
110
+ variant="secondary"
111
+ action={
112
+ cancelAction ? cancelAction : hideModal
113
+ }
114
+ text={cancelButtonText}
115
+ dataQa={cancelButtonText}
116
+ extraStyles={buttonExtraStyles}
117
+ className="modal-cancel-button"
118
+ />
119
+ </Box>
120
+ <Box width="100%" padding="0">
121
+ <ButtonWithAction
122
+ variant={
123
+ useDangerButton ? "danger" : "primary"
124
+ }
125
+ action={continueAction}
126
+ text={continueButtonText}
127
+ dataQa={continueButtonText}
128
+ isLoading={isLoading}
129
+ extraStyles={buttonExtraStyles}
130
+ className="modal-continue-button"
131
+ />
132
+ </Box>
133
+ </Stack>
134
+ ) : (
135
+ <Stack
136
+ childGap="1rem"
137
+ direction="row"
138
+ justify="flex-end"
139
+ >
140
+ <ButtonWithAction
141
+ variant="secondary"
142
+ action={
143
+ cancelAction ? cancelAction : hideModal
144
+ }
145
+ text={cancelButtonText}
146
+ dataQa={cancelButtonText}
147
+ extraStyles={buttonExtraStyles}
148
+ className="modal-cancel-button"
149
+ />
150
+ <ButtonWithAction
151
+ variant={
152
+ useDangerButton ? "danger" : "primary"
153
+ }
154
+ action={continueAction}
155
+ text={continueButtonText}
156
+ dataQa={continueButtonText}
157
+ isLoading={isLoading}
158
+ extraStyles={buttonExtraStyles}
159
+ className="modal-continue-button"
160
+ />
161
+ </Stack>
162
+ )}
163
+ </Fragment>
127
164
  ) : (
128
- <Stack
129
- childGap="1rem"
130
- direction="row"
131
- justify="flex-end"
132
- >
165
+ <Box padding="0.5rem">
133
166
  <ButtonWithAction
134
- variant="secondary"
135
- action={cancelAction ? cancelAction : hideModal}
136
- text={cancelButtonText}
137
- dataQa={cancelButtonText}
167
+ action={hideModal}
168
+ variant="primary"
169
+ text="Close"
170
+ dataQa="Close"
138
171
  extraStyles={buttonExtraStyles}
139
172
  className="modal-cancel-button"
140
173
  />
141
- <ButtonWithAction
142
- variant={useDangerButton ? "danger" : "primary"}
143
- action={continueAction}
144
- text={continueButtonText}
145
- dataQa={continueButtonText}
146
- isLoading={isLoading}
147
- extraStyles={buttonExtraStyles}
148
- className="modal-continue-button"
149
- />
150
- </Stack>
174
+ </Box>
151
175
  )}
152
- </Fragment>
153
- ) : (
154
- <Box padding="0.5rem">
155
- <ButtonWithAction
156
- action={hideModal}
157
- variant="primary"
158
- text="Close"
159
- dataQa="Close"
160
- extraStyles={buttonExtraStyles}
161
- className="modal-cancel-button"
162
- />
163
- </Box>
176
+ </>
164
177
  )}
165
178
  </Stack>
166
179
  </Box>
package/src/components/molecules/modal/Modal.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import { text, boolean } from "@storybook/addon-knobs";
3
3
  import Modal from "./Modal";
4
4
 
@@ -6,7 +6,8 @@ import page from "../../../../.storybook/page";
6
6
 
7
7
  import Text from "../../atoms/text";
8
8
  import { noop } from "../../../util/general";
9
-
9
+ import Spinner from "../../atoms/spinner/Spinner";
10
+ import { Center } from "../../atoms/layouts";
10
11
  const groupId = "props";
11
12
  export const modal = () => (
12
13
  <Modal
@@ -23,7 +24,7 @@ export const modal = () => (
23
24
  )}
24
25
  hideModal={noop}
25
26
  continueAction={noop}
26
- modalOpen={boolean("modalOpen", false, groupId)}
27
+ modalOpen={boolean("modalOpen", true, groupId)}
27
28
  modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
28
29
  modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
29
30
  cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
@@ -37,6 +38,54 @@ export const modal = () => (
37
38
  />
38
39
  );
39
40
 
41
+ modal.storyName = "Standard Modal";
42
+
43
+ export const modalWithoutButtons = () => {
44
+ const [isModalOpen, setIsModalOpen] = useState(true);
45
+ useEffect(() => {
46
+ setTimeout(() => {
47
+ // some async action or timer closes the modal instead
48
+ setIsModalOpen(false);
49
+ }, 3000);
50
+ }, []);
51
+ return (
52
+ <Modal
53
+ ModalLink={() => (
54
+ <Text
55
+ tabIndex={0}
56
+ onClick={noop}
57
+ color={"#347BB2"}
58
+ fontSize="18px"
59
+ lineHeight="2rem"
60
+ extraStyles={`cursor: pointer;`}
61
+ >
62
+ Modal Link
63
+ </Text>
64
+ )}
65
+ hideModal={noop}
66
+ continueAction={noop}
67
+ modalOpen={isModalOpen}
68
+ modalHeaderText={text(
69
+ "modalHeaderText",
70
+ "Modal Without Buttons",
71
+ groupId
72
+ )}
73
+ modalBodyText={
74
+ <Center tabIndex={0}>
75
+ <Spinner size="100" />
76
+ </Center>
77
+ }
78
+ modalHeaderBg={text("modalHeaderBg", "white", groupId)}
79
+ modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
80
+ defaultWrapper={boolean("defaultWrapper", true, groupId)}
81
+ noButtons={boolean("noButtons", true, groupId)}
82
+ maxHeight={text("maxHeight", null, groupId)}
83
+ />
84
+ );
85
+ };
86
+
87
+ modalWithoutButtons.storyName = "Modal Without Buttons";
88
+
40
89
  const story = page({
41
90
  title: "Components|Molecules/Modal",
42
91
  Component: Modal
package/src/.DS_Store DELETED
Binary file