@gympass/yoga 7.87.1 → 7.88.0

package/esm/Progress/web/Progress.js

@@ -1,99 +1,218 @@
-var _excluded = ["label", "max", "value", "variant"];
-
-var _templateObject, _templateObject2, _templateObject3;
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
-import React from 'react';
-import styled from 'styled-components';
-import { string, number, shape, oneOfType, oneOf, bool } from 'prop-types';
-import { backgroundColor, borders, elevation, positions, display, spacing as systemSpacing } from '@gympass/yoga-system';
-import { charLength } from '../../shared';
-var ProgressBar = styled.progress(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  border: none;\n\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      _ref$theme$yoga = _ref.theme.yoga,
-      color = _ref$theme$yoga.colors[variant],
-      progress = _ref$theme$yoga.components.progress;
-  return "\n  height: " + progress.height + "px;\n\n  &&,\n  &::-webkit-progress-value,\n  &[value]::-webkit-progress-bar,\n  &:not(value)::-webkit-progress-bar {\n    border-radius: " + progress.border.radius + "px;\n  }\n\n  &:not(value)::-moz-progress-bar,\n  &[value]::-moz-progress-bar {\n    border-radius: " + progress.border.radius + "px;\n  }\n\n  &:not(value)::-webkit-progress-bar {\n    background-color: " + progress.backgroundColor.bar + ";\n  }\n\n  &::-webkit-progress-value {\n    background-color: " + color + ";\n  }\n\n  &&,\n  &:not(value)::-moz-progress-bar {\n    background-color: " + progress.backgroundColor.bar + ";\n  }\n\n  &[value]::-moz-progress-bar {\n    background-color: " + color + ";\n  }\n";
-});
-var Label = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var _ref2$theme$yoga = _ref2.theme.yoga,
-      progress = _ref2$theme$yoga.components.progress,
-      text = _ref2$theme$yoga.colors.text;
-  return "\n  color: " + text.secondary + ";\n  font-size: " + progress.label.font.size + "px;\n  letter-spacing: normal;\n";
-});
-var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  width: 100%;\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref3) {
-  var isNumber = _ref3.isNumber,
-      align = _ref3.align,
-      spacing = _ref3.theme.yoga.spacing;
-  return "\n    " + (isNumber ? "\n        " + Label + " {\n          width: 22px;\n\n          margin-" + (align === 'right' ? 'left' : 'right') + ": " + spacing.xxsmall + "px;\n        }\n\n        " + ProgressBar + " {\n          margin: auto;\n        }\n    " : "\n        flex-direction: column;\n\n        " + Label + " {\n          max-width: 280px;\n\n          margin-top: " + spacing.xxsmall + "px;\n        }\n      ") + "\n\n      " + (align === 'right' ? 'align-items: flex-end; text-align: right;' : 'align-items: flex-start;') + "\n      " + (isNumber && align === 'left' ? 'flex-direction: row-reverse;' : '') + "\n  ";
-}, backgroundColor, borders, elevation, positions, display, systemSpacing);
+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 from "react";
+import styled from "styled-components";
+import { string, number, shape, oneOfType, oneOf, bool } from "prop-types";
+import {
+  backgroundColor,
+  borders,
+  elevation,
+  positions,
+  display,
+  spacing as systemSpacing
+} from "@gympass/yoga-system";
+import { charLength } from "../../shared";
+const ProgressBar = styled.progress`
+  width: 100%;
+
+  border: none;
+
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      colors: { [variant]: color },
+      components: { progress }
+    }
+  }
+}) => `
+  height: ${progress.height}px;
+
+  &&,
+  &::-webkit-progress-value,
+  &[value]::-webkit-progress-bar,
+  &:not(value)::-webkit-progress-bar {
+    border-radius: ${progress.border.radius}px;
+  }
+
+  &:not(value)::-moz-progress-bar,
+  &[value]::-moz-progress-bar {
+    border-radius: ${progress.border.radius}px;
+  }
+
+  &:not(value)::-webkit-progress-bar {
+    background-color: ${progress.backgroundColor.bar};
+  }
+
+  &::-webkit-progress-value {
+    background-color: ${color};
+  }
+
+  &&,
+  &:not(value)::-moz-progress-bar {
+    background-color: ${progress.backgroundColor.bar};
+  }
+
+  &[value]::-moz-progress-bar {
+    background-color: ${color};
+  }
+`}
+`;
+const Label = styled.label`
+  ${({
+  theme: {
+    yoga: {
+      components: { progress },
+      colors: { text }
+    }
+  }
+}) => `
+  color: ${text.secondary};
+  font-size: ${progress.label.font.size}px;
+  letter-spacing: normal;
+`}
+`;
+const Wrapper = styled.div`
+  display: flex;
+
+  width: 100%;
+
+  ${({
+  isNumber,
+  align,
+  theme: {
+    yoga: { spacing }
+  }
+}) => `
+    ${isNumber ? `
+        ${Label} {
+          width: 22px;
+
+          margin-${align === "right" ? "left" : "right"}: ${spacing.xxsmall}px;
+        }
+
+        ${ProgressBar} {
+          margin: auto;
+        }
+    ` : `
+        flex-direction: column;
+
+        ${Label} {
+          max-width: 280px;
+
+          margin-top: ${spacing.xxsmall}px;
+        }
+      `}
+
+      ${align === "right" ? "align-items: flex-end; text-align: right;" : "align-items: flex-start;"}
+      ${isNumber && align === "left" ? "flex-direction: row-reverse;" : ""}
+  `}
+
+  ${backgroundColor}
+  ${borders}
+  ${elevation}
+  ${positions}
+  ${display}
+  ${systemSpacing}
+`;
 Wrapper.propTypes = {
-  align: oneOf(['left', 'right']),
+  align: oneOf(["left", "right"]),
   isNumber: bool
 };
 Wrapper.defaultProps = {
-  align: 'left',
+  align: "left",
   isNumber: false
 };
-/** The Progress is a component used to indicate a progress of an indicator
- * of quantity. The use of labels numeric or alphabetic can increase the user
- * understanding. */
-
-var Progress = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
-  var label = _ref4.label,
-      max = _ref4.max,
-      value = _ref4.value,
-      variant = _ref4.variant,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
-
-  var isNumber = !/[a-zA-Z]/g.test(label.value);
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    isNumber: isNumber,
-    align: label.placement,
-    ref: ref
-  }, props), /*#__PURE__*/React.createElement(ProgressBar, {
-    max: max,
-    value: value,
-    variant: variant
-  }), Object.keys(label).length > 0 && (isNumber || label.value) && /*#__PURE__*/React.createElement(Label, null, label.value));
-});
+const Progress = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, max, value, variant } = _b, props = __objRest(_b, ["label", "max", "value", "variant"]);
+    const isNumber = !/[a-zA-Z]/g.test(label.value);
+    return /* @__PURE__ */ jsxs(Wrapper, __spreadProps(__spreadValues({ isNumber, align: label.placement, ref }, props), { children: [
+      /* @__PURE__ */ jsx(ProgressBar, { max, value, variant }),
+      Object.keys(label).length > 0 && (isNumber || label.value) && /* @__PURE__ */ jsx(Label, { children: label.value })
+    ] }));
+  }
+);
 Progress.propTypes = {
   /** Use labels to increase users understanding. If the value is numeric, make
    * sure it has a maximum of 3 characters */
   label: shape({
     value: charLength(3, oneOfType([number, string])),
-    placement: oneOf(['left', 'right'])
+    placement: oneOf(["left", "right"])
   }),
-
   /** This attribute describes how much work the task indicated by the progress
    * element requires. The max attribute, if present, must have a value greater
    * than zero and be a valid floating point number. The default value is 1. */
   max: number,
-
   /** This attribute specifies how much of the task that has been completed. It
    * must be a valid floating point number between 0 and max, or between 0 and 1
    * if max is omitted. If there is no value attribute, the progress bar is
    * indeterminate; this indicates that an activity is ongoing with no
    * indication of how long it is expected to take. */
   value: number,
-
   /** style the card following the theme (primary, secondary, vibin, hope,
    * energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
    * medium, light, clear, white) */
-  variant: oneOf(['primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+  variant: oneOf([
+    "primary",
+    "secondary",
+    "vibin",
+    "hope",
+    "energy",
+    "relax",
+    "peace",
+    "verve",
+    "uplift",
+    "deepPurple",
+    "stamina",
+    "dark",
+    "medium",
+    "deep",
+    "light",
+    "clear",
+    "white"
+  ])
 };
 Progress.defaultProps = {
   label: {
-    value: undefined,
-    placement: 'left'
+    value: void 0,
+    placement: "left"
   },
   max: 1,
-  value: undefined,
-  variant: 'verve'
+  value: void 0,
+  variant: "verve"
+};
+var Progress_default = Progress;
+export {
+  Progress_default as default
 };
-export default Progress;

package/esm/Progress/web/Progress.test.js

@@ -1,222 +1,134 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider, Progress } from '../..';
-describe('<Progress />', function () {
-  it('should match snapshot', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, null), /*#__PURE__*/React.createElement(Progress, {
-      max: 100
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 60
-    }))),
-        container = _render.container;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { ThemeProvider, Progress } from "../..";
+describe("<Progress />", () => {
+  it("should match snapshot", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, {}),
+        /* @__PURE__ */ jsx(Progress, { max: 100 }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 60 })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with label string', function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      label: {
-        value: 'Some decription here'
-      }
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 65,
-      label: {
-        value: 'Some decription here',
-        placement: 'right'
-      }
-    }))),
-        container = _render2.container;
-
+  it("should match snapshot with label string", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, { max: 100, label: { value: "Some decription here" } }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 65,
+            label: { value: "Some decription here", placement: "right" }
+          }
+        )
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with label number', function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      }
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 65,
-      label: {
-        value: 65,
-        placement: 'right'
-      }
-    }))),
-        container = _render3.container;
-
+  it("should match snapshot with label number", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 } }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 65,
+            label: { value: 65, placement: "right" }
+          }
+        )
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with all variants', function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "primary"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "secondary"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "vibin"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "hope"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "energy"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "relax"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "peace"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "verve"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "uplift"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "deepPurple"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "stamina"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "dark"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "medium"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "deep"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "light"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "clear"
-    }), /*#__PURE__*/React.createElement(Progress, {
-      max: 100,
-      value: 20,
-      label: {
-        value: 20
-      },
-      variant: "white"
-    }))),
-        container = _render4.container;
-
+  it("should match snapshot with all variants", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "primary"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "secondary"
+          }
+        ),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "vibin" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "hope" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "energy" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "relax" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "peace" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "verve" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "uplift" }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "deepPurple"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            max: 100,
+            value: 20,
+            label: { value: 20 },
+            variant: "stamina"
+          }
+        ),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "dark" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "medium" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "deep" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "light" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "clear" }),
+        /* @__PURE__ */ jsx(Progress, { max: 100, value: 20, label: { value: 20 }, variant: "white" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with positions prop system', function () {
-    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      position: "fixed",
-      top: "small",
-      left: "small"
-    }))),
-        container = _render5.container;
-
+  it("should match snapshot with positions prop system", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { position: "fixed", top: "small", left: "small" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with spacing prop system', function () {
-    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      m: "small",
-      padding: "medium"
-    }))),
-        container = _render6.container;
-
+  it("should match snapshot with spacing prop system", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { m: "small", padding: "medium" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with background color prop system', function () {
-    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      backgroundColor: "primary"
-    }))),
-        container = _render7.container;
-
+  it("should match snapshot with background color prop system", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { backgroundColor: "primary" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with border prop system', function () {
-    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      b: "small",
-      bRadius: "small"
-    }))),
-        container = _render8.container;
-
+  it("should match snapshot with border prop system", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { b: "small", bRadius: "small" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with elevation prop system', function () {
-    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
-      elevation: "small"
-    }))),
-        container = _render9.container;
-
+  it("should match snapshot with elevation prop system", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Progress, { elevation: "small" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-});
+});

package/esm/Progress/web/index.js

@@ -1,2 +1,5 @@
-import Progress from './Progress';
-export default Progress;
+import Progress from "./Progress";
+var web_default = Progress;
+export {
+  web_default as default
+};