@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Card/web/PlanCard/PlanCard.js

@@ -1,99 +1,214 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.PLAN_LINE_HEIGHT = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _Box = _interopRequireDefault(require("../../../Box"));
-
-var _Text = _interopRequireDefault(require("../../../Text"));
-
-var _excluded = ["children", "discount", "variant"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var PLAN_LINE_HEIGHT = 4;
-exports.PLAN_LINE_HEIGHT = PLAN_LINE_HEIGHT;
-var DISCOUNT_HEIGHT = 28;
-
-var Plan = _styledComponents["default"].article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 312px;\n\n  overflow: hidden;\n\n  ", "\n"])), function (props) {
-  var theme = props.theme.yoga;
-  var plan = theme.components.card.plan;
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", "px ", "px\n        ", "px ", "px;\n      border: ", "px solid ", ";\n      border-radius: ", "px;\n\n      background-color: ", ";\n    "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
-});
-
-var Border = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      hasRightMask = _ref.hasRightMask,
-      theme = _ref.theme;
-  var _theme$yoga = theme.yoga,
-      spacing = _theme$yoga.spacing,
-      colors = _theme$yoga.colors;
-  var color = colors[variant];
-  var MASK_SIZE = 112;
-  var baseMaskStyle = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      content: '';\n      background: radial-gradient(\n        50% 50% at 50% 50%,\n        ", " 0%,\n        transparent 100%\n      );\n      border-radius: 50%;\n    "])), MASK_SIZE, MASK_SIZE, colors.white);
-  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n\n      display: inline-block;\n      width: 100%;\n\n      height: ", "px;\n      background-color: ", ";\n\n      ::before {\n        ", "\n        left: ", "px;\n        top: -", "px;\n        opacity: 0.8;\n      }\n\n      ", "\n    "])), PLAN_LINE_HEIGHT, color, baseMaskStyle, spacing.large, MASK_SIZE - DISCOUNT_HEIGHT, hasRightMask && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ::after {\n          ", "\n          top: -", "px;\n          right: ", "px;\n          opacity: 0.5;\n        }\n      "])), baseMaskStyle, MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT, spacing.large));
-});
-
-var DiscountWrapper = (0, _styledComponents["default"])(_Box["default"]).attrs({
-  ph: 'xsmall',
-  pv: 'xxxsmall'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var bg = _ref2.bg,
-      theme = _ref2.theme;
-  var _theme$yoga2 = theme.yoga,
-      spacing = _theme$yoga2.spacing,
-      colors = _theme$yoga2.colors;
-  return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      min-height: ", "px;\n      border-bottom-left-radius: ", "px;\n\n      ::before {\n        content: '';\n        position: absolute;\n        left: -", "px;\n        height: ", "px;\n        width: ", "px;\n        top: ", "px;\n        background: transparent;\n        border-top-right-radius: ", "px;\n        box-shadow: ", " ", "px -1px;\n      }\n    "])), DISCOUNT_HEIGHT, spacing.small, DISCOUNT_HEIGHT, DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT, DISCOUNT_HEIGHT, PLAN_LINE_HEIGHT, spacing.small, colors[bg], spacing.xsmall);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PlanCard_exports = {};
+__export(PlanCard_exports, {
+  PLAN_LINE_HEIGHT: () => PLAN_LINE_HEIGHT,
+  default: () => PlanCard_default
 });
-
-function PlanCard(_ref3) {
-  var children = _ref3.children,
-      discount = _ref3.discount,
-      variant = _ref3.variant,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
-
-  var hasDiscount = !!discount;
-  return /*#__PURE__*/_react["default"].createElement(Plan, rest, hasDiscount && /*#__PURE__*/_react["default"].createElement(DiscountWrapper, {
-    bg: variant
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"].Tiny, {
-    color: "white",
-    fontWeight: "medium"
-  }, discount)), /*#__PURE__*/_react["default"].createElement(Border, {
-    variant: variant,
-    hasRightMask: hasDiscount
-  }), children);
+module.exports = __toCommonJS(PlanCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_Box = __toESM(require("../../../Box"));
+var import_Text = __toESM(require("../../../Text"));
+const PLAN_LINE_HEIGHT = 4;
+const DISCOUNT_HEIGHT = 28;
+const Plan = import_styled_components.default.article`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-width: 312px;
+
+  overflow: hidden;
+
+  ${(props) => {
+  const theme = props.theme.yoga;
+  const { plan } = theme.components.card;
+  return import_styled_components.css`
+      padding: ${plan.padding.top}px ${plan.padding.right}px
+        ${plan.padding.bottom}px ${plan.padding.left}px;
+      border: ${theme.borders.small}px solid ${theme.colors.light};
+      border-radius: ${plan.radius}px;
+
+      background-color: ${theme.colors.white};
+    `;
+}}
+`;
+const Border = import_styled_components.default.span`
+  ${({ variant, hasRightMask, theme }) => {
+  const { spacing, colors } = theme.yoga;
+  const color = colors[variant];
+  const MASK_SIZE = 112;
+  const baseMaskStyle = import_styled_components.css`
+      position: absolute;
+      height: ${MASK_SIZE}px;
+      width: ${MASK_SIZE}px;
+      content: '';
+      background: radial-gradient(
+        50% 50% at 50% 50%,
+        ${colors.white} 0%,
+        transparent 100%
+      );
+      border-radius: 50%;
+    `;
+  return import_styled_components.css`
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: inline-block;
+      width: 100%;
+
+      height: ${PLAN_LINE_HEIGHT}px;
+      background-color: ${color};
+
+      ::before {
+        ${baseMaskStyle}
+        left: ${spacing.large}px;
+        top: -${MASK_SIZE - DISCOUNT_HEIGHT}px;
+        opacity: 0.8;
+      }
+
+      ${hasRightMask && import_styled_components.css`
+        ::after {
+          ${baseMaskStyle}
+          top: -${MASK_SIZE - DISCOUNT_HEIGHT + PLAN_LINE_HEIGHT}px;
+          right: ${spacing.large}px;
+          opacity: 0.5;
+        }
+      `}
+    `;
+}}
+`;
+const DiscountWrapper = (0, import_styled_components.default)(import_Box.default).attrs({
+  ph: "xsmall",
+  pv: "xxxsmall"
+})`
+  ${({ bg, theme }) => {
+  const { spacing, colors } = theme.yoga;
+  return import_styled_components.css`
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      min-height: ${DISCOUNT_HEIGHT}px;
+      border-bottom-left-radius: ${spacing.small}px;
+
+      ::before {
+        content: '';
+        position: absolute;
+        left: -${DISCOUNT_HEIGHT}px;
+        height: ${DISCOUNT_HEIGHT / 2 - PLAN_LINE_HEIGHT}px;
+        width: ${DISCOUNT_HEIGHT}px;
+        top: ${PLAN_LINE_HEIGHT}px;
+        background: transparent;
+        border-top-right-radius: ${spacing.small}px;
+        box-shadow: ${colors[bg]} ${spacing.xsmall}px -1px;
+      }
+    `;
+}}
+`;
+function PlanCard(_a) {
+  var _b = _a, { children, discount, variant } = _b, rest = __objRest(_b, ["children", "discount", "variant"]);
+  const hasDiscount = !!discount;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Plan, __spreadProps(__spreadValues({}, rest), { children: [
+    hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiscountWrapper, { bg: variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Tiny, { color: "white", fontWeight: "medium", children: discount }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Border, { variant, hasRightMask: hasDiscount }),
+    children
+  ] }));
 }
-
 PlanCard.propTypes = {
-  children: _propTypes.node,
-  discount: _propTypes.string,
-
+  children: import_prop_types.node,
+  discount: import_prop_types.string,
   /** style the card border top color following the theme (primary, secondary,
    * vibin, hope, energy, relax, peace, verve, uplift, deepPurple, deep,
    * stamina, dark, medium, light, clear, white) */
-  variant: (0, _propTypes.oneOf)(['primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+  variant: (0, import_prop_types.oneOf)([
+    "primary",
+    "secondary",
+    "vibin",
+    "hope",
+    "energy",
+    "relax",
+    "peace",
+    "verve",
+    "uplift",
+    "deepPurple",
+    "stamina",
+    "dark",
+    "medium",
+    "deep",
+    "light",
+    "clear",
+    "white"
+  ])
 };
 PlanCard.defaultProps = {
-  children: undefined,
-  discount: undefined,
-  variant: 'deepPurple'
+  children: void 0,
+  discount: void 0,
+  variant: "deepPurple"
 };
-PlanCard.displayName = 'PlanCard';
-var _default = PlanCard;
-exports["default"] = _default;
+PlanCard.displayName = "PlanCard";
+var PlanCard_default = PlanCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PLAN_LINE_HEIGHT
+});

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

@@ -0,0 +1,177 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("@testing-library/react");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import__ = require("../../..");
+var import__2 = __toESM(require("."));
+describe("<PlanCard />", () => {
+  const buttonOnClickMock = jest.fn();
+  const renderPlan = ({ clickableItems } = {}) => (0, import_react2.render)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Tag, { variant: "informative", children: "Recommended Plan" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import__2.default.Content,
+        {
+          subtitle: "plan",
+          title: "Basic",
+          currency: "$",
+          price: "99.90",
+          period: "/month",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Subtitle, { children: "Get access to" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__2.default.List, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import__2.default.ListItem,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import__.Icon,
+                    {
+                      as: import_yoga_icons.MapPin,
+                      height: "small",
+                      width: "small",
+                      stroke: "medium"
+                    }
+                  ),
+                  text: "gyms and studios",
+                  onClick: clickableItems && jest.fn()
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import__2.default.ListItem,
+                {
+                  icon: import_yoga_icons.Star,
+                  text: "list item",
+                  buttonProps: {
+                    children: "button",
+                    as: "a",
+                    onClick: buttonOnClickMock
+                  },
+                  onClick: clickableItems && jest.fn()
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Actions, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Button, { full: true, children: "Select this plan" }) })
+    ] }) })
+  );
+  describe("Events", () => {
+    it("should call onClick when ListItem has a button", () => {
+      const { getByText } = renderPlan();
+      import_react2.fireEvent.click(getByText("button"));
+      expect(buttonOnClickMock).toHaveBeenCalled();
+    });
+    it("should make list item clickable", () => {
+      const itemClickMock = jest.fn();
+      const { getByRole } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { variant: "energy", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { title: "Basic", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.List, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__2.default.ListItem,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import__.Icon,
+              {
+                as: import_yoga_icons.MapPin,
+                height: "small",
+                width: "small",
+                stroke: "medium"
+              }
+            ),
+            text: "gyms and studios",
+            onClick: itemClickMock
+          }
+        ) }) }) }) })
+      );
+      import_react2.fireEvent.click(getByRole("button", { label: "gyms and studios" }));
+      expect(itemClickMock).toHaveBeenCalled();
+    });
+  });
+  describe("Snapshots", () => {
+    it("should match snapshot with default PlanCard", () => {
+      const { container: planCard } = renderPlan();
+      expect(planCard).toMatchSnapshot();
+    });
+    it("should match snapshot with variant", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { variant: "hope", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__2.default.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match snapshot with suffix", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { variant: "hope", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__2.default.Content,
+          {
+            subtitle: "plan",
+            title: "Basic",
+            currency: "$",
+            suffix: "MXN",
+            price: "99.90",
+            period: "/month"
+          }
+        ) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should render the extra content", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { title: "Basic", extra: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Hello" }) }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should render the title without a colored badge", () => {
+      const { getByText } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { title: "Basic" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
+    });
+    it("should render the title with a colored badge", () => {
+      const { getByText } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { title: "Basic", badgeColor: "energy" }) }) })
+      );
+      expect(getByText("Basic")).toMatchSnapshot();
+    });
+    it("should render the discount", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default, { discount: "SAVE 40%", variant: "energy", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__2.default.Content, { title: "Basic" }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should render list item content as button", () => {
+      const { container } = renderPlan({ clickableItems: true });
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

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

@@ -1,30 +1,55 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
-
-var _Text = _interopRequireDefault(require("../../../Text"));
-
-var _templateObject, _templateObject2;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Subtitle = (0, _styledComponents["default"])(_Text["default"].Tiny)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
-  var _theme = (0, _themeReader["default"])(props),
-      plan = _theme.components.card.plan;
-
-  return (0, _styledComponents.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);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Subtitle_exports = {};
+__export(Subtitle_exports, {
+  default: () => Subtitle_default
 });
-Subtitle.displayName = 'PlanCard.Subtitle';
-var _default = Subtitle;
-exports["default"] = _default;
+module.exports = __toCommonJS(Subtitle_exports);
+var import_styled_components = __toESM(require("styled-components"));
+var import_themeReader = __toESM(require("../../../Theme/helpers/themeReader"));
+var import_Text = __toESM(require("../../../Text"));
+const Subtitle = (0, import_styled_components.default)(import_Text.default.Tiny)`
+  text-transform: uppercase;
+
+  ${(props) => {
+  const {
+    components: {
+      card: { plan }
+    }
+  } = (0, import_themeReader.default)(props);
+  return import_styled_components.css`
+      margin-bottom: ${plan.subtitle.margin.bottom}px;
+
+      color: ${plan.subtitle.font.color};
+      font-weight: ${plan.subtitle.font.weight};
+    `;
+}}
+`;
+Subtitle.displayName = "PlanCard.Subtitle";
+var Subtitle_default = Subtitle;