@synerise/ds-section-message 1.0.23 → 1.0.25

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 (4) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +21 -17
  3. package/dist/SectionMessage.styles.js +1 -1
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.24...@synerise/ds-section-message@1.0.25) (2026-03-20)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **section-message:** change border to be ass div ([bf52965](https://github.com/Synerise/synerise-design/commit/bf5296551846c1c271f3130926ed6a2b6727fb24))
11
+
12
+ ## [1.0.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.23...@synerise/ds-section-message@1.0.24) (2026-02-19)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-section-message
15
+
6
16
  ## [1.0.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.22...@synerise/ds-section-message@1.0.23) (2026-02-12)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-section-message
package/README.md CHANGED
@@ -11,6 +11,8 @@ SectionMessage UI Component
11
11
  npm i @synerise/ds-section-message
12
12
  or
13
13
  yarn add @synerise/ds-section-message
14
+ or
15
+ pnpm add @synerise/ds-section-message
14
16
  ```
15
17
 
16
18
  ## Usage
@@ -28,20 +30,22 @@ import SectionMessage from '@synerise/ds-section-message'
28
30
 
29
31
  ## API
30
32
 
31
- | Property | Description | Type | Default |
32
- | --------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- | ---------- |
33
- | type | Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity` | `string` | `negative` |
34
- | message | Message of section messsage | `ReactNode` | - |
35
- | customColor | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
36
- | customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
37
- | showMoreLabel | prop to show label | `ReactNode` | - |
38
- | onShowMore | callback executed after clicking | `void` | - |
39
- | moreButtons | prop to show buttons | `ReactNode` | - |
40
- | withEmphasis | prop to show bolder text | `ReactNode` | - |
41
- | withLink | prop to show highlited text | `ReactNode` | - |
42
- | unorderedList | prop to show unordered list | `ReactNode` | - |
43
- | withClose | prop to show close button | `ReactNode` | - |
44
- | customIcon | prop to set custom icon | `ReactNode` | - |
45
- | textButton | text for button | `string ` | - |
46
- | icon | prop to set icon | `ReactNode` | - |
47
- | description | prop to show description | `ReactNode` | - |
33
+ | Property | Description | Type | Default |
34
+ | --------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------- |
35
+ | type | Visual variant. Options: `notice`, `negative`, `positive`, `neutral`, `supply`, `service`, `entity` | `SectionType` | — (required) |
36
+ | message | Bold heading text | `ReactNode` | - |
37
+ | description | Regular-weight body text rendered below the message | `ReactNode` | - |
38
+ | icon | Overrides the automatic type-derived icon (passed as `component` prop to `<Icon>`) | `ReactNode` | - |
39
+ | customIcon | Renders a React element directly inside the icon wrapper, bypassing the `<Icon>` wrapper; takes precedence over `icon` | `ReactElement` | - |
40
+ | customColor | Overrides background and border colours. Options: `red`, `blue`, `green`, `yellow`, `grey`, `purple`, `violet`, `cyan`, `fern`, `orange`, `mars`, `pink` | `CustomColorType` | - |
41
+ | customColorIcon | Overrides the icon and top-border colour. Same options as `customColor` | `CustomColorType` | - |
42
+ | showMoreLabel | Label for the "show more" link; only rendered when `onShowMore` is also provided | `ReactNode` | - |
43
+ | onShowMore | Callback executed when the "show more" link is clicked; requires `showMoreLabel` | `() => void` | - |
44
+ | onClose | Callback executed when the close button is clicked; requires `withClose` to be truthy | `() => void` | - |
45
+ | withClose | When truthy, shows a close button in the right-hand area | `ReactNode` | - |
46
+ | suffixel | Content placed in the right-hand action area, before the close button | `ReactNode` | - |
47
+ | moreButtons | Additional action content rendered inside the content area | `ReactNode` | - |
48
+ | withEmphasis | Bold inline content; only rendered when `withLink` is falsy | `ReactNode` | - |
49
+ | withLink | Underlined link content; rendered instead of `withEmphasis`; also adjusts content area padding | `ReactNode` | - |
50
+ | unorderedList | List content; only rendered when `moreButtons` is falsy | `ReactNode` | - |
51
+ | color | **Deprecated** — use `customColor` instead | `ColorType` | - |
package/dist/SectionMessage.styles.js CHANGED
@@ -37,7 +37,7 @@ export var SuffixWrapper = styled.div.withConfig({
37
37
  export var Container = styled.div.withConfig({
38
38
  displayName: "SectionMessagestyles__Container",
39
39
  componentId: "sc-1qohcjm-7"
40
- })(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
40
+ })(["width:100%;align-items:center;justify-content:center;position:relative;background-color:", ";border:1px solid ", ";border-radius:3px;&::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;border-radius:3px 3px 0 0;background-color:", ";}"], function (props) {
41
41
  return props.customColor ? props.theme.palette[props.customColor + "-050"] : getColorBackground(props.type, props.theme);
42
42
  }, function (props) {
43
43
  return props.customColor ? props.theme.palette[props.customColor + "-200"] : getColorBorder(props.type, props.theme);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-section-message",
3
- "version": "1.0.23",
3
+ "version": "1.0.25",
4
4
  "description": "SectionMessage UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,13 +35,13 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-icon": "^1.14.0",
39
- "@synerise/ds-utils": "^1.6.0"
38
+ "@synerise/ds-icon": "^1.15.0",
39
+ "@synerise/ds-utils": "^1.7.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@synerise/ds-core": "*",
43
43
  "react": ">=16.9.0 <= 18.3.1",
44
44
  "styled-components": "^5.3.3"
45
45
  },
46
- "gitHead": "eb495cfbc2ede0bff95548c6c4e80c38dd965391"
46
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
47
47
  }