@gympass/yoga 7.62.1 → 7.64.0

package/cjs/Accordion/Accordion.theme.js

@@ -4,7 +4,8 @@ exports.__esModule = true;
 exports["default"] = void 0;
 
 var Accordion = function Accordion(_ref) {
-  var spacing = _ref.spacing;
+  var spacing = _ref.spacing,
+      fontWeights = _ref.fontWeights;
   return {
     padding: {
       standard: spacing.medium,
@@ -15,6 +16,9 @@ var Accordion = function Accordion(_ref) {
     },
     gap: {
       header: spacing.xxxsmall
+    },
+    fontWeight: {
+      title: fontWeights.medium
     }
   };
 };

package/cjs/Accordion/web/Accordion.js

@@ -25,9 +25,10 @@ var Accordion = function Accordion(_ref) {
   var title = _ref.title,
       subtitle = _ref.subtitle,
       children = _ref.children,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      expanded = _ref.expanded;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(expanded),
       open = _useState[0],
       setOpen = _useState[1];
 
@@ -48,7 +49,7 @@ var Accordion = function Accordion(_ref) {
 
   var Title = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    align-items: flex-start;\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n\n    ", "\n\n    ", "\n  "])), function (_ref5) {
     var accordion = _ref5.theme.yoga.components.accordion;
-    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n    ";
+    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n\n      p {\n        font-weight: " + accordion.fontWeight.title + ";\n      }\n    ";
   }, disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref6) {
     var text = _ref6.theme.yoga.colors.text;
     return "\n          color: " + text.secundary + ";\n        ";
@@ -95,11 +96,13 @@ Accordion.propTypes = {
   title: _propTypes.string.isRequired,
   subtitle: _propTypes.string,
   children: _propTypes.node.isRequired,
-  disabled: _propTypes.bool
+  disabled: _propTypes.bool,
+  expanded: _propTypes.bool
 };
 Accordion.defaultProps = {
   subtitle: undefined,
-  disabled: false
+  disabled: false,
+  expanded: false
 };
 var _default = Accordion;
 exports["default"] = _default;

package/cjs/Button/Button.theme.js

@@ -128,6 +128,11 @@ var Button = function Button(_ref) {
         margin: {
           top: spacing.small,
           bottom: spacing.xxsmall
+        },
+        icon: {
+          margin: {
+            right: spacing.xxxsmall
+          }
         }
       }
     }

package/cjs/Button/web/Link.js

@@ -24,7 +24,7 @@ var Link = (0, _styledComponents["default"])(_Button["default"])(_templateObject
       secondary = _ref.secondary,
       button = _ref.theme.yoga.components.button;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.5) + ";\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.75) + ";\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
+  return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      svg {\n        margin-right: " + button.types.link.icon.margin.right + "px;\n        fill: " + button.types.link.font[state].color + ";\n      }\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.5) + ";\n\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.75) + ";\n\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(button.types.link.font[state].color, 0.75) + ";\n        }\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n\n        svg {\n          fill: " + button.types.link.font.disabled.color + ";\n        }\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
 });
 
 var ButtonLink = function ButtonLink(props) {
@@ -34,12 +34,16 @@ var ButtonLink = function ButtonLink(props) {
 ButtonLink.propTypes = {
   disabled: _propTypes.bool,
   secondary: _propTypes.bool,
-  href: _propTypes.string
+  href: _propTypes.string,
+
+  /** an Icon from yoga-icons package */
+  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func])
 };
 ButtonLink.defaultProps = {
   disabled: false,
   secondary: false,
-  href: undefined
+  href: undefined,
+  icon: undefined
 };
 ButtonLink.displayName = 'Button.Link';
 var _default = ButtonLink;

package/esm/Accordion/Accordion.theme.js

@@ -1,5 +1,6 @@
 var Accordion = function Accordion(_ref) {
-  var spacing = _ref.spacing;
+  var spacing = _ref.spacing,
+      fontWeights = _ref.fontWeights;
   return {
     padding: {
       standard: spacing.medium,
@@ -10,6 +11,9 @@ var Accordion = function Accordion(_ref) {
     },
     gap: {
       header: spacing.xxxsmall
+    },
+    fontWeight: {
+      title: fontWeights.medium
     }
   };
 };

package/esm/Accordion/web/Accordion.js

@@ -12,9 +12,10 @@ var Accordion = function Accordion(_ref) {
   var title = _ref.title,
       subtitle = _ref.subtitle,
       children = _ref.children,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      expanded = _ref.expanded;
 
-  var _useState = useState(false),
+  var _useState = useState(expanded),
       open = _useState[0],
       setOpen = _useState[1];
 
@@ -33,7 +34,7 @@ var Accordion = function Accordion(_ref) {
   }, disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))));
   var Title = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    align-items: flex-start;\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n\n    ", "\n\n    ", "\n  "])), function (_ref5) {
     var accordion = _ref5.theme.yoga.components.accordion;
-    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n    ";
+    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n\n      p {\n        font-weight: " + accordion.fontWeight.title + ";\n      }\n    ";
   }, disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref6) {
     var text = _ref6.theme.yoga.colors.text;
     return "\n          color: " + text.secundary + ";\n        ";
@@ -77,10 +78,12 @@ Accordion.propTypes = {
   title: string.isRequired,
   subtitle: string,
   children: node.isRequired,
-  disabled: bool
+  disabled: bool,
+  expanded: bool
 };
 Accordion.defaultProps = {
   subtitle: undefined,
-  disabled: false
+  disabled: false,
+  expanded: false
 };
 export default Accordion;

package/esm/Button/Button.theme.js

@@ -123,6 +123,11 @@ var Button = function Button(_ref) {
         margin: {
           top: spacing.small,
           bottom: spacing.xxsmall
+        },
+        icon: {
+          margin: {
+            right: spacing.xxxsmall
+          }
         }
       }
     }

package/esm/Button/web/Link.js

@@ -3,7 +3,7 @@ var _templateObject;
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
-import { bool, string } from 'prop-types';
+import { bool, string, oneOfType, node, func } from 'prop-types';
 import styled from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
 import Button from './Button';
@@ -12,7 +12,7 @@ var Link = styled(Button)(_templateObject || (_templateObject = _taggedTemplateL
       secondary = _ref.secondary,
       button = _ref.theme.yoga.components.button;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.5) + ";\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.75) + ";\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
+  return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      svg {\n        margin-right: " + button.types.link.icon.margin.right + "px;\n        fill: " + button.types.link.font[state].color + ";\n      }\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.5) + ";\n\n        svg {\n          fill: " + hexToRgb(button.types.link.font[state].color, 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.75) + ";\n\n        svg {\n          fill: " + hexToRgb(button.types.link.font[state].color, 0.75) + ";\n        }\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n\n        svg {\n          fill: " + button.types.link.font.disabled.color + ";\n        }\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
 });
 
 var ButtonLink = function ButtonLink(props) {
@@ -22,12 +22,16 @@ var ButtonLink = function ButtonLink(props) {
 ButtonLink.propTypes = {
   disabled: bool,
   secondary: bool,
-  href: string
+  href: string,
+
+  /** an Icon from yoga-icons package */
+  icon: oneOfType([node, func])
 };
 ButtonLink.defaultProps = {
   disabled: false,
   secondary: false,
-  href: undefined
+  href: undefined,
+  icon: undefined
 };
 ButtonLink.displayName = 'Button.Link';
 export default ButtonLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.62.1",
+  "version": "7.64.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "1d4b022729ad6c6b8f73a58a3c3fe8261a40b5c0",
+  "gitHead": "c33949c0b93ecc10be19ee73132cc9778a6a595e",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"