@synerise/ds-panel 1.2.15 → 1.2.17
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 +96 -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.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.16...@synerise/ds-panel@1.2.17) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-panel
|
|
9
|
+
|
|
10
|
+
## [1.2.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.15...@synerise/ds-panel@1.2.16) (2026-06-17)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-panel
|
|
13
|
+
|
|
6
14
|
## [1.2.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.14...@synerise/ds-panel@1.2.15) (2026-06-11)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-panel
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Panel (`@synerise/ds-panel`)
|
|
2
|
+
|
|
3
|
+
> A styled container with an optional label that wraps `Box` from `@synerise/ds-flex-box` and applies a white background, border or shadow, and configurable border radius.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Panel.tsx — component implementation (forwardRef, outer div + optional Label + PanelWrapper)
|
|
10
|
+
Panel.types.ts — PanelProps type definition (Omit<BoxProps, 'label'> & BaseLabelProps + panel-specific props)
|
|
11
|
+
Panel.const.ts — DEFAULT_RADIUS (8) and DEFAULT_PADDING (8) constants
|
|
12
|
+
Panel.styles.ts — PanelWrapper styled-component (extends Box), Label styled-component (extends FormFieldLabel)
|
|
13
|
+
index.ts — public exports: default Panel, PanelProps
|
|
14
|
+
modules.d.ts — SVG/asset module declarations
|
|
15
|
+
__specs__/
|
|
16
|
+
Panel.test.tsx — Vitest tests
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Public exports
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
export { default } from './Panel'; // Panel component
|
|
23
|
+
export type { PanelProps } from './Panel.types';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### `Panel`
|
|
27
|
+
|
|
28
|
+
`forwardRef<HTMLDivElement, PanelProps>` — renders an outer `div` (receives `ref`, `className`, `style`) containing an optional `FormFieldLabel` and a `PanelWrapper` (styled `Box`).
|
|
29
|
+
|
|
30
|
+
| Prop | Type | Default | Description |
|
|
31
|
+
|------|------|---------|-------------|
|
|
32
|
+
| `radius` | `number` | `8` | Border radius in pixels applied to the wrapper |
|
|
33
|
+
| `greyBackground` | `boolean` | `undefined` | When `true`: applies a drop shadow (`box-shadow: 0 4px 12px 0 rgba(35,41,54,0.04)`); when `false`/absent: applies a `1px solid grey-200` border |
|
|
34
|
+
| `label` | `React.ReactNode` | `undefined` | Label rendered above the panel via `FormFieldLabel` |
|
|
35
|
+
| `tooltip` | `React.ReactNode` | `undefined` | Tooltip content shown next to the label (info icon trigger) |
|
|
36
|
+
| `tooltipConfig` | `TooltipProps` | `undefined` | Extra config for the label tooltip |
|
|
37
|
+
| `children` | `React.ReactNode` | — | Panel content |
|
|
38
|
+
| `className` | `string` | `undefined` | CSS class applied to the outer wrapper div |
|
|
39
|
+
| `style` | `React.CSSProperties` | `undefined` | Inline styles applied to the outer wrapper div |
|
|
40
|
+
| `ref` | `React.Ref<HTMLDivElement>` | — | Forwarded to the outer wrapper div |
|
|
41
|
+
| _(all `BoxProps`)_ | — | — | Space, layout, and color props from `@rebass/grid` (e.g. `p`, `m`, `width`, `display`, `alignItems`, …); `p` defaults to `8` via `DEFAULT_PADDING`. Note: `label` is omitted from `BoxProps` since `BaseLabelProps` provides it. |
|
|
42
|
+
|
|
43
|
+
## Usage patterns
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import Panel from '@synerise/ds-panel';
|
|
47
|
+
|
|
48
|
+
// Default — white background, 1px grey-200 border, 8px radius, 8px padding
|
|
49
|
+
<Panel>
|
|
50
|
+
<ListItem>Item</ListItem>
|
|
51
|
+
</Panel>
|
|
52
|
+
|
|
53
|
+
// With label and tooltip
|
|
54
|
+
<Panel label="Section Title" tooltip="More info about this section">
|
|
55
|
+
<ListItem>Item</ListItem>
|
|
56
|
+
</Panel>
|
|
57
|
+
|
|
58
|
+
// Grey background variant (shadow instead of border)
|
|
59
|
+
<Panel greyBackground>
|
|
60
|
+
<ListItem>Item</ListItem>
|
|
61
|
+
</Panel>
|
|
62
|
+
|
|
63
|
+
// Custom radius and padding
|
|
64
|
+
<Panel radius={16} p={24}>
|
|
65
|
+
Content
|
|
66
|
+
</Panel>
|
|
67
|
+
|
|
68
|
+
// Ref forwarding
|
|
69
|
+
const ref = React.createRef<HTMLDivElement>();
|
|
70
|
+
<Panel ref={ref}>Content</Panel>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Styling
|
|
74
|
+
|
|
75
|
+
- The outer element is a plain `div` that receives `ref`, `className`, and `style`.
|
|
76
|
+
- `PanelWrapper` extends `Box` from `@synerise/ds-flex-box` (which re-exports `@rebass/grid`), so all `styled-system` space/layout props work.
|
|
77
|
+
- `Label` extends `FormFieldLabel` from `@synerise/ds-form-field` with `margin-bottom: 8px`.
|
|
78
|
+
- Background is always `theme.palette.white`.
|
|
79
|
+
- `greyBackground` toggles between a border and a box-shadow — it does **not** change the background colour despite its name.
|
|
80
|
+
- `$radius` is passed as a transient styled-components prop (prefixed `$`) to avoid forwarding to the DOM.
|
|
81
|
+
- Default padding (`p={8}`) is set at the component level and can be overridden via `BoxProps`.
|
|
82
|
+
|
|
83
|
+
## Key dependencies
|
|
84
|
+
|
|
85
|
+
- `@synerise/ds-flex-box` (workspace) — provides `Box` and `BoxProps`
|
|
86
|
+
- `@synerise/ds-form-field` (workspace) — provides `FormFieldLabel` and `BaseLabelProps`
|
|
87
|
+
- `@synerise/ds-core` (peer) — theme provider required for `theme.palette` tokens
|
|
88
|
+
- `react >=16.9.0 <= 18.3.1` (peer)
|
|
89
|
+
|
|
90
|
+
## Implementation notes
|
|
91
|
+
|
|
92
|
+
- Uses **Jest** (not Vitest) — `jest.config.js` present.
|
|
93
|
+
- No internal state — purely a presentational wrapper.
|
|
94
|
+
- `PanelProps` is defined as `Omit<BoxProps, 'label'> & BaseLabelProps & { radius?; greyBackground? }` — `label` is omitted from `BoxProps` to avoid conflict with `BaseLabelProps.label`.
|
|
95
|
+
- The component destructures `label`, `tooltip`, `tooltipConfig`, `color`, `className`, `style` from props; remaining props are spread onto `PanelWrapper` as `BoxProps`.
|
|
96
|
+
- `greyBackground` is passed through to the `PanelWrapper` styled-component without a `$` prefix but does not leak to the DOM — `Box` from rebass filters unknown props via `shouldForwardProp`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-panel",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.17",
|
|
4
4
|
"description": "Panel 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"
|
|
@@ -41,8 +42,8 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-flex-box": "^1.2.
|
|
45
|
-
"@synerise/ds-form-field": "^1.3.
|
|
45
|
+
"@synerise/ds-flex-box": "^1.2.2",
|
|
46
|
+
"@synerise/ds-form-field": "^1.3.24"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
49
|
"@synerise/ds-core": "*",
|
|
@@ -50,5 +51,5 @@
|
|
|
50
51
|
"styled-components": "^5.3.3",
|
|
51
52
|
"vitest": "4"
|
|
52
53
|
},
|
|
53
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
54
55
|
}
|