@synerise/ds-panel 1.2.16 → 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.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/CLAUDE.md +96 -0
  3. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+
6
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)
7
11
 
8
12
  **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.16",
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.1",
45
- "@synerise/ds-form-field": "^1.3.23"
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": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
54
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
54
55
  }