@synerise/ds-insight 1.1.28 → 1.1.30
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.
- package/CHANGELOG.md +8 -0
- package/CLAUDE.md +88 -0
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.1.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.29...@synerise/ds-insight@1.1.30) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-insight
|
|
9
|
+
|
|
10
|
+
## [1.1.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.28...@synerise/ds-insight@1.1.29) (2026-06-17)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-insight
|
|
13
|
+
|
|
6
14
|
## [1.1.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.27...@synerise/ds-insight@1.1.28) (2026-06-11)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-insight
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# Insight (`@synerise/ds-insight`)
|
|
2
|
+
|
|
3
|
+
> A card component for displaying a single "insight" with a structured header (avatar + title/subtitle + optional right-side action), flexible content area, and optional footer.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Insight.tsx — main component; auto-converts InlineAlertProps[] content
|
|
10
|
+
Insight.types.ts — InsightProps interface (extends WithHTMLAttributes<HTMLDivElement>)
|
|
11
|
+
Insight.styles.tsx — styled-components; hasHover variant
|
|
12
|
+
index.ts — default export + InsightProps type export
|
|
13
|
+
__specs__/
|
|
14
|
+
Insight.spec.tsx — render tests (Vitest)
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Public exports
|
|
18
|
+
|
|
19
|
+
### `Insight` (default)
|
|
20
|
+
|
|
21
|
+
| Prop | Type | Default | Description |
|
|
22
|
+
|------|------|---------|-------------|
|
|
23
|
+
| `title` | `ReactNode` | — | **Required.** Header title; rendered inside a `<label>`. |
|
|
24
|
+
| `subTitle` | `ReactNode` | `undefined` | Secondary line below the title. |
|
|
25
|
+
| `avatar` | `ReactNode` | `undefined` | Left-side avatar in the header bar. Adds `12px` left margin to the text wrapper when present. |
|
|
26
|
+
| `headerRightSide` | `ReactNode` | `undefined` | Rendered at the far right of the header bar (e.g. edit button). |
|
|
27
|
+
| `content` | `InlineAlertProps[] \| ReactNode` | `undefined` | Card body. If an `InlineAlertProps[]` is passed, each item is automatically rendered as `<InlineAlert>`. Otherwise treated as a plain ReactNode. |
|
|
28
|
+
| `footer` | `ReactNode` | `undefined` | Rendered at the bottom of the card. |
|
|
29
|
+
| `onClick` | `() => void` | `undefined` | Makes the entire card hoverable (`grey-050` background on hover). Only applied when truthy. |
|
|
30
|
+
| `className` | `string` | `undefined` | Extra class names appended to `ds-insight <className>`. |
|
|
31
|
+
|
|
32
|
+
All standard `HTMLDivElement` attributes are also accepted and spread onto the root element via `WithHTMLAttributes<HTMLDivElement, ..>`.
|
|
33
|
+
|
|
34
|
+
### `InsightProps`
|
|
35
|
+
|
|
36
|
+
Type alias exported for consumer use.
|
|
37
|
+
|
|
38
|
+
## Usage patterns
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import Insight from '@synerise/ds-insight';
|
|
42
|
+
|
|
43
|
+
// Minimal
|
|
44
|
+
<Insight title="Get File SFTP" />
|
|
45
|
+
|
|
46
|
+
// With avatar, subtitle, header action
|
|
47
|
+
<Insight
|
|
48
|
+
title="Get File SFTP"
|
|
49
|
+
subTitle="Custom mode name"
|
|
50
|
+
avatar={<Avatar size="medium" shape="square" iconComponent={<Icon component={<NotificationsM />} />} />}
|
|
51
|
+
headerRightSide={<Button type="ghost" mode="icon-label"><Icon component={<EditM />} />Edit</Button>}
|
|
52
|
+
content={<div>Any content here</div>}
|
|
53
|
+
footer={<Button>More</Button>}
|
|
54
|
+
/>
|
|
55
|
+
|
|
56
|
+
// InlineAlert shorthand — pass InlineAlertProps[] directly
|
|
57
|
+
<Insight
|
|
58
|
+
title="Get File SFTP"
|
|
59
|
+
content={[
|
|
60
|
+
{ message: 'Template ready to update', type: 'warning' },
|
|
61
|
+
{ message: 'Info message', type: 'info' },
|
|
62
|
+
]}
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
// Clickable card (hover effect)
|
|
66
|
+
<Insight title="Get File SFTP" onClick={() => handleClick()} />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Styling
|
|
70
|
+
|
|
71
|
+
Styles live in `Insight.styles.tsx`. Uses `theme.palette` tokens for all colours:
|
|
72
|
+
- Container: `white` background, `grey-200` bottom border
|
|
73
|
+
- Hover state: `grey-050` background — only added when `hasHover` is `true` (i.e. `onClick` is provided)
|
|
74
|
+
- `Title` renders as a `<label>` element (not a heading) with `font-weight: 500; font-size: 14px; color: grey-800`
|
|
75
|
+
- Gaps: `24px` padding, `16px` gap between sections, `4px` gap between content items
|
|
76
|
+
|
|
77
|
+
## Key dependencies
|
|
78
|
+
|
|
79
|
+
- `@synerise/ds-inline-alert` — rendered automatically when `content` is `InlineAlertProps[]`
|
|
80
|
+
- `@synerise/ds-utils` — `WithHTMLAttributes` utility type
|
|
81
|
+
|
|
82
|
+
## Implementation notes
|
|
83
|
+
|
|
84
|
+
- **`content` dual-mode**: `isInlineAlertPropsArray` checks at runtime whether `content` is an array of objects with `message` and `type` fields (and no React elements). If so, renders `<InlineAlert key={index} {..props} />` for each. Otherwise falls through to raw ReactNode rendering. The check uses `!React.isValidElement(item)` so a ReactNode array will NOT trigger InlineAlert mode.
|
|
85
|
+
- **`title` renders as `<label>`**, not a heading element — assistive technology may not announce it as a heading.
|
|
86
|
+
- **`className` handling** — appended as `` `ds-insight ${className || ''}` ``; extra trailing space is harmless but present when `className` is omitted.
|
|
87
|
+
- **No internal state** — fully controlled/stateless; all content is passed as props.
|
|
88
|
+
- **Uses Vitest** — `package.json` has `"test": "jest"`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-insight",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.30",
|
|
4
4
|
"description": "Insight UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -40,8 +41,8 @@
|
|
|
40
41
|
],
|
|
41
42
|
"types": "dist/index.d.ts",
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@synerise/ds-inline-alert": "^1.1.
|
|
44
|
-
"@synerise/ds-utils": "^1.10.
|
|
44
|
+
"@synerise/ds-inline-alert": "^1.1.28",
|
|
45
|
+
"@synerise/ds-utils": "^1.10.2"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"@synerise/ds-core": "*",
|
|
@@ -49,5 +50,5 @@
|
|
|
49
50
|
"styled-components": "^5.3.3",
|
|
50
51
|
"vitest": "4"
|
|
51
52
|
},
|
|
52
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
53
54
|
}
|