@gympass/yoga 7.88.0 → 7.88.2

package/esm/Dropdown/native/Dropdown.test.js

@@ -0,0 +1,76 @@
+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));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Dropdown } from "../..";
+jest.useFakeTimers();
+const dropdownProps = {
+  label: "Find an activity to love",
+  options: [
+    { label: "Yoga", value: "yoga" },
+    { label: "Crossfit", value: "crossfit" },
+    { label: "Tenis", value: "tenis" },
+    { label: "Soccer", value: "soccer" },
+    { label: "Pilates", value: "pilates" },
+    { label: "Run", value: "running" }
+  ]
+};
+describe("<Dropdown />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dropdown, __spreadValues({}, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when disabled", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dropdown, __spreadValues({ disabled: true }, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when full", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dropdown, __spreadValues({ full: true }, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when has a selected value", () => {
+      const selectedOption = {
+        label: "Swimming",
+        value: "swimming",
+        selected: true
+      };
+      const props = dropdownProps;
+      props.options.push(selectedOption);
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dropdown, __spreadValues({ disabled: true }, props)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Dropdown, __spreadProps(__spreadValues({}, dropdownProps), { error: "Please, select one activity" })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Dropdown/native/Options.android.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+import { func, arrayOf, string, shape, number, oneOfType } from "prop-types";
+import { TouchableWithoutFeedback } from "react-native";
+import Text from "../../Text";
+import List from "../../List";
+const Option = styled(List.Item)`
+  ${({
+  isSelected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    padding:
+      ${dropdown.backdrop.content.option.padding.top}px
+      ${dropdown.backdrop.content.option.padding.right}px
+      ${dropdown.backdrop.content.option.padding.bottom}px
+      ${dropdown.backdrop.content.option.padding.left}px;
+
+    border-bottom-width: ${dropdown.option.border.width}px;
+    background-color: ${isSelected ? `${dropdown.hover.option.backgroundColor}` : "transparent"};
+  `}
+`;
+const OptionText = styled.Text`
+  ${({
+  isSelected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    font-size: ${dropdown.option.font.size}px;
+    line-height: ${dropdown.option.font.lineHeight}px;
+    color: ${isSelected ? `${dropdown.selected.option.font.color}` : `${dropdown.option.font.color}`};
+  `}
+`;
+const Options = ({ options, selectedOption, onSelect }) => /* @__PURE__ */ jsx(
+  List,
+  {
+    style: { height: 60 * 3.6 },
+    data: options.map((item) => item),
+    keyExtractor: (_, index) => index.toString(),
+    renderItem: ({ item }) => /* @__PURE__ */ jsx(TouchableWithoutFeedback, { onPress: () => onSelect(item), children: /* @__PURE__ */ jsx(
+      Option,
+      {
+        isSelected: selectedOption && selectedOption.value === item.value,
+        children: /* @__PURE__ */ jsx(
+          OptionText,
+          {
+            isSelected: selectedOption && selectedOption.value === item.value,
+            as: selectedOption && selectedOption.value === item.value ? Text.Bold : Text.Regular,
+            children: item.label
+          }
+        )
+      },
+      item.value
+    ) })
+  }
+);
+const optionShape = {
+  label: string,
+  value: oneOfType([string, number])
+};
+Options.propTypes = {
+  options: arrayOf(shape(optionShape)).isRequired,
+  selectedOption: shape(optionShape),
+  onSelect: func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: () => {
+  }
+};
+var Options_android_default = Options;
+export {
+  Options_android_default as default
+};

package/esm/Dropdown/native/Options.ios.js

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import styled, { withTheme } from "styled-components";
+import { func, arrayOf, string, shape, oneOfType, number } from "prop-types";
+import { Picker } from "@react-native-picker/picker";
+import Button from "../../Button";
+const PickerStyled = styled(Picker)`
+  width: 100%;
+  height: 190px;
+`;
+const PickerActions = styled.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding:
+      ${dropdown.backdrop.content.actions.padding.top}px
+      ${dropdown.backdrop.content.actions.padding.right}px
+      ${dropdown.backdrop.content.actions.padding.bottom}px
+      ${dropdown.backdrop.content.actions.padding.left}px;
+  `}
+`;
+const Options = ({
+  options,
+  selectedOption,
+  cancelActionLabel,
+  confirmActionLabel,
+  onSelect,
+  onClose,
+  theme: {
+    yoga: { baseFont }
+  }
+}) => {
+  const [selected, setSelected] = useState(selectedOption);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PickerStyled,
+      {
+        selectedValue: selected && selected.value,
+        onValueChange: (itemValue) => setSelected(options.find((option) => option.value === itemValue)),
+        itemStyle: {
+          fontFamily: baseFont.family
+        },
+        children: options.map((item) => /* @__PURE__ */ jsx(Picker.Item, __spreadValues({}, item), item))
+      }
+    ),
+    /* @__PURE__ */ jsxs(PickerActions, { children: [
+      /* @__PURE__ */ jsx(Button.Link, { onPress: onClose, children: cancelActionLabel }),
+      /* @__PURE__ */ jsx(Button.Link, { onPress: () => onSelect(selected), children: confirmActionLabel })
+    ] })
+  ] });
+};
+const optionShape = {
+  label: string,
+  value: oneOfType([string, number])
+};
+Options.propTypes = {
+  options: arrayOf(shape(optionShape)).isRequired,
+  selectedOption: shape(optionShape),
+  cancelActionLabel: string.isRequired,
+  confirmActionLabel: string.isRequired,
+  onSelect: func,
+  onClose: func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: () => {
+  },
+  onClose: () => {
+  }
+};
+var Options_ios_default = withTheme(Options);
+export {
+  Options_ios_default as default
+};

package/esm/Dropdown/native/index.js

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

package/esm/Feedback/Feedback.theme.js

@@ -0,0 +1,9 @@
+const Feedback = () => ({
+  text: {
+    maxWidth: 520
+  }
+});
+var Feedback_theme_default = Feedback;
+export {
+  Feedback_theme_default as default
+};

package/esm/Feedback/index.js

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

package/esm/Grid/Grid.theme.js

@@ -0,0 +1,23 @@
+const Grid = () => ({
+  gutter: {
+    desktop: 24,
+    mobile: 16
+  },
+  container: {
+    width: 1600,
+    margin: {
+      desktop: {
+        left: 71,
+        right: 71
+      },
+      mobile: {
+        left: 20,
+        right: 20
+      }
+    }
+  }
+});
+var Grid_theme_default = Grid;
+export {
+  Grid_theme_default as default
+};

package/esm/Grid/index.js

@@ -0,0 +1,7 @@
+import { Container, Row, Col, Hide } from "./web";
+export {
+  Col,
+  Container,
+  Hide,
+  Row
+};

package/esm/Header/Header.theme.js

@@ -0,0 +1,14 @@
+const Header = ({ spacing }) => ({
+  padding: {
+    xxs: spacing.medium,
+    lg: spacing.huge
+  },
+  height: {
+    xxs: 56,
+    lg: 72
+  }
+});
+var Header_theme_default = Header;
+export {
+  Header_theme_default as default
+};

package/esm/Header/index.js

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

package/esm/Heading/Heading.theme.js

@@ -0,0 +1,18 @@
+const Heading = ({ spacing, colors }) => ({
+  background: colors.white,
+  padding: {
+    vertical: spacing.small,
+    horizontal: spacing.huge,
+    horizontalMobile: spacing.medium
+  },
+  height: spacing.xxxlarge,
+  button: {
+    width: spacing.large,
+    height: spacing.large,
+    marginRight: spacing.medium
+  }
+});
+var Heading_theme_default = Heading;
+export {
+  Heading_theme_default as default
+};

package/esm/Heading/index.js

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

package/esm/Icon/Icon.js

@@ -0,0 +1,172 @@
+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 } from "react/jsx-runtime";
+import React from "react";
+import {
+  oneOf,
+  elementType,
+  string,
+  checkPropTypes,
+  oneOfType,
+  number
+} from "prop-types";
+import { withTheme } from "styled-components";
+import get from "lodash.get";
+import Box from "../Box";
+const Icon = (_a) => {
+  var _b = _a, {
+    as: Component,
+    size,
+    width = size,
+    height = size,
+    fill,
+    stroke,
+    theme,
+    title,
+    description,
+    ariaLabel
+  } = _b, props = __objRest(_b, [
+    "as",
+    "size",
+    "width",
+    "height",
+    "fill",
+    "stroke",
+    "theme",
+    "title",
+    "description",
+    "ariaLabel"
+  ]);
+  const componentWithTitle = (propsTitle) => {
+    const titleId = `${ariaLabel}-titleId`;
+    let ariaDescribedBy = titleId;
+    const titleElement = /* @__PURE__ */ jsx("title", { id: titleId, children: title }, titleId);
+    let svgChildren = [titleElement];
+    if (description) {
+      const descId = `${ariaLabel}-descId`;
+      const descElement = /* @__PURE__ */ jsx("desc", { id: descId, children: description }, descId);
+      ariaDescribedBy += ` ${descId}`;
+      svgChildren = [...svgChildren, descElement];
+    }
+    const defaultProps = __spreadProps(__spreadValues({}, Component.defaultProps), {
+      role: "img",
+      "aria-describedby": ariaDescribedBy
+    });
+    const newSvg = React.createElement(
+      "svg",
+      __spreadValues(__spreadValues({}, propsTitle), defaultProps),
+      svgChildren,
+      Component().props.children
+    );
+    return newSvg;
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      as: title && ariaLabel ? componentWithTitle : Component,
+      width: get(theme.yoga.spacing, width, width),
+      height: get(theme.yoga.spacing, height, height)
+    }, fill && { fill: get(theme.yoga.colors, fill, fill) }), stroke && { stroke: get(theme.yoga.colors, stroke, stroke) }), props), {
+      "aria-hidden": title ? void 0 : true
+    })
+  );
+};
+const commonSizes = [
+  "xxxsmall",
+  "xxsmall",
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+  "xxlarge",
+  "xxxlarge",
+  "huge",
+  "xhuge"
+];
+Icon.propTypes = {
+  /** SVG to be rendered. */
+  as: elementType.isRequired,
+  /** Fill color. Use it as one of theme.colors
+   * tokens (vibin, neutral, stamina...) */
+  fill: string,
+  /** Stroke color. Use it as one of theme.colors
+   * tokens (vibin, neutral, stamina...) */
+  stroke: string,
+  /** Text that will be displayed in the title element, used for accessibility */
+  title: string,
+  /** Text used as element description, used for accessibility.
+   * A title must be given in order to use description corretly.
+   */
+  description: string,
+  /** Text used as identifier for aria-describedby, title and description */
+  ariaLabel: (props, propName, componentName) => {
+    const { title, ariaLabel } = props;
+    if (title && !ariaLabel) {
+      return new Error(
+        `accessible elements, such as title, must receive the ${propName} property as an identifier.`
+      );
+    }
+    checkPropTypes(
+      {
+        [propName]: string
+      },
+      { ariaLabel },
+      "prop",
+      componentName
+    );
+    return null;
+  },
+  /** Horizontal size of the SVG. Use it as one of
+   * theme.spacing tokens (xxsmall, small, medium...) */
+  width: oneOfType([oneOf(commonSizes), string, number]),
+  /** Vertical size of the SVG. Use it as one of
+   * theme.spacing tokens (xxsmall, small, medium...) */
+  height: oneOfType([oneOf(commonSizes), string, number]),
+  /** Size for vertical and horizontal of the SVG.
+   * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
+  size: oneOfType([oneOf(commonSizes), string, number])
+};
+Icon.defaultProps = {
+  fill: void 0,
+  stroke: void 0,
+  title: void 0,
+  description: void 0,
+  ariaLabel: void 0,
+  width: void 0,
+  height: void 0,
+  size: 12
+};
+var Icon_default = withTheme(Icon);
+export {
+  Icon_default as default
+};

package/esm/Icon/Icon.theme.js

@@ -0,0 +1,5 @@
+const Icon = () => ({});
+var Icon_theme_default = Icon;
+export {
+  Icon_theme_default as default
+};

package/esm/Icon/index.js

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

package/esm/Icon/index.native.js

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

package/esm/Icon/native/Icon.test.js

@@ -0,0 +1,69 @@
+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));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Icon } from "../..";
+const Circle = (props) => /* @__PURE__ */ jsx("svg", __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "16" }) }));
+describe("Snapshots", () => {
+  it("should match snapshot", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Icon, { as: Circle, width: "small", height: "small", fill: "stamina" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with size prop", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Icon, { as: Circle, size: "small", fill: "stamina" }) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with system props", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          as: Circle,
+          size: "small",
+          fill: "stamina",
+          margin: "medium",
+          elevation: "medium"
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with accessible props", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          as: Circle,
+          size: "small",
+          fill: "stamina",
+          title: "Circle icon",
+          description: "This is a circular icon",
+          ariaLabel: "circleIcon"
+        }
+      ) })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Icon/native/index.js

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