glints-aries 4.0.285 → 4.0.287

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.
Files changed (11) hide show
  1. package/es/@next/Select/components/Activator/ActivatorSelect.js +1 -1
  2. package/es/@next/Tag/Tag.js +1 -1
  3. package/es/@next/Tooltip/Tooltip.d.ts +3 -0
  4. package/es/@next/Tooltip/Tooltip.js +15 -8
  5. package/es/@next/Typography/TypographyStyles.js +2 -2
  6. package/lib/@next/Select/components/Activator/ActivatorSelect.js +1 -1
  7. package/lib/@next/Tag/Tag.js +1 -1
  8. package/lib/@next/Tooltip/Tooltip.d.ts +3 -0
  9. package/lib/@next/Tooltip/Tooltip.js +15 -8
  10. package/lib/@next/Typography/TypographyStyles.js +2 -2
  11. package/package.json +1 -1
package/es/@next/Select/components/Activator/ActivatorSelect.js CHANGED
@@ -65,7 +65,7 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
65
65
  }),
66
66
  textColor: Blue.S99
67
67
  }, selectedLabels[0]), selectedValues.length > 1 && /*#__PURE__*/React.createElement(Typography, {
68
- variant: "caption",
68
+ variant: "subtitle2",
69
69
  color: disabled ? Neutral.B85 : Neutral.B40
70
70
  }, "... and ", selectedValues.length - 1, " more"));
71
71
  }
package/es/@next/Tag/Tag.js CHANGED
@@ -24,7 +24,7 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
24
24
  return Neutral.B18;
25
25
  };
26
26
  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/React.createElement(Typography, {
27
- variant: "caption",
27
+ variant: "subtitle2",
28
28
  color: handleTextColor(),
29
29
  as: 'span'
30
30
  }, children) : children;
package/es/@next/Tooltip/Tooltip.d.ts CHANGED
@@ -6,8 +6,11 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ /** if true, tooltip will be shown on click instead of hover */
9
10
  clickable?: boolean;
11
+ /** how long tooltip will still be shown after clicked or when not hovered anymore */
10
12
  timeout?: number;
13
+ /** if clickable it true, onClick will be called when tooltip is clicked */
11
14
  onClick?: () => void;
12
15
  };
13
16
  export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
package/es/@next/Tooltip/Tooltip.js CHANGED
@@ -118,18 +118,25 @@ export var Tooltip = function Tooltip(_ref) {
118
118
  variant: "subtitle2"
119
119
  }, content) : content;
120
120
  var handleMouseEnter = function handleMouseEnter() {
121
- return setIsActive(true);
121
+ if (!clickable) setIsActive(true);
122
122
  };
123
123
  var handleMouseLeave = function handleMouseLeave() {
124
- setIsActive(false);
125
- handleClick();
124
+ if (!clickable) {
125
+ setIsActive(false);
126
+ handleAnimation();
127
+ }
128
+ };
129
+ var handleClick = function handleClick() {
130
+ if (clickable) {
131
+ onClick();
132
+ handleAnimation();
133
+ }
126
134
  };
127
135
  var timeoutRef = useRef(null);
128
136
  var _useState4 = useState(false),
129
137
  animate = _useState4[0],
130
138
  setAnimate = _useState4[1];
131
- var handleClick = function handleClick() {
132
- onClick();
139
+ var handleAnimation = function handleAnimation() {
133
140
  // if you click during the tooltip's lifespan, it should reset the timeout
134
141
  if (timeoutRef.current) {
135
142
  clearTimeout(timeoutRef.current);
@@ -147,9 +154,9 @@ export var Tooltip = function Tooltip(_ref) {
147
154
  };
148
155
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipContainer, {
149
156
  ref: elRef,
150
- onMouseEnter: !clickable && handleMouseEnter,
151
- onMouseLeave: !clickable && handleMouseLeave,
152
- onClick: clickable && handleClick
157
+ onMouseEnter: handleMouseEnter,
158
+ onMouseLeave: handleMouseLeave,
159
+ onClick: handleClick
153
160
  }, children), isActive && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, {
154
161
  "data-position": position,
155
162
  className: animate ? 'closed-animation' : '',
package/es/@next/Typography/TypographyStyles.js CHANGED
@@ -12,8 +12,8 @@ export var subtitle1 = css(["font-family:", ",sans-serif;font-weight:600;font-si
12
12
  export var subtitle2 = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], NotoSans, Breakpoints.large);
13
13
  export var body1 = css(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], NotoSans, Breakpoints.large);
14
14
  export var body2 = css(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], NotoSans, Breakpoints.large);
15
- export var button = css(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:1.25px;@media (max-width:", "){font-weight:600;line-height:150%;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
16
- export var caption = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:0.4px;@media (max-width:", "){font-weight:500;font-size:12px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
15
+ export var button = css(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){font-weight:600;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
16
+ export var caption = css(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], NotoSans, Breakpoints.large);
17
17
  export var overline = css(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
18
18
  export var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
19
19
  export var StyledTypography = styled.p.withConfig({
package/lib/@next/Select/components/Activator/ActivatorSelect.js CHANGED
@@ -72,7 +72,7 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
72
72
  }),
73
73
  textColor: _colors.Blue.S99
74
74
  }, selectedLabels[0]), selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
75
- variant: "caption",
75
+ variant: "subtitle2",
76
76
  color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
77
77
  }, "... and ", selectedValues.length - 1, " more"));
78
78
  }
package/lib/@next/Tag/Tag.js CHANGED
@@ -29,7 +29,7 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
29
29
  return _colors.Neutral.B18;
30
30
  };
31
31
  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
32
- variant: "caption",
32
+ variant: "subtitle2",
33
33
  color: handleTextColor(),
34
34
  as: 'span'
35
35
  }, children) : children;
package/lib/@next/Tooltip/Tooltip.d.ts CHANGED
@@ -6,8 +6,11 @@ export declare type TooltipProps = {
6
6
  children: React.ReactNode;
7
7
  content: React.ReactNode;
8
8
  zIndex?: number;
9
+ /** if true, tooltip will be shown on click instead of hover */
9
10
  clickable?: boolean;
11
+ /** how long tooltip will still be shown after clicked or when not hovered anymore */
10
12
  timeout?: number;
13
+ /** if clickable it true, onClick will be called when tooltip is clicked */
11
14
  onClick?: () => void;
12
15
  };
13
16
  export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, }: TooltipProps) => JSX.Element;
package/lib/@next/Tooltip/Tooltip.js CHANGED
@@ -124,18 +124,25 @@ var Tooltip = function Tooltip(_ref) {
124
124
  variant: "subtitle2"
125
125
  }, content) : content;
126
126
  var handleMouseEnter = function handleMouseEnter() {
127
- return setIsActive(true);
127
+ if (!clickable) setIsActive(true);
128
128
  };
129
129
  var handleMouseLeave = function handleMouseLeave() {
130
- setIsActive(false);
131
- handleClick();
130
+ if (!clickable) {
131
+ setIsActive(false);
132
+ handleAnimation();
133
+ }
134
+ };
135
+ var handleClick = function handleClick() {
136
+ if (clickable) {
137
+ onClick();
138
+ handleAnimation();
139
+ }
132
140
  };
133
141
  var timeoutRef = (0, _react.useRef)(null);
134
142
  var _useState4 = (0, _react.useState)(false),
135
143
  animate = _useState4[0],
136
144
  setAnimate = _useState4[1];
137
- var handleClick = function handleClick() {
138
- onClick();
145
+ var handleAnimation = function handleAnimation() {
139
146
  // if you click during the tooltip's lifespan, it should reset the timeout
140
147
  if (timeoutRef.current) {
141
148
  clearTimeout(timeoutRef.current);
@@ -153,9 +160,9 @@ var Tooltip = function Tooltip(_ref) {
153
160
  };
154
161
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipContainer, {
155
162
  ref: elRef,
156
- onMouseEnter: !clickable && handleMouseEnter,
157
- onMouseLeave: !clickable && handleMouseLeave,
158
- onClick: clickable && handleClick
163
+ onMouseEnter: handleMouseEnter,
164
+ onMouseLeave: handleMouseLeave,
165
+ onClick: handleClick
159
166
  }, children), isActive && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltip, {
160
167
  "data-position": position,
161
168
  className: animate ? 'closed-animation' : '',
package/lib/@next/Typography/TypographyStyles.js CHANGED
@@ -28,9 +28,9 @@ var body1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight
28
28
  exports.body1 = body1;
29
29
  var body2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
30
30
  exports.body2 = body2;
31
- var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:1.25px;@media (max-width:", "){font-weight:600;line-height:150%;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
31
+ var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){font-weight:600;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
32
32
  exports.button = button;
33
- var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:0.4px;@media (max-width:", "){font-weight:500;font-size:12px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
33
+ var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], _fonts.NotoSans, Breakpoints.large);
34
34
  exports.caption = caption;
35
35
  var overline = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
36
36
  exports.overline = overline;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.285",
3
+ "version": "4.0.287",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",