@synerise/ds-section-message 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.1 (2025-07-17)
+
+**Note:** Version bump only for package @synerise/ds-section-message

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+---
+id: section-message
+title: SectionMessage
+---
+
+SectionMessage UI Component
+
+## Installation
+```
+npm i @synerise/ds-section-message
+or
+yarn add @synerise/ds-section-message
+```
+
+## Usage
+```
+import SectionMessage from '@synerise/ds-section-message'
+
+<SectionMessage />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-section-message--default"></iframe>
+
+## API
+
+| Property        | Description                                                                                                            | Type        | Default    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------| ---------- |
+| type            | Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity`                | `string`    | `negative` |
+| message         | Message of section messsage                                                                                            | `ReactNode` | -          |
+| customColor     | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`    | -          |
+| customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`    | -          |
+| color           | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`                                       | `string`    | -          |
+| showMoreLabel   | prop to show label                                                                                                     | `ReactNode` | -          |
+| onShowMore      | callback executed after clicking                                                                                       | `void`      | -          |
+| moreButtons     | prop to show buttons                                                                                                   | `ReactNode` | -          |
+| withEmphasis    | prop to show bolder text                                                                                               | `ReactNode` | -          |
+| withLink        | prop to show highlited text                                                                                            | `ReactNode` | -          |
+| unorderedList   | prop to show unordered list                                                                                            | `ReactNode` | -          |
+| withClose       | prop to show close button                                                                                              | `ReactNode` | -          |
+| customIcon      | prop to set custom icon                                                                                                | `ReactNode` | -          |
+| textButton      | text for button                                                                                                        | `string   ` | -          |
+| icon            | prop to set icon                                                                                                       | `ReactNode` | -          |
+| description     | prop to show description                                                                                               | `ReactNode` | -          |

package/dist/SectionMessage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type SectionMessageProps } from './SectionMessage.types';
+declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, color, withClose, customColor, customColorIcon, customIcon, ...htmlAttributes }: SectionMessageProps) => React.JSX.Element;
+export default SectionMessage;

package/dist/SectionMessage.js

@@ -0,0 +1,61 @@
+var _excluded = ["icon", "type", "message", "description", "showMoreLabel", "onShowMore", "onClose", "suffixel", "moreButtons", "withEmphasis", "withLink", "unorderedList", "color", "withClose", "customColor", "customColorIcon", "customIcon"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useMemo } from 'react';
+import Icon, { CloseM } from '@synerise/ds-icon';
+import * as S from './SectionMessage.styles';
+import { DEFAULT_ICON, ICONS } from './utils/utils';
+var SectionMessage = function SectionMessage(_ref) {
+  var icon = _ref.icon,
+    type = _ref.type,
+    message = _ref.message,
+    description = _ref.description,
+    showMoreLabel = _ref.showMoreLabel,
+    onShowMore = _ref.onShowMore,
+    onClose = _ref.onClose,
+    suffixel = _ref.suffixel,
+    moreButtons = _ref.moreButtons,
+    withEmphasis = _ref.withEmphasis,
+    withLink = _ref.withLink,
+    unorderedList = _ref.unorderedList,
+    color = _ref.color,
+    withClose = _ref.withClose,
+    customColor = _ref.customColor,
+    customColorIcon = _ref.customColorIcon,
+    customIcon = _ref.customIcon,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var renderMessage = useMemo(function () {
+    return /*#__PURE__*/React.createElement(S.AlertContent, {
+      withLink: withLink
+    }, message && /*#__PURE__*/React.createElement(S.AlertMessage, null, message), /*#__PURE__*/React.createElement(S.Text, null, description && /*#__PURE__*/React.createElement(S.AlertDescription, null, description), withLink && /*#__PURE__*/React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && /*#__PURE__*/React.createElement(S.EmphasisWrapper, null, withEmphasis)), onShowMore && showMoreLabel && /*#__PURE__*/React.createElement(S.AlertShowMore, {
+      onClick: onShowMore
+    }, showMoreLabel), moreButtons, unorderedList && !moreButtons && unorderedList);
+  }, [message, description, showMoreLabel, onShowMore, moreButtons, withEmphasis, withLink, unorderedList]);
+  var renderIcon = useMemo(function () {
+    if (icon) {
+      return icon;
+    }
+    if (ICONS[type]) {
+      return ICONS[type];
+    }
+    return DEFAULT_ICON;
+  }, [icon, type]);
+  var handleClose = function handleClose() {
+    onClose && onClose();
+  };
+  return /*#__PURE__*/React.createElement(S.Container, _extends({
+    "data-testid": "ds-section-message-" + type,
+    color: color,
+    customColor: customColor
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
+    color: color,
+    customColorIcon: customColorIcon
+  }, customIcon || /*#__PURE__*/React.createElement(Icon, {
+    component: renderIcon
+  })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  })))));
+};
+export default SectionMessage;

package/dist/SectionMessage.styles.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { type ColorType, type CustomColorType } from './SectionMessage.types';
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
+    withLink?: ReactNode;
+}, never>;
+export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: ColorType | undefined;
+    customColorIcon?: CustomColorType | undefined;
+}, never>;
+export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    color?: ColorType | undefined;
+    customColor?: CustomColorType | undefined;
+}, never>;
+export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AlertShowMore: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/SectionMessage.styles.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+export var AlertContent = styled.div.withConfig({
+  displayName: "SectionMessagestyles__AlertContent",
+  componentId: "sc-1qohcjm-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";"], function (props) {
+  return props.withLink ? '12px 0 11px' : '12px 0';
+});
+export var AllContent = styled.div.withConfig({
+  displayName: "SectionMessagestyles__AllContent",
+  componentId: "sc-1qohcjm-1"
+})(["display:flex;color:inherit;"]);
+export var Text = styled.div.withConfig({
+  displayName: "SectionMessagestyles__Text",
+  componentId: "sc-1qohcjm-2"
+})(["display:flex;"]);
+export var IconWrapper = styled.div.withConfig({
+  displayName: "SectionMessagestyles__IconWrapper",
+  componentId: "sc-1qohcjm-3"
+})(["margin:10px 12px;display:flex;color:", ";"], function (props) {
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
+});
+export var IconCloseWrapper = styled.div.withConfig({
+  displayName: "SectionMessagestyles__IconCloseWrapper",
+  componentId: "sc-1qohcjm-4"
+})(["margin:3px 5px 2px;cursor:pointer;color:", ";"], function (props) {
+  return props.theme.palette['grey-700'];
+});
+export var ButtonWrapper = styled.div.withConfig({
+  displayName: "SectionMessagestyles__ButtonWrapper",
+  componentId: "sc-1qohcjm-5"
+})(["padding:6px 8px 0 8px;display:flex;"]);
+export var SuffixWrapper = styled.div.withConfig({
+  displayName: "SectionMessagestyles__SuffixWrapper",
+  componentId: "sc-1qohcjm-6"
+})(["display:flex;"]);
+export var Container = styled.div.withConfig({
+  displayName: "SectionMessagestyles__Container",
+  componentId: "sc-1qohcjm-7"
+})(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
+  return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
+}, function (props) {
+  return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
+}, function (props) {
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
+});
+export var WrapperSectionMessage = styled.div.withConfig({
+  displayName: "SectionMessagestyles__WrapperSectionMessage",
+  componentId: "sc-1qohcjm-8"
+})(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
+export var AlertMessage = styled.span.withConfig({
+  displayName: "SectionMessagestyles__AlertMessage",
+  componentId: "sc-1qohcjm-9"
+})(["font-size:13px;line-height:1.39;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
+  return props.theme.palette['grey-700'];
+});
+export var AlertDescription = styled.span.withConfig({
+  displayName: "SectionMessagestyles__AlertDescription",
+  componentId: "sc-1qohcjm-10"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], function (props) {
+  return props.theme.palette['grey-700'];
+});
+export var EmphasisWrapper = styled.span.withConfig({
+  displayName: "SectionMessagestyles__EmphasisWrapper",
+  componentId: "sc-1qohcjm-11"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:500;margin-top:2px;color:inherit;"]);
+export var LinkWrapper = styled.span.withConfig({
+  displayName: "SectionMessagestyles__LinkWrapper",
+  componentId: "sc-1qohcjm-12"
+})(["display:flex;font-size:13px;line-height:1.5;font-weight:400;margin-top:2px;color:inherit;text-decoration:underline;cursor:pointer;a{color:inherit;}"]);
+export var AlertShowMore = styled.span.withConfig({
+  displayName: "SectionMessagestyles__AlertShowMore",
+  componentId: "sc-1qohcjm-13"
+})(["display:flex;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;"]);

package/dist/SectionMessage.types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
+export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'violet' | 'purple' | 'cyan';
+export type SectionType = 'positive' | 'notice' | 'negative' | 'neutral' | 'supply' | 'service' | 'entity';
+export type SectionMessageProps = WithHTMLAttributes<HTMLDivElement, {
+    message?: ReactNode;
+    type: string | SectionType;
+    customColor?: CustomColorType;
+    customColorIcon?: CustomColorType;
+    color?: ColorType;
+    description?: ReactNode;
+    showMoreLabel?: ReactNode;
+    onShowMore?: () => void;
+    onClose?: () => void;
+    suffixel?: ReactNode;
+    moreButtons?: ReactNode;
+    withEmphasis?: ReactNode;
+    withLink?: ReactNode;
+    unorderedList?: ReactNode;
+    withClose?: ReactNode;
+    customIcon?: ReactElement;
+    icon?: ReactNode;
+}>;

package/dist/SectionMessage.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SectionMessage';
+export type { SectionMessageProps } from './SectionMessage.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './SectionMessage';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/utils/utils.d.ts

@@ -0,0 +1,4 @@
+import React, { type ReactNode } from 'react';
+import { type SectionType } from '../SectionMessage.types';
+export declare const ICONS: Record<SectionType, ReactNode>;
+export declare const DEFAULT_ICON: React.JSX.Element;

package/dist/utils/utils.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Check3M, HelpFillM, NotificationsReceiveM, UpdateDataM, UserUpM, WarningFillM } from '@synerise/ds-icon';
+export var ICONS = {
+  positive: /*#__PURE__*/React.createElement(Check3M, null),
+  notice: /*#__PURE__*/React.createElement(WarningFillM, null),
+  negative: /*#__PURE__*/React.createElement(WarningFillM, null),
+  neutral: /*#__PURE__*/React.createElement(HelpFillM, null),
+  supply: /*#__PURE__*/React.createElement(UserUpM, null),
+  service: /*#__PURE__*/React.createElement(UpdateDataM, null),
+  entity: /*#__PURE__*/React.createElement(NotificationsReceiveM, null)
+};
+export var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@synerise/ds-section-message",
+  "version": "1.0.1",
+  "description": "SectionMessage UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.6.1",
+    "@synerise/ds-utils": "^1.3.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "4e851d649cb25346f2f8e0575dde91cc50f43bc4"
+}