@gympass/yoga 7.87.1 → 7.88.0

package/esm/Card/web/PlanCard/PlanCard.test.js

@@ -1,159 +1,154 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Star, MapPin } from '@gympass/yoga-icons';
-import { ThemeProvider, Button, Icon } from '../../..';
-import PlanCard from '.';
-describe('<PlanCard />', function () {
-  var buttonOnClickMock = jest.fn();
-
-  var renderPlan = function renderPlan(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        clickableItems = _ref.clickableItems;
-
-    return render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Tag, {
-      variant: "informative"
-    }, "Recommended Plan"), /*#__PURE__*/React.createElement(PlanCard.Content, {
-      subtitle: "plan",
-      title: "Basic",
-      currency: "$",
-      price: "99.90",
-      period: "/month"
-    }, /*#__PURE__*/React.createElement(PlanCard.Subtitle, null, "Get access to"), /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        as: MapPin,
-        height: "small",
-        width: "small",
-        stroke: "medium"
-      }),
-      text: "gyms and studios",
-      onClick: clickableItems && jest.fn()
-    }), /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-      icon: Star,
-      text: "list item",
-      buttonProps: {
-        children: 'button',
-        as: 'a',
-        onClick: buttonOnClickMock
-      },
-      onClick: clickableItems && jest.fn()
-    }))), /*#__PURE__*/React.createElement(PlanCard.Actions, null, /*#__PURE__*/React.createElement(Button, {
-      full: true
-    }, "Select this plan")))));
-  };
-
-  describe('Events', function () {
-    it('should call onClick when ListItem has a button', function () {
-      var _renderPlan = renderPlan(),
-          getByText = _renderPlan.getByText;
-
-      fireEvent.click(getByText('button'));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { Star, MapPin } from "@gympass/yoga-icons";
+import { ThemeProvider, Button, Icon } from "../../..";
+import PlanCard from ".";
+describe("<PlanCard />", () => {
+  const buttonOnClickMock = jest.fn();
+  const renderPlan = ({ clickableItems } = {}) => render(
+    /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(PlanCard, { children: [
+      /* @__PURE__ */ jsx(PlanCard.Tag, { variant: "informative", children: "Recommended Plan" }),
+      /* @__PURE__ */ jsxs(
+        PlanCard.Content,
+        {
+          subtitle: "plan",
+          title: "Basic",
+          currency: "$",
+          price: "99.90",
+          period: "/month",
+          children: [
+            /* @__PURE__ */ jsx(PlanCard.Subtitle, { children: "Get access to" }),
+            /* @__PURE__ */ jsxs(PlanCard.List, { children: [
+              /* @__PURE__ */ jsx(
+                PlanCard.ListItem,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      as: MapPin,
+                      height: "small",
+                      width: "small",
+                      stroke: "medium"
+                    }
+                  ),
+                  text: "gyms and studios",
+                  onClick: clickableItems && jest.fn()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PlanCard.ListItem,
+                {
+                  icon: Star,
+                  text: "list item",
+                  buttonProps: {
+                    children: "button",
+                    as: "a",
+                    onClick: buttonOnClickMock
+                  },
+                  onClick: clickableItems && jest.fn()
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(PlanCard.Actions, { children: /* @__PURE__ */ jsx(Button, { full: true, children: "Select this plan" }) })
+    ] }) })
+  );
+  describe("Events", () => {
+    it("should call onClick when ListItem has a button", () => {
+      const { getByText } = renderPlan();
+      fireEvent.click(getByText("button"));
       expect(buttonOnClickMock).toHaveBeenCalled();
     });
-    it('should make list item clickable', function () {
-      var itemClickMock = jest.fn();
-
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "energy"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      }, /*#__PURE__*/React.createElement(PlanCard.List, null, /*#__PURE__*/React.createElement(PlanCard.ListItem, {
-        icon: /*#__PURE__*/React.createElement(Icon, {
-          as: MapPin,
-          height: "small",
-          width: "small",
-          stroke: "medium"
-        }),
-        text: "gyms and studios",
-        onClick: itemClickMock
-      })))))),
-          getByRole = _render.getByRole;
-
-      fireEvent.click(getByRole('button', {
-        label: 'gyms and studios'
-      }));
+    it("should make list item clickable", () => {
+      const itemClickMock = jest.fn();
+      const { getByRole } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", children: /* @__PURE__ */ jsx(PlanCard.List, { children: /* @__PURE__ */ jsx(
+          PlanCard.ListItem,
+          {
+            icon: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                as: MapPin,
+                height: "small",
+                width: "small",
+                stroke: "medium"
+              }
+            ),
+            text: "gyms and studios",
+            onClick: itemClickMock
+          }
+        ) }) }) }) })
+      );
+      fireEvent.click(getByRole("button", { label: "gyms and studios" }));
       expect(itemClickMock).toHaveBeenCalled();
     });
   });
-  describe('Snapshots', function () {
-    it('should match snapshot with default PlanCard', function () {
-      var _renderPlan2 = renderPlan(),
-          planCard = _renderPlan2.container;
-
+  describe("Snapshots", () => {
+    it("should match snapshot with default PlanCard", () => {
+      const { container: planCard } = renderPlan();
       expect(planCard).toMatchSnapshot();
     });
-    it('should match snapshot with variant', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "hope"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        subtitle: "plan",
-        title: "Basic",
-        currency: "$",
-        price: "99.90",
-        period: "/month"
-      })))),
-          container = _render2.container;
-
+    it("should match snapshot with variant", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
+          PlanCard.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match snapshot with suffix', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        variant: "hope"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        subtitle: "plan",
-        title: "Basic",
-        currency: "$",
-        suffix: "MXN",
-        price: "99.90",
-        period: "/month"
-      })))),
-          container = _render3.container;
-
+    it("should match snapshot with suffix", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { variant: "hope", children: /* @__PURE__ */ jsx(
+          PlanCard.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            suffix: "MXN",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should render the extra content', function () {
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic",
-        extra: /*#__PURE__*/React.createElement("p", null, "Hello")
-      })))),
-          container = _render4.container;
-
+    it("should render the extra content", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", extra: /* @__PURE__ */ jsx("p", { children: "Hello" }) }) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should render the title without a colored badge', function () {
-      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      })))),
-          getByText = _render5.getByText;
-
-      expect(getByText('Basic')).toMatchSnapshot();
+    it("should render the title without a colored badge", () => {
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
     });
-    it('should render the title with a colored badge', function () {
-      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, null, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic",
-        badgeColor: "energy"
-      })))),
-          getByText = _render6.getByText;
-
-      expect(getByText('Basic')).toMatchSnapshot();
+    it("should render the title with a colored badge", () => {
+      const { getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic", badgeColor: "energy" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
     });
-    it('should render the discount', function () {
-      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(PlanCard, {
-        discount: "SAVE 40%",
-        variant: "energy"
-      }, /*#__PURE__*/React.createElement(PlanCard.Content, {
-        title: "Basic"
-      })))),
-          container = _render7.container;
-
+    it("should render the discount", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(PlanCard, { discount: "SAVE 40%", variant: "energy", children: /* @__PURE__ */ jsx(PlanCard.Content, { title: "Basic" }) }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should render list item content as button', function () {
-      var _renderPlan3 = renderPlan({
-        clickableItems: true
-      }),
-          container = _renderPlan3.container;
-
+    it("should render list item content as button", () => {
+      const { container } = renderPlan({ clickableItems: true });
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

package/esm/Card/web/PlanCard/Subtitle.js

@@ -1,15 +1,25 @@
-var _templateObject, _templateObject2;
+import styled, { css } from "styled-components";
+import theme from "../../../Theme/helpers/themeReader";
+import Text from "../../../Text";
+const Subtitle = styled(Text.Tiny)`
+  text-transform: uppercase;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  ${(props) => {
+  const {
+    components: {
+      card: { plan }
+    }
+  } = theme(props);
+  return css`
+      margin-bottom: ${plan.subtitle.margin.bottom}px;
 
-import styled, { css } from 'styled-components';
-import theme from '../../../Theme/helpers/themeReader';
-import Text from '../../../Text';
-var Subtitle = styled(Text.Tiny)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
-  var _theme = theme(props),
-      plan = _theme.components.card.plan;
-
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", "px;\n\n      color: ", ";\n      font-weight: ", ";\n    "])), plan.subtitle.margin.bottom, plan.subtitle.font.color, plan.subtitle.font.weight);
-});
-Subtitle.displayName = 'PlanCard.Subtitle';
-export default Subtitle;
+      color: ${plan.subtitle.font.color};
+      font-weight: ${plan.subtitle.font.weight};
+    `;
+}}
+`;
+Subtitle.displayName = "PlanCard.Subtitle";
+var Subtitle_default = Subtitle;
+export {
+  Subtitle_default as default
+};

package/esm/Card/web/PlanCard/Tag.js

@@ -1,17 +1,22 @@
-var _templateObject, _templateObject2;
+import styled, { css } from "styled-components";
+import { PLAN_LINE_HEIGHT } from "./PlanCard";
+import Tag from "../../../Tag";
+const StyledTag = styled(Tag.Informative).attrs(() => ({ small: true }))`
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled, { css } from 'styled-components';
-import { PLAN_LINE_HEIGHT } from './PlanCard';
-import Tag from '../../../Tag';
-var StyledTag = styled(Tag.Informative).attrs(function () {
-  return {
-    small: true
-  };
-})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (props) {
-  var plan = props.theme.yoga.components.card.plan;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      top: ", "px;\n      left: ", "px;\n    "])), plan.tag.position.top + PLAN_LINE_HEIGHT, plan.tag.position.left);
-});
-StyledTag.displayName = 'PlanCard.Tag';
-export default StyledTag;
+  ${(props) => {
+  const { plan } = props.theme.yoga.components.card;
+  return css`
+      top: ${plan.tag.position.top + PLAN_LINE_HEIGHT}px;
+      left: ${plan.tag.position.left}px;
+    `;
+}}
+`;
+StyledTag.displayName = "PlanCard.Tag";
+var Tag_default = StyledTag;
+export {
+  Tag_default as default
+};

package/esm/Card/web/PlanCard/index.js

@@ -1,9 +1,9 @@
-import { Actions, Button, ButtonText } from './Actions';
-import Content from './Content';
-import PlanCard from './PlanCard';
-import Subtitle from './Subtitle';
-import Tag from './Tag';
-import { List, ListItem } from './List';
+import { Actions, Button, ButtonText } from "./Actions";
+import Content from "./Content";
+import PlanCard from "./PlanCard";
+import Subtitle from "./Subtitle";
+import Tag from "./Tag";
+import { List, ListItem } from "./List";
 PlanCard.Actions = Actions;
 PlanCard.Button = Button;
 PlanCard.ButtonText = ButtonText;
@@ -12,4 +12,7 @@ PlanCard.List = List;
 PlanCard.ListItem = ListItem;
 PlanCard.Subtitle = Subtitle;
 PlanCard.Tag = Tag;
-export default PlanCard;
+var PlanCard_default = PlanCard;
+export {
+  PlanCard_default as default
+};

package/esm/Card/web/index.js

@@ -1,4 +1,8 @@
-import Card from './Card';
-import PlanCard from './PlanCard';
-import EventCard from './EventCard';
-export { Card, PlanCard, EventCard };
+import Card from "./Card";
+import PlanCard from "./PlanCard";
+import EventCard from "./EventCard";
+export {
+  Card,
+  EventCard,
+  PlanCard
+};