@synerise/ds-section-message 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.6...@synerise/ds-section-message@1.0.7) (2025-09-16)
+
+**Note:** Version bump only for package @synerise/ds-section-message
+
+
+
+
+
+## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.5...@synerise/ds-section-message@1.0.6) (2025-09-05)
+
+
+### Bug Fixes
+
+* **section-message:** remove prop color ([569a1d7](https://github.com/Synerise/synerise-design/commit/569a1d72db5f723f0dd345e897c10ecbd46a5ab6))
+
+
+
+
+
 ## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.4...@synerise/ds-section-message@1.0.5) (2025-08-28)
 
 **Note:** Version bump only for package @synerise/ds-section-message

package/README.md

@@ -32,7 +32,6 @@ import SectionMessage from '@synerise/ds-section-message'
 | 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` | -          |

package/dist/SectionMessage.const.d.ts

@@ -2,4 +2,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;
-export declare const SECTION_TYPES: readonly ["positive", "notice", "negative", "neutral", "supply", "service", "entity"];
+export declare const SECTION_TYPES: SectionType[];

package/dist/SectionMessage.d.ts

@@ -1,4 +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;
+declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, withClose, customColor, customColorIcon, customIcon, ...htmlAttributes }: SectionMessageProps) => React.JSX.Element;
 export default SectionMessage;

package/dist/SectionMessage.js

@@ -1,4 +1,4 @@
-var _excluded = ["icon", "type", "message", "description", "showMoreLabel", "onShowMore", "onClose", "suffixel", "moreButtons", "withEmphasis", "withLink", "unorderedList", "color", "withClose", "customColor", "customColorIcon", "customIcon"];
+var _excluded = ["icon", "type", "message", "description", "showMoreLabel", "onShowMore", "onClose", "suffixel", "moreButtons", "withEmphasis", "withLink", "unorderedList", "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';
@@ -19,7 +19,6 @@ var SectionMessage = function SectionMessage(_ref) {
     withEmphasis = _ref.withEmphasis,
     withLink = _ref.withLink,
     unorderedList = _ref.unorderedList,
-    color = _ref.color,
     withClose = _ref.withClose,
     customColor = _ref.customColor,
     customColorIcon = _ref.customColorIcon,
@@ -46,10 +45,10 @@ var SectionMessage = function SectionMessage(_ref) {
   };
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     "data-testid": "ds-section-message-" + type,
-    color: color,
+    type: type,
     customColor: customColor
   }, htmlAttributes), /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
-    color: color,
+    type: type,
     customColorIcon: customColorIcon
   }, customIcon || /*#__PURE__*/React.createElement(Icon, {
     component: renderIcon

package/dist/SectionMessage.styles.d.ts

@@ -1,19 +1,19 @@
 import type { ReactNode } from 'react';
-import { type ColorType, type CustomColorType } from './SectionMessage.types';
+import { type CustomColorType, type SectionType } 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;
+    type?: SectionType;
     customColorIcon?: CustomColorType;
 }, 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;
+    type?: SectionType;
     customColor?: CustomColorType;
 }, never>;
 export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/SectionMessage.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { getColorBackground, getColorBorder, getColorIconAndBorderTop } from './SectionMessage.utils';
 export var AlertContent = styled.div.withConfig({
   displayName: "SectionMessagestyles__AlertContent",
   componentId: "sc-1qohcjm-0"
@@ -17,7 +18,7 @@ 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"];
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIconAndBorderTop(props.type, props.theme);
 });
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "SectionMessagestyles__IconCloseWrapper",
@@ -37,11 +38,11 @@ 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"];
+  return props.customColor ? props.theme.palette[props.customColor + "-050"] : getColorBackground(props.type, props.theme);
 }, function (props) {
-  return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
+  return props.customColor ? props.theme.palette[props.customColor + "-200"] : getColorBorder(props.type, props.theme);
 }, function (props) {
-  return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorIconAndBorderTop(props.type, props.theme);
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "SectionMessagestyles__WrapperSectionMessage",

package/dist/SectionMessage.types.d.ts

@@ -1,15 +1,14 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
-import { type SECTION_TYPES } from './SectionMessage.const';
 export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
+/** @deprecated */
 export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'violet' | 'purple' | 'cyan';
-export type SectionType = (typeof SECTION_TYPES)[number];
+export type SectionType = 'positive' | 'notice' | 'negative' | 'neutral' | 'supply' | 'service' | 'entity';
 export type SectionMessageProps = WithHTMLAttributes<HTMLDivElement, {
     message?: ReactNode;
-    type: string | SectionType;
+    type: SectionType;
     customColor?: CustomColorType;
     customColorIcon?: CustomColorType;
-    color?: ColorType;
     description?: ReactNode;
     showMoreLabel?: ReactNode;
     onShowMore?: () => void;
@@ -21,5 +20,7 @@ export type SectionMessageProps = WithHTMLAttributes<HTMLDivElement, {
     unorderedList?: ReactNode;
     withClose?: ReactNode;
     customIcon?: ReactElement;
+    /** @deprecated - color is defined by type, use customColor property if you need to voerwrite it */
+    color?: ColorType;
     icon?: ReactNode;
 }>;

package/dist/SectionMessage.utils.d.ts

@@ -1,2 +1,6 @@
+import { type ThemePropsVars } from '@synerise/ds-core';
 import { type SectionType } from './SectionMessage.types';
 export declare const isSectionType: (type: string) => type is SectionType;
+export declare const getColorBackground: (type: SectionType, theme: ThemePropsVars) => string;
+export declare const getColorIconAndBorderTop: (type: SectionType, theme: ThemePropsVars) => string;
+export declare const getColorBorder: (type: SectionType, theme: ThemePropsVars) => string;

package/dist/SectionMessage.utils.js

@@ -1,4 +1,67 @@
 import { SECTION_TYPES } from './SectionMessage.const';
 export var isSectionType = function isSectionType(type) {
   return SECTION_TYPES.includes(type);
+};
+export var getColorBackground = function getColorBackground(type, theme) {
+  if (type === 'positive') {
+    return theme.palette['green-050'];
+  }
+  if (type === 'negative') {
+    return theme.palette['red-050'];
+  }
+  if (type === 'notice') {
+    return theme.palette['yellow-050'];
+  }
+  if (type === 'service') {
+    return theme.palette['purple-050'];
+  }
+  if (type === 'supply') {
+    return theme.palette['violet-050'];
+  }
+  if (type === 'entity') {
+    return theme.palette['cyan-050'];
+  }
+  return theme.palette["grey-050"];
+};
+export var getColorIconAndBorderTop = function getColorIconAndBorderTop(type, theme) {
+  if (type === 'positive') {
+    return theme.palette['green-600'];
+  }
+  if (type === 'negative') {
+    return theme.palette['red-600'];
+  }
+  if (type === 'notice') {
+    return theme.palette['yellow-600'];
+  }
+  if (type === 'service') {
+    return theme.palette['purple-600'];
+  }
+  if (type === 'supply') {
+    return theme.palette['violet-600'];
+  }
+  if (type === 'entity') {
+    return theme.palette['cyan-600'];
+  }
+  return theme.palette["grey-600"];
+};
+export var getColorBorder = function getColorBorder(type, theme) {
+  if (type === 'positive') {
+    return theme.palette['green-200'];
+  }
+  if (type === 'negative') {
+    return theme.palette['red-200'];
+  }
+  if (type === 'notice') {
+    return theme.palette['yellow-200'];
+  }
+  if (type === 'service') {
+    return theme.palette['purple-200'];
+  }
+  if (type === 'supply') {
+    return theme.palette['violet-200'];
+  }
+  if (type === 'entity') {
+    return theme.palette['cyan-200'];
+  }
+  return theme.palette["grey-200"];
 };

package/dist/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-section-message",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "SectionMessage UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -26,6 +26,7 @@
     "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
     "test": "jest",
     "test:watch": "npm run test -- --watchAll",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
   "sideEffects": [
@@ -34,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.7.1",
-    "@synerise/ds-utils": "^1.4.1"
+    "@synerise/ds-icon": "^1.7.2",
+    "@synerise/ds-utils": "^1.4.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5f5d424cf8c7fa89e231c36a45f5ab3e4cfac8e7"
+  "gitHead": "5beb6ab5f2d77b9e98e04caab7dff20b8436078b"
 }