glints-aries 4.0.322 → 4.0.324

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 (9) hide show
  1. package/es/@next/Card/Card.d.ts +2 -0
  2. package/es/@next/Card/Card.js +11 -7
  3. package/es/@next/Card/Card.stories.d.ts +1 -0
  4. package/es/@next/RadioButton/RadioButtonStyle.js +1 -1
  5. package/lib/@next/Card/Card.d.ts +2 -0
  6. package/lib/@next/Card/Card.js +11 -7
  7. package/lib/@next/Card/Card.stories.d.ts +1 -0
  8. package/lib/@next/RadioButton/RadioButtonStyle.js +1 -1
  9. package/package.json +1 -1
package/es/@next/Card/Card.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type CardProps = {
9
9
  headerPrimaryAction?: ComponentAction;
10
10
  headerSecondaryAction?: ComponentAction;
11
11
  actionsAlignment?: 'left' | 'right';
12
+ /** Defining custom actions will not show primary and secondary actions */
13
+ customActions?: React.ReactNode;
12
14
  };
13
15
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
14
16
  Section: ({ children }: {
package/es/@next/Card/Card.js CHANGED
@@ -12,6 +12,7 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
12
12
  subheading = _ref.subheading,
13
13
  primaryAction = _ref.primaryAction,
14
14
  secondaryAction = _ref.secondaryAction,
15
+ customActions = _ref.customActions,
15
16
  headerPrimaryAction = _ref.headerPrimaryAction,
16
17
  headerSecondaryAction = _ref.headerSecondaryAction,
17
18
  _ref$actionsAlignment = _ref.actionsAlignment,
@@ -34,8 +35,14 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
34
35
  }
35
36
  return /*#__PURE__*/React.createElement(StyledCardHeaderSection, null, subHeadingMarkup);
36
37
  };
38
+ var defaultActionContent = /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
39
+ onClick: secondaryAction.action
40
+ }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
41
+ onClick: primaryAction.action
42
+ }, primaryAction), primaryAction.label));
43
+ var actionsContent = customActions ? customActions : defaultActionContent;
37
44
  var showHeader = !!heading || !!subheading;
38
- var showActions = !!primaryAction || !!secondaryAction;
45
+ var showActions = !!customActions || !!primaryAction || !!secondaryAction;
39
46
  return /*#__PURE__*/React.createElement(StyledCardContainer, {
40
47
  ref: ref
41
48
  }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, /*#__PURE__*/React.createElement(StyledCardHeaderLeftContainer, null, headerMarkup()), /*#__PURE__*/React.createElement(StyledCardHeaderRightContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
@@ -50,12 +57,9 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
50
57
  }, headerPrimaryAction), headerPrimaryAction.label)))), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
51
58
  "data-actions": showActions
52
59
  }, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
53
- "data-align": actionsAlignment
54
- }, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
55
- onClick: secondaryAction.action
56
- }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
57
- onClick: primaryAction.action
58
- }, primaryAction), primaryAction.label))));
60
+ "data-align": actionsAlignment,
61
+ className: "card-actions-wrapper"
62
+ }, actionsContent));
59
63
  });
60
64
  export var Card = Object.assign(CardComponent, {
61
65
  Section: Section
package/es/@next/Card/Card.stories.d.ts CHANGED
@@ -7,3 +7,4 @@ export declare const PrimaryActionOnly: any;
7
7
  export declare const SecondaryActionOnly: any;
8
8
  export declare const DisabledActions: any;
9
9
  export declare const CustomHeadingSubHeading: any;
10
+ export declare const CustomActions: any;
package/es/@next/RadioButton/RadioButtonStyle.js CHANGED
@@ -9,7 +9,7 @@ export var RadioButtonWrapper = styled.label.withConfig({
9
9
  export var RadioButtonInput = styled.input.withConfig({
10
10
  displayName: "RadioButtonStyle__RadioButtonInput",
11
11
  componentId: "sc-138orlx-1"
12
- })(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], Colors.Neutral.B68, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, space4, Colors.Neutral.B68, Colors.Neutral.B100, Colors.Blue.S54, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Blue.S99, Colors.Blue.S99, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Neutral.B85);
12
+ })(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);&::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;&::after{width:10px;height:10px;margin:", ";}}&:hover{border-color:", ";}&:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}&:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}&:checked{border-color:", ";&::after{background-color:", ";}&:disabled{background-color:", ";border-color:", ";&::after{background-color:", ";}}}"], Colors.Neutral.B68, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, space4, Colors.Neutral.B68, Colors.Neutral.B100, Colors.Blue.S54, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Blue.S99, Colors.Blue.S99, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Neutral.B85);
13
13
  export var LabelWrapper = styled.div.withConfig({
14
14
  displayName: "RadioButtonStyle__LabelWrapper",
15
15
  componentId: "sc-138orlx-2"
package/lib/@next/Card/Card.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type CardProps = {
9
9
  headerPrimaryAction?: ComponentAction;
10
10
  headerSecondaryAction?: ComponentAction;
11
11
  actionsAlignment?: 'left' | 'right';
12
+ /** Defining custom actions will not show primary and secondary actions */
13
+ customActions?: React.ReactNode;
12
14
  };
13
15
  export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
14
16
  Section: ({ children }: {
package/lib/@next/Card/Card.js CHANGED
@@ -17,6 +17,7 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
17
17
  subheading = _ref.subheading,
18
18
  primaryAction = _ref.primaryAction,
19
19
  secondaryAction = _ref.secondaryAction,
20
+ customActions = _ref.customActions,
20
21
  headerPrimaryAction = _ref.headerPrimaryAction,
21
22
  headerSecondaryAction = _ref.headerSecondaryAction,
22
23
  _ref$actionsAlignment = _ref.actionsAlignment,
@@ -39,8 +40,14 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
39
40
  }
40
41
  return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderSection, null, subHeadingMarkup);
41
42
  };
43
+ var defaultActionContent = /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
44
+ onClick: secondaryAction.action
45
+ }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({
46
+ onClick: primaryAction.action
47
+ }, primaryAction), primaryAction.label));
48
+ var actionsContent = customActions ? customActions : defaultActionContent;
42
49
  var showHeader = !!heading || !!subheading;
43
- var showActions = !!primaryAction || !!secondaryAction;
50
+ var showActions = !!customActions || !!primaryAction || !!secondaryAction;
44
51
  return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContainer, {
45
52
  ref: ref
46
53
  }, 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, {
@@ -55,12 +62,9 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
55
62
  }, headerPrimaryAction), headerPrimaryAction.label)))), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, {
56
63
  "data-actions": showActions
57
64
  }, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
58
- "data-align": actionsAlignment
59
- }, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
60
- onClick: secondaryAction.action
61
- }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, (0, _extends2["default"])({
62
- onClick: primaryAction.action
63
- }, primaryAction), primaryAction.label))));
65
+ "data-align": actionsAlignment,
66
+ className: "card-actions-wrapper"
67
+ }, actionsContent));
64
68
  });
65
69
  var Card = Object.assign(CardComponent, {
66
70
  Section: _Section.Section
package/lib/@next/Card/Card.stories.d.ts CHANGED
@@ -7,3 +7,4 @@ export declare const PrimaryActionOnly: any;
7
7
  export declare const SecondaryActionOnly: any;
8
8
  export declare const DisabledActions: any;
9
9
  export declare const CustomHeadingSubHeading: any;
10
+ export declare const CustomActions: any;
package/lib/@next/RadioButton/RadioButtonStyle.js CHANGED
@@ -15,7 +15,7 @@ exports.RadioButtonWrapper = RadioButtonWrapper;
15
15
  var RadioButtonInput = _styledComponents["default"].input.withConfig({
16
16
  displayName: "RadioButtonStyle__RadioButtonInput",
17
17
  componentId: "sc-138orlx-1"
18
- })(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
18
+ })(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);&::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;&::after{width:10px;height:10px;margin:", ";}}&:hover{border-color:", ";}&:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}&:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}&:checked{border-color:", ";&::after{background-color:", ";}&:disabled{background-color:", ";border-color:", ";&::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
19
19
  exports.RadioButtonInput = RadioButtonInput;
20
20
  var LabelWrapper = _styledComponents["default"].div.withConfig({
21
21
  displayName: "RadioButtonStyle__LabelWrapper",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.322",
3
+ "version": "4.0.324",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",