@gympass/yoga 7.108.5 → 7.110.0
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.
- package/cjs/ActionRequirement/native/ActionRequirement.js +2 -2
- package/cjs/ActionRequirement/native/ActionRequirementStyles.js +3 -1
- package/cjs/ActionRequirement/web/ActionRequirement.js +2 -2
- package/cjs/ActionRequirement/web/ActionRequirementStyles.js +2 -1
- package/cjs/Datepicker/web/Calendar.js +6 -5
- package/cjs/Datepicker/web/Datepicker.test.js +6 -0
- package/esm/ActionRequirement/native/ActionRequirement.js +2 -2
- package/esm/ActionRequirement/native/ActionRequirementStyles.js +3 -1
- package/esm/ActionRequirement/web/ActionRequirement.js +2 -2
- package/esm/ActionRequirement/web/ActionRequirementStyles.js +2 -1
- package/esm/Datepicker/web/Calendar.js +6 -5
- package/esm/Datepicker/web/Datepicker.test.js +7 -1
- package/package.json +2 -2
|
@@ -70,8 +70,8 @@ function ActionRequirement(props) {
|
|
|
70
70
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
|
|
71
71
|
illustration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { children: illustration }),
|
|
72
72
|
titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
|
|
73
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "small", color: "deep", children: description }),
|
|
74
|
-
list && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "small", color: "deep", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxxlarge", children: list }) }),
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: description }),
|
|
74
|
+
list && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxxlarge", children: list }) }),
|
|
75
75
|
checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxxlarge", children: checkable }),
|
|
76
76
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { children })
|
|
77
77
|
] }));
|
|
@@ -38,7 +38,9 @@ var import_styled_components = __toESM(require("styled-components"));
|
|
|
38
38
|
var import_Text = __toESM(require("../../Text/index.native"));
|
|
39
39
|
var import_Box = __toESM(require("../../Box/index.native"));
|
|
40
40
|
var import_Button = __toESM(require("../../Button/index.native"));
|
|
41
|
-
const Title = (0, import_styled_components.default)(import_Text.default.H4)
|
|
41
|
+
const Title = (0, import_styled_components.default)(import_Text.default.H4).attrs({
|
|
42
|
+
bold: true
|
|
43
|
+
})`
|
|
42
44
|
${({
|
|
43
45
|
theme: {
|
|
44
46
|
yoga: { fontSizes }
|
|
@@ -115,8 +115,8 @@ function ActionRequirement(props) {
|
|
|
115
115
|
illustration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxIllustration, { children: illustration }),
|
|
116
116
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
|
|
117
117
|
titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
|
|
118
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "small", color: "deep", children: description }),
|
|
119
|
-
list && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "large", color: "deep", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { children: list }) }),
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: description }),
|
|
119
|
+
list && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "large", color: "deep", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { children: list }) }),
|
|
120
120
|
checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxlarge", children: checkable }),
|
|
121
121
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ActionRequirementStyles.Actions, { mt: "xlarge", children: [
|
|
122
122
|
primaryButton,
|
|
@@ -40,7 +40,8 @@ var import_Text = __toESM(require("../../Text"));
|
|
|
40
40
|
var import_Box = __toESM(require("../../Box"));
|
|
41
41
|
var import_Button = __toESM(require("../../Button"));
|
|
42
42
|
const Title = (0, import_styled_components.default)(import_Text.default.H4).attrs({
|
|
43
|
-
as: "p"
|
|
43
|
+
as: "p",
|
|
44
|
+
bold: true
|
|
44
45
|
})`
|
|
45
46
|
${({
|
|
46
47
|
theme: {
|
|
@@ -58,7 +58,7 @@ const DaysWrapper = import_styled_components.default.div`
|
|
|
58
58
|
margin: ${spacing.xxsmall}px ${spacing.zero}px ${spacing.xsmall}px ${spacing.zero}px;
|
|
59
59
|
`}
|
|
60
60
|
`;
|
|
61
|
-
const Day = (0, import_styled_components.default)(import__.Text.
|
|
61
|
+
const Day = (0, import_styled_components.default)(import__.Text.Overline)`
|
|
62
62
|
${({
|
|
63
63
|
theme: {
|
|
64
64
|
yoga: { colors }
|
|
@@ -124,6 +124,7 @@ const DayField = import_styled_components.default.div`
|
|
|
124
124
|
p {
|
|
125
125
|
color: ${getDayFieldColor(selected, disabled, colors, aux)};
|
|
126
126
|
z-index: 1;
|
|
127
|
+
position: absolute;
|
|
127
128
|
}
|
|
128
129
|
width: ${datepicker.width.day}px;
|
|
129
130
|
height: ${datepicker.width.day}px;
|
|
@@ -248,7 +249,7 @@ function Calendar({
|
|
|
248
249
|
onClick: () => val <= 7 && onClick(val),
|
|
249
250
|
inRange: type === "range" && val <= 7 && inRange(val),
|
|
250
251
|
aux: { val, startDate, endDate, year, month },
|
|
251
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.
|
|
252
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { bold: isEqual(val), children: val })
|
|
252
253
|
},
|
|
253
254
|
val
|
|
254
255
|
);
|
|
@@ -272,7 +273,7 @@ function Calendar({
|
|
|
272
273
|
inRange: type === "range" && inRange(val),
|
|
273
274
|
disabled: isDisabled(val),
|
|
274
275
|
aux: { val, startDate, endDate, year, month },
|
|
275
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.
|
|
276
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { bold: isEqual(val), children: val })
|
|
276
277
|
},
|
|
277
278
|
val
|
|
278
279
|
);
|
|
@@ -294,7 +295,7 @@ function Calendar({
|
|
|
294
295
|
onClick: () => val > 7 && onClick(val),
|
|
295
296
|
inRange: type === "range" && val > 7 && inRange(val),
|
|
296
297
|
aux: { val, startDate, endDate, year, month },
|
|
297
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.
|
|
298
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { bold: isEqual(val), children: val })
|
|
298
299
|
},
|
|
299
300
|
val
|
|
300
301
|
);
|
|
@@ -345,7 +346,7 @@ function Calendar({
|
|
|
345
346
|
"data-testid": "previous-month-arrow"
|
|
346
347
|
}
|
|
347
348
|
),
|
|
348
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { alignSelf: "center" }, children: new Intl.DateTimeFormat("en-US", {
|
|
349
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text.Body2, { style: { alignSelf: "center" }, bold: true, children: new Intl.DateTimeFormat("en-US", {
|
|
349
350
|
month: "long",
|
|
350
351
|
year: "numeric"
|
|
351
352
|
}).format(new Date(year, month, 1, 0, 0, 0)) }),
|
|
@@ -30,6 +30,12 @@ var import_Datepicker = require("./Datepicker");
|
|
|
30
30
|
describe("<Datepicker />", () => {
|
|
31
31
|
const testDate = new Date(2022, 7, 3, 14, 0, 0);
|
|
32
32
|
describe("Snapshots", () => {
|
|
33
|
+
it("should match snapshot when v3Theme is settled", () => {
|
|
34
|
+
const { container } = (0, import_react2.render)(
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { theme: import__.v3theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Datepicker, { type: "single" }) })
|
|
36
|
+
);
|
|
37
|
+
expect(container).toMatchSnapshot();
|
|
38
|
+
});
|
|
33
39
|
it("should match with single Datepicker", () => {
|
|
34
40
|
const { container } = (0, import_react2.render)(
|
|
35
41
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Datepicker, { type: "single" }) })
|
|
@@ -39,8 +39,8 @@ function ActionRequirement(props) {
|
|
|
39
39
|
return /* @__PURE__ */ jsxs(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
|
|
40
40
|
illustration && /* @__PURE__ */ jsx(Box, { children: illustration }),
|
|
41
41
|
titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { children: title }) : /* @__PURE__ */ jsx(Title, { children: title }),
|
|
42
|
-
/* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: description }),
|
|
43
|
-
list && /* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: /* @__PURE__ */ jsx(Box, { mt: "xxxlarge", children: list }) }),
|
|
42
|
+
/* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: description }),
|
|
43
|
+
list && /* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: /* @__PURE__ */ jsx(Box, { mt: "xxxlarge", children: list }) }),
|
|
44
44
|
checkable && /* @__PURE__ */ jsx(Box, { mt: "xxxlarge", children: checkable }),
|
|
45
45
|
/* @__PURE__ */ jsx(View, { children })
|
|
46
46
|
] }));
|
|
@@ -2,7 +2,9 @@ import styled, { css } from "styled-components";
|
|
|
2
2
|
import Text from "../../Text/index.native";
|
|
3
3
|
import Box from "../../Box/index.native";
|
|
4
4
|
import Button from "../../Button/index.native";
|
|
5
|
-
const Title = styled(Text.H4)
|
|
5
|
+
const Title = styled(Text.H4).attrs({
|
|
6
|
+
bold: true
|
|
7
|
+
})`
|
|
6
8
|
${({
|
|
7
9
|
theme: {
|
|
8
10
|
yoga: { fontSizes }
|
|
@@ -89,8 +89,8 @@ function ActionRequirement(props) {
|
|
|
89
89
|
illustration && /* @__PURE__ */ jsx(BoxIllustration, { children: illustration }),
|
|
90
90
|
/* @__PURE__ */ jsxs(Content, { children: [
|
|
91
91
|
titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { children: title }) : /* @__PURE__ */ jsx(Title, { children: title }),
|
|
92
|
-
/* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: description }),
|
|
93
|
-
list && /* @__PURE__ */ jsx(Text, { mt: "large", color: "deep", children: /* @__PURE__ */ jsx(Box, { children: list }) }),
|
|
92
|
+
/* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: description }),
|
|
93
|
+
list && /* @__PURE__ */ jsx(Text.Body1, { mt: "large", color: "deep", children: /* @__PURE__ */ jsx(Box, { children: list }) }),
|
|
94
94
|
checkable && /* @__PURE__ */ jsx(Box, { mt: "xxlarge", children: checkable }),
|
|
95
95
|
/* @__PURE__ */ jsxs(Actions, { mt: "xlarge", children: [
|
|
96
96
|
primaryButton,
|
|
@@ -25,7 +25,7 @@ const DaysWrapper = styled.div`
|
|
|
25
25
|
margin: ${spacing.xxsmall}px ${spacing.zero}px ${spacing.xsmall}px ${spacing.zero}px;
|
|
26
26
|
`}
|
|
27
27
|
`;
|
|
28
|
-
const Day = styled(Text.
|
|
28
|
+
const Day = styled(Text.Overline)`
|
|
29
29
|
${({
|
|
30
30
|
theme: {
|
|
31
31
|
yoga: { colors }
|
|
@@ -91,6 +91,7 @@ const DayField = styled.div`
|
|
|
91
91
|
p {
|
|
92
92
|
color: ${getDayFieldColor(selected, disabled, colors, aux)};
|
|
93
93
|
z-index: 1;
|
|
94
|
+
position: absolute;
|
|
94
95
|
}
|
|
95
96
|
width: ${datepicker.width.day}px;
|
|
96
97
|
height: ${datepicker.width.day}px;
|
|
@@ -215,7 +216,7 @@ function Calendar({
|
|
|
215
216
|
onClick: () => val <= 7 && onClick(val),
|
|
216
217
|
inRange: type === "range" && val <= 7 && inRange(val),
|
|
217
218
|
aux: { val, startDate, endDate, year, month },
|
|
218
|
-
children: /* @__PURE__ */ jsx(Text.
|
|
219
|
+
children: /* @__PURE__ */ jsx(Text.Body2, { bold: isEqual(val), children: val })
|
|
219
220
|
},
|
|
220
221
|
val
|
|
221
222
|
);
|
|
@@ -239,7 +240,7 @@ function Calendar({
|
|
|
239
240
|
inRange: type === "range" && inRange(val),
|
|
240
241
|
disabled: isDisabled(val),
|
|
241
242
|
aux: { val, startDate, endDate, year, month },
|
|
242
|
-
children: /* @__PURE__ */ jsx(Text.
|
|
243
|
+
children: /* @__PURE__ */ jsx(Text.Body2, { bold: isEqual(val), children: val })
|
|
243
244
|
},
|
|
244
245
|
val
|
|
245
246
|
);
|
|
@@ -261,7 +262,7 @@ function Calendar({
|
|
|
261
262
|
onClick: () => val > 7 && onClick(val),
|
|
262
263
|
inRange: type === "range" && val > 7 && inRange(val),
|
|
263
264
|
aux: { val, startDate, endDate, year, month },
|
|
264
|
-
children: /* @__PURE__ */ jsx(Text.
|
|
265
|
+
children: /* @__PURE__ */ jsx(Text.Body2, { bold: isEqual(val), children: val })
|
|
265
266
|
},
|
|
266
267
|
val
|
|
267
268
|
);
|
|
@@ -312,7 +313,7 @@ function Calendar({
|
|
|
312
313
|
"data-testid": "previous-month-arrow"
|
|
313
314
|
}
|
|
314
315
|
),
|
|
315
|
-
/* @__PURE__ */ jsx(Text, { style: { alignSelf: "center" }, children: new Intl.DateTimeFormat("en-US", {
|
|
316
|
+
/* @__PURE__ */ jsx(Text.Body2, { style: { alignSelf: "center" }, bold: true, children: new Intl.DateTimeFormat("en-US", {
|
|
316
317
|
month: "long",
|
|
317
318
|
year: "numeric"
|
|
318
319
|
}).format(new Date(year, month, 1, 0, 0, 0)) }),
|
|
@@ -2,11 +2,17 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { fireEvent, render, screen } from "@testing-library/react";
|
|
4
4
|
import { format } from "date-fns";
|
|
5
|
-
import { ThemeProvider, Datepicker } from "../..";
|
|
5
|
+
import { ThemeProvider, Datepicker, v3theme } from "../..";
|
|
6
6
|
import { toUTC } from "./Datepicker";
|
|
7
7
|
describe("<Datepicker />", () => {
|
|
8
8
|
const testDate = new Date(2022, 7, 3, 14, 0, 0);
|
|
9
9
|
describe("Snapshots", () => {
|
|
10
|
+
it("should match snapshot when v3Theme is settled", () => {
|
|
11
|
+
const { container } = render(
|
|
12
|
+
/* @__PURE__ */ jsx(ThemeProvider, { theme: v3theme, children: /* @__PURE__ */ jsx(Datepicker, { type: "single" }) })
|
|
13
|
+
);
|
|
14
|
+
expect(container).toMatchSnapshot();
|
|
15
|
+
});
|
|
10
16
|
it("should match with single Datepicker", () => {
|
|
11
17
|
const { container } = render(
|
|
12
18
|
/* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Datepicker, { type: "single" }) })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.110.0",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"types": "./typings/index.d.ts",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-native": "0.72.3",
|
|
58
58
|
"styled-components": "^4.4.0"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "39f59f3f77306904124b0db21b748b14243ff194",
|
|
61
61
|
"module": "./esm",
|
|
62
62
|
"private": false,
|
|
63
63
|
"react-native": "./cjs/index.native.js"
|