glints-aries 4.0.271 → 4.0.272

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 (13) hide show
  1. package/es/@next/Button/ButtonStyle.js +2 -2
  2. package/es/@next/Card/Card.d.ts +2 -0
  3. package/es/@next/Card/Card.js +18 -2
  4. package/es/@next/Card/CardStyle.d.ts +2 -0
  5. package/es/@next/Card/CardStyle.js +11 -3
  6. package/es/@next/Tooltip/Tooltip.js +1 -1
  7. package/lib/@next/Button/ButtonStyle.js +2 -2
  8. package/lib/@next/Card/Card.d.ts +2 -0
  9. package/lib/@next/Card/Card.js +17 -1
  10. package/lib/@next/Card/CardStyle.d.ts +2 -0
  11. package/lib/@next/Card/CardStyle.js +14 -4
  12. package/lib/@next/Tooltip/Tooltip.js +1 -1
  13. package/package.json +1 -1
package/es/@next/Button/ButtonStyle.js CHANGED
@@ -5,8 +5,8 @@ import { Neutral } from '../utilities/colors';
5
5
  import { button, buttonFocused, insetButtonPressed } from '../utilities/dropShadow';
6
6
  import { space12, space16, space24, space4, space8 } from '../utilities/spacing';
7
7
  var defaultButtonSizeStyle = "\n min-width: 75px;\n height: 36px;\n padding: " + space8 + " " + space16 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 71px;\n }\n";
8
- var largeButtonSizeStyle = "\nmin-width: 91px;\n height: 44px;\n padding: " + space12 + " " + space24 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 87px;\n }\n";
9
- var slimButtonSizeStyle = "\nmin-width: 67px;\n height: 32px;\n padding: " + space4 + " " + space12 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 63px;\n }\n";
8
+ var largeButtonSizeStyle = "\n min-width: 91px;\n height: 44px;\n padding: " + space12 + " " + space24 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 87px;\n }\n";
9
+ var slimButtonSizeStyle = "\n padding: " + space4 + ";\n\n p {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n";
10
10
  var buttonSizeStyleMap = {
11
11
  "default": defaultButtonSizeStyle,
12
12
  slim: slimButtonSizeStyle,
package/es/@next/Card/Card.d.ts CHANGED
@@ -6,6 +6,8 @@ export declare type CardProps = {
6
6
  children?: React.ReactNode;
7
7
  primaryAction?: ComponentAction;
8
8
  secondaryAction?: ComponentAction;
9
+ headerPrimaryAction?: ComponentAction;
10
+ headerSecondaryAction?: ComponentAction;
9
11
  actionsAlignment?: 'left' | 'right';
10
12
  };
11
13
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
package/es/@next/Card/Card.js CHANGED
@@ -1,14 +1,18 @@
1
1
  import React from 'react';
2
2
  import { Button, PrimaryButton } from '../Button';
3
+ import { DestructivePlainButton } from '../Button/DestructivePlainButtonStyle';
4
+ import { PlainButton } from '../Button/PlainButtonStyle';
3
5
  import { ButtonGroup } from '../ButtonGroup';
4
6
  import { Typography } from '../Typography';
5
- import { StyledCardActionWrapper, StyledCardContainer, StyledCardContentWrapper, StyledCardHeaderSection, StyledCardHeaderSectionHalf, StyledCardHeaderWrapper } from './CardStyle';
7
+ import { StyledCardActionWrapper, StyledCardContainer, StyledCardContentWrapper, StyledCardHeaderLeftContainer, StyledCardHeaderRightContainer, StyledCardHeaderSection, StyledCardHeaderSectionHalf, StyledCardHeaderWrapper } from './CardStyle';
6
8
  import { Section } from './Section';
7
9
  var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
8
10
  var heading = _ref.heading,
9
11
  subheading = _ref.subheading,
10
12
  primaryAction = _ref.primaryAction,
11
13
  secondaryAction = _ref.secondaryAction,
14
+ headerPrimaryAction = _ref.headerPrimaryAction,
15
+ headerSecondaryAction = _ref.headerSecondaryAction,
12
16
  _ref$actionsAlignment = _ref.actionsAlignment,
13
17
  actionsAlignment = _ref$actionsAlignment === void 0 ? 'right' : _ref$actionsAlignment,
14
18
  children = _ref.children;
@@ -33,7 +37,19 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
33
37
  var showActions = !!primaryAction || !!secondaryAction;
34
38
  return /*#__PURE__*/React.createElement(StyledCardContainer, {
35
39
  ref: ref
36
- }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
40
+ }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, /*#__PURE__*/React.createElement(StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/React.createElement(StyledCardHeaderRightContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
41
+ fullWidth: false,
42
+ isButtonWrapped: true,
43
+ style: {
44
+ gap: '4px'
45
+ }
46
+ }, headerSecondaryAction && /*#__PURE__*/React.createElement(DestructivePlainButton, {
47
+ onClick: headerSecondaryAction.action,
48
+ size: "slim"
49
+ }, headerSecondaryAction.label), headerPrimaryAction && /*#__PURE__*/React.createElement(PlainButton, {
50
+ onClick: headerPrimaryAction.action,
51
+ size: "slim"
52
+ }, headerPrimaryAction.label)))), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
37
53
  "data-actions": showActions
38
54
  }, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
39
55
  "data-align": actionsAlignment
package/es/@next/Card/CardStyle.d.ts CHANGED
@@ -6,3 +6,5 @@ export declare const StyledCardContentWrapper: import("styled-components").Style
6
6
  export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
8
  export declare const StyledCustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const StyledCardHeaderLeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const StyledCardHeaderRightContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
package/es/@next/Card/CardStyle.js CHANGED
@@ -10,11 +10,11 @@ export var StyledCardContainer = styled.div.withConfig({
10
10
  export var StyledCardHeaderWrapper = styled.div.withConfig({
11
11
  displayName: "CardStyle__StyledCardHeaderWrapper",
12
12
  componentId: "sc-tpku8j-1"
13
- })(["display:flex;padding:", " ", " 20px;flex-wrap:wrap;flex-direction:column;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], space24, space24, Neutral.B85, Breakpoints.large, space12, space16);
13
+ })(["display:flex;padding:", " ", " 20px;flex-wrap:nowrap;flex-direction:row;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], space24, space24, Neutral.B85, Breakpoints.large, space12, space16);
14
14
  export var StyledCardHeaderSection = styled.div.withConfig({
15
15
  displayName: "CardStyle__StyledCardHeaderSection",
16
16
  componentId: "sc-tpku8j-2"
17
- })(["flex:0 0 100%;"]);
17
+ })(["flex:0 0 100%;display:flex;flex-direction:row;align-items:center;"]);
18
18
  export var StyledCardHeaderSectionHalf = styled.div.withConfig({
19
19
  displayName: "CardStyle__StyledCardHeaderSectionHalf",
20
20
  componentId: "sc-tpku8j-3"
@@ -34,4 +34,12 @@ export var StyledCardActionWrapper = styled.div.withConfig({
34
34
  export var StyledCustomHeader = styled.div.withConfig({
35
35
  displayName: "CardStyle__StyledCustomHeader",
36
36
  componentId: "sc-tpku8j-7"
37
- })(["& > *{margin:0;}"]);
37
+ })(["& > *{margin:0;}"]);
38
+ export var StyledCardHeaderLeftContainer = styled.div.withConfig({
39
+ displayName: "CardStyle__StyledCardHeaderLeftContainer",
40
+ componentId: "sc-tpku8j-8"
41
+ })(["flex:1;flex-direction:column;display:flex;align-items:flex-start;"]);
42
+ export var StyledCardHeaderRightContainer = styled.div.withConfig({
43
+ displayName: "CardStyle__StyledCardHeaderRightContainer",
44
+ componentId: "sc-tpku8j-9"
45
+ })(["margin-left:16px;margin-right:auto;display:flex;flex-direction:row;align-items:center;@media (max-width:", "){align-items:flex-end;}"], Breakpoints.large);
package/es/@next/Tooltip/Tooltip.js CHANGED
@@ -110,7 +110,7 @@ export var Tooltip = function Tooltip(_ref) {
110
110
  }, [isActive, position]);
111
111
  var contentMarkup = typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography, {
112
112
  as: "div",
113
- variant: "body1"
113
+ variant: "subtitle2"
114
114
  }, content) : content;
115
115
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipContainer, {
116
116
  ref: elRef,
package/lib/@next/Button/ButtonStyle.js CHANGED
@@ -12,8 +12,8 @@ var _spacing = require("../utilities/spacing");
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
14
  var defaultButtonSizeStyle = "\n min-width: 75px;\n height: 36px;\n padding: " + _spacing.space8 + " " + _spacing.space16 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 71px;\n }\n";
15
- var largeButtonSizeStyle = "\nmin-width: 91px;\n height: 44px;\n padding: " + _spacing.space12 + " " + _spacing.space24 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 87px;\n }\n";
16
- var slimButtonSizeStyle = "\nmin-width: 67px;\n height: 32px;\n padding: " + _spacing.space4 + " " + _spacing.space12 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 63px;\n }\n";
15
+ var largeButtonSizeStyle = "\n min-width: 91px;\n height: 44px;\n padding: " + _spacing.space12 + " " + _spacing.space24 + ";\n\n @media (max-width: " + Breakpoints.large + ") {\n min-width: 87px;\n }\n";
16
+ var slimButtonSizeStyle = "\n padding: " + _spacing.space4 + ";\n\n p {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n";
17
17
  var buttonSizeStyleMap = {
18
18
  "default": defaultButtonSizeStyle,
19
19
  slim: slimButtonSizeStyle,
package/lib/@next/Card/Card.d.ts CHANGED
@@ -6,6 +6,8 @@ export declare type CardProps = {
6
6
  children?: React.ReactNode;
7
7
  primaryAction?: ComponentAction;
8
8
  secondaryAction?: ComponentAction;
9
+ headerPrimaryAction?: ComponentAction;
10
+ headerSecondaryAction?: ComponentAction;
9
11
  actionsAlignment?: 'left' | 'right';
10
12
  };
11
13
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
package/lib/@next/Card/Card.js CHANGED
@@ -5,6 +5,8 @@ exports.__esModule = true;
5
5
  exports.Card = void 0;
6
6
  var _react = _interopRequireDefault(require("react"));
7
7
  var _Button = require("../Button");
8
+ var _DestructivePlainButtonStyle = require("../Button/DestructivePlainButtonStyle");
9
+ var _PlainButtonStyle = require("../Button/PlainButtonStyle");
8
10
  var _ButtonGroup = require("../ButtonGroup");
9
11
  var _Typography = require("../Typography");
10
12
  var _CardStyle = require("./CardStyle");
@@ -14,6 +16,8 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
14
16
  subheading = _ref.subheading,
15
17
  primaryAction = _ref.primaryAction,
16
18
  secondaryAction = _ref.secondaryAction,
19
+ headerPrimaryAction = _ref.headerPrimaryAction,
20
+ headerSecondaryAction = _ref.headerSecondaryAction,
17
21
  _ref$actionsAlignment = _ref.actionsAlignment,
18
22
  actionsAlignment = _ref$actionsAlignment === void 0 ? 'right' : _ref$actionsAlignment,
19
23
  children = _ref.children;
@@ -38,7 +42,19 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
38
42
  var showActions = !!primaryAction || !!secondaryAction;
39
43
  return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContainer, {
40
44
  ref: ref
41
- }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, {
45
+ }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderRightContainer, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, {
46
+ fullWidth: false,
47
+ isButtonWrapped: true,
48
+ style: {
49
+ gap: '4px'
50
+ }
51
+ }, headerSecondaryAction && /*#__PURE__*/_react["default"].createElement(_DestructivePlainButtonStyle.DestructivePlainButton, {
52
+ onClick: headerSecondaryAction.action,
53
+ size: "slim"
54
+ }, headerSecondaryAction.label), headerPrimaryAction && /*#__PURE__*/_react["default"].createElement(_PlainButtonStyle.PlainButton, {
55
+ onClick: headerPrimaryAction.action,
56
+ size: "slim"
57
+ }, headerPrimaryAction.label)))), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, {
42
58
  "data-actions": showActions
43
59
  }, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
44
60
  "data-align": actionsAlignment
package/lib/@next/Card/CardStyle.d.ts CHANGED
@@ -6,3 +6,5 @@ export declare const StyledCardContentWrapper: import("styled-components").Style
6
6
  export declare const StyledCardSection: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const StyledCardActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
8
  export declare const StyledCustomHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const StyledCardHeaderLeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const StyledCardHeaderRightContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
package/lib/@next/Card/CardStyle.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
- exports.StyledCustomHeader = exports.StyledCardSection = exports.StyledCardHeaderWrapper = exports.StyledCardHeaderSectionHalf = exports.StyledCardHeaderSection = exports.StyledCardContentWrapper = exports.StyledCardContainer = exports.StyledCardActionWrapper = void 0;
5
+ exports.StyledCustomHeader = exports.StyledCardSection = exports.StyledCardHeaderWrapper = exports.StyledCardHeaderSectionHalf = exports.StyledCardHeaderSection = exports.StyledCardHeaderRightContainer = exports.StyledCardHeaderLeftContainer = exports.StyledCardContentWrapper = exports.StyledCardContainer = exports.StyledCardActionWrapper = void 0;
6
6
  var _styledComponents = _interopRequireDefault(require("styled-components"));
7
7
  var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
8
8
  var _borderRadius = require("../utilities/borderRadius");
@@ -18,12 +18,12 @@ exports.StyledCardContainer = StyledCardContainer;
18
18
  var StyledCardHeaderWrapper = _styledComponents["default"].div.withConfig({
19
19
  displayName: "CardStyle__StyledCardHeaderWrapper",
20
20
  componentId: "sc-tpku8j-1"
21
- })(["display:flex;padding:", " ", " 20px;flex-wrap:wrap;flex-direction:column;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], _spacing.space24, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space12, _spacing.space16);
21
+ })(["display:flex;padding:", " ", " 20px;flex-wrap:nowrap;flex-direction:row;height:max-content;border-bottom:solid 1px ", ";@media (max-width:", "){padding:", " ", " 10px;}"], _spacing.space24, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space12, _spacing.space16);
22
22
  exports.StyledCardHeaderWrapper = StyledCardHeaderWrapper;
23
23
  var StyledCardHeaderSection = _styledComponents["default"].div.withConfig({
24
24
  displayName: "CardStyle__StyledCardHeaderSection",
25
25
  componentId: "sc-tpku8j-2"
26
- })(["flex:0 0 100%;"]);
26
+ })(["flex:0 0 100%;display:flex;flex-direction:row;align-items:center;"]);
27
27
  exports.StyledCardHeaderSection = StyledCardHeaderSection;
28
28
  var StyledCardHeaderSectionHalf = _styledComponents["default"].div.withConfig({
29
29
  displayName: "CardStyle__StyledCardHeaderSectionHalf",
@@ -49,4 +49,14 @@ var StyledCustomHeader = _styledComponents["default"].div.withConfig({
49
49
  displayName: "CardStyle__StyledCustomHeader",
50
50
  componentId: "sc-tpku8j-7"
51
51
  })(["& > *{margin:0;}"]);
52
- exports.StyledCustomHeader = StyledCustomHeader;
52
+ exports.StyledCustomHeader = StyledCustomHeader;
53
+ var StyledCardHeaderLeftContainer = _styledComponents["default"].div.withConfig({
54
+ displayName: "CardStyle__StyledCardHeaderLeftContainer",
55
+ componentId: "sc-tpku8j-8"
56
+ })(["flex:1;flex-direction:column;display:flex;align-items:flex-start;"]);
57
+ exports.StyledCardHeaderLeftContainer = StyledCardHeaderLeftContainer;
58
+ var StyledCardHeaderRightContainer = _styledComponents["default"].div.withConfig({
59
+ displayName: "CardStyle__StyledCardHeaderRightContainer",
60
+ componentId: "sc-tpku8j-9"
61
+ })(["margin-left:16px;margin-right:auto;display:flex;flex-direction:row;align-items:center;@media (max-width:", "){align-items:flex-end;}"], Breakpoints.large);
62
+ exports.StyledCardHeaderRightContainer = StyledCardHeaderRightContainer;
package/lib/@next/Tooltip/Tooltip.js CHANGED
@@ -116,7 +116,7 @@ var Tooltip = function Tooltip(_ref) {
116
116
  }, [isActive, position]);
117
117
  var contentMarkup = typeof content === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
118
118
  as: "div",
119
- variant: "body1"
119
+ variant: "subtitle2"
120
120
  }, content) : content;
121
121
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipContainer, {
122
122
  ref: elRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.271",
3
+ "version": "4.0.272",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",