contentoh-components-library 21.4.28 → 21.4.29

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 (9) hide show
  1. package/dist/components/molecules/StripeCardForm/StripeCardForm.stories.js +2 -1
  2. package/dist/components/molecules/StripeCardForm/index.js +2 -2
  3. package/dist/components/molecules/StripeCardForm/paymentForm.js +4 -1
  4. package/dist/components/molecules/StripeCardForm/styles.js +5 -5
  5. package/package.json +1 -1
  6. package/src/components/molecules/StripeCardForm/StripeCardForm.stories.js +1 -0
  7. package/src/components/molecules/StripeCardForm/index.js +2 -1
  8. package/src/components/molecules/StripeCardForm/paymentForm.js +2 -1
  9. package/src/components/molecules/StripeCardForm/styles.js +2 -3
package/dist/components/molecules/StripeCardForm/StripeCardForm.stories.js CHANGED
@@ -27,5 +27,6 @@ var StripeCardFormDefault = Template.bind({});
27
27
  exports.StripeCardFormDefault = StripeCardFormDefault;
28
28
  StripeCardFormDefault.args = {
29
29
  customerId: "cus_KuEt6R6vwmN09f",
30
- jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q"
30
+ jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
31
+ isSelected: true
31
32
  };
package/dist/components/molecules/StripeCardForm/index.js CHANGED
@@ -73,7 +73,6 @@ var StripeCardForm = function StripeCardForm(_ref) {
73
73
  loadStripeJS();
74
74
  }, []);
75
75
  return stripeLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
76
- isSelected: isSelected,
77
76
  onClick: function onClick() {
78
77
  return _onClick && _onClick();
79
78
  },
@@ -85,7 +84,8 @@ var StripeCardForm = function StripeCardForm(_ref) {
85
84
  setCard: setCard,
86
85
  setStripe: setStripe,
87
86
  setModalErrorCard: setModalErrorCard,
88
- setMsj: setMsj
87
+ setMsj: setMsj,
88
+ isSelected: isSelected
89
89
  })
90
90
  })
91
91
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
package/dist/components/molecules/StripeCardForm/paymentForm.js CHANGED
@@ -30,7 +30,9 @@ var PaymentForm = function PaymentForm(_ref) {
30
30
  setCard = _ref.setCard,
31
31
  setStripe = _ref.setStripe,
32
32
  setModalErrorCard = _ref.setModalErrorCard,
33
- setMsj = _ref.setMsj;
33
+ setMsj = _ref.setMsj,
34
+ _ref$isSelected = _ref.isSelected,
35
+ isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
34
36
  var stripe = (0, _reactStripeJs.useStripe)();
35
37
  var elements = (0, _reactStripeJs.useElements)();
36
38
 
@@ -140,6 +142,7 @@ var PaymentForm = function PaymentForm(_ref) {
140
142
  };
141
143
 
142
144
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaymentFormContainer, {
145
+ isSelected: isSelected,
143
146
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
144
147
  children: labelForm
145
148
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
package/dist/components/molecules/StripeCardForm/styles.js CHANGED
@@ -15,13 +15,13 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject, _templateObject2;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), function (_ref) {
19
- var isSelected = _ref.isSelected;
20
- return isSelected && "border-color: #E33AA9;";
21
- });
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
22
19
 
23
20
  exports.Container = Container;
24
21
 
25
- var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n border-radius: 10px;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: #808080;\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.Lato, _variables.FontFamily.Lato);
22
+ var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n border-radius: 10px;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: #808080;\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n ", "\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
23
+ var isSelected = _ref.isSelected;
24
+ return isSelected && "border-color: #E33AA9;";
25
+ });
26
26
 
27
27
  exports.PaymentFormContainer = PaymentFormContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.4.28",
3
+ "version": "21.4.29",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/molecules/StripeCardForm/StripeCardForm.stories.js CHANGED
@@ -10,4 +10,5 @@ export const StripeCardFormDefault = Template.bind({});
10
10
  StripeCardFormDefault.args = {
11
11
  customerId: "cus_KuEt6R6vwmN09f",
12
12
  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
13
+ isSelected: true,
13
14
  };
package/src/components/molecules/StripeCardForm/index.js CHANGED
@@ -26,7 +26,7 @@ export const StripeCardForm = ({
26
26
  }, []);
27
27
 
28
28
  return stripeLoaded ? (
29
- <Container isSelected={isSelected} onClick={() => onClick && onClick()}>
29
+ <Container onClick={() => onClick && onClick()}>
30
30
  <Elements stripe={stripeApiKey}>
31
31
  <PaymentForm
32
32
  labelForm={"Pago con tarjeta"}
@@ -35,6 +35,7 @@ export const StripeCardForm = ({
35
35
  setStripe={setStripe}
36
36
  setModalErrorCard={setModalErrorCard}
37
37
  setMsj={setMsj}
38
+ isSelected={isSelected}
38
39
  />
39
40
  </Elements>
40
41
  </Container>
package/src/components/molecules/StripeCardForm/paymentForm.js CHANGED
@@ -16,6 +16,7 @@ export const PaymentForm = ({
16
16
  setStripe,
17
17
  setModalErrorCard,
18
18
  setMsj,
19
+ isSelected = false,
19
20
  }) => {
20
21
  const stripe = useStripe();
21
22
  const elements = useElements();
@@ -86,7 +87,7 @@ export const PaymentForm = ({
86
87
  };
87
88
 
88
89
  return (
89
- <PaymentFormContainer>
90
+ <PaymentFormContainer isSelected={isSelected}>
90
91
  <h2>{labelForm}</h2>
91
92
  <div className="card-fields">
92
93
  <div className="element card-name">
package/src/components/molecules/StripeCardForm/styles.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import styled from "styled-components";
2
2
  import { FontFamily } from "../../../global-files/variables";
3
3
 
4
- export const Container = styled.div`
5
- ${({ isSelected }) => isSelected && `border-color: #E33AA9;`}
6
- `;
4
+ export const Container = styled.div``;
7
5
 
8
6
  export const PaymentFormContainer = styled.form`
9
7
  padding: 20px;
@@ -72,4 +70,5 @@ export const PaymentFormContainer = styled.form`
72
70
  }
73
71
  }
74
72
  }
73
+ ${({ isSelected }) => isSelected && `border-color: #E33AA9;`}
75
74
  `;