@thecb/components 4.1.13 → 4.1.15

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 (10) hide show
  1. package/dist/index.cjs.js +277 -297
  2. package/package.json +1 -1
  3. package/src/components/atoms/form-layouts/FormLayouts.theme.js +2 -2
  4. package/src/components/atoms/form-select/FormSelect.js +50 -15
  5. package/src/components/atoms/form-select/FormSelect.stories.js +4 -2
  6. package/src/components/atoms/form-select/FormSelect.styled.js +6 -6
  7. package/src/components/atoms/form-select/FormSelect.theme.js +52 -0
  8. package/src/components/atoms/icons/ProfileIcon.js +48 -0
  9. package/src/components/atoms/icons/WalletIcon.js +38 -172
  10. package/src/components/atoms/icons/index.js +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "4.1.13",
3
+ "version": "4.1.15",
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/form-layouts/FormLayouts.theme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import {
2
- FIREFLY_GREY,
2
+ CHARADE_GREY,
3
3
  MATISSE_BLUE,
4
4
  WHITE,
5
5
  SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
23
23
  disabled: `${SEASHELL_WHITE}`
24
24
  };
25
25
  const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
26
- const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
26
+ const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
27
27
  const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
28
28
  const lineHeight = { default: "1rem", disabled: "1rem" };
29
29
  const fontSize = { default: "0.875rem", disabled: "0.875rem" };
package/src/components/atoms/form-select/FormSelect.js CHANGED
@@ -1,8 +1,11 @@
1
1
  import React, { useState, useRef, useEffect } from "react";
2
2
  import Dropdown from "../dropdown";
3
3
  import Text from "../text";
4
- import { STORM_GREY } from "../../../constants/colors";
4
+ import { ERROR_COLOR } from "../../../constants/colors";
5
5
  import { SelectContainer, SelectLabel } from "./FormSelect.styled";
6
+ import { fallbackValues } from "./FormSelect.theme";
7
+ import { themeComponent } from "../../../util/themeUtils";
8
+ import { Box, Cluster } from "../layouts";
6
9
 
7
10
  const FormSelect = ({
8
11
  fieldActions,
@@ -12,7 +15,9 @@ const FormSelect = ({
12
15
  field,
13
16
  showErrors,
14
17
  onChange,
15
- dropdownMaxHeight
18
+ dropdownMaxHeight,
19
+ disabledValues,
20
+ themeValues
16
21
  }) => {
17
22
  const [open, setOpen] = useState(false);
18
23
  const dropdownRef = useRef(null);
@@ -32,33 +37,63 @@ const FormSelect = ({
32
37
 
33
38
  return (
34
39
  <SelectContainer ref={dropdownRef}>
35
- <Text
36
- variant="pS"
37
- color={STORM_GREY}
38
- weight="400"
39
- extraStyles={`margin-bottom: 4px;`}
40
- >
41
- {labelTextWhenNoError}
42
- </Text>
40
+ <Box padding="0" minWidth="100%">
41
+ <Cluster justify="space-between" align="center">
42
+ <Text
43
+ as="label"
44
+ variant="pS"
45
+ color={themeValues.labelColor}
46
+ weight={themeValues.fontWeight}
47
+ extraStyles={`word-break: break-word;
48
+ font-family: Public Sans;
49
+ &::first-letter {
50
+ text-transform: uppercase;
51
+ }`}
52
+ >
53
+ {labelTextWhenNoError}
54
+ </Text>
55
+ </Cluster>
56
+ </Box>
43
57
  <Dropdown
44
58
  maxHeight={dropdownMaxHeight}
45
59
  placeholder={options[0] ? options[0].text : ""}
46
60
  options={options}
47
61
  value={field.rawValue}
62
+ disabledValues={disabledValues}
48
63
  isOpen={open}
49
- isError={false}
64
+ isError={
65
+ (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
66
+ }
50
67
  onSelect={
51
68
  onChange ? value => onChange(value) : value => fieldActions.set(value)
52
69
  }
53
70
  onClick={() => setOpen(!open)}
54
71
  />
55
72
  <SelectLabel field={field} showErrors={showErrors}>
56
- {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
57
- ? errorMessages[field.errors[0]]
58
- : null}
73
+ {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
74
+ <Text
75
+ color={ERROR_COLOR}
76
+ variant="pXS"
77
+ weight={themeValues.fontWeight}
78
+ extraStyles={`word-break: break-word;
79
+ font-family: Public Sans;
80
+ &::first-letter {
81
+ text-transform: uppercase;
82
+ }`}
83
+ >
84
+ {errorMessages[field.errors[0]]}
85
+ </Text>
86
+ ) : (
87
+ <Text extraStyles={`height: ${themeValues.lineHeight};`} />
88
+ )}
59
89
  </SelectLabel>
60
90
  </SelectContainer>
61
91
  );
62
92
  };
63
93
 
64
- export default FormSelect;
94
+ export default themeComponent(
95
+ FormSelect,
96
+ "FormSelect",
97
+ fallbackValues,
98
+ "default"
99
+ );
package/src/components/atoms/form-select/FormSelect.stories.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  import { connect } from "react-redux";
3
- import { boolean } from "@storybook/addon-knobs";
4
3
  import { createFormState, required } from "redux-freeform";
5
4
 
6
5
  import FormSelect from "./FormSelect";
@@ -18,7 +17,8 @@ const options = [
18
17
  { value: "", text: "choose name" },
19
18
  { value: "foo", text: "foo" },
20
19
  { value: "bar", text: "bar" },
21
- { value: "baz", text: "baz" }
20
+ { value: "baz", text: "baz" },
21
+ { value: "disabled", text: "disabled" }
22
22
  ];
23
23
 
24
24
  const story = page({
@@ -32,10 +32,12 @@ const story = page({
32
32
 
33
33
  const FormWrapper = ({ fields, actions }) => (
34
34
  <FormSelect
35
+ labelTextWhenNoError="Form Select"
35
36
  errorMessages={errorMessages}
36
37
  options={options}
37
38
  field={fields.thing}
38
39
  fieldActions={actions.fields.thing}
40
+ disabledValues={["disabled"]}
39
41
  />
40
42
  );
41
43
 
package/src/components/atoms/form-select/FormSelect.styled.js CHANGED
@@ -1,10 +1,6 @@
1
1
  import styled from "styled-components";
2
2
  import {
3
- MINESHAFT_GREY,
4
3
  STORM_GREY,
5
- WHITE,
6
- SEASHELL_WHITE,
7
- DUSTY_GREY,
8
4
  GHOST_GREY,
9
5
  ERROR_COLOR,
10
6
  MATISSE_BLUE
@@ -17,6 +13,9 @@ export const SelectContainer = styled.div`
17
13
  flex-direction: column;
18
14
  justify-content: space-between;
19
15
  align-items: flex-start;
16
+ > * + * {
17
+ margin-top: 0.25rem;
18
+ }
20
19
  `;
21
20
 
22
21
  export const SelectLabel = styled.label`
@@ -53,8 +52,9 @@ export const SelectField = styled.select`
53
52
  font-family: Public Sans;
54
53
  line-height: 2rem;
55
54
  font-weight: ${FONT_WEIGHT_REGULAR};
56
- background-color: ${({ disabled }) => (disabled ? SEASHELL_WHITE : WHITE)};
57
- color: ${({ disabled }) => (disabled ? DUSTY_GREY : MINESHAFT_GREY)};
55
+ background-color: ${({ themeValues }) =>
56
+ themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
57
+ color: ${({ themeValues }) => themeValues.color && themeValues.color};
58
58
  box-shadow: none;
59
59
 
60
60
  &:focus {
package/src/components/atoms/form-select/FormSelect.theme.js ADDED
@@ -0,0 +1,52 @@
1
+ import {
2
+ CHARADE_GREY,
3
+ MATISSE_BLUE,
4
+ WHITE,
5
+ SEASHELL_WHITE,
6
+ MINESHAFT_GREY,
7
+ DUSTY_GREY,
8
+ GREY_CHATEAU,
9
+ ATHENS_GREY
10
+ } from "../../../constants/colors";
11
+ import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
12
+
13
+ const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
14
+ const formBackgroundColor = {
15
+ default: `${WHITE}`,
16
+ disabled: `${WHITE}`,
17
+ checkout: `${ATHENS_GREY}`,
18
+ collapsible: `${ATHENS_GREY}`
19
+ };
20
+
21
+ const inputBackgroundColor = {
22
+ default: `${WHITE}`,
23
+ disabled: `${SEASHELL_WHITE}`
24
+ };
25
+ const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
26
+ const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
27
+ const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
28
+ const lineHeight = { default: "1rem", disabled: "1rem" };
29
+ const fontSize = { default: "0.875rem", disabled: "0.875rem" };
30
+ const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
31
+ const fontWeight = {
32
+ default: `${FONT_WEIGHT_REGULAR}`,
33
+ disabled: `${FONT_WEIGHT_REGULAR}`
34
+ };
35
+ const hoverFocusStyles = {
36
+ default: `color: #0E506D; outline: none; text-decoration: underline; `,
37
+ disabled: `color: #6E727E;`
38
+ };
39
+
40
+ export const fallbackValues = {
41
+ linkColor,
42
+ formBackgroundColor,
43
+ inputBackgroundColor,
44
+ color,
45
+ labelColor,
46
+ borderColor,
47
+ lineHeight,
48
+ fontSize,
49
+ errorFontSize,
50
+ fontWeight,
51
+ hoverFocusStyles
52
+ };
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
  };