@gympass/yoga 7.117.3 → 7.118.0

package/cjs/Feedback/web/Feedback.js

@@ -91,6 +91,7 @@ function Feedback(_a) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
+  let captionElement;
   let titleElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledFeedback.Title, { children: title });
   function defineCompoundComponents() {
     import_react.default.Children.forEach(children, (child) => {
@@ -100,6 +101,8 @@ function Feedback(_a) {
         secondaryButton = child;
       if (isChildFromComponent(child, import_StyledFeedback.Title))
         titleElement = child;
+      if (isChildFromComponent(child, import_StyledFeedback.Caption))
+        captionElement = child;
     });
   }
   defineCompoundComponents();
@@ -128,6 +131,7 @@ function Feedback(_a) {
           titleElement,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body1, { mt: "small", color: "deep", children: description })
         ] }),
+        captionElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { mt: "medium", children: captionElement }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_StyledFeedback.Actions, { mt: "xxxlarge", children: [
           primaryButton,
           secondaryButton

package/cjs/Feedback/web/Feedback.test.js

@@ -30,6 +30,7 @@ function renderWithTheme(ui) {
 }
 const title = "Welcome to Yoga";
 const description = "Enjoy your membership!";
+const caption = "Caption Description here.";
 describe("<Feedback />", () => {
   it("should render the title and description", () => {
     const { getByText } = renderWithTheme(
@@ -44,6 +45,12 @@ describe("<Feedback />", () => {
     );
     expect(getByRole("heading", { name: title })).toBeTruthy();
   });
+  it("should render caption children", () => {
+    const { getByText } = renderWithTheme(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback, { variant: "success", title, description, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.Caption, { children: caption }) })
+    );
+    expect(getByText(caption)).toBeTruthy();
+  });
   it("should render the buttons", () => {
     const { getByRole } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Feedback, { variant: "success", title, description, children: [
@@ -54,6 +61,18 @@ describe("<Feedback />", () => {
     expect(getByRole("button", { name: "Ok" })).toBeTruthy();
     expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
   });
+  it("should render title, description, buttons and caption", () => {
+    const { getByText, getByRole } = renderWithTheme(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Feedback, { variant: "success", description: "Enjoy your membership!", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.Caption, { children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.PrimaryButton, { children: "Ok" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Feedback.SecondaryButton, { children: "Cancel" })
+      ] })
+    );
+    expect(getByText(caption)).toBeTruthy();
+    expect(getByRole("button", { name: "Ok" })).toBeTruthy();
+    expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
+  });
   it("should render correctly when not centered vertically", () => {
     const { baseElement } = renderWithTheme(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/cjs/Feedback/web/StyledFeedback.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var StyledFeedback_exports = {};
 __export(StyledFeedback_exports, {
   Actions: () => Actions,
+  Caption: () => Caption,
   Content: () => Content,
   PrimaryButton: () => PrimaryButton,
   SecondaryButton: () => SecondaryButton,
@@ -120,12 +121,26 @@ const PrimaryButton = (0, import_styled_components.default)(import_Button.defaul
 const SecondaryButton = (0, import_styled_components.default)(import_Button.default.Text)`
   ${buttonsStyles}
 `;
+const Caption = (0, import_styled_components.default)(import_Text.default.Body1).attrs(() => ({
+  as: "p",
+  bold: true
+}))`
+  ${({
+  theme: {
+    yoga: { colors }
+  }
+}) => import_styled_components.css`
+      color: ${colors.text.secondary};
+    `}}
+`;
 Title.displayName = "Feedback.Title";
 PrimaryButton.displayName = "Feedback.PrimaryButton";
 SecondaryButton.displayName = "Feedback.SecondaryButton";
+Caption.displayName = "Feedback.Caption";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Actions,
+  Caption,
   Content,
   PrimaryButton,
   SecondaryButton,

package/cjs/Feedback/web/index.js

@@ -36,4 +36,5 @@ var import_StyledFeedback = require("./StyledFeedback");
 import_Feedback.default.Title = import_StyledFeedback.Title;
 import_Feedback.default.PrimaryButton = import_StyledFeedback.PrimaryButton;
 import_Feedback.default.SecondaryButton = import_StyledFeedback.SecondaryButton;
+import_Feedback.default.Caption = import_StyledFeedback.Caption;
 var web_default = import_Feedback.default;

package/esm/Feedback/web/Feedback.js

@@ -42,7 +42,8 @@ import {
   Title,
   PrimaryButton,
   SecondaryButton,
-  TextContainer
+  TextContainer,
+  Caption
 } from "./StyledFeedback";
 const ICON_SIZE = 64;
 const VARIANT_ICONS = {
@@ -67,6 +68,7 @@ function Feedback(_a) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
+  let captionElement;
   let titleElement = /* @__PURE__ */ jsx(Title, { children: title });
   function defineCompoundComponents() {
     React.Children.forEach(children, (child) => {
@@ -76,6 +78,8 @@ function Feedback(_a) {
         secondaryButton = child;
       if (isChildFromComponent(child, Title))
         titleElement = child;
+      if (isChildFromComponent(child, Caption))
+        captionElement = child;
     });
   }
   defineCompoundComponents();
@@ -104,6 +108,7 @@ function Feedback(_a) {
           titleElement,
           /* @__PURE__ */ jsx(Text.Body1, { mt: "small", color: "deep", children: description })
         ] }),
+        captionElement ? /* @__PURE__ */ jsx(Box, { mt: "medium", children: captionElement }) : null,
         /* @__PURE__ */ jsxs(Actions, { mt: "xxxlarge", children: [
           primaryButton,
           secondaryButton

package/esm/Feedback/web/Feedback.test.js

@@ -7,6 +7,7 @@ function renderWithTheme(ui) {
 }
 const title = "Welcome to Yoga";
 const description = "Enjoy your membership!";
+const caption = "Caption Description here.";
 describe("<Feedback />", () => {
   it("should render the title and description", () => {
     const { getByText } = renderWithTheme(
@@ -21,6 +22,12 @@ describe("<Feedback />", () => {
     );
     expect(getByRole("heading", { name: title })).toBeTruthy();
   });
+  it("should render caption children", () => {
+    const { getByText } = renderWithTheme(
+      /* @__PURE__ */ jsx(Feedback, { variant: "success", title, description, children: /* @__PURE__ */ jsx(Feedback.Caption, { children: caption }) })
+    );
+    expect(getByText(caption)).toBeTruthy();
+  });
   it("should render the buttons", () => {
     const { getByRole } = renderWithTheme(
       /* @__PURE__ */ jsxs(Feedback, { variant: "success", title, description, children: [
@@ -31,6 +38,18 @@ describe("<Feedback />", () => {
     expect(getByRole("button", { name: "Ok" })).toBeTruthy();
     expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
   });
+  it("should render title, description, buttons and caption", () => {
+    const { getByText, getByRole } = renderWithTheme(
+      /* @__PURE__ */ jsxs(Feedback, { variant: "success", description: "Enjoy your membership!", children: [
+        /* @__PURE__ */ jsx(Feedback.Caption, { children: caption }),
+        /* @__PURE__ */ jsx(Feedback.PrimaryButton, { children: "Ok" }),
+        /* @__PURE__ */ jsx(Feedback.SecondaryButton, { children: "Cancel" })
+      ] })
+    );
+    expect(getByText(caption)).toBeTruthy();
+    expect(getByRole("button", { name: "Ok" })).toBeTruthy();
+    expect(getByRole("button", { name: "Cancel" })).toBeTruthy();
+  });
   it("should render correctly when not centered vertically", () => {
     const { baseElement } = renderWithTheme(
       /* @__PURE__ */ jsx(

package/esm/Feedback/web/StyledFeedback.js

@@ -82,11 +82,25 @@ const PrimaryButton = styled(Button)`
 const SecondaryButton = styled(Button.Text)`
   ${buttonsStyles}
 `;
+const Caption = styled(Text.Body1).attrs(() => ({
+  as: "p",
+  bold: true
+}))`
+  ${({
+  theme: {
+    yoga: { colors }
+  }
+}) => css`
+      color: ${colors.text.secondary};
+    `}}
+`;
 Title.displayName = "Feedback.Title";
 PrimaryButton.displayName = "Feedback.PrimaryButton";
 SecondaryButton.displayName = "Feedback.SecondaryButton";
+Caption.displayName = "Feedback.Caption";
 export {
   Actions,
+  Caption,
   Content,
   PrimaryButton,
   SecondaryButton,

package/esm/Feedback/web/index.js

@@ -1,8 +1,14 @@
 import Feedback from "./Feedback";
-import { Title, PrimaryButton, SecondaryButton } from "./StyledFeedback";
+import {
+  Title,
+  PrimaryButton,
+  SecondaryButton,
+  Caption
+} from "./StyledFeedback";
 Feedback.Title = Title;
 Feedback.PrimaryButton = PrimaryButton;
 Feedback.SecondaryButton = SecondaryButton;
+Feedback.Caption = Caption;
 var web_default = Feedback;
 export {
   web_default as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.117.3",
+  "version": "7.118.0",
   "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": "61cbcba7b713f568b43052529cb76fe354a6d42f",
+  "gitHead": "a8f23e4f87e4e60758e10a35ca6afd27c177e60c",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"