@thecb/components 3.3.9 → 3.4.1

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 (24) hide show
  1. package/dist/index.cjs.js +780 -451
  2. package/package.json +3 -3
  3. package/src/components/atoms/button-with-action/ButtonWithAction.theme.js +20 -6
  4. package/src/components/molecules/obligation/icons/AccountBillIcon.js +2 -2
  5. package/src/components/molecules/obligation/icons/AccountConstructionIcon.js +2 -2
  6. package/src/components/molecules/obligation/icons/AccountDentalIcon.js +2 -2
  7. package/src/components/molecules/obligation/icons/AccountElectricIcon.js +2 -2
  8. package/src/components/molecules/obligation/icons/AccountGarbageIcon.js +2 -2
  9. package/src/components/molecules/obligation/icons/AccountGasIcon.js +2 -2
  10. package/src/components/molecules/obligation/icons/AccountGenericIcon.js +2 -2
  11. package/src/components/molecules/obligation/icons/AccountMedicalIcon.js +2 -2
  12. package/src/components/molecules/obligation/icons/AccountWaterIcon.js +2 -2
  13. package/src/components/molecules/obligation/icons/PropertyApartmentIcon.js +2 -2
  14. package/src/components/molecules/obligation/icons/PropertyBusinessIcon.js +2 -2
  15. package/src/components/molecules/obligation/icons/PropertyCarIcon.js +2 -2
  16. package/src/components/molecules/obligation/icons/PropertyCommercialVehicleIcon.js +2 -2
  17. package/src/components/molecules/obligation/icons/PropertyGarageIcon.js +2 -2
  18. package/src/components/molecules/obligation/icons/PropertyLandIcon.js +2 -2
  19. package/src/components/molecules/obligation/icons/PropertyMotorcycleIcon.js +2 -2
  20. package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js +2 -2
  21. package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js +2 -2
  22. package/src/components/molecules/partial-amount-form/PartialAmountForm.js +6 -2
  23. package/src/components/molecules/partial-amount-form/PartialAmountForm.state.js +2 -2
  24. package/.tool-versions +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "3.3.9",
3
+ "version": "3.4.1",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -73,12 +73,12 @@
73
73
  }
74
74
  },
75
75
  "dependencies": {
76
- "ramda": "^0.27.0",
77
76
  "formatted-input": "^0.1.3",
78
77
  "framer-motion": "^1.11.0",
79
78
  "numeral": "^2.0.6",
79
+ "ramda": "^0.27.0",
80
80
  "react-aria-modal": "^4.0.0",
81
81
  "react-pose": "^4.0.10",
82
- "redux-freeform": "^4.1.3"
82
+ "redux-freeform": "^4.1.4"
83
83
  }
84
84
  }
@@ -10,6 +10,7 @@ const padding = {
10
10
  smallPrimary: "0.75rem 1rem",
11
11
  smallSecondary: "0.75rem 1rem",
12
12
  smallGhost: "0",
13
+ tertiary: "1rem 1.25rem",
13
14
  ghost: "0.65rem 0",
14
15
  danger: "1rem 1.25rem",
15
16
  whiteSecondary: "0.75rem 2rem",
@@ -24,6 +25,7 @@ const color = {
24
25
  smallSecondary: "#15749D",
25
26
  smallGhost: "#15749D",
26
27
  ghost: "#15749D",
28
+ tertiary: "#15749D",
27
29
  danger: "#FFFFFF",
28
30
  whiteSecondary: "#FFFFFF",
29
31
  whitePrimary: "#FFFFFF"
@@ -37,6 +39,7 @@ const fontSizeVariant = {
37
39
  smallSecondary: "pS",
38
40
  smallGhost: "p",
39
41
  ghost: "pL",
42
+ tertiary: "pS",
40
43
  danger: "pS",
41
44
  whiteSecondary: "pS",
42
45
  whitePrimary: "pS"
@@ -50,6 +53,7 @@ const fontWeight = {
50
53
  smallSecondary: "600",
51
54
  smallGhost: "400",
52
55
  ghost: "600",
56
+ tertiary: "600",
53
57
  danger: "600",
54
58
  whiteSecondary: "600",
55
59
  whitePrimary: "600"
@@ -63,6 +67,7 @@ const height = {
63
67
  smallSecondary: "2.5rem",
64
68
  smallGhost: "1.5rem",
65
69
  ghost: "3rem",
70
+ tertiary: "3rem",
66
71
  danger: "3rem",
67
72
  whiteSecondary: "3rem",
68
73
  whitePrimary: "auto"
@@ -76,6 +81,7 @@ const minWidth = {
76
81
  smallSecondary: "100px",
77
82
  smallGhost: "100px",
78
83
  ghost: "130px",
84
+ tertiary: "130px",
79
85
  danger: "130px",
80
86
  whiteSecondary: "160px",
81
87
  whitePrimary: "130px"
@@ -89,6 +95,7 @@ const backgroundColor = {
89
95
  smallSecondary: "transparent",
90
96
  smallGhost: "transparent",
91
97
  ghost: "transparent",
98
+ tertiary: "transparent",
92
99
  danger: "#ED125F",
93
100
  whiteSecondary: "transparent",
94
101
  whitePrimary: "transparent"
@@ -102,6 +109,7 @@ const border = {
102
109
  smallSecondary: "2px solid #15749D",
103
110
  smallGhost: "none",
104
111
  ghost: "none",
112
+ tertiary: "none",
105
113
  danger: "2px solid #ED125F",
106
114
  whiteSecondary: "2px solid white",
107
115
  whitePrimary: "2px solid transparent"
@@ -113,8 +121,9 @@ const hoverBackgroundColor = {
113
121
  back: "transparent",
114
122
  smallPrimary: "#116285",
115
123
  smallSecondary: "transparent",
116
- ghost: "transparent",
117
124
  smallGhost: "transparent",
125
+ ghost: "transparent",
126
+ tertiary: "transparent",
118
127
  danger: "#BA002C",
119
128
  whiteSecondary: "transparent",
120
129
  whitePrimary: "transparent"
@@ -126,8 +135,9 @@ const hoverBorderColor = {
126
135
  back: "#DCEAF1",
127
136
  smallPrimary: "#116285",
128
137
  smallSecondary: "#DCEAF1",
129
- ghost: "transparent",
130
138
  smallGhost: "transparent",
139
+ ghost: "transparent",
140
+ tertiary: "transparent",
131
141
  danger: "#BA002C",
132
142
  whiteSecondary: "2px solid transparent",
133
143
  whitePrimary: "2px solid transparent"
@@ -139,8 +149,9 @@ const hoverColor = {
139
149
  back: "#116285",
140
150
  smallPrimary: "#FFFFFF",
141
151
  smallSecondary: "#116285",
142
- ghost: "#116285",
143
152
  smallGhost: "#116285",
153
+ ghost: "#116285",
154
+ tertiary: "#116285",
144
155
  danger: "#FFFFFF",
145
156
  whiteSecondary: "#FFFFFF",
146
157
  whitePrimary: "#FFFFFF"
@@ -152,8 +163,9 @@ const activeBackgroundColor = {
152
163
  back: "transparent",
153
164
  smallPrimary: "#0E506D",
154
165
  smallSecondary: "transparent",
155
- ghost: "transparent",
156
166
  smallGhost: "transparent",
167
+ ghost: "transparent",
168
+ tertiary: "transparent",
157
169
  danger: "#870000",
158
170
  whiteSecondary: "transparent",
159
171
  whitePrimary: "transparent"
@@ -165,8 +177,9 @@ const activeBorderColor = {
165
177
  back: "#0E506D",
166
178
  smallPrimary: "#0E506D",
167
179
  smallSecondary: "#0E506D",
168
- ghost: "transparent",
169
180
  smallGhost: "transparent",
181
+ ghost: "transparent",
182
+ tertiary: "transparent",
170
183
  danger: "#870000",
171
184
  whiteSecondary: "2px solid transparent",
172
185
  whitePrimary: "2px solid transparent"
@@ -178,8 +191,9 @@ const activeColor = {
178
191
  back: "#0E506D",
179
192
  smallPrimary: "#FFFFFF",
180
193
  smallSecondary: "#0E506D",
181
- ghost: "#0E506D",
182
194
  smallGhost: "#0E506D",
195
+ ghost: "#0E506D",
196
+ tertiary: "#0E506D",
183
197
  danger: "#FFFFFF",
184
198
  whiteSecondary: "#FFFFFF",
185
199
  whitePrimary: "#FFFFFF"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountBillIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountConstructionIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountDentalIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountElectricIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountGarbageIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountGasIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountGenericIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountMedicalIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const AccountWaterIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyApartmentIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyBusinessIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyCarIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyCommercialVehicleIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyGarageIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyLandIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyMotorcycleIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyPersonalIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -2,8 +2,8 @@ import React from "react";
2
2
 
3
3
  const PropertyStorefrontIcon = () => (
4
4
  <svg
5
- width="81px"
6
- height="81px"
5
+ width="51px"
6
+ height="51px"
7
7
  viewBox="0 0 81 81"
8
8
  version="1.1"
9
9
  xmlns="http://www.w3.org/2000/svg"
@@ -1,5 +1,9 @@
1
1
  import React from "react";
2
- import { required, numberGreaterThan, numberLessThan } from "redux-freeform";
2
+ import {
3
+ required,
4
+ numberGreaterThan,
5
+ numberLessThanOrEqualTo
6
+ } from "redux-freeform";
3
7
  import { displayCurrency } from "../../../util/general";
4
8
  import Text from "../../atoms/text";
5
9
  import {
@@ -28,7 +32,7 @@ const PartialAmountForm = ({
28
32
  [numberGreaterThan.error]: `Your total payment must be greater than ${displayCurrency(
29
33
  minimum
30
34
  )}`,
31
- [numberLessThan.error]: `Your total payment must be less than ${displayCurrency(
35
+ [numberLessThanOrEqualTo.error]: `Your total payment must be less than ${displayCurrency(
32
36
  maximum
33
37
  )}`
34
38
  };
@@ -4,7 +4,7 @@ import {
4
4
  onlyNaturals,
5
5
  validateSum,
6
6
  numberGreaterThan,
7
- numberLessThan
7
+ numberLessThanOrEqualTo
8
8
  } from "redux-freeform";
9
9
 
10
10
  export const createPartialAmountFormState = (
@@ -25,7 +25,7 @@ export const createPartialAmountFormState = (
25
25
  if (!!maximum) {
26
26
  validators.push(
27
27
  validateSum(
28
- numberLessThan(maximum),
28
+ numberLessThanOrEqualTo(maximum),
29
29
  lineItems
30
30
  .filter(lineItem => lineItem != item)
31
31
  .reduce((acc, curr) => [...acc, curr.id], [])
package/.tool-versions DELETED
@@ -1 +0,0 @@
1
- nodejs 10.13.0