@thecb/components 4.1.14 → 4.1.16

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 (23) hide show
  1. package/dist/index.cjs.js +235 -553
  2. package/package.json +1 -1
  3. package/src/components/atoms/checkbox/Checkbox.js +63 -49
  4. package/src/components/atoms/dropdown/Dropdown.js +2 -2
  5. package/src/components/atoms/icons/ProfileIcon.js +48 -0
  6. package/src/components/atoms/icons/WalletIcon.js +38 -172
  7. package/src/components/atoms/icons/index.js +3 -1
  8. package/src/components/atoms/text/Text.js +2 -0
  9. package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js +14 -16
  10. package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js +6 -11
  11. package/src/components/molecules/address-form/AddressForm.js +7 -27
  12. package/src/components/molecules/email-form/EmailForm.js +7 -27
  13. package/src/components/molecules/email-form/EmailForm.stories.js +4 -1
  14. package/src/components/molecules/modal/Modal.js +3 -3
  15. package/src/components/molecules/obligation/modules/AmountModule.stories.js +27 -0
  16. package/src/components/molecules/obligation/modules/AutopayModalModule.js +47 -38
  17. package/src/components/molecules/obligation/modules/AutopayModalModule.theme.js +12 -1
  18. package/src/components/molecules/payment-form-ach/PaymentFormACH.js +22 -57
  19. package/src/components/molecules/payment-form-card/PaymentFormCard.js +7 -26
  20. package/src/components/molecules/phone-form/PhoneForm.js +7 -27
  21. package/src/components/molecules/terms-and-conditions/TermsAndConditions.js +12 -40
  22. package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js +14 -15
  23. package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "4.1.14",
3
+ "version": "4.1.16",
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/checkbox/Checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import styled, { css } from "styled-components";
3
3
  import { fallbackValues } from "./Checkbox.theme";
4
4
  import { noop } from "../../../util/general";
@@ -87,58 +87,72 @@ const Checkbox = ({
87
87
  checked,
88
88
  onChange = noop,
89
89
  disabled = false,
90
- focused = false,
91
90
  themeValues,
92
91
  hidden = false,
93
92
  error = false
94
- }) => (
95
- <Box
96
- padding="0"
97
- hiddenStyles={hidden}
98
- background={themeValues.backgroundColor}
99
- >
100
- <CheckboxLabelContainer>
101
- <CheckboxContainer data-qa="Checkbox">
102
- <HiddenCheckbox
103
- id={`checkbox-${name}`}
104
- disabled={disabled}
105
- name={name}
106
- aria-label={name}
107
- checked={checked}
108
- onChange={onChange}
109
- tabIndex="-1"
110
- />
111
- <StyledCheckbox
112
- error={error}
113
- disabled={disabled}
114
- checked={checked}
115
- focused={focused}
116
- defaultStyles={themeValues.defaultStyles}
117
- checkedStyles={themeValues.checkedStyles}
118
- errorStyles={themeValues.errorStyles}
119
- disabledStyles={themeValues.disabledStyles}
120
- focusedStyles={themeValues.focusedStyles}
121
- >
122
- <CheckboxIcon
123
- viewBox="0 0 24 24"
93
+ }) => {
94
+ const [focused, setFocused] = useState(false);
95
+
96
+ const handleClick = (e, func) => {
97
+ if (e?.keyCode === 13) {
98
+ func();
99
+ }
100
+ };
101
+
102
+ return (
103
+ <Box
104
+ padding="0"
105
+ tabIndex="0"
106
+ onFocus={() => setFocused(true)}
107
+ onBlur={() => setFocused(false)}
108
+ onKeyDown={e => handleClick(e, onChange)}
109
+ hiddenStyles={hidden}
110
+ background={themeValues.backgroundColor}
111
+ extraStyles="outline: none;"
112
+ >
113
+ <CheckboxLabelContainer>
114
+ <CheckboxContainer data-qa="Checkbox">
115
+ <HiddenCheckbox
116
+ id={`checkbox-${name}`}
124
117
  disabled={disabled}
125
- disabledCheckColor={themeValues.disabledCheckColor}
126
- checkColor={themeValues.checkColor}
118
+ name={name}
119
+ aria-label={name}
120
+ checked={checked}
121
+ onChange={onChange}
122
+ tabIndex="-1"
123
+ />
124
+ <StyledCheckbox
125
+ error={error}
126
+ disabled={disabled}
127
+ checked={checked}
128
+ focused={focused}
129
+ defaultStyles={themeValues.defaultStyles}
130
+ checkedStyles={themeValues.checkedStyles}
131
+ errorStyles={themeValues.errorStyles}
132
+ disabledStyles={themeValues.disabledStyles}
133
+ focusedStyles={themeValues.focusedStyles}
127
134
  >
128
- <polyline points="20 6 9 17 4 12" />
129
- </CheckboxIcon>
130
- </StyledCheckbox>
131
- </CheckboxContainer>
132
- <Text
133
- variant="p"
134
- weight={themeValues.textFontWeight}
135
- color={themeValues.textColor}
136
- extraStyles={`margin-left: 1rem`}
137
- >
138
- {title}
139
- </Text>
140
- </CheckboxLabelContainer>
141
- </Box>
142
- );
135
+ <CheckboxIcon
136
+ viewBox="0 0 24 24"
137
+ disabled={disabled}
138
+ disabledCheckColor={themeValues.disabledCheckColor}
139
+ checkColor={themeValues.checkColor}
140
+ >
141
+ <polyline points="20 6 9 17 4 12" />
142
+ </CheckboxIcon>
143
+ </StyledCheckbox>
144
+ </CheckboxContainer>
145
+ <Text
146
+ variant="p"
147
+ weight={themeValues.textFontWeight}
148
+ color={themeValues.textColor}
149
+ extraStyles={`margin-left: 1rem`}
150
+ >
151
+ {title}
152
+ </Text>
153
+ </CheckboxLabelContainer>
154
+ </Box>
155
+ );
156
+ };
143
157
 
144
158
  export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");
package/src/components/atoms/dropdown/Dropdown.js CHANGED
@@ -201,7 +201,6 @@ const Dropdown = ({
201
201
  <Box
202
202
  onKeyDown={onKeyDown}
203
203
  onClick={onClick}
204
- tabIndex={0}
205
204
  padding="0"
206
205
  width="100%"
207
206
  hoverStyles={`background-color: ${themeValues.hoverColor};`}
@@ -222,7 +221,8 @@ const Dropdown = ({
222
221
  : GREY_CHATEAU
223
222
  }
224
223
  borderRadius="2px"
225
- extraStyles={`tabindex: 0; height: 48px;`}
224
+ tabIndex={0}
225
+ extraStyles={`height: 48px;`}
226
226
  dataQa={placeholder}
227
227
  >
228
228
  <Stack direction="row" bottomItem={2}>
package/src/components/atoms/icons/ProfileIcon.js ADDED
@@ -0,0 +1,48 @@
1
+ import React from "react";
2
+ import { fallbackValues } from "./Icons.theme";
3
+ import { themeComponent } from "../../../util/themeUtils";
4
+
5
+ const ProfileIcon = ({ themeValues }) => {
6
+ return (
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width="299"
10
+ height="151"
11
+ viewBox="0 0 299 151"
12
+ >
13
+ <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
14
+ <g>
15
+ <path
16
+ fill={themeValues.subIconColor}
17
+ d="M162.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM123.899 25.659a4 4 0 013.988 3.688l.539 6.892h85.445c3.396 0 6.293 2.78 6.47 6.207l4.31 83.776c.177 3.427-2.434 6.205-5.83 6.205H100.945c-3.397 0-6.293-2.778-6.47-6.205l-4.31-83.776c-.177-3.428 2.434-6.206 5.83-6.206h2.05l-.16-3.103a4.117 4.117 0 01.077-1.039l-.165-2.127a4 4 0 013.987-4.312H123.9zm-80.672 76.579c2.836 0 5.164 2.189 5.42 4.985a3.247 3.247 0 011.91-.621c1.814 0 3.285 1.485 3.285 3.318 0 1.832-1.47 3.318-3.285 3.318h-14.87c-2.123 0-3.845-1.739-3.845-3.883 0-2.145 1.722-3.884 3.845-3.884.863 0 1.657.291 2.3.776.643-2.313 2.744-4.009 5.24-4.009zm30.478-53.79c.369 0 .668.398.668.89v39.11h-28v-39.11c0-.492.3-.89.668-.89zm221.35 7.282a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM31.403 20.856c3.193 0 5.912 2 6.993 4.814a3.181 3.181 0 013.381 1.103 4.723 4.723 0 011.946-.42 4.75 4.75 0 014.75 4.751 4.75 4.75 0 01-4.75 4.752h-20.5a4.75 4.75 0 01-4.75-4.752 4.75 4.75 0 015.687-4.657c.846-3.216 3.764-5.591 7.243-5.591zM237.078 10c3.406 0 6.306 2.133 7.46 5.135a3.39 3.39 0 013.605 1.177 5.04 5.04 0 012.076-.448 5.067 5.067 0 015.066 5.068c0 2.799-2.268 5.068-5.066 5.068h-21.868a5.067 5.067 0 01-5.066-5.068 5.067 5.067 0 016.068-4.968c.901-3.43 4.013-5.964 7.725-5.964z"
18
+ opacity="0.302"
19
+ ></path>
20
+ <path
21
+ fill="#FFF"
22
+ d="M143.096 33.659a4 4 0 013.985 4.347l-.094 1.098c.057.288.083.588.072.896l-.104 3h79.1c3.397 0 6.057 2.686 5.941 6l-2.817 81c-.115 3.314-2.962 6-6.358 6H104.945c-3.397 0-6.057-2.686-5.941-6l2.817-81c.115-3.314 2.962-6 6.358-6l4.468-.001.494-5.686a4 4 0 013.985-3.654h25.97z"
23
+ ></path>
24
+ <path
25
+ fill="#CACED8"
26
+ d="M80.846 54.267c.369 0 .668.233.668.52v36.48h-28v-36.48c0-.287.3-.52.669-.52zm208.51 7.874a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303z"
27
+ ></path>
28
+ <path
29
+ fill="#3B414D"
30
+ fillRule="nonzero"
31
+ d="M123.298 25c3.333 0 6.138 2.69 6.312 6.075l.017.584h14.276a5.993 5.993 0 014.931 2.58h65.037c4.01 0 7.46 2.918 8.288 6.761h3.896c4.434 0 7.962 3.48 7.945 7.823l-.005.247-2.653 76.287 29.687.007c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007-29.862-.008-.037 1.07c-.15 4.318-3.754 7.798-8.106 7.927l-.251.004H104.945c-3.077 0-5.719-1.677-7.04-4.155a8.665 8.665 0 01-4.734-4.585H70.418a2.04 2.04 0 01-.103-4.075l.153-.004 21.95-.001-4.25-82.632c-.232-4.482 3.154-8.172 7.58-8.304l.234-.005-.094-3c-.172-3.346 2.354-6.114 5.658-6.235l.227-.004h21.525zm20.605 10.659h-25.932a2 2 0 00-1.983 1.741l-.99 7.599-6.819.001c-2.329 0-4.282 1.843-4.36 4.07l-2.817 81c-.075 2.17 1.667 3.93 3.943 3.93h117.876c2.329 0 4.282-1.843 4.36-4.07l2.817-81c.075-2.17-1.667-3.93-3.943-3.93l-81.093-.001.925-7.081a2 2 0 00-1.984-2.259zM286.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-223.718 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H52.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zM123.298 29h-21.525c-1.066 0-1.876.812-1.891 1.922l.002.153.225 7.165h-4.114c-2.178 0-3.847 1.706-3.839 3.896l.006.207 4.31 83.776c.038.717.25 1.398.595 1.998l2.755-79.187c.153-4.4 3.893-7.93 8.357-7.93l3.305-.001.538-4.116a6 6 0 015.712-5.22l.237-.004h7.655l-.013-.42c-.06-1.172-1.03-2.15-2.16-2.233l-.155-.006zm53.072 64.344l.148.003a1.895 1.895 0 011.77 2.014c-.185 2.865-2.567 5.172-5.413 5.289l-.226.004h-13.504c-3.04 0-5.38-2.502-5.184-5.537a1.896 1.896 0 013.787.096l-.004.148c-.052.805.487 1.43 1.262 1.496l.139.006h13.504c.894 0 1.705-.717 1.84-1.598l.015-.148a1.896 1.896 0 011.866-1.773zM81.514 53.018v.374c.573.225 1 .734 1 1.396v36.479a1 1 0 01-1 1h-28a1 1 0 01-1-1v-36.48c0-.661.427-1.17 1-1.395v-.374h28zm-1 4.807h-26v32.441h26V57.825zm211.562 28.666a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303a2.72 2.72 0 012.72 2.72v21.63zM67.158 83.647c.57 0 1.032.462 1.032 1.032v2.177c0 .57-.462 1.032-1.032 1.032h-7.886c-.57 0-1.033-.462-1.033-1.032v-2.177c0-.57.463-1.032 1.033-1.032zm222.878-9.396h-38.663v12.24a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-12.24zM66.124 85.711h-5.82v.111h5.82v-.111zm218.986-5.203c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM77 74.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm80.015-5.442c2.612 0 4.82 1.717 5.553 4.21a1.895 1.895 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 11-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zm23.513 0c2.613 0 4.82 1.717 5.553 4.21a1.896 1.896 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 01-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zM77 65.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm213.356-3.069h-37.303a.68.68 0 00-.672.58l-.008.1v3.691h38.663v-3.691a.68.68 0 00-.58-.673l-.1-.007zM67.12 60.839a1.033 1.033 0 01.113 2.059l-.113.006h-9.038a1.033 1.033 0 01-.113-2.06l.113-.005h9.038zm146.75-22.6h-63.996l-.021.196-.335 2.564 68.458.001c-.674-1.547-2.188-2.669-3.895-2.755l-.21-.005z"
32
+ ></path>
33
+ <path
34
+ fill={themeValues.subIconColor}
35
+ fillRule="nonzero"
36
+ d="M168.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm113.69-42.95a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.008-.017-.531-.018-1.568v-1.543c0-.602.002-1.29.004-2.067l9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zM80.5 96.46a2.04 2.04 0 01.152 4.074l-.152.006h-4.092l11.455 11.59 9.934-8.627c.042-.036.14-.108.191-.144l.016-.012-.001.014c-.006.096-.008.588-.01 1.24v2.431l-.001.667a25.458 25.458 0 01-.01 1.048l-8.888 7.718-.017.014-.017.015-.06.048.094-.077a2.066 2.066 0 01-.811.43c-.037.01-.074.02-.111.027l-.03.006a1.966 1.966 0 01-.577.028 2 2 0 01-.686-.189 2.032 2.032 0 01-.304-.179l-.037-.027a1.865 1.865 0 01-.095-.075l-.008-.007-.042-.036a2.05 2.05 0 01-.077-.073l-.01-.011-14.257-14.425a2.033 2.033 0 01-.589-1.394H62.5a2.04 2.04 0 01-.152-4.074l.152-.006h18zm-6.795-49.011c.944 0 1.6.81 1.663 1.741l.005.148v3.68s-.5.017-1 .026v.07H53.098v1.907h-5.725v17.54a8.885 8.885 0 012.492-.43l.263-.003a8.905 8.905 0 11-2.914 17.322l-.84-.001a1 1 0 01-.994-.882 8.898 8.898 0 01-4.157-7.535 8.898 8.898 0 014.15-7.53V49.338c0-.942.609-1.8 1.522-1.883l.146-.006h26.664zm172.423 19.679a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005h-3.818v-2h3.818c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v4.728h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303zm-241.54 9.649v1l-3.351-.001v2.834h3.35v1h-4.35V64.38h4.35zm-.519-6.025v1h-2.832v2.834h2.832v1h-3.832v-4.834h3.832z"
37
+ ></path>
38
+ <path
39
+ fill="#FFF"
40
+ d="M51.196 76.402v3.56l3.562.002V82.1h-3.562v3.562H49.06V82.1h-3.562v-2.137l3.561-.001.001-3.561h2.137zm196-5v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
41
+ ></path>
42
+ </g>
43
+ </g>
44
+ </svg>
45
+ );
46
+ };
47
+
48
+ export default themeComponent(ProfileIcon, "Icons", fallbackValues, "info");
package/src/components/atoms/icons/WalletIcon.js CHANGED
@@ -7,180 +7,46 @@ const WalletIcon = ({ themeValues }) => {
7
7
  <svg
8
8
  xmlns="http://www.w3.org/2000/svg"
9
9
  width="299"
10
- height="150"
11
- viewBox="0 0 299 150"
10
+ height="151"
11
+ viewBox="0 0 299 151"
12
12
  >
13
13
  <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
14
- <g transform="translate(-154 -340)">
15
- <g transform="translate(132 261)">
16
- <g transform="translate(22 79)">
17
- <g
18
- stroke="#3B414D"
19
- strokeLinecap="round"
20
- strokeWidth="4.08"
21
- transform="translate(52.686 118.445)"
22
- >
23
- <path d="M208.2 0.375L175.611 0.776"></path>
24
- <path d="M233.568 0.375L218.318 0.776"></path>
25
- <path d="M44.527 0.375L17.757 0.776"></path>
26
- <path d="M7.759 0.375L0 0.776"></path>
27
- </g>
28
- <path
29
- fill="#B8E4F4"
30
- d="M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
31
- ></path>
32
- <g
33
- stroke="#45B770"
34
- strokeLinecap="round"
35
- strokeLinejoin="round"
36
- strokeWidth="4.08"
37
- transform="translate(150.58 129.154)"
38
- >
39
- <path d="M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"></path>
40
- <path d="M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"></path>
41
- </g>
42
- <path
43
- stroke="#45B770"
44
- strokeLinecap="round"
45
- strokeLinejoin="round"
46
- strokeWidth="4.08"
47
- d="M97.135 97.043L85.756 106.925"
48
- ></path>
49
- <path
50
- stroke="#45B770"
51
- strokeLinecap="round"
52
- strokeLinejoin="round"
53
- strokeWidth="4.08"
54
- d="M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
55
- ></path>
56
- <path
57
- stroke="#45B770"
58
- strokeLinecap="round"
59
- strokeWidth="4.08"
60
- d="M257.527 89.028L274.395 89.028"
61
- ></path>
62
- <g transform="translate(255.032 47.73)">
63
- <rect
64
- width="40.703"
65
- height="25.03"
66
- x="1.02"
67
- y="1.02"
68
- fill="#E8FFEF"
69
- stroke="#45B770"
70
- strokeWidth="2.04"
71
- rx="2.72"
72
- ></rect>
73
- <path fill="#45B770" d="M0 6.411H42.743V12.11H0z"></path>
74
- </g>
75
- <g transform="translate(249.333 54.141)">
76
- <rect
77
- width="40.703"
78
- height="25.03"
79
- x="1.02"
80
- y="1.02"
81
- fill="#CACED8"
82
- stroke="#3B414D"
83
- strokeWidth="2.04"
84
- rx="2.72"
85
- ></rect>
86
- <path fill="#3B414D" d="M0 6.411H42.743V12.11H0z"></path>
87
- <rect
88
- width="9.973"
89
- height="2.85"
90
- x="27.163"
91
- y="18.367"
92
- fill="#3B414D"
93
- rx="1.36"
94
- ></rect>
95
- </g>
96
- <g transform="translate(237.223 59.128)">
97
- <circle
98
- cx="8.905"
99
- cy="8.905"
100
- r="8.905"
101
- fill={themeValues.subIconColor}
102
- ></circle>
103
- <g fill="#FFF" transform="translate(4.274 4.274)">
104
- <path d="M3.562 0H5.699V9.261H3.562z"></path>
105
- <path d="M0 3.562H9.261V5.699H0z"></path>
106
- </g>
107
- </g>
108
- <path
109
- fill="#B8E4F4"
110
- stroke="#3B414D"
111
- strokeWidth="4.08"
112
- d="M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
113
- ></path>
114
- <rect
115
- width="32.964"
116
- height="11.592"
117
- x="97.499"
118
- y="22.699"
119
- stroke="#3B414D"
120
- strokeWidth="4.08"
121
- rx="5.796"
122
- ></rect>
123
- <path
124
- fill="#B8E4F4"
125
- d="M121.817 24.933H141.051V32.057H121.817z"
126
- ></path>
127
- <rect
128
- width="133.928"
129
- height="98.309"
130
- x="95.459"
131
- y="32.057"
132
- fill="#FFF"
133
- rx="10.88"
134
- ></rect>
135
- <path
136
- stroke="#3B414D"
137
- strokeWidth="4.08"
138
- d="M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
139
- ></path>
140
- <path
141
- fill="#FFF"
142
- d="M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
143
- ></path>
144
- <path
145
- stroke="#45B770"
146
- strokeLinecap="round"
147
- strokeLinejoin="round"
148
- strokeWidth="4.08"
149
- d="M85.756 106.925L111.684 112.988"
150
- ></path>
151
- <g
152
- stroke="#45B770"
153
- strokeLinecap="round"
154
- strokeLinejoin="round"
155
- strokeWidth="4.08"
156
- transform="translate(112.486 110.241)"
157
- >
158
- <path d="M3.887.053a3.887 3.887 0 000 7.775h3.396"></path>
159
- </g>
160
- <g
161
- stroke="#3B414D"
162
- strokeLinecap="round"
163
- strokeLinejoin="round"
164
- strokeWidth="3.791"
165
- transform="translate(147.003 64.237)"
166
- >
167
- <path d="M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"></path>
168
- <path d="M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"></path>
169
- </g>
170
- <path
171
- stroke="#3B414D"
172
- strokeLinecap="round"
173
- strokeWidth="3.791"
174
- d="M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
175
- ></path>
176
- <g fill="#B8E4F4">
177
- <path d="M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"></path>
178
- <path d="M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"></path>
179
- <path d="M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
180
- <path d="M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
181
- </g>
182
- </g>
183
- </g>
14
+ <g>
15
+ <path
16
+ fill={themeValues.subIconColor}
17
+ d="M154.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM38.894 88.746c5.595 0 10.19 4.277 10.697 9.74a6.45 6.45 0 013.768-1.214 6.484 6.484 0 010 12.966H24.014a7.588 7.588 0 010-15.175c1.704 0 3.27.569 4.537 1.516 1.27-4.519 5.418-7.833 10.343-7.833zM287.055 55.73a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM61.817 54.048c2.554 0 4.73 1.6 5.594 3.85a2.545 2.545 0 012.705.883 3.778 3.778 0 011.557-.336 3.8 3.8 0 010 7.603h-16.4a3.8 3.8 0 11.75-7.528 5.995 5.995 0 015.794-4.472zM191.964 28c6.009 0 10.88 4.871 10.88 10.88v1.48L91 42.324V35.48A7.48 7.48 0 0198.48 28h93.484zM38.38 22.048a6.9 6.9 0 016.44 4.43 2.93 2.93 0 013.114 1.017 4.35 4.35 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.864-8.662c.779-2.96 3.466-5.146 6.67-5.146zM242.193 8a6.9 6.9 0 016.44 4.431 2.928 2.928 0 013.113 1.016 4.353 4.353 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.866-8.661c.778-2.96 3.464-5.147 6.67-5.147z"
18
+ opacity="0.302"
19
+ ></path>
20
+ <rect
21
+ width="132"
22
+ height="97"
23
+ x="91"
24
+ y="40.398"
25
+ fill="#FFF"
26
+ rx="10.88"
27
+ ></rect>
28
+ <rect
29
+ width="42.743"
30
+ height="27.07"
31
+ x="241.333"
32
+ y="62.141"
33
+ fill="#CACED8"
34
+ rx="2.72"
35
+ ></rect>
36
+ <path
37
+ fill="#3B414D"
38
+ fillRule="nonzero"
39
+ d="M278.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-192.675 0a2.04 2.04 0 01.103 4.076l-.153.004H62.418a2.04 2.04 0 01-.103-4.076l.153-.004h23.057zm-31.043 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H44.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zm167.441-1.758l31.106.006c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007L221.97 129c-1.075.012-1.958-.793-1.971-1.799-.012-.96.771-1.756 1.778-1.837l.145-.006zm62.153-56.806v5.7h-42.743v-5.7h42.743zM145.815 71c2.575 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.069 1.427l-.066.167a1.896 1.896 0 01-3.568-1.28c.874-2.437 3.126-4.105 5.703-4.105zm23.513 0c2.576 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.068 1.427l-.066.167a1.895 1.895 0 11-3.57-1.28c.875-2.437 3.128-4.105 5.704-4.105zm23.636-45.04c7.032 0 12.752 5.618 12.916 12.61l.004.31-.001 1.12h7.165c6.008 0 10.88 4.871 10.88 10.88v76.549c0 6.008-4.872 10.88-10.88 10.88H100.88c-6.009 0-10.88-4.872-10.88-10.88V45.325h-.04V35.48a9.52 9.52 0 019.249-9.516l.271-.004h93.484zm20.084 18.12l-118.968.001v83.348a6.8 6.8 0 006.561 6.795l.239.005h112.168a6.8 6.8 0 006.796-6.562l.004-.238V50.88a6.8 6.8 0 00-6.562-6.796l-.238-.004zm-45.4 49.455c1.047 0 1.895.849 1.895 1.896a5.415 5.415 0 01-5.197 5.41l-.218.005h-13.505a5.415 5.415 0 01-5.414-5.415 1.896 1.896 0 013.785-.148l.006.148c0 .847.648 1.543 1.476 1.617l.147.007h13.505c.847 0 1.543-.649 1.618-1.476l.006-.148c0-1.047.85-1.896 1.896-1.896zm113.708-31.394a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303zm0 2.04h-37.303a.68.68 0 00-.672.58l-.008.1v21.63a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-21.63a.68.68 0 00-.58-.673l-.1-.007zm-4.246 16.327c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM192.964 30.04H99.48a5.44 5.44 0 00-5.436 5.221l-.004.219V40h107.763v-1.12a8.84 8.84 0 00-8.579-8.836l-.26-.004z"
40
+ ></path>
41
+ <path
42
+ fill={themeValues.subIconColor}
43
+ fillRule="nonzero"
44
+ d="M160.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm-62.7-34.592c-.008.004-.01.642-.012 1.477v2.665l-.002.408c-.001.507-.004.846-.01.851l-6.626 5.754 15.406 5.409a5.925 5.925 0 015.126-2.95 2.04 2.04 0 01.153 4.074l-.153.006a1.847 1.847 0 00-.144 3.69l.144.005h3.396a2.04 2.04 0 01.153 4.075l-.153.005h-3.396a5.93 5.93 0 01-5.825-4.828l-18.716-6.567a2.037 2.037 0 01-1.286-1.363 2.04 2.04 0 01.237-2.558l.122-.115 11.378-9.88c.042-.037.14-.109.191-.145l.016-.013zm176.39-8.358a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.007-.015-.415-.018-1.224v-.344V107.728v-.789l.004-1.53 9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zm-28.267-27.86a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005-3.306-.005v-2l3.306.005c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v3.691h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303z"
45
+ ></path>
46
+ <path
47
+ fill="#FFF"
48
+ d="M239.196 71.402v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
49
+ ></path>
184
50
  </g>
185
51
  </g>
186
52
  </svg>
package/src/components/atoms/icons/index.js CHANGED
@@ -40,6 +40,7 @@ import SuccessfulIcon from "./SuccessfulIcon";
40
40
  import VoidedIcon from "./VoidedIcon";
41
41
  import StatusUnknownIcon from "./StatusUnknownIcon";
42
42
  import CarrotIcon from "./CarrotIcon";
43
+ import ProfileIcon from "./ProfileIcon";
43
44
 
44
45
  export {
45
46
  AccountsIcon,
@@ -83,5 +84,6 @@ export {
83
84
  SuccessfulIcon,
84
85
  VoidedIcon,
85
86
  StatusUnknownIcon,
86
- CarrotIcon
87
+ CarrotIcon,
88
+ ProfileIcon
87
89
  };
package/src/components/atoms/text/Text.js CHANGED
@@ -13,6 +13,7 @@ const Text = ({
13
13
  extraStyles = ``,
14
14
  hoverStyles,
15
15
  onClick,
16
+ onKeyPress,
16
17
  as,
17
18
  dataQa,
18
19
  children,
@@ -27,6 +28,7 @@ const Text = ({
27
28
  extraStyles={extraStyles}
28
29
  hoverStyles={hoverStyles}
29
30
  onClick={onClick}
31
+ onKeyPress={onKeyPress}
30
32
  data-qa={dataQa}
31
33
  {...rest}
32
34
  >
package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js CHANGED
@@ -16,24 +16,9 @@ const AccountAndRoutingModal = ({
16
16
  acceptText,
17
17
  content,
18
18
  imageType,
19
- variant,
20
19
  themeValues
21
20
  }) => (
22
21
  <Modal
23
- ModalLink={() => (
24
- <Text
25
- variant={variant === "default" ? "pS" : "pXS"}
26
- onClick={() => toggleOpen(true)}
27
- color={themeValues.linkColor}
28
- weight={themeValues.fontWeight}
29
- hoverStyles={themeValues.modalLinkHoverFocus}
30
- extraStyles={`cursor: pointer;`}
31
- tabIndex="0"
32
- onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
33
- >
34
- {link}
35
- </Text>
36
- )}
37
22
  modalOpen={isOpen}
38
23
  hideModal={() => toggleOpen(false)}
39
24
  showModal={() => toggleOpen(true)}
@@ -63,7 +48,20 @@ const AccountAndRoutingModal = ({
63
48
  toggleAccepted(true);
64
49
  toggleOpen(false);
65
50
  }}
66
- />
51
+ >
52
+ <Text
53
+ variant="pS"
54
+ onClick={() => toggleOpen(true)}
55
+ onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
56
+ tabIndex="0"
57
+ color={themeValues.linkColor}
58
+ weight={themeValues.fontWeight}
59
+ hoverStyles={themeValues.modalLinkHoverFocus}
60
+ extraStyles={`cursor: pointer;`}
61
+ >
62
+ {link}
63
+ </Text>
64
+ </Modal>
67
65
  );
68
66
 
69
67
  export default themeComponent(
package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js CHANGED
@@ -1,18 +1,13 @@
1
- import {
2
- FONT_WEIGHT_REGULAR,
3
- FONT_WEIGHT_SEMIBOLD
4
- } from "../../../constants/style_constants";
1
+ import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
5
2
 
6
- const linkColor = { default: "#357fb8", footer: "#ffffff" };
7
- const fontSize = { default: "1rem", footer: "0.875rem" };
8
- const lineHeight = { default: "1.5rem", footer: "1.25rem" };
3
+ const linkColor = { default: "#357fb8" };
4
+ const fontSize = { default: "1rem" };
5
+ const lineHeight = { default: "1.5rem" };
9
6
  const fontWeight = {
10
- default: FONT_WEIGHT_REGULAR,
11
- footer: FONT_WEIGHT_SEMIBOLD
7
+ default: FONT_WEIGHT_REGULAR
12
8
  };
13
9
  const modalLinkHoverFocus = {
14
- default: ``,
15
- footer: `outline: none; text-decoration: underline;`
10
+ default: `outline: none; text-decoration: underline;`
16
11
  };
17
12
 
18
13
  export const fallbackValues = {
package/src/components/molecules/address-form/AddressForm.js CHANGED
@@ -1,6 +1,5 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useEffect } from "react";
2
2
  import { required, hasLength } from "redux-freeform";
3
- import styled from "styled-components";
4
3
  import StateProvinceDropdown from "../../atoms/state-province-dropdown";
5
4
  import Checkbox from "../../atoms/checkbox";
6
5
  import CountryDropdown from "../../atoms/country-dropdown";
@@ -12,10 +11,6 @@ import {
12
11
  FormInputColumn
13
12
  } from "../../atoms/form-layouts";
14
13
 
15
- const CheckboxWrapper = styled.div`
16
- outline: none;
17
- `;
18
-
19
14
  const AddressForm = ({
20
15
  variant = "default",
21
16
  fields,
@@ -27,13 +22,6 @@ const AddressForm = ({
27
22
  saveToWallet,
28
23
  walletCheckboxMarked
29
24
  }) => {
30
- const [checkboxFocused, focusCheckbox] = useState(false);
31
-
32
- const handleClick = (e, func) => {
33
- if (e?.keyCode === 13) {
34
- func();
35
- }
36
- };
37
25
  if (clearOnDismount) {
38
26
  useEffect(() => () => actions.form.clear(), []);
39
27
  }
@@ -120,20 +108,12 @@ const AddressForm = ({
120
108
  onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
121
109
  />
122
110
  {showWalletCheckbox && (
123
- <CheckboxWrapper
124
- tabIndex="0"
125
- onFocus={() => focusCheckbox(true)}
126
- onBlur={() => focusCheckbox(false)}
127
- onKeyDown={e => handleClick(e, saveToWallet)}
128
- >
129
- <Checkbox
130
- name="address checkbox"
131
- title="Save address to wallet"
132
- checked={walletCheckboxMarked}
133
- onChange={saveToWallet}
134
- focused={checkboxFocused}
135
- />
136
- </CheckboxWrapper>
111
+ <Checkbox
112
+ name="address checkbox"
113
+ title="Save address to wallet"
114
+ checked={walletCheckboxMarked}
115
+ onChange={saveToWallet}
116
+ />
137
117
  )}
138
118
  </FormInputColumn>
139
119
  </FormContainer>