@synerise/ds-action-area 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@0.4.2...@synerise/ds-action-area@0.5.0) (2024-07-02)
+
+
+### Features
+
+* **action-area:** custom action content prop ([8335792](https://github.com/Synerise/synerise-design/commit/8335792f917a4247ba33c2fe86b0d881c43ca036))
+
+
+
+
+
 ## [0.4.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@0.4.1...@synerise/ds-action-area@0.4.2) (2024-06-27)
 
 **Note:** Version bump only for package @synerise/ds-action-area

package/README.md

@@ -26,16 +26,18 @@ import ActionArea from '@synerise/ds-action-area'
 
 ## API
 
-| Property    | Description                                      | Type                        | Default |
-| ---         | ---                                              | ---                         | ---     |
-| action      | Function called when user clicks on ActionButton | `Function`                  | -       |
-| actionLabel | Label of action button                           | `React.ReactNode`           | -       |
-| description | Description of ActionArea                        | `React.ReactNode`           | -       |
-| label       | Label of ActionArea                              | `React.ReactNode`           | -       |
-| buttonProps | optional additional button props                 | see ds-button               | -       |
-| isFullWidth | Set component width to 100% available space      | `boolean`                   | false   |
-| isError     | Set component state to invalid                   | `boolean`                   | false   |
-| errorText   | Text to display when is invalid state            | `React.ReactNode`           | -       |
-| className   | custom class name                                | `string`                    | -       |
-| style       | custom CSS style                                 | `React.CSSProperties`       | -       |
-
+Either both `action` & `actionLabel` OR `customAction` is required.
+
+| Property     | Description                                      | Type                  | Default |
+|--------------|--------------------------------------------------|-----------------------|---------|
+| action       | Function called when user clicks on ActionButton | `Function`            | -       |
+| actionLabel  | Label of action button                           | `React.ReactNode`     | -       |
+| customAction | content to render below description              | `React.ReactNode`     | -       |
+| description  | Description of ActionArea                        | `React.ReactNode`     | -       |
+| label        | Label of ActionArea                              | `React.ReactNode`     | -       |
+| buttonProps  | optional additional button props                 | see ds-button         | -       |
+| isFullWidth  | Set component width to 100% available space      | `boolean`             | false   |
+| isError      | Set component state to invalid                   | `boolean`             | false   |
+| errorText    | Text to display when is invalid state            | `React.ReactNode`     | -       |
+| className    | custom class name                                | `string`              | -       |
+| style        | custom CSS style                                 | `React.CSSProperties` | -       |

package/dist/ActionArea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ActionAreaProps } from './ActionArea.types';
 declare const ActionArea: {
-    ({ label, description, action, actionLabel, buttonProps, isFullWidth, isError, errorText, className, style, }: ActionAreaProps): React.JSX.Element;
+    ({ label, description, isFullWidth, isError, errorText, className, style, ...rest }: ActionAreaProps): React.JSX.Element;
     ActionAreaWrapper: import("styled-components").StyledComponent<"div", any, {
         isFullWidth?: boolean | undefined;
     }, never>;

package/dist/ActionArea.js

@@ -1,25 +1,27 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _excluded = ["label", "description", "isFullWidth", "isError", "errorText", "className", "style"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React from 'react';
 import classnames from 'classnames';
-import Button from '@synerise/ds-button';
 import { Title, Description } from '@synerise/ds-typography';
 import * as S from './ActionArea.styles';
+import { renderAction } from './ActionArea.utils';
 
 var ActionArea = function ActionArea(_ref) {
   var label = _ref.label,
       description = _ref.description,
-      action = _ref.action,
-      actionLabel = _ref.actionLabel,
-      buttonProps = _ref.buttonProps,
       _ref$isFullWidth = _ref.isFullWidth,
       isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
       _ref$isError = _ref.isError,
       isError = _ref$isError === void 0 ? false : _ref$isError,
       errorText = _ref.errorText,
       className = _ref.className,
-      style = _ref.style;
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var isErrorText = isError && Boolean(errorText);
+  var actionContent = renderAction(rest);
   return /*#__PURE__*/React.createElement(S.ActionAreaWrapper, {
     style: style,
     className: classnames('ds-action-area', className),
@@ -29,10 +31,7 @@ var ActionArea = function ActionArea(_ref) {
     "data-testid": "action-area-content"
   }, label && /*#__PURE__*/React.createElement(Title, {
     level: 6
-  }, label), /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(Button, _extends({
-    type: "primary",
-    onClick: action
-  }, buttonProps), actionLabel)), isErrorText && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText));
+  }, label), /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(S.ActionAreaAction, null, actionContent)), isErrorText && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText));
 };
 
 ActionArea.ActionAreaWrapper = S.ActionAreaWrapper;

package/dist/ActionArea.styles.d.ts

@@ -4,4 +4,5 @@ export declare const ActionAreaWrapper: import("styled-components").StyledCompon
 export declare const ActionAreaContent: import("styled-components").StyledComponent<"div", any, {
     isError?: boolean | undefined;
 }, never>;
+export declare const ActionAreaAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ActionArea.styles.js

@@ -22,9 +22,13 @@ export var ActionAreaContent = styled.div.withConfig({
       theme = _ref4.theme;
   return isError && "border-color: " + theme.palette['red-600'] + ";";
 }, Description);
+export var ActionAreaAction = styled.div.withConfig({
+  displayName: "ActionAreastyles__ActionAreaAction",
+  componentId: "sc-10ey0kr-2"
+})([""]);
 export var ErrorText = styled.div.withConfig({
   displayName: "ActionAreastyles__ErrorText",
-  componentId: "sc-10ey0kr-2"
+  componentId: "sc-10ey0kr-3"
 })(["margin-top:8px;color:", ";"], function (_ref5) {
   var theme = _ref5.theme;
   return theme.palette['red-600'];

package/dist/ActionArea.types.d.ts

@@ -1,9 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonProps } from '@synerise/ds-button';
-export type ActionAreaProps = {
-    action: () => void;
-    actionLabel: ReactNode;
-    buttonProps?: Partial<ButtonProps>;
+type CommonProps = {
     className?: string;
     description: ReactNode;
     errorText?: ReactNode;
@@ -12,3 +9,13 @@ export type ActionAreaProps = {
     label?: ReactNode;
     style?: CSSProperties;
 };
+export type ActionAreaWithCustomActionProps = {
+    customAction: ReactNode;
+};
+export type ActionAreaWithStandardActionProps = {
+    action: () => void;
+    actionLabel: ReactNode;
+    buttonProps?: Partial<ButtonProps>;
+};
+export type ActionAreaProps = CommonProps & (ActionAreaWithCustomActionProps | ActionAreaWithStandardActionProps);
+export {};

package/dist/ActionArea.utils.d.ts

@@ -0,0 +1,3 @@
+import { ActionAreaWithCustomActionProps, ActionAreaWithStandardActionProps } from 'ActionArea.types';
+import type { ReactNode } from 'react';
+export declare const renderAction: (props: ActionAreaWithCustomActionProps | ActionAreaWithStandardActionProps) => ReactNode;

package/dist/ActionArea.utils.js

@@ -0,0 +1,23 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Button from '@synerise/ds-button';
+
+var isCustomActionArea = function isCustomActionArea(props) {
+  return 'customAction' in props;
+};
+
+export var renderAction = function renderAction(props) {
+  if (isCustomActionArea(props)) {
+    var customAction = props.customAction;
+    return customAction;
+  }
+
+  var action = props.action,
+      actionLabel = props.actionLabel,
+      buttonProps = props.buttonProps;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    type: "primary",
+    onClick: action
+  }, buttonProps), actionLabel);
+};

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from './ActionArea';
+export type { ActionAreaProps, ActionAreaWithStandardActionProps, ActionAreaWithCustomActionProps, } from './ActionArea.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-action-area",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "ActionArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -47,5 +47,5 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
+  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
 }