@synerise/ds-navbar 1.0.56 → 1.0.58
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 +68 -0
- package/package.json +4 -3
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.0.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-navbar@1.0.57...@synerise/ds-navbar@1.0.58) (2026-08-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-navbar
|
|
9
|
+
|
|
10
|
+
## [1.0.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-navbar@1.0.56...@synerise/ds-navbar@1.0.57) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-navbar
|
|
13
|
+
|
|
6
14
|
## [1.0.56](https://github.com/Synerise/synerise-design/compare/@synerise/ds-navbar@1.0.55...@synerise/ds-navbar@1.0.56) (2026-06-17)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-navbar
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Navbar (`@synerise/ds-navbar`)
|
|
2
|
+
|
|
3
|
+
> A top-level application navbar displaying a logo, description, optional alert notification, additional nodes (buttons/dropdowns), and action area.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Navbar.tsx — main component + Navbar.Divider static property
|
|
10
|
+
Navbar.types.ts — NavbarProps
|
|
11
|
+
Navbar.styles.ts — all styled components
|
|
12
|
+
index.ts — default export only
|
|
13
|
+
__specs__/
|
|
14
|
+
Navbar.spec.tsx — Vitest tests (logo/children/description/actions/alertNotification render)
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Public exports
|
|
18
|
+
|
|
19
|
+
### `Navbar` (default export)
|
|
20
|
+
|
|
21
|
+
`NavbarProps` is **not** re-exported from `index.ts`.
|
|
22
|
+
|
|
23
|
+
| Prop | Type | Default | Description |
|
|
24
|
+
|------|------|---------|-------------|
|
|
25
|
+
| `description` | `ReactNode` | — (required) | Module name / page title shown left of centre |
|
|
26
|
+
| `logo` | `ReactNode` | — (required) | `string` → renders `<img src>`, otherwise renders the node directly |
|
|
27
|
+
| `className` | `string` | — | Appended to `ds-navbar` on the root element |
|
|
28
|
+
| `color` | `string` | `theme.palette['blue-600']` | Background colour of the bar |
|
|
29
|
+
| `actions` | `ReactNode` | — | Action area on the right (typically an avatar button) |
|
|
30
|
+
| `additionalNodes` | `ReactNode[]` | — | Extra sections inserted before the actions area; each is separated by a `NavbarDivider` |
|
|
31
|
+
| `alertNotification` | `ReactNode` | — | Alert + button slot; rendered between description and additional nodes, wrapped in a `NavbarDivider` on each side |
|
|
32
|
+
| `children` | `ReactNode` | — | Rendered inside `NavbarActions` after the `actions` wrapper |
|
|
33
|
+
|
|
34
|
+
### `Navbar.Divider`
|
|
35
|
+
|
|
36
|
+
Static styled component `S.NavbarDivider` — a 1 px × 24 px white bar at 30 % opacity with `margin: 0 12px`. Can be used standalone inside custom `actions`/`children` content.
|
|
37
|
+
|
|
38
|
+
## Usage patterns
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import Navbar from '@synerise/ds-navbar';
|
|
42
|
+
|
|
43
|
+
<Navbar
|
|
44
|
+
description="Module name"
|
|
45
|
+
logo="https://example.com/logo.png"
|
|
46
|
+
color="#1d4ed8"
|
|
47
|
+
alertNotification={<>..</>}
|
|
48
|
+
additionalNodes={[<ButtonGroup />, <HelpButton />]}
|
|
49
|
+
actions={<UserAvatar />}
|
|
50
|
+
/>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Styling
|
|
54
|
+
|
|
55
|
+
Styles live in `Navbar.styles.ts`. The navbar is a `56px` tall flex row with `padding: 16px 24px`. Background defaults to `theme.palette['blue-600']` when no `color` prop is provided. Text colour is always `#fff` (hardcoded, not a token).
|
|
56
|
+
|
|
57
|
+
`NavbarAlertNotification` forces `InlineAlert` SVGs and text spans white via class-based CSS (`.ds-inline-alert svg` and `.ds-inline-alert > span`).
|
|
58
|
+
|
|
59
|
+
## Key dependencies
|
|
60
|
+
|
|
61
|
+
- `@synerise/ds-typography` — `macro.h300` for the description text style
|
|
62
|
+
|
|
63
|
+
## Implementation notes
|
|
64
|
+
|
|
65
|
+
- **`NavbarProps` is not exported from `index.ts`** — consumers must use `React.ComponentProps<typeof Navbar>` or a local type alias.
|
|
66
|
+
- **`logo` string check** — if `typeof logo === 'string'`, renders `<img src={logo} alt="" />`; otherwise renders the node as-is.
|
|
67
|
+
- **`additionalNodes` key warning** — each node is wrapped in `<>…</>` without a `key`, causing React key warnings when `additionalNodes` has more than one element.
|
|
68
|
+
- **Uses Vitest**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-navbar",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.58",
|
|
4
4
|
"description": "Navbar 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,7 +42,7 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-typography": "^1.1.
|
|
45
|
+
"@synerise/ds-typography": "^1.1.28"
|
|
45
46
|
},
|
|
46
47
|
"peerDependencies": {
|
|
47
48
|
"@synerise/ds-core": "*",
|
|
@@ -50,5 +51,5 @@
|
|
|
50
51
|
"styled-components": "^5.3.3",
|
|
51
52
|
"vitest": "4"
|
|
52
53
|
},
|
|
53
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
|
|
54
55
|
}
|