@gympass/yoga 7.88.0 → 7.88.1

package/esm/Banner/native/Banner.js

@@ -0,0 +1,160 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import styled from "styled-components";
+import { borders, margins } from "@gympass/yoga-system";
+import {
+  func,
+  oneOf,
+  string,
+  checkPropTypes,
+  elementType,
+  shape
+} from "prop-types";
+import Box from "../../Box";
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Text from "../../Text";
+const StyledBanner = styled.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;
+  `}
+
+  ${margins}
+  
+  ${borders}
+`;
+const BannerActionButton = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { button: { label, action } } = _b, props = __objRest(_b, ["button"]);
+    return /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({ as: Button.Text, small: true, secondary: true, onPress: action, ref }, props), { children: label }));
+  }
+);
+BannerActionButton.propTypes = {
+  button: shape({
+    label: string.isRequired,
+    action: func.isRequired
+  }).isRequired
+};
+const Banner = forwardRef((props, ref) => {
+  const _a = props, { icon, variant, message, primaryButton, secondaryButton } = _a, rest = __objRest(_a, ["icon", "variant", "message", "primaryButton", "secondaryButton"]);
+  return /* @__PURE__ */ jsxs(StyledBanner, __spreadProps(__spreadValues({ ref, variant }, rest), { children: [
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "row", flex: 1, alignItems: "center", children: [
+      icon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          as: icon,
+          size: "medium",
+          fill: "secondary",
+          marginRight: "xxsmall"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text.Small, { flex: 1, marginTop: "xxsmall", marginBottom: "xxsmall", children: message }),
+      primaryButton && !secondaryButton && /* @__PURE__ */ jsx(BannerActionButton, { button: primaryButton, marginLeft: "xxsmall" })
+    ] }),
+    primaryButton && secondaryButton && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        flex: 1,
+        justifyContent: "flex-end",
+        flexDirection: "row",
+        marginBottom: "xxsmall",
+        children: [
+          /* @__PURE__ */ jsx(BannerActionButton, { button: primaryButton, marginRight: "xxxsmall" }),
+          /* @__PURE__ */ jsx(BannerActionButton, { button: secondaryButton })
+        ]
+      }
+    )
+  ] }));
+});
+const BannerActionButtonType = shape({
+  label: string.isRequired,
+  action: func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: elementType,
+  /** style the banner following the theme (success, informative, attention) */
+  variant: oneOf(["success", "informative", "attention"]),
+  /** the message to be displayed */
+  message: 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 checkPropTypes(
+      { [propName]: BannerActionButtonType },
+      props,
+      "prop",
+      componentName
+    );
+  }
+};
+Banner.defaultProps = {
+  icon: void 0,
+  variant: "informative",
+  primaryButton: void 0,
+  secondaryButton: void 0
+};
+var Banner_default = Banner;
+export {
+  Banner_default as default
+};

package/esm/Banner/native/Banner.test.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import { CheckedFull } from "@gympass/yoga-icons";
+import { ThemeProvider, Banner } from "../..";
+describe("<Banner />", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Banner, { message: "Feedback message." }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with custom variant", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Banner, { variant: "success", message: "Success banner without button" }),
+        /* @__PURE__ */ jsx(
+          Banner,
+          {
+            variant: "informative",
+            message: "Informative banner without button"
+          }
+        ),
+        /* @__PURE__ */ jsx(Banner, { variant: "attention", message: "Attention banner without button" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with icon", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Banner, { icon: CheckedFull, message: "Banner with icon" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with button", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        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 } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Action",
+            action: onButtonPressMock
+          }
+        }
+      ) })
+    );
+    fireEvent.press(getByText("Action"));
+    expect(onButtonPressMock).toHaveBeenCalled();
+  });
+  it("should match snapshot with two action buttons", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        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 } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Primary Action",
+            action: onPrimaryButtonPressMock
+          },
+          secondaryButton: {
+            label: "Secondary Action",
+            action: onSecondaryButtonPressMock
+          }
+        }
+      ) })
+    );
+    fireEvent.press(getByText("Primary Action"));
+    expect(onPrimaryButtonPressMock).toHaveBeenCalled();
+    fireEvent.press(getByText("Secondary Action"));
+    expect(onSecondaryButtonPressMock).toHaveBeenCalled();
+  });
+});

package/esm/Banner/native/index.js

@@ -0,0 +1,5 @@
+import Banner from "./Banner";
+var native_default = Banner;
+export {
+  native_default as default
+};

package/esm/BottomSheet/BottomSheet.theme.js

@@ -0,0 +1,24 @@
+const BottomSheet = ({ radii, spacing }) => ({
+  border: {
+    radius: radii.regular
+  },
+  padding: {
+    top: spacing.large,
+    right: spacing.medium,
+    bottom: spacing.large,
+    left: spacing.medium
+  },
+  width: {
+    default: 100
+  },
+  height: {
+    min: 160
+  },
+  position: {
+    default: spacing.zero
+  }
+});
+var BottomSheet_theme_default = BottomSheet;
+export {
+  BottomSheet_theme_default as default
+};

package/esm/BottomSheet/index.js

@@ -0,0 +1,5 @@
+import BottomSheet from "./web";
+var BottomSheet_default = BottomSheet;
+export {
+  BottomSheet_default as default
+};

package/esm/Box/index.js

@@ -0,0 +1,5 @@
+import Box from "./web";
+var Box_default = Box;
+export {
+  Box_default as default
+};

package/esm/Box/index.native.js

@@ -0,0 +1,5 @@
+import Box from "./native";
+var index_native_default = Box;
+export {
+  index_native_default as default
+};

package/esm/Box/native/Box.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { system } from "@gympass/yoga-system";
+const Box = styled.View(system);
+var Box_default = Box;
+export {
+  Box_default as default
+};

package/esm/Box/native/Box.test.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Box, Text } from "../..";
+describe("<Box />", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          b: "small",
+          p: "small",
+          borderRadius: "small",
+          color: "feedback.success.dark",
+          children: /* @__PURE__ */ jsx(Text, { children: "Making wellbeing universal" })
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Box/native/index.js

@@ -0,0 +1,5 @@
+import Box from "./Box";
+var native_default = Box;
+export {
+  native_default as default
+};

package/esm/Button/Button.theme.js

@@ -0,0 +1,137 @@
+import { hexToRgb } from "@gympass/yoga-common";
+const Button = ({
+  spacing,
+  fontSizes,
+  borders,
+  radii,
+  colors,
+  fontWeights
+}) => ({
+  padding: {
+    default: {
+      right: spacing.large,
+      left: spacing.large
+    },
+    small: {
+      right: spacing.small,
+      left: spacing.small
+    }
+  },
+  height: {
+    default: 48,
+    small: 32
+  },
+  font: {
+    size: {
+      default: fontSizes.medium,
+      small: fontSizes.small
+    },
+    weight: fontWeights.medium
+  },
+  border: {
+    radius: radii.circle
+  },
+  icon: {
+    size: {
+      default: 24,
+      small: 16
+    },
+    margin: {
+      right: spacing.xxsmall
+    }
+  },
+  types: {
+    contained: {
+      backgroundColor: {
+        disabled: colors.elements.backgroundAndDisabled,
+        primary: {
+          default: colors.primary,
+          pressed: hexToRgb(colors.primary, 0.75)
+        },
+        secondary: {
+          default: colors.secondary,
+          pressed: hexToRgb(colors.secondary, 0.75)
+        }
+      },
+      font: {
+        default: {
+          color: colors.white
+        },
+        disabled: {
+          color: colors.deep
+        },
+        pressed: {
+          color: colors.white
+        }
+      }
+    },
+    outline: {
+      backgroundColor: {
+        default: "transparent",
+        primary: {
+          hover: colors.primary
+        },
+        secondary: {
+          hover: colors.secondary
+        }
+      },
+      border: {
+        width: borders.small
+      },
+      font: {
+        default: {
+          primary: {
+            color: colors.primary
+          },
+          secondary: {
+            color: colors.secondary
+          }
+        },
+        disabled: {
+          color: colors.deep
+        },
+        hover: {
+          color: colors.white
+        },
+        pressed: {
+          primary: {
+            color: hexToRgb(colors.primary, 0.75)
+          },
+          secondary: {
+            color: hexToRgb(colors.secondary, 0.75)
+          }
+        }
+      }
+    },
+    text: {
+      backgroundColor: "transparent",
+      disabled: colors.deep
+    },
+    link: {
+      font: {
+        primary: {
+          color: colors.primary
+        },
+        secondary: {
+          color: colors.secondary
+        },
+        disabled: {
+          color: colors.deep
+        }
+      },
+      margin: {
+        top: spacing.small,
+        bottom: spacing.xxsmall
+      },
+      icon: {
+        margin: {
+          right: spacing.xxxsmall
+        }
+      }
+    }
+  }
+});
+var Button_theme_default = Button;
+export {
+  Button_theme_default as default
+};

package/esm/Button/index.js

@@ -0,0 +1,13 @@
+import Button from "./web/Button";
+import ButtonOutline from "./web/Outline";
+import ButtonText from "./web/Text";
+import ButtonLink from "./web/Link";
+import ButtonIcon from "./web/Icon";
+Button.Outline = ButtonOutline;
+Button.Text = ButtonText;
+Button.Link = ButtonLink;
+Button.Icon = ButtonIcon;
+var Button_default = Button;
+export {
+  Button_default as default
+};

package/esm/Button/index.native.js

@@ -0,0 +1,11 @@
+import Button from "./native/Button";
+import ButtonText from "./native/Text";
+import ButtonLink from "./native/Link";
+import ButtonIcon from "./native/Icon";
+Button.Text = ButtonText;
+Button.Link = ButtonLink;
+Button.Icon = ButtonIcon;
+var index_native_default = Button;
+export {
+  index_native_default as default
+};