@gympass/yoga 7.62.1 → 7.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,8 @@ exports.__esModule = true;
4
4
  exports["default"] = void 0;
5
5
 
6
6
  var Accordion = function Accordion(_ref) {
7
- var spacing = _ref.spacing;
7
+ var spacing = _ref.spacing,
8
+ fontWeights = _ref.fontWeights;
8
9
  return {
9
10
  padding: {
10
11
  standard: spacing.medium,
@@ -15,6 +16,9 @@ var Accordion = function Accordion(_ref) {
15
16
  },
16
17
  gap: {
17
18
  header: spacing.xxxsmall
19
+ },
20
+ fontWeight: {
21
+ title: fontWeights.medium
18
22
  }
19
23
  };
20
24
  };
@@ -48,7 +48,7 @@ var Accordion = function Accordion(_ref) {
48
48
 
49
49
  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) {
50
50
  var accordion = _ref5.theme.yoga.components.accordion;
51
- return "\n gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n ";
51
+ 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 ";
52
52
  }, disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref6) {
53
53
  var text = _ref6.theme.yoga.colors.text;
54
54
  return "\n color: " + text.secundary + ";\n ";
@@ -128,6 +128,11 @@ var Button = function Button(_ref) {
128
128
  margin: {
129
129
  top: spacing.small,
130
130
  bottom: spacing.xxsmall
131
+ },
132
+ icon: {
133
+ margin: {
134
+ right: spacing.xxxsmall
135
+ }
131
136
  }
132
137
  }
133
138
  }
@@ -24,7 +24,7 @@ var Link = (0, _styledComponents["default"])(_Button["default"])(_templateObject
24
24
  secondary = _ref.secondary,
25
25
  button = _ref.theme.yoga.components.button;
26
26
  var state = secondary ? 'secondary' : 'primary';
27
- 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 ";
27
+ 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 ";
28
28
  });
29
29
 
30
30
  var ButtonLink = function ButtonLink(props) {
@@ -34,12 +34,16 @@ var ButtonLink = function ButtonLink(props) {
34
34
  ButtonLink.propTypes = {
35
35
  disabled: _propTypes.bool,
36
36
  secondary: _propTypes.bool,
37
- href: _propTypes.string
37
+ href: _propTypes.string,
38
+
39
+ /** an Icon from yoga-icons package */
40
+ icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func])
38
41
  };
39
42
  ButtonLink.defaultProps = {
40
43
  disabled: false,
41
44
  secondary: false,
42
- href: undefined
45
+ href: undefined,
46
+ icon: undefined
43
47
  };
44
48
  ButtonLink.displayName = 'Button.Link';
45
49
  var _default = ButtonLink;
@@ -1,5 +1,6 @@
1
1
  var Accordion = function Accordion(_ref) {
2
- var spacing = _ref.spacing;
2
+ var spacing = _ref.spacing,
3
+ fontWeights = _ref.fontWeights;
3
4
  return {
4
5
  padding: {
5
6
  standard: spacing.medium,
@@ -10,6 +11,9 @@ var Accordion = function Accordion(_ref) {
10
11
  },
11
12
  gap: {
12
13
  header: spacing.xxxsmall
14
+ },
15
+ fontWeight: {
16
+ title: fontWeights.medium
13
17
  }
14
18
  };
15
19
  };
@@ -33,7 +33,7 @@ var Accordion = function Accordion(_ref) {
33
33
  }, disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n "]))));
34
34
  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) {
35
35
  var accordion = _ref5.theme.yoga.components.accordion;
36
- return "\n gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n ";
36
+ 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 ";
37
37
  }, disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n ", "\n "])), function (_ref6) {
38
38
  var text = _ref6.theme.yoga.colors.text;
39
39
  return "\n color: " + text.secundary + ";\n ";
@@ -123,6 +123,11 @@ var Button = function Button(_ref) {
123
123
  margin: {
124
124
  top: spacing.small,
125
125
  bottom: spacing.xxsmall
126
+ },
127
+ icon: {
128
+ margin: {
129
+ right: spacing.xxxsmall
130
+ }
126
131
  }
127
132
  }
128
133
  }
@@ -3,7 +3,7 @@ var _templateObject;
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
5
5
  import React from 'react';
6
- import { bool, string } from 'prop-types';
6
+ import { bool, string, oneOfType, node, func } from 'prop-types';
7
7
  import styled from 'styled-components';
8
8
  import { hexToRgb } from '@gympass/yoga-common';
9
9
  import Button from './Button';
@@ -12,7 +12,7 @@ var Link = styled(Button)(_templateObject || (_templateObject = _taggedTemplateL
12
12
  secondary = _ref.secondary,
13
13
  button = _ref.theme.yoga.components.button;
14
14
  var state = secondary ? 'secondary' : 'primary';
15
- 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 ";
15
+ 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 ";
16
16
  });
17
17
 
18
18
  var ButtonLink = function ButtonLink(props) {
@@ -22,12 +22,16 @@ var ButtonLink = function ButtonLink(props) {
22
22
  ButtonLink.propTypes = {
23
23
  disabled: bool,
24
24
  secondary: bool,
25
- href: string
25
+ href: string,
26
+
27
+ /** an Icon from yoga-icons package */
28
+ icon: oneOfType([node, func])
26
29
  };
27
30
  ButtonLink.defaultProps = {
28
31
  disabled: false,
29
32
  secondary: false,
30
- href: undefined
33
+ href: undefined,
34
+ icon: undefined
31
35
  };
32
36
  ButtonLink.displayName = 'Button.Link';
33
37
  export default ButtonLink;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.62.1",
3
+ "version": "7.63.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -52,7 +52,7 @@
52
52
  "react": ">=16",
53
53
  "styled-components": "^4.4.0"
54
54
  },
55
- "gitHead": "1d4b022729ad6c6b8f73a58a3c3fe8261a40b5c0",
55
+ "gitHead": "8e7b8879e740dbf484707010420fe7719fd6e4a0",
56
56
  "module": "./esm",
57
57
  "private": false,
58
58
  "react-native": "./cjs/index.native.js"