@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Banner/native/Banner.js

@@ -1 +1,181 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _yogaSystem=require("@gympass/yoga-system");var _propTypes=require("prop-types");var _Box=_interopRequireDefault(require("../../Box"));var _Button=_interopRequireDefault(require("../../Button"));var _Icon=_interopRequireDefault(require("../../Icon"));var _Text=_interopRequireDefault(require("../../Text"));var _excluded=["button"],_excluded2=["icon","variant","message","primaryButton","secondaryButton"];var _templateObject;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;}var StyledBanner=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  ","\n\n  ","\n  \n  ","\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,banner=_ref$theme$yoga.components.banner,spacing=_ref$theme$yoga.spacing,_ref$theme$yoga$color=_ref$theme$yoga.colors.feedback[variant],backgroundColor=_ref$theme$yoga$color===void 0?{light:banner.defaultBackgroundColor}:_ref$theme$yoga$color;return"\n    background-color: "+backgroundColor.light+";\n    padding: "+spacing.xxsmall+"px\n      "+spacing.small+"px;\n    border-radius: "+banner.border.radius+"px;\n  ";},_yogaSystem.margins,_yogaSystem.borders);var BannerActionButton=_react["default"].forwardRef(function(_ref2,ref){var _ref2$button=_ref2.button,label=_ref2$button.label,action=_ref2$button.action,props=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(_Box["default"],(0,_extends2["default"])({as:_Button["default"].Text,small:true,secondary:true,onPress:action,ref:ref},props),label);});BannerActionButton.propTypes={button:(0,_propTypes.shape)({label:_propTypes.string.isRequired,action:_propTypes.func.isRequired}).isRequired};var Banner=(0,_react.forwardRef)(function(props,ref){var icon=props.icon,variant=props.variant,message=props.message,primaryButton=props.primaryButton,secondaryButton=props.secondaryButton,rest=(0,_objectWithoutProperties2["default"])(props,_excluded2);return _react["default"].createElement(StyledBanner,(0,_extends2["default"])({ref:ref,variant:variant},rest),_react["default"].createElement(_Box["default"],{flexDirection:"row",flex:1,alignItems:"center"},icon&&_react["default"].createElement(_Icon["default"],{as:icon,size:"medium",fill:"secondary",marginRight:"xxsmall"}),_react["default"].createElement(_Text["default"].Small,{flex:1,marginTop:"xxsmall",marginBottom:"xxsmall"},message),primaryButton&&!secondaryButton&&_react["default"].createElement(BannerActionButton,{button:primaryButton,marginLeft:"xxsmall"})),primaryButton&&secondaryButton&&_react["default"].createElement(_Box["default"],{display:"flex",flex:1,justifyContent:"flex-end",flexDirection:"row",marginBottom:"xxsmall"},_react["default"].createElement(BannerActionButton,{button:primaryButton,marginRight:"xxxsmall"}),_react["default"].createElement(BannerActionButton,{button:secondaryButton})));});var BannerActionButtonType=(0,_propTypes.shape)({label:_propTypes.string.isRequired,action:_propTypes.func.isRequired});Banner.propTypes={icon:_propTypes.elementType,variant:(0,_propTypes.oneOf)(['success','informative','attention']),message:_propTypes.string.isRequired,primaryButton:BannerActionButtonType,secondaryButton:function secondaryButton(props,propName,componentName){var primaryButton=props.primaryButton;if(!primaryButton&&!!props[propName]){return new Error("The "+propName+" must only be used ensemble with the primaryButton.");}return(0,_propTypes.checkPropTypes)((0,_defineProperty2["default"])({},propName,BannerActionButtonType),props,'prop',componentName);}};Banner.defaultProps={icon:undefined,variant:'informative',primaryButton:undefined,secondaryButton:undefined};var _default=Banner;exports["default"]=_default;
+"use strict";
+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 Banner_exports = {};
+__export(Banner_exports, {
+  default: () => Banner_default
+});
+module.exports = __toCommonJS(Banner_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_yoga_system = require("@gympass/yoga-system");
+var import_prop_types = require("prop-types");
+var import_Box = __toESM(require("../../Box"));
+var import_Button = __toESM(require("../../Button"));
+var import_Icon = __toESM(require("../../Icon"));
+var import_Text = __toESM(require("../../Text"));
+const StyledBanner = import_styled_components.default.View`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      components: { banner },
+      spacing,
+      colors: {
+        feedback: {
+          [variant]: backgroundColor = {
+            light: banner.defaultBackgroundColor
+          }
+        }
+      }
+    }
+  }
+}) => `
+    background-color: ${backgroundColor.light};
+    padding: ${spacing.xxsmall}px
+      ${spacing.small}px;
+    border-radius: ${banner.border.radius}px;
+  `}
+
+  ${import_yoga_system.margins}
+  
+  ${import_yoga_system.borders}
+`;
+const BannerActionButton = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { button: { label, action } } = _b, props = __objRest(_b, ["button"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, __spreadProps(__spreadValues({ as: import_Button.default.Text, small: true, secondary: true, onPress: action, ref }, props), { children: label }));
+  }
+);
+BannerActionButton.propTypes = {
+  button: (0, import_prop_types.shape)({
+    label: import_prop_types.string.isRequired,
+    action: import_prop_types.func.isRequired
+  }).isRequired
+};
+const Banner = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, { icon, variant, message, primaryButton, secondaryButton } = _a, rest = __objRest(_a, ["icon", "variant", "message", "primaryButton", "secondaryButton"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledBanner, __spreadProps(__spreadValues({ ref, variant }, rest), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Box.default, { flexDirection: "row", flex: 1, alignItems: "center", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Icon.default,
+        {
+          as: icon,
+          size: "medium",
+          fill: "secondary",
+          marginRight: "xxsmall"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Small, { flex: 1, marginTop: "xxsmall", marginBottom: "xxsmall", children: message }),
+      primaryButton && !secondaryButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BannerActionButton, { button: primaryButton, marginLeft: "xxsmall" })
+    ] }),
+    primaryButton && secondaryButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Box.default,
+      {
+        display: "flex",
+        flex: 1,
+        justifyContent: "flex-end",
+        flexDirection: "row",
+        marginBottom: "xxsmall",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BannerActionButton, { button: primaryButton, marginRight: "xxxsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BannerActionButton, { button: secondaryButton })
+        ]
+      }
+    )
+  ] }));
+});
+const BannerActionButtonType = (0, import_prop_types.shape)({
+  label: import_prop_types.string.isRequired,
+  action: import_prop_types.func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: import_prop_types.elementType,
+  /** style the banner following the theme (success, informative, attention) */
+  variant: (0, import_prop_types.oneOf)(["success", "informative", "attention"]),
+  /** the message to be displayed */
+  message: import_prop_types.string.isRequired,
+  /** the label and action fuction are required for banner action buttons  */
+  primaryButton: BannerActionButtonType,
+  /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
+  secondaryButton: (props, propName, componentName) => {
+    const { primaryButton } = props;
+    if (!primaryButton && !!props[propName]) {
+      return new Error(
+        `The ${propName} must only be used ensemble with the primaryButton.`
+      );
+    }
+    return (0, import_prop_types.checkPropTypes)(
+      { [propName]: BannerActionButtonType },
+      props,
+      "prop",
+      componentName
+    );
+  }
+};
+Banner.defaultProps = {
+  icon: void 0,
+  variant: "informative",
+  primaryButton: void 0,
+  secondaryButton: void 0
+};
+var Banner_default = Banner;

package/cjs/Banner/native/Banner.test.js

@@ -0,0 +1,136 @@
+"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_react_native = require("@testing-library/react-native");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import__ = require("../..");
+describe("<Banner />", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Banner, { message: "Feedback message." }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with custom variant", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Banner, { variant: "success", message: "Success banner without button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__.Banner,
+          {
+            variant: "informative",
+            message: "Informative banner without button"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Banner, { variant: "attention", message: "Attention banner without button" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with icon", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Banner, { icon: import_yoga_icons.CheckedFull, message: "Banner with icon" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with button", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Action",
+            action: () => {
+            }
+          }
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should call button action function when the banner button is pressed", () => {
+    const onButtonPressMock = jest.fn();
+    const { getByText } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Action",
+            action: onButtonPressMock
+          }
+        }
+      ) })
+    );
+    import_react_native.fireEvent.press(getByText("Action"));
+    expect(onButtonPressMock).toHaveBeenCalled();
+  });
+  it("should match snapshot with two action buttons", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Banner,
+        {
+          message: "Banner with two action buttons",
+          primaryButton: {
+            label: "Primary Action",
+            action: () => {
+            }
+          },
+          secondaryButton: {
+            label: "Secondary Action",
+            action: () => {
+            }
+          }
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should call both buttons action function when each banner action button are pressed", () => {
+    const onPrimaryButtonPressMock = jest.fn();
+    const onSecondaryButtonPressMock = jest.fn();
+    const { getByText } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import__.Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Primary Action",
+            action: onPrimaryButtonPressMock
+          },
+          secondaryButton: {
+            label: "Secondary Action",
+            action: onSecondaryButtonPressMock
+          }
+        }
+      ) })
+    );
+    import_react_native.fireEvent.press(getByText("Primary Action"));
+    expect(onPrimaryButtonPressMock).toHaveBeenCalled();
+    import_react_native.fireEvent.press(getByText("Secondary Action"));
+    expect(onSecondaryButtonPressMock).toHaveBeenCalled();
+  });
+});

package/cjs/Banner/native/index.js

@@ -1 +1,35 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _Banner=_interopRequireDefault(require("./Banner"));var _default=_Banner["default"];exports["default"]=_default;
+"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 __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 native_exports = {};
+__export(native_exports, {
+  default: () => native_default
+});
+module.exports = __toCommonJS(native_exports);
+var import_Banner = __toESM(require("./Banner"));
+var native_default = import_Banner.default;