@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.
@@ -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.SectionTitle)`
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.Small, { children: val })
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.Small, { children: val })
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.Small, { children: val })
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,
@@ -4,7 +4,8 @@ import Text from "../../Text";
4
4
  import Box from "../../Box";
5
5
  import Button from "../../Button";
6
6
  const Title = styled(Text.H4).attrs({
7
- as: "p"
7
+ as: "p",
8
+ bold: true
8
9
  })`
9
10
  ${({
10
11
  theme: {
@@ -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.SectionTitle)`
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.Small, { children: val })
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.Small, { children: val })
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.Small, { children: val })
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.108.5",
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": "28f54c98eae07e1b15f6cd6b670fe2dee2fe7cc1",
60
+ "gitHead": "39f59f3f77306904124b0db21b748b14243ff194",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"