@synerise/ds-action-area 0.3.25 → 0.4.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@0.4.0...@synerise/ds-action-area@0.4.1) (2024-06-21)
+
+
+### Bug Fixes
+
+* **action-area:** add background color on validation ([78b4ad8](https://github.com/Synerise/synerise-design/commit/78b4ad86719427b7e95a1b125600a02c76a3b2a8))
+
+
+
+
+
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@0.3.25...@synerise/ds-action-area@0.4.0) (2024-05-29)
+
+
+### Features
+
+* **action-area:** add validation state ([a358aba](https://github.com/Synerise/synerise-design/commit/a358abac7ecef64afd9579734eeb8f4cd8677304))
+
+
+
+
+
 ## [0.3.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@0.3.24...@synerise/ds-action-area@0.3.25) (2024-05-16)
 
 **Note:** Version bump only for package @synerise/ds-action-area

package/README.md

@@ -33,4 +33,9 @@ import ActionArea from '@synerise/ds-action-area'
 | 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,3 +1,13 @@
-import { ActionAreaProps } from './ActionArea.types';
-declare const ActionArea: ({ label, description, action, actionLabel, buttonProps }: ActionAreaProps) => JSX.Element;
+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;
+    ActionAreaWrapper: import("styled-components").StyledComponent<"div", any, {
+        isFullWidth?: boolean | undefined;
+    }, never>;
+    ActionAreaContent: import("styled-components").StyledComponent<"div", any, {
+        isError?: boolean | undefined;
+    }, never>;
+    ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+};
 export default ActionArea;

package/dist/ActionArea.js

@@ -1,6 +1,7 @@
 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 * as React from 'react';
+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';
@@ -10,15 +11,31 @@ var ActionArea = function ActionArea(_ref) {
       description = _ref.description,
       action = _ref.action,
       actionLabel = _ref.actionLabel,
-      buttonProps = _ref.buttonProps;
+      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;
+  var isErrorText = isError && Boolean(errorText);
   return /*#__PURE__*/React.createElement(S.ActionAreaWrapper, {
-    className: "ds-action-area"
+    style: style,
+    className: classnames('ds-action-area', className),
+    isFullWidth: isFullWidth
+  }, /*#__PURE__*/React.createElement(S.ActionAreaContent, {
+    isError: isError,
+    "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));
+  }, buttonProps), actionLabel)), isErrorText && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText));
 };
 
+ActionArea.ActionAreaWrapper = S.ActionAreaWrapper;
+ActionArea.ActionAreaContent = S.ActionAreaContent;
+ActionArea.ErrorText = S.ErrorText;
 export default ActionArea;

package/dist/ActionArea.styles.d.ts

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

package/dist/ActionArea.styles.js

@@ -1,9 +1,31 @@
 import styled from 'styled-components';
-import { Description } from '@synerise/ds-typography'; // eslint-disable-next-line import/prefer-default-export
-
+import { Description } from '@synerise/ds-typography';
 export var ActionAreaWrapper = styled.div.withConfig({
   displayName: "ActionAreastyles__ActionAreaWrapper",
   componentId: "sc-10ey0kr-0"
-})(["max-width:100%;width:588px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:3px;border:1px dashed ", ";.ds-title{margin-bottom:8px;text-align:center;word-break:break-word;}", "{margin-bottom:16px;text-align:center;word-break:break-word;}"], function (props) {
-  return props.theme.palette['grey-300'];
-}, Description);
+})(["max-width:100%;width:", ";"], function (_ref) {
+  var isFullWidth = _ref.isFullWidth;
+  return isFullWidth ? '100%;' : '588px;';
+});
+export var ActionAreaContent = styled.div.withConfig({
+  displayName: "ActionAreastyles__ActionAreaContent",
+  componentId: "sc-10ey0kr-1"
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:3px;background-color:", ";border:1px dashed ", ";", " .ds-title{margin-bottom:8px;text-align:center;word-break:break-word;}", "{margin-bottom:16px;text-align:center;word-break:break-word;}"], function (_ref2) {
+  var isError = _ref2.isError,
+      theme = _ref2.theme;
+  return isError ? theme.palette['red-050'] : 'none';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette['grey-300'];
+}, function (_ref4) {
+  var isError = _ref4.isError,
+      theme = _ref4.theme;
+  return isError && "border-color: " + theme.palette['red-600'] + ";";
+}, Description);
+export var ErrorText = styled.div.withConfig({
+  displayName: "ActionAreastyles__ErrorText",
+  componentId: "sc-10ey0kr-2"
+})(["margin-top:8px;color:", ";"], function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette['red-600'];
+});

package/dist/ActionArea.types.d.ts

@@ -1,9 +1,14 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { ButtonProps } from '@synerise/ds-button';
 export type ActionAreaProps = {
-    label?: ReactNode;
-    description: ReactNode;
     action: () => void;
     actionLabel: ReactNode;
     buttonProps?: Partial<ButtonProps>;
+    className?: string;
+    description: ReactNode;
+    errorText?: ReactNode;
+    isError?: boolean;
+    isFullWidth?: boolean;
+    label?: ReactNode;
+    style?: CSSProperties;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-action-area",
-  "version": "0.3.25",
+  "version": "0.4.1",
   "description": "ActionArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,8 +33,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.20.0",
-    "@synerise/ds-typography": "^0.15.0"
+    "@synerise/ds-button": "^0.21.0",
+    "@synerise/ds-typography": "^0.15.0",
+    "classnames": "2.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -42,9 +43,9 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.26.6",
+    "@synerise/ds-utils": "^0.27.0",
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "fc089bbf34c691a313b3fa648851d7831a23e3d0"
+  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
 }