@gympass/yoga 7.100.1 → 7.101.1

package/cjs/ActionRequirement/native/ActionRequirement.js

@@ -58,10 +58,18 @@ var import_ActionRequirementStyles = require("./ActionRequirementStyles");
 var import_Text = __toESM(require("../../Text"));
 const StyledActionRequirement = import_native.default.View``;
 function ActionRequirement(props) {
-  const { title, description, children, checkable, illustration, list } = props;
+  const {
+    title,
+    description,
+    children,
+    checkable,
+    illustration,
+    list,
+    titleAsTextDisplay
+  } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { children: illustration }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
+    titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "small", color: "deep", children: description }),
     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 }) }),
     checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxxlarge", children: checkable }),
@@ -69,17 +77,19 @@ function ActionRequirement(props) {
   ] }));
 }
 ActionRequirement.propTypes = {
-  title: import_prop_types.string.isRequired,
+  title: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]).isRequired,
   children: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   description: import_prop_types.string.isRequired,
   checkable: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   illustration: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
-  list: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node])
+  list: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
+  titleAsTextDisplay: import_prop_types.bool
 };
 ActionRequirement.defaultProps = {
   children: void 0,
   checkable: void 0,
   illustration: void 0,
-  list: void 0
+  list: void 0,
+  titleAsTextDisplay: false
 };
 var ActionRequirement_default = ActionRequirement;

package/cjs/ActionRequirement/native/ActionRequirement.test.js

@@ -69,4 +69,17 @@ describe("<ActionRequirement />", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+  it("should match snapshot with text display", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ActionRequirement.default,
+        {
+          title: "Welcome to the world of feeling good!",
+          description: "Lets make it a good day!",
+          titleAsTextDisplay: true
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/cjs/ActionRequirement/web/ActionRequirement.js

@@ -91,7 +91,15 @@ function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
 }
 function ActionRequirement(props) {
-  const { title, description, children, checkable, illustration, list } = props;
+  const {
+    title,
+    description,
+    children,
+    checkable,
+    illustration,
+    list,
+    titleAsTextDisplay
+  } = props;
   let primaryButton;
   let secondaryButton;
   function defineCompoundComponents() {
@@ -106,7 +114,7 @@ function ActionRequirement(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxIllustration, { children: illustration }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
+      titleAsTextDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Display2, { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionRequirementStyles.Title, { children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default, { mt: "small", color: "deep", children: description }),
       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 }) }),
       checkable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "xxlarge", children: checkable }),
@@ -118,17 +126,19 @@ function ActionRequirement(props) {
   ] }));
 }
 ActionRequirement.propTypes = {
-  title: import_prop_types.string.isRequired,
+  title: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]).isRequired,
   children: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   description: import_prop_types.string.isRequired,
   checkable: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   illustration: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
-  list: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node])
+  list: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
+  titleAsTextDisplay: import_prop_types.bool
 };
 ActionRequirement.defaultProps = {
   children: void 0,
   checkable: void 0,
   illustration: void 0,
-  list: void 0
+  list: void 0,
+  titleAsTextDisplay: false
 };
 var ActionRequirement_default = ActionRequirement;

package/cjs/ActionRequirement/web/ActionRequirement.test.js

@@ -63,4 +63,17 @@ describe("<ActionRequirement />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should match snapshot with text display", () => {
+    const { container } = (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ActionRequirement.default,
+        {
+          title: "title",
+          description: "description",
+          titleAsTextDisplay: true
+        }
+      ) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/cjs/Heading/web/Heading.js

@@ -99,10 +99,12 @@ Heading.propTypes = {
     import_prop_types.default.arrayOf(import_prop_types.default.node),
     import_prop_types.default.node
   ]),
-  noPadding: import_prop_types.bool
+  noPadding: import_prop_types.bool,
+  bg: import_prop_types.default.string
 };
 Heading.defaultProps = {
   children: void 0,
-  noPadding: false
+  noPadding: false,
+  bg: void 0
 };
 var Heading_default = Heading;

package/cjs/Heading/web/Heading.test.js

@@ -73,4 +73,10 @@ describe("<Heading />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should override the background color", () => {
+    const { container } = (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Heading, { bg: "yoga", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Title.default, { children: "Gympass" }) }) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/cjs/Heading/web/StyledHeading.js

@@ -33,6 +33,7 @@ __export(StyledHeading_exports, {
 });
 module.exports = __toCommonJS(StyledHeading_exports);
 var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_system = require("@gympass/yoga-system");
 const StyledHeading = import_styled_components.default.header`
   ${({
   noPadding,
@@ -43,7 +44,8 @@ const StyledHeading = import_styled_components.default.header`
   }
 }) => {
   return import_styled_components.css`
-      background: ${heading.background};
+      background-color: ${heading.background};
+      ${import_yoga_system.backgroundColor}
       padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
       min-height: ${heading.height}px;
       width: 100%;

package/esm/ActionRequirement/native/ActionRequirement.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { arrayOf, node, oneOfType, string } from "prop-types";
+import { arrayOf, bool, node, oneOfType, string } from "prop-types";
 import styled from "styled-components/native";
 import { View } from "react-native";
 import Box from "../../Box";
@@ -27,10 +27,18 @@ import { Title } from "./ActionRequirementStyles";
 import Text from "../../Text";
 const StyledActionRequirement = styled.View``;
 function ActionRequirement(props) {
-  const { title, description, children, checkable, illustration, list } = props;
+  const {
+    title,
+    description,
+    children,
+    checkable,
+    illustration,
+    list,
+    titleAsTextDisplay
+  } = props;
   return /* @__PURE__ */ jsxs(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ jsx(Box, { children: illustration }),
-    /* @__PURE__ */ jsx(Title, { children: title }),
+    titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { children: title }) : /* @__PURE__ */ jsx(Title, { children: title }),
     /* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: description }),
     list && /* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: /* @__PURE__ */ jsx(Box, { mt: "xxxlarge", children: list }) }),
     checkable && /* @__PURE__ */ jsx(Box, { mt: "xxxlarge", children: checkable }),
@@ -38,18 +46,20 @@ function ActionRequirement(props) {
   ] }));
 }
 ActionRequirement.propTypes = {
-  title: string.isRequired,
+  title: oneOfType([arrayOf(node), node]).isRequired,
   children: oneOfType([arrayOf(node), node]),
   description: string.isRequired,
   checkable: oneOfType([arrayOf(node), node]),
   illustration: oneOfType([arrayOf(node), node]),
-  list: oneOfType([arrayOf(node), node])
+  list: oneOfType([arrayOf(node), node]),
+  titleAsTextDisplay: bool
 };
 ActionRequirement.defaultProps = {
   children: void 0,
   checkable: void 0,
   illustration: void 0,
-  list: void 0
+  list: void 0,
+  titleAsTextDisplay: false
 };
 var ActionRequirement_default = ActionRequirement;
 export {

package/esm/ActionRequirement/native/ActionRequirement.test.js

@@ -46,4 +46,17 @@ describe("<ActionRequirement />", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+  it("should match snapshot with text display", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        ActionRequirement,
+        {
+          title: "Welcome to the world of feeling good!",
+          description: "Lets make it a good day!",
+          titleAsTextDisplay: true
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/esm/ActionRequirement/web/ActionRequirement.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { arrayOf, node, oneOfType, string } from "prop-types";
+import { arrayOf, bool, node, oneOfType, string } from "prop-types";
 import styled from "styled-components";
 import { media } from "@gympass/yoga-helpers";
 import {
@@ -65,7 +65,15 @@ function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
 }
 function ActionRequirement(props) {
-  const { title, description, children, checkable, illustration, list } = props;
+  const {
+    title,
+    description,
+    children,
+    checkable,
+    illustration,
+    list,
+    titleAsTextDisplay
+  } = props;
   let primaryButton;
   let secondaryButton;
   function defineCompoundComponents() {
@@ -80,7 +88,7 @@ function ActionRequirement(props) {
   return /* @__PURE__ */ jsxs(StyledActionRequirement, __spreadProps(__spreadValues({}, props), { children: [
     illustration && /* @__PURE__ */ jsx(BoxIllustration, { children: illustration }),
     /* @__PURE__ */ jsxs(Content, { children: [
-      /* @__PURE__ */ jsx(Title, { children: title }),
+      titleAsTextDisplay ? /* @__PURE__ */ jsx(Text.Display2, { children: title }) : /* @__PURE__ */ jsx(Title, { children: title }),
       /* @__PURE__ */ jsx(Text, { mt: "small", color: "deep", children: description }),
       list && /* @__PURE__ */ jsx(Text, { mt: "large", color: "deep", children: /* @__PURE__ */ jsx(Box, { children: list }) }),
       checkable && /* @__PURE__ */ jsx(Box, { mt: "xxlarge", children: checkable }),
@@ -92,18 +100,20 @@ function ActionRequirement(props) {
   ] }));
 }
 ActionRequirement.propTypes = {
-  title: string.isRequired,
+  title: oneOfType([arrayOf(node), node]).isRequired,
   children: oneOfType([arrayOf(node), node]),
   description: string.isRequired,
   checkable: oneOfType([arrayOf(node), node]),
   illustration: oneOfType([arrayOf(node), node]),
-  list: oneOfType([arrayOf(node), node])
+  list: oneOfType([arrayOf(node), node]),
+  titleAsTextDisplay: bool
 };
 ActionRequirement.defaultProps = {
   children: void 0,
   checkable: void 0,
   illustration: void 0,
-  list: void 0
+  list: void 0,
+  titleAsTextDisplay: false
 };
 var ActionRequirement_default = ActionRequirement;
 export {

package/esm/ActionRequirement/web/ActionRequirement.test.js

@@ -40,4 +40,17 @@ describe("<ActionRequirement />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should match snapshot with text display", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        ActionRequirement,
+        {
+          title: "title",
+          description: "description",
+          titleAsTextDisplay: true
+        }
+      ) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Heading/web/Heading.js

@@ -68,11 +68,13 @@ Heading.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
   ]),
-  noPadding: bool
+  noPadding: bool,
+  bg: PropTypes.string
 };
 Heading.defaultProps = {
   children: void 0,
-  noPadding: false
+  noPadding: false,
+  bg: void 0
 };
 var Heading_default = Heading;
 export {

package/esm/Heading/web/Heading.test.js

@@ -50,4 +50,10 @@ describe("<Heading />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should override the background color", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Heading, { bg: "yoga", children: /* @__PURE__ */ jsx(Title, { children: "Gympass" }) }) })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Heading/web/StyledHeading.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { backgroundColor } from "@gympass/yoga-system";
 const StyledHeading = styled.header`
   ${({
   noPadding,
@@ -9,7 +10,8 @@ const StyledHeading = styled.header`
   }
 }) => {
   return css`
-      background: ${heading.background};
+      background-color: ${heading.background};
+      ${backgroundColor}
       padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
       min-height: ${heading.height}px;
       width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.100.1",
+  "version": "7.101.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "9b2d163cc6d1c9d7ca5ef9a69921f5efd5c333a3",
+  "gitHead": "5159e1f854cc88ca673fd34f3966526dc1a5d8b7",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/index.d.ts

@@ -375,11 +375,14 @@ declare namespace Heading {
     namespace propTypes {
         export const children: prop_types__default.Requireable<string | number | boolean | prop_types__default.ReactElementLike | prop_types__default.ReactNodeArray>;
         export { bool as noPadding };
+        export const bg: prop_types__default.Requireable<string>;
     }
     namespace defaultProps {
         const children_1: undefined;
         export { children_1 as children };
         export const noPadding: boolean;
+        const bg_1: undefined;
+        export { bg_1 as bg };
     }
 }
 
@@ -488,12 +491,13 @@ declare namespace Skeleton {
 declare function ActionRequirement(props: any): JSX.Element;
 declare namespace ActionRequirement {
     namespace propTypes {
-        const title: prop_types.Validator<string>;
-        const children: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
-        const description: prop_types.Validator<string>;
-        const checkable: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
-        const illustration: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
-        const list: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export const title: prop_types.Validator<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export const children: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export const description: prop_types.Validator<string>;
+        export const checkable: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export const illustration: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export const list: prop_types.Requireable<string | number | boolean | prop_types.ReactElementLike | prop_types.ReactNodeArray>;
+        export { bool as titleAsTextDisplay };
     }
     namespace defaultProps {
         const children_1: undefined;
@@ -504,6 +508,7 @@ declare namespace ActionRequirement {
         export { illustration_1 as illustration };
         const list_1: undefined;
         export { list_1 as list };
+        export const titleAsTextDisplay: boolean;
     }
 }