@bwp-web/components 1.3.2 → 1.4.0
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/README.md +52 -39
- package/dist/BiampHeader/BiampHeader.d.ts.map +1 -1
- package/dist/BiampSidebar/BiampSidebar.d.ts +8 -2
- package/dist/BiampSidebar/BiampSidebar.d.ts.map +1 -1
- package/dist/index.cjs +200 -60
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +198 -57
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,36 +22,36 @@ For `BiampTable` only:
|
|
|
22
22
|
|
|
23
23
|
## Components
|
|
24
24
|
|
|
25
|
-
| Component | Description
|
|
26
|
-
| ---------------------------- |
|
|
27
|
-
| `BiampLayout` | Full-page layout shell with optional header and sidebar slots
|
|
28
|
-
| `BiampWrapper` | Full-page content wrapper with padding, rounded corners, and scrollable overflow
|
|
29
|
-
| `BiampSidebar` |
|
|
30
|
-
| `BiampSidebarIconList` |
|
|
31
|
-
| `BiampSidebarIcon` | Selectable
|
|
32
|
-
| `BiampSidebarComponent` | 48×48px rounded box for arbitrary sidebar content
|
|
33
|
-
| `BiampHeader` | Horizontal header container with padding
|
|
34
|
-
| `BiampHeaderTitle` | Title section with icon, optional title, and optional subtitle
|
|
35
|
-
| `BiampHeaderSearch` | Search input with leading search icon
|
|
36
|
-
| `BiampHeaderActions` | Flex container for grouping action buttons and profile
|
|
37
|
-
| `BiampHeaderButtonList` | Horizontal list with 4px gaps for header buttons
|
|
38
|
-
| `BiampHeaderButton` | Selectable 40×40px icon button for header actions
|
|
39
|
-
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`)
|
|
40
|
-
| `BiampAppPopover` | Styled popover for the app-launcher content
|
|
41
|
-
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles
|
|
42
|
-
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button
|
|
43
|
-
| `BiampEndUserAppContent` |
|
|
44
|
-
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href`
|
|
45
|
-
| `BiampBanner` | Full-width animated notification banner
|
|
46
|
-
| `BiampBannerIcon` | Leading icon slot for `BiampBanner`
|
|
47
|
-
| `BiampBannerContent` | Center message slot for `BiampBanner`
|
|
48
|
-
| `BiampBannerActions` | Trailing actions slot for `BiampBanner`
|
|
49
|
-
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints
|
|
50
|
-
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons
|
|
51
|
-
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup`
|
|
52
|
-
| `BiampTable` | Composable data table with sorting, selection, pagination, and more
|
|
53
|
-
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color
|
|
54
|
-
| `DynamicSvgIcon` | Renders a remotely-fetched SVG with a skeleton loader and required fallback
|
|
25
|
+
| Component | Description |
|
|
26
|
+
| ---------------------------- | ---------------------------------------------------------------------------------------- |
|
|
27
|
+
| `BiampLayout` | Full-page layout shell with optional header and sidebar slots |
|
|
28
|
+
| `BiampWrapper` | Full-page content wrapper with padding, rounded corners, and scrollable overflow |
|
|
29
|
+
| `BiampSidebar` | Expandable vertical sidebar (48px ↔ 240px) with animated toggle and copyright caption |
|
|
30
|
+
| `BiampSidebarIconList` | Scrollable vertical list with 4px gaps for sidebar items |
|
|
31
|
+
| `BiampSidebarIcon` | Selectable 48px-tall icon button for sidebar navigation, with optional `name` label |
|
|
32
|
+
| `BiampSidebarComponent` | 48×48px rounded box for arbitrary sidebar content |
|
|
33
|
+
| `BiampHeader` | Horizontal header container with padding |
|
|
34
|
+
| `BiampHeaderTitle` | Title section with icon, optional title, and optional subtitle |
|
|
35
|
+
| `BiampHeaderSearch` | Search input with leading search icon |
|
|
36
|
+
| `BiampHeaderActions` | Flex container for grouping action buttons and profile |
|
|
37
|
+
| `BiampHeaderButtonList` | Horizontal list with 4px gaps for header buttons |
|
|
38
|
+
| `BiampHeaderButton` | Selectable 40×40px icon button for header actions |
|
|
39
|
+
| `BiampHeaderProfile` | Profile button with image or custom children (e.g. `UserInitialsIcon`) |
|
|
40
|
+
| `BiampAppPopover` | Styled popover for the app-launcher content |
|
|
41
|
+
| `BiampBuildAppContent` | 2-column grid container for "Configure & Build" app tiles |
|
|
42
|
+
| `BiampBuildAppContentItem` | App tile with image, name, description, and optional action button |
|
|
43
|
+
| `BiampEndUserAppContent` | Responsive container for end-user app items: stack for one child, 2-column grid for many |
|
|
44
|
+
| `BiampEndUserAppContentItem` | Row-style app item with image, name, description, and external link; supports `href` |
|
|
45
|
+
| `BiampBanner` | Full-width animated notification banner |
|
|
46
|
+
| `BiampBannerIcon` | Leading icon slot for `BiampBanner` |
|
|
47
|
+
| `BiampBannerContent` | Center message slot for `BiampBanner` |
|
|
48
|
+
| `BiampBannerActions` | Trailing actions slot for `BiampBanner` |
|
|
49
|
+
| `BiampGlobalSearch` | Searchable autocomplete with icons, subtitles, chips, and keyboard hints |
|
|
50
|
+
| `SegmentedButtonGroup` | Horizontal container for grouping segmented toggle buttons |
|
|
51
|
+
| `SegmentedButton` | Individual toggle button for use inside `SegmentedButtonGroup` |
|
|
52
|
+
| `BiampTable` | Composable data table with sorting, selection, pagination, and more |
|
|
53
|
+
| `UserInitialsIcon` | Avatar-style icon showing a user's initials with a deterministic color |
|
|
54
|
+
| `DynamicSvgIcon` | Renders a remotely-fetched SVG with a skeleton loader and required fallback |
|
|
55
55
|
|
|
56
56
|
## Usage
|
|
57
57
|
|
|
@@ -100,18 +100,20 @@ function App() {
|
|
|
100
100
|
</BiampHeader>
|
|
101
101
|
}
|
|
102
102
|
sidebar={
|
|
103
|
-
<BiampSidebar>
|
|
103
|
+
<BiampSidebar bottomLogoText="Biamp LLC. v.1.0.0">
|
|
104
104
|
<BiampSidebarIconList>
|
|
105
105
|
<BiampSidebarIcon
|
|
106
106
|
selected={selected === 0}
|
|
107
107
|
icon={<HomeOutlinedIcon />}
|
|
108
108
|
selectedIcon={<HomeIcon />}
|
|
109
|
+
name="Home"
|
|
109
110
|
onClick={() => setSelected(0)}
|
|
110
111
|
/>
|
|
111
112
|
<BiampSidebarIcon
|
|
112
113
|
selected={selected === 1}
|
|
113
114
|
icon={<SettingsOutlinedIcon />}
|
|
114
115
|
selectedIcon={<SettingsIcon />}
|
|
116
|
+
name="Settings"
|
|
115
117
|
onClick={() => setSelected(1)}
|
|
116
118
|
/>
|
|
117
119
|
</BiampSidebarIconList>
|
|
@@ -196,17 +198,28 @@ Full-page content wrapper with 16px padding, 8px border-radius, scrollable overf
|
|
|
196
198
|
|
|
197
199
|
### BiampSidebar
|
|
198
200
|
|
|
199
|
-
|
|
201
|
+
Vertical sidebar that animates between a collapsed (48px) and expanded (240px) width. A toggle button is rendered between the children and the bottom logo by default; pass `expandable={false}` to hide it. When expanded, each `BiampSidebarIcon`'s `name` fades in next to its icon and the optional `bottomLogoText` (auto-prefixed with `© [current year]`) appears next to the logo.
|
|
202
|
+
|
|
203
|
+
#### BiampSidebar Props
|
|
204
|
+
|
|
205
|
+
| Prop | Type | Default | Description |
|
|
206
|
+
| ------------------ | ----------------------------- | ------- | --------------------------------------------------------------------------------------- |
|
|
207
|
+
| `expandable` | `boolean` | `true` | Whether the toggle button is rendered |
|
|
208
|
+
| `expanded` | `boolean` | — | Controlled expansion state |
|
|
209
|
+
| `defaultExpanded` | `boolean` | `false` | Initial uncontrolled expansion state |
|
|
210
|
+
| `onExpandedChange` | `(expanded: boolean) => void` | — | Callback fired when the toggle is clicked |
|
|
211
|
+
| `bottomLogoIcon` | `JSX.Element` | logo | Custom element rendered at the bottom; defaults to the Biamp logo |
|
|
212
|
+
| `bottomLogoText` | `string` | — | Copyright suffix shown next to the bottom logo when expanded; auto-prepends `© [year] ` |
|
|
200
213
|
|
|
201
214
|
#### BiampSidebarIcon Props
|
|
202
215
|
|
|
203
|
-
| Prop | Type | Description
|
|
204
|
-
| -------------- | ----------------- |
|
|
205
|
-
| `icon` | `React.ReactNode` | Icon shown when not selected
|
|
206
|
-
| `selectedIcon` | `React.ReactNode` | Icon shown when selected
|
|
207
|
-
| `selected` | `boolean` | Whether this item is currently active
|
|
208
|
-
| `
|
|
209
|
-
| `onClick` | `() => void` | Click handler
|
|
216
|
+
| Prop | Type | Description |
|
|
217
|
+
| -------------- | ----------------- | ------------------------------------------------------------------------------------ |
|
|
218
|
+
| `icon` | `React.ReactNode` | Icon shown when not selected |
|
|
219
|
+
| `selectedIcon` | `React.ReactNode` | Icon shown when selected |
|
|
220
|
+
| `selected` | `boolean` | Whether this item is currently active |
|
|
221
|
+
| `name` | `string` | Optional label rendered to the right of the icon when the parent sidebar is expanded |
|
|
222
|
+
| `onClick` | `() => void` | Click handler |
|
|
210
223
|
|
|
211
224
|
### BiampHeader
|
|
212
225
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampHeader.d.ts","sourceRoot":"","sources":["../../src/BiampHeader/BiampHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,QAAQ,EAGR,mBAAmB,EAEnB,YAAY,EAEZ,UAAU,EAEV,cAAc,EAEf,MAAM,eAAe,CAAC;AACvB,OAAO,
|
|
1
|
+
{"version":3,"file":"BiampHeader.d.ts","sourceRoot":"","sources":["../../src/BiampHeader/BiampHeader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,13 @@ import { JSX } from 'react';
|
|
|
3
3
|
type BiampSidebarProps = StackProps & {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
bottomLogoIcon?: JSX.Element;
|
|
6
|
+
bottomLogoText?: string;
|
|
7
|
+
expandable?: boolean;
|
|
8
|
+
expanded?: boolean;
|
|
9
|
+
defaultExpanded?: boolean;
|
|
10
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
6
11
|
};
|
|
7
|
-
export declare function BiampSidebar({ children, bottomLogoIcon, sx, ...props }: BiampSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function BiampSidebar({ children, bottomLogoIcon, bottomLogoText, expandable, expanded: expandedProp, defaultExpanded, onExpandedChange, sx, ...props }: BiampSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
8
13
|
type BiampSidebarIconList = StackProps & {
|
|
9
14
|
children: React.ReactNode;
|
|
10
15
|
};
|
|
@@ -13,8 +18,9 @@ type BiampSidebarIconProps = ListItemButtonProps & {
|
|
|
13
18
|
selected?: boolean;
|
|
14
19
|
icon: JSX.Element;
|
|
15
20
|
selectedIcon?: JSX.Element;
|
|
21
|
+
name?: string;
|
|
16
22
|
};
|
|
17
|
-
export declare function BiampSidebarIcon({ selected, icon, selectedIcon, sx, ...props }: BiampSidebarIconProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function BiampSidebarIcon({ selected, icon, selectedIcon, name, sx, ...props }: BiampSidebarIconProps): import("react/jsx-runtime").JSX.Element;
|
|
18
24
|
type BiampSidebarComponentProps = ListItemButtonProps & {
|
|
19
25
|
children: React.ReactNode;
|
|
20
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampSidebar.d.ts","sourceRoot":"","sources":["../../src/BiampSidebar/BiampSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAEnB,UAAU,
|
|
1
|
+
{"version":3,"file":"BiampSidebar.d.ts","sourceRoot":"","sources":["../../src/BiampSidebar/BiampSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,mBAAmB,EAEnB,UAAU,EAEX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,GAAG,EAAuC,MAAM,OAAO,CAAC;AAUjE,KAAK,iBAAiB,GAAG,UAAU,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAiB,EACjB,QAAQ,EAAE,YAAY,EACtB,eAAuB,EACvB,gBAAgB,EAChB,EAAE,EACF,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoFnB;AAED,KAAK,oBAAoB,GAAG,UAAU,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAetB;AAED,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwDvB;AAED,KAAK,0BAA0B,GAAG,mBAAmB,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,EAAE,EACF,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAoB5B"}
|