@alixpartners/ui-components 2.5.5 → 2.5.6

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 (8) hide show
  1. package/README.md +97 -97
  2. package/dist/assets/CorusHeader.css +1 -1
  3. package/dist/components/CorusHeader/CorusHeader.d.ts +2 -2
  4. package/dist/components/CorusHeader/CorusHeader.js +43 -42
  5. package/dist/components/CorusHeader/CorusHeader.types.d.ts +24 -13
  6. package/dist/components/CorusHeader/MegaMenuContent.js +23 -18
  7. package/dist/web.config +8 -8
  8. package/package.json +94 -94
package/README.md CHANGED
@@ -1,97 +1,97 @@
1
- # AlixPartners UI Component Library
2
-
3
- A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
4
-
5
- Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
6
-
7
- ## ✨ What’s New in 2.0
8
-
9
- - Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
10
- - Updated design tokens and styles aligned with AlixPartners Design System
11
- - Improved accessibility (a11y) and semantic HTML usage
12
- - Streamlined props API for cleaner integration
13
- - Enhanced Storybook documentation
14
- - Faster build & development workflows
15
-
16
- ### Version Support
17
-
18
- - v2.x — Active development (BETA)
19
- - v1.x — Maintained for legacy projects (no new features, critical fixes only)
20
-
21
- ---
22
-
23
- ## 🚀 Installation
24
-
25
- ```bash
26
- npm install @alixpartners/ui-components
27
- ```
28
-
29
- ## 🔧 Usage
30
-
31
- ```tsx
32
- import { YourComponent } from '@alixpartners/ui-components'
33
-
34
- function App() {
35
- return <YourComponent />
36
- }
37
- ```
38
-
39
- ## 🧱 Components
40
-
41
- Explore all available components and documentation in Storybook.
42
-
43
- To run it locally:
44
-
45
- ```bash
46
- npm run storybook
47
- ```
48
-
49
- ---
50
-
51
- ## 📦 Build
52
-
53
- To bundle the library for publishing:
54
-
55
- ```bash
56
- npm run build
57
- ```
58
-
59
- The output will be in the `dist/` directory.
60
-
61
- ### Usage in projects while developing
62
-
63
- When working on the library and testing it in another project:
64
-
65
- ```bash
66
- # In the component library root:
67
- npm link
68
-
69
- # In the consuming project's root:
70
- npm link alix-partners-react-components-test
71
- ```
72
-
73
- Then import components using the `alix-partners-react-components-test` import.
74
-
75
- ## 🧪 Testing
76
-
77
- ```bash
78
- npm run test
79
- ```
80
-
81
- #### 🧪 Test Coverage
82
-
83
- ```bash
84
- npm run coverage
85
- ```
86
-
87
- ## 📚 Publish
88
-
89
- To publish to npm:
90
-
91
- 1. Bump the version in `package.json`
92
- 2. Create a pull request in Azure DevOps to the `main` branch
93
- 3. This will automatically publish the library to `npm` once approved
94
-
95
- ## 🤝 Contributing
96
-
97
- The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.
1
+ # AlixPartners UI Component Library
2
+
3
+ A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
4
+
5
+ Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
6
+
7
+ ## ✨ What’s New in 2.0
8
+
9
+ - Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
10
+ - Updated design tokens and styles aligned with AlixPartners Design System
11
+ - Improved accessibility (a11y) and semantic HTML usage
12
+ - Streamlined props API for cleaner integration
13
+ - Enhanced Storybook documentation
14
+ - Faster build & development workflows
15
+
16
+ ### Version Support
17
+
18
+ - v2.x — Active development (BETA)
19
+ - v1.x — Maintained for legacy projects (no new features, critical fixes only)
20
+
21
+ ---
22
+
23
+ ## 🚀 Installation
24
+
25
+ ```bash
26
+ npm install @alixpartners/ui-components
27
+ ```
28
+
29
+ ## 🔧 Usage
30
+
31
+ ```tsx
32
+ import { YourComponent } from '@alixpartners/ui-components'
33
+
34
+ function App() {
35
+ return <YourComponent />
36
+ }
37
+ ```
38
+
39
+ ## 🧱 Components
40
+
41
+ Explore all available components and documentation in Storybook.
42
+
43
+ To run it locally:
44
+
45
+ ```bash
46
+ npm run storybook
47
+ ```
48
+
49
+ ---
50
+
51
+ ## 📦 Build
52
+
53
+ To bundle the library for publishing:
54
+
55
+ ```bash
56
+ npm run build
57
+ ```
58
+
59
+ The output will be in the `dist/` directory.
60
+
61
+ ### Usage in projects while developing
62
+
63
+ When working on the library and testing it in another project:
64
+
65
+ ```bash
66
+ # In the component library root:
67
+ npm link
68
+
69
+ # In the consuming project's root:
70
+ npm link alix-partners-react-components-test
71
+ ```
72
+
73
+ Then import components using the `alix-partners-react-components-test` import.
74
+
75
+ ## 🧪 Testing
76
+
77
+ ```bash
78
+ npm run test
79
+ ```
80
+
81
+ #### 🧪 Test Coverage
82
+
83
+ ```bash
84
+ npm run coverage
85
+ ```
86
+
87
+ ## 📚 Publish
88
+
89
+ To publish to npm:
90
+
91
+ 1. Bump the version in `package.json`
92
+ 2. Create a pull request in Azure DevOps to the `main` branch
93
+ 3. This will automatically publish the library to `npm` once approved
94
+
95
+ ## 🤝 Contributing
96
+
97
+ The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.
package/dist/assets/CorusHeader.css CHANGED
@@ -1 +1 @@
1
- .CorusHeader-module__navbar-wrapper___1KxAb{background-color:#333;width:100%;height:56px;padding:8px 20px;box-sizing:border-box}.CorusHeader-module__navbar-container___E75C0{display:flex;align-items:center;justify-content:space-between;height:100%;margin-left:auto;margin-right:auto}.CorusHeader-module__navbar-logo-container___va-bi{display:flex;align-items:center;gap:12px}.CorusHeader-module__navbar-logo-link___c96t1{display:flex;align-items:center;cursor:pointer}.CorusHeader-module__navbar-project-name___TmX-b{font-size:18px;font-weight:500;color:#fff}.CorusHeader-module__navbar-module-name___GKW5y{font-size:18px;font-weight:500;color:#8dca7e}.CorusHeader-module__navbar-menu___t4hvB{display:flex;align-items:center;height:100%}.CorusHeader-module__navbar-menu-list___avqIc button{all:unset}.CorusHeader-module__navbar-menu-list___avqIc{display:flex;align-items:center;gap:16px;padding:0;margin:0;height:100%}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr{cursor:pointer;text-decoration:none;color:#fff;line-height:1;height:100%;display:flex;align-items:center}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:13px;font-weight:500;height:100%}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-arrow___-peqY,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-arrow___-peqY{color:#8dca7e}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-arrow___-peqY{transform:rotate(180deg)}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr a{text-decoration:none;color:#fff}.CorusHeader-module__navbar-menu-list-item-arrow___-peqY{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.CorusHeader-module__navbar-menu-list-item-submenu___XdiI1{margin-top:6px;padding:2px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:13px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;font-family:Roboto,sans-serif;min-height:24px;box-sizing:border-box}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo:hover{background-color:#dff0db}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo:focus{outline:none}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo a{text-decoration:none;color:inherit;width:100%}.CorusHeader-module__navbar-action-button___Db8zx{margin-right:8px}.CorusHeader-module__navbar-menu-additional___00q5q{display:flex;align-items:center;gap:8px;margin-left:24px}.CorusHeader-module__navbar-menu-additional-trigger___HZmWR{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;height:47px;box-sizing:border-box}.CorusHeader-module__navbar-menu-additional-icon___4EDq9{width:24px;height:24px}.CorusHeader-module__navbar-settings-icon___TeGCJ{color:#fff;font-size:20px;width:20px;height:20px}.CorusHeader-module__navbar-profile-icon___I2WA2{color:#fff;width:17px;height:17px}.CorusHeader-module__navbar-menu-additional-trigger___HZmWR:hover .CorusHeader-module__navbar-settings-icon___TeGCJ,.CorusHeader-module__navbar-menu-additional-trigger___HZmWR[data-state=open] .CorusHeader-module__navbar-settings-icon___TeGCJ{color:#8dca7e}.CorusHeader-module__mega-menu-content___W-xjj{margin-top:-4px;background-color:#fff;border-radius:4px;box-shadow:0 4px 8px #00000029;display:flex;flex-direction:row;z-index:1000;box-sizing:border-box;padding:0 8px}.CorusHeader-module__mega-menu-column-wrapper___1ZgWq{display:flex;flex-direction:row;align-items:stretch}.CorusHeader-module__mega-menu-divider___6nYcz{width:1px;align-self:stretch;background-color:#dff0db;flex-shrink:0}.CorusHeader-module__mega-menu-column___yHh9s{display:flex;flex-direction:column;padding:24px;min-width:200px;width:200px;gap:0}.CorusHeader-module__mega-menu-items___hJQSC{display:flex;flex-direction:column;gap:8px;flex:1}.CorusHeader-module__mega-menu-heading___aPj3a{padding:8px 0;font-size:12px;font-weight:400;font-family:Roboto,sans-serif;color:#727272;text-transform:uppercase;letter-spacing:.5px;line-height:14px;white-space:nowrap}.CorusHeader-module__mega-menu-item___WxCN-{display:flex;flex-direction:column;padding:8px;border-radius:4px;cursor:pointer;text-decoration:none;color:inherit;transition:background-color .15s ease;box-sizing:border-box}.CorusHeader-module__mega-menu-item___WxCN-:hover{background-color:#dff0db}.CorusHeader-module__mega-menu-item___WxCN-:focus{outline:none;background-color:#dff0db}.CorusHeader-module__mega-menu-item-label___TyZiu{display:block;font-size:13px;font-weight:500;font-family:Roboto,sans-serif;color:#28292c;line-height:19px}.CorusHeader-module__mega-menu-item-description___e3-s2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;width:100%;font-size:12px;font-weight:400;font-family:Roboto,sans-serif;color:#727272;line-height:14px;margin-top:2px}.CorusHeader-module__dropdown-item-row___pBKtB{display:flex;align-items:flex-start;gap:4px;width:100%}.CorusHeader-module__dropdown-item-icon___cPSQk{flex-shrink:0;width:16px;height:16px;font-size:16px;color:#28292c;margin-top:1px}.CorusHeader-module__dropdown-item-content___z4wRj{display:flex;flex-direction:column;flex:1;min-width:0}.CorusHeader-module__mega-menu-footer___sBd8B{margin-top:32px}
1
+ .CorusHeader-module__navbar-wrapper___1KxAb{background-color:#333;width:100%;height:56px;padding:8px 20px;box-sizing:border-box}.CorusHeader-module__navbar-container___E75C0{display:flex;align-items:center;justify-content:space-between;height:100%;margin-left:auto;margin-right:auto}.CorusHeader-module__navbar-logo-container___va-bi{display:flex;align-items:center;gap:12px}.CorusHeader-module__navbar-logo-link___c96t1{display:flex;align-items:center;cursor:pointer}.CorusHeader-module__navbar-project-name___TmX-b{font-size:18px;font-weight:500;color:#fff}.CorusHeader-module__navbar-module-name___GKW5y{font-size:18px;font-weight:500;color:#8dca7e}.CorusHeader-module__navbar-menu___t4hvB{display:flex;align-items:center;height:100%}.CorusHeader-module__navbar-menu-list___avqIc button{all:unset}.CorusHeader-module__navbar-menu-list___avqIc{display:flex;align-items:center;gap:16px;padding:0;margin:0;height:100%}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr{cursor:pointer;text-decoration:none;color:#fff;line-height:1;height:100%;display:flex;align-items:center}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:13px;font-weight:500;height:100%}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-trigger-container___nYo0n,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-action___Fd2Kz,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr:hover .CorusHeader-module__navbar-menu-list-item-arrow___-peqY,.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-arrow___-peqY{color:#8dca7e}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr[data-state=open] .CorusHeader-module__navbar-menu-list-item-arrow___-peqY{transform:rotate(180deg)}.CorusHeader-module__navbar-menu-list___avqIc .CorusHeader-module__navbar-menu-list-item___EvvFr a{text-decoration:none;color:#fff}.CorusHeader-module__navbar-menu-list-item-arrow___-peqY{color:#fff;font-size:16px!important;width:16px;height:16px;transition:transform .2s ease}.CorusHeader-module__navbar-menu-list-item-submenu___XdiI1{margin-top:6px;padding:2px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:13px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;font-family:Roboto,sans-serif;min-height:24px;box-sizing:border-box}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo:hover{background-color:#dff0db}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo:focus{outline:none}.CorusHeader-module__navbar-menu-list-item-submenu-item___Y-PRo a{text-decoration:none;color:inherit;width:100%}.CorusHeader-module__navbar-action-button___Db8zx{margin-right:8px}.CorusHeader-module__navbar-menu-additional___00q5q{display:flex;align-items:center;gap:8px;margin-left:24px}.CorusHeader-module__navbar-menu-additional-trigger___HZmWR{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;height:47px;box-sizing:border-box}.CorusHeader-module__navbar-menu-additional-icon___4EDq9{width:24px;height:24px}.CorusHeader-module__navbar-settings-icon___TeGCJ{color:#fff;font-size:20px!important;width:20px;height:20px}.CorusHeader-module__navbar-profile-icon___I2WA2{color:#fff;width:17px;height:17px}.CorusHeader-module__navbar-menu-additional-trigger___HZmWR:hover .CorusHeader-module__navbar-settings-icon___TeGCJ,.CorusHeader-module__navbar-menu-additional-trigger___HZmWR[data-state=open] .CorusHeader-module__navbar-settings-icon___TeGCJ{color:#8dca7e}.CorusHeader-module__mega-menu-content___W-xjj{margin-top:-4px;background-color:#fff;border-radius:4px;box-shadow:0 4px 8px #00000029;display:flex;flex-direction:row;z-index:1000;box-sizing:border-box;padding:0 8px}.CorusHeader-module__mega-menu-column-wrapper___1ZgWq{display:flex;flex-direction:row;align-items:stretch}.CorusHeader-module__mega-menu-divider___6nYcz{width:1px;align-self:stretch;background-color:#dff0db;flex-shrink:0}.CorusHeader-module__mega-menu-column___yHh9s{display:flex;flex-direction:column;padding:24px;min-width:200px;width:200px;gap:0}.CorusHeader-module__mega-menu-items___hJQSC{display:flex;flex-direction:column;gap:8px;flex:1}.CorusHeader-module__mega-menu-heading___aPj3a{padding:8px 0;font-size:12px;font-weight:400;font-family:Roboto,sans-serif;color:#727272;text-transform:uppercase;letter-spacing:.5px;line-height:14px;white-space:nowrap}.CorusHeader-module__mega-menu-item___WxCN-{display:flex;flex-direction:column;padding:8px;border-radius:4px;cursor:pointer;text-decoration:none;color:inherit;transition:background-color .15s ease;box-sizing:border-box}.CorusHeader-module__mega-menu-item___WxCN-:hover{background-color:#dff0db}.CorusHeader-module__mega-menu-item___WxCN-:focus{outline:none;background-color:#dff0db}.CorusHeader-module__mega-menu-item___WxCN-[data-disabled]{cursor:not-allowed;pointer-events:none}.CorusHeader-module__mega-menu-item___WxCN-[data-disabled] .CorusHeader-module__mega-menu-item-label___TyZiu{color:#b0b0b0}.CorusHeader-module__mega-menu-item___WxCN-[data-disabled] .CorusHeader-module__mega-menu-item-description___e3-s2{color:#c8c8c8}.CorusHeader-module__mega-menu-item___WxCN-[data-disabled]:hover{background-color:transparent}.CorusHeader-module__mega-menu-item-label___TyZiu{display:block;font-size:13px;font-weight:500;font-family:Roboto,sans-serif;color:#28292c;line-height:19px}.CorusHeader-module__mega-menu-item-description___e3-s2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;width:100%;font-size:12px;font-weight:400;font-family:Roboto,sans-serif;color:#727272;line-height:14px;margin-top:2px}.CorusHeader-module__dropdown-item-row___pBKtB{display:flex;align-items:flex-start;gap:4px;width:100%}.CorusHeader-module__dropdown-item-icon___cPSQk{flex-shrink:0;width:16px;height:16px;font-size:16px;color:#28292c;margin-top:1px}.CorusHeader-module__dropdown-item-content___z4wRj{display:flex;flex-direction:column;flex:1;min-width:0}.CorusHeader-module__mega-menu-footer___sBd8B{margin-top:32px}.CorusHeader-module__mega-menu-footer___sBd8B button{width:100%!important}
package/dist/components/CorusHeader/CorusHeader.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { CorusHeaderProps } from './CorusHeader.types';
2
- export type { CorusHeaderNavItem, CorusHeaderNavGroup, CorusHeaderMenuItem, CorusHeaderDropdownItem, CorusHeaderProps, } from './CorusHeader.types';
3
- export default function CorusHeader({ projectName, projectLogoIcon, projectLogoOnClick, moduleName, menuItems, actionButton, additionalItems, className, maxWidth, ...props }: CorusHeaderProps): import("react/jsx-runtime").JSX.Element;
2
+ export type { CorusHeaderNavItem, CorusHeaderNavGroup, CorusHeaderMenuItem, CorusHeaderDropdownItem, CorusHeaderFooterAction, CorusHeaderAdditionalItems, CorusHeaderMenuConfig, CorusHeaderProps, } from './CorusHeader.types';
3
+ export default function CorusHeader({ projectName, projectLogoIcon, projectLogoOnClick, moduleName, menuConfig, className, maxWidth, ...props }: CorusHeaderProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/CorusHeader/CorusHeader.js CHANGED
@@ -1,65 +1,66 @@
1
- import { jsx as r, jsxs as l } from "react/jsx-runtime";
2
- import { useState as P, useRef as k } from "react";
3
- import { c as w } from "../../clsx-OuTLNxxd.js";
4
- import x from "../Logo/Logo.js";
5
- import g from "../Icon/Icon.js";
6
- import y from "../Button/Button.js";
1
+ import { jsx as r, jsxs as a } from "react/jsx-runtime";
2
+ import { useState as M, useRef as P } from "react";
3
+ import { c as k } from "../../clsx-OuTLNxxd.js";
4
+ import w from "../Logo/Logo.js";
5
+ import u from "../Icon/Icon.js";
6
+ import x from "../Button/Button.js";
7
7
  import { s as o } from "../../CorusHeader.module-xOp6ZX_M.js";
8
- import b from "./DropdownMenu.js";
9
- import D from "./MegaMenuContent.js";
10
- import R from "./UserProfileIcon.js";
11
- import { R as j, M as O, T } from "../../index-D_L0ncPJ.js";
12
- const z = {
8
+ import p from "./DropdownMenu.js";
9
+ import y from "./MegaMenuContent.js";
10
+ import B from "./UserProfileIcon.js";
11
+ import { R as D, M as R, T as j } from "../../index-D_L0ncPJ.js";
12
+ const O = {
13
13
  type: "primary",
14
14
  size: "sm",
15
15
  icon: "ap-icon-person-add",
16
16
  iconPosition: "left"
17
17
  };
18
- function Q({
19
- projectName: f,
20
- projectLogoIcon: h = "ap-icon-logo-corus",
21
- projectLogoOnClick: v,
18
+ function J({
19
+ projectName: m,
20
+ projectLogoIcon: g = "ap-icon-logo-corus",
21
+ projectLogoOnClick: b,
22
22
  moduleName: i,
23
- menuItems: s,
24
- actionButton: a,
25
- additionalItems: n,
26
- className: t,
27
- maxWidth: N,
28
- ...m
23
+ menuConfig: f,
24
+ className: h,
25
+ maxWidth: v,
26
+ ...N
29
27
  }) {
30
- const [c, p] = P(null), u = k(null), C = a || (n == null ? void 0 : n.settings) && n.settings.length > 0 || (n == null ? void 0 : n.userProfile);
31
- return /* @__PURE__ */ r("div", { className: w(o["navbar-wrapper"], t), ...m, children: /* @__PURE__ */ l("div", { className: o["navbar-container"], style: {
32
- maxWidth: N
28
+ const [s, l] = M(null), c = P(null), {
29
+ items: t,
30
+ additionalItems: n
31
+ } = f ?? {}, d = (n == null ? void 0 : n.actionButton) || (n == null ? void 0 : n.settings) && n.settings.length > 0 || (n == null ? void 0 : n.userProfile);
32
+ return /* @__PURE__ */ r("div", { className: k(o["navbar-wrapper"], h), ...N, children: /* @__PURE__ */ a("div", { className: o["navbar-container"], style: {
33
+ maxWidth: v
33
34
  }, children: [
34
- /* @__PURE__ */ l("div", { className: o["navbar-logo-container"], children: [
35
- /* @__PURE__ */ r("a", { onClick: v, className: o["navbar-logo-link"], children: /* @__PURE__ */ r(x, { logo: h, color: "lightGreen" }) }),
36
- /* @__PURE__ */ r("span", { className: o["navbar-project-name"], children: f }),
35
+ /* @__PURE__ */ a("div", { className: o["navbar-logo-container"], children: [
36
+ /* @__PURE__ */ r("a", { onClick: b, className: o["navbar-logo-link"], children: /* @__PURE__ */ r(w, { logo: g, color: "lightGreen" }) }),
37
+ /* @__PURE__ */ r("span", { className: o["navbar-project-name"], children: m }),
37
38
  i && /* @__PURE__ */ r("span", { className: o["navbar-module-name"], children: i })
38
39
  ] }),
39
- /* @__PURE__ */ l("div", { className: o["navbar-menu"], children: [
40
- /* @__PURE__ */ r(j, { className: o["navbar-menu-list"], children: s == null ? void 0 : s.map((e) => /* @__PURE__ */ r("div", { children: /* @__PURE__ */ l(O, { open: c === e.label, onOpenChange: (M) => p(M ? e.label : null), children: [
41
- /* @__PURE__ */ r(T, { "data-state": c === e.label ? "open" : "closed", onPointerDown: () => {
42
- u.current = c === e.label ? e.label : null;
40
+ /* @__PURE__ */ a("div", { className: o["navbar-menu"], children: [
41
+ /* @__PURE__ */ r(D, { className: o["navbar-menu-list"], children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ r("div", { children: /* @__PURE__ */ a(R, { open: s === e.label, onOpenChange: (C) => l(C ? e.label : null), children: [
42
+ /* @__PURE__ */ r(j, { "data-state": s === e.label ? "open" : "closed", onPointerDown: () => {
43
+ c.current = s === e.label ? e.label : null;
43
44
  }, onClick: () => {
44
- if (u.current === e.label) {
45
- u.current = null;
45
+ if (c.current === e.label) {
46
+ c.current = null;
46
47
  return;
47
48
  }
48
- e.groups && p(e.label);
49
- }, className: o["navbar-menu-list-item"], children: e.groups ? /* @__PURE__ */ l("span", { className: o["navbar-menu-list-item-trigger-container"], children: [
49
+ e.groups && l(e.label);
50
+ }, className: o["navbar-menu-list-item"], children: e.groups ? /* @__PURE__ */ a("span", { className: o["navbar-menu-list-item-trigger-container"], children: [
50
51
  /* @__PURE__ */ r("span", { children: e.label }),
51
- /* @__PURE__ */ r(g, { icon: "ap-icon-expand-more", className: o["navbar-menu-list-item-arrow"] })
52
+ /* @__PURE__ */ r(u, { icon: "ap-icon-expand-more", className: o["navbar-menu-list-item-arrow"] })
52
53
  ] }) : /* @__PURE__ */ r("a", { className: o["navbar-menu-list-item-action"], href: e.href, onClick: e.onClick, children: e.label }) }),
53
- e.groups && /* @__PURE__ */ r(D, { groups: e.groups, onClose: () => p(null) })
54
+ e.groups && /* @__PURE__ */ r(y, { groups: e.groups, onClose: () => l(null) })
54
55
  ] }) }, e.label)) }),
55
- C ? /* @__PURE__ */ l("div", { className: o["navbar-menu-additional"], children: [
56
- a && /* @__PURE__ */ r("div", { className: o["navbar-action-button"], children: /* @__PURE__ */ r(y, { ...z, ...a }) }),
57
- (n == null ? void 0 : n.settings) && n.settings.length > 0 && /* @__PURE__ */ r(b, { triggerContent: /* @__PURE__ */ r(g, { icon: "ap-icon-settings", className: o["navbar-settings-icon"] }), items: n.settings }),
58
- (n == null ? void 0 : n.userProfile) && /* @__PURE__ */ r(b, { triggerContent: /* @__PURE__ */ r(R, { className: o["navbar-profile-icon"] }), items: n.userProfile.items })
56
+ d ? /* @__PURE__ */ a("div", { className: o["navbar-menu-additional"], children: [
57
+ (n == null ? void 0 : n.actionButton) && /* @__PURE__ */ r("div", { className: o["navbar-action-button"], children: /* @__PURE__ */ r(x, { ...O, ...n.actionButton }) }),
58
+ (n == null ? void 0 : n.settings) && n.settings.length > 0 && /* @__PURE__ */ r(p, { triggerContent: /* @__PURE__ */ r(u, { icon: "ap-icon-settings", className: o["navbar-settings-icon"] }), items: n.settings }),
59
+ (n == null ? void 0 : n.userProfile) && /* @__PURE__ */ r(p, { triggerContent: /* @__PURE__ */ r(B, { className: o["navbar-profile-icon"] }), items: n.userProfile.items })
59
60
  ] }) : null
60
61
  ] })
61
62
  ] }) });
62
63
  }
63
64
  export {
64
- Q as default
65
+ J as default
65
66
  };
package/dist/components/CorusHeader/CorusHeader.types.d.ts CHANGED
@@ -7,11 +7,18 @@ export type CorusHeaderNavItem = {
7
7
  description?: string;
8
8
  href?: string;
9
9
  onClick?: () => void;
10
+ disabled?: boolean;
11
+ };
12
+ export type CorusHeaderFooterAction = {
13
+ variant: 'add' | 'upload';
14
+ label: string;
15
+ onClick?: () => void;
16
+ disabled?: boolean;
10
17
  };
11
18
  export type CorusHeaderNavGroup = {
12
- heading: string;
19
+ heading?: string;
13
20
  items: CorusHeaderNavItem[];
14
- footerAction?: React.ReactNode;
21
+ footerAction?: CorusHeaderFooterAction;
15
22
  };
16
23
  export type CorusHeaderMenuItem = {
17
24
  label: string;
@@ -26,22 +33,26 @@ export type CorusHeaderDropdownItem = {
26
33
  href?: string;
27
34
  onClick?: () => void;
28
35
  };
36
+ export type CorusHeaderAdditionalItems = {
37
+ actionButton?: Omit<ButtonProps, 'type'> & {
38
+ type?: ButtonProps['type'];
39
+ };
40
+ settings?: CorusHeaderDropdownItem[];
41
+ userProfile?: {
42
+ initials: string;
43
+ items: CorusHeaderDropdownItem[];
44
+ };
45
+ };
46
+ export type CorusHeaderMenuConfig = {
47
+ items?: CorusHeaderMenuItem[];
48
+ additionalItems?: CorusHeaderAdditionalItems;
49
+ };
29
50
  export type CorusHeaderProps = {
30
51
  projectName: string;
31
52
  projectLogoIcon?: ApLogo;
32
53
  projectLogoOnClick?: () => void;
33
54
  moduleName?: string;
34
- menuItems?: CorusHeaderMenuItem[];
35
- actionButton?: Omit<ButtonProps, 'type'> & {
36
- type?: ButtonProps['type'];
37
- };
38
- additionalItems?: {
39
- settings?: CorusHeaderDropdownItem[];
40
- userProfile?: {
41
- initials: string;
42
- items: CorusHeaderDropdownItem[];
43
- };
44
- };
55
+ menuConfig?: CorusHeaderMenuConfig;
45
56
  className?: string;
46
57
  maxWidth?: string;
47
58
  } & DataAttributes;
package/dist/components/CorusHeader/MegaMenuContent.js CHANGED
@@ -1,24 +1,29 @@
1
- import { jsx as a, jsxs as s } from "react/jsx-runtime";
2
- import { s as e } from "../../CorusHeader.module-xOp6ZX_M.js";
3
- import { P as r, C as d, I as t } from "../../index-D_L0ncPJ.js";
4
- function g({
5
- groups: l,
6
- onClose: m
1
+ import { jsx as n, jsxs as l } from "react/jsx-runtime";
2
+ import { s as i } from "../../CorusHeader.module-xOp6ZX_M.js";
3
+ import o from "../Button/Button.js";
4
+ import { P as m, C as t, I as r } from "../../index-D_L0ncPJ.js";
5
+ const h = {
6
+ add: "ap-icon-add",
7
+ upload: "ap-icon-upload"
8
+ };
9
+ function b({
10
+ groups: d,
11
+ onClose: c
7
12
  }) {
8
- return /* @__PURE__ */ a(r, { children: /* @__PURE__ */ a(d, { align: "end", className: e["mega-menu-content"], children: l.map((n, c) => /* @__PURE__ */ s("div", { className: e["mega-menu-column-wrapper"], children: [
9
- c > 0 && /* @__PURE__ */ a("div", { className: e["mega-menu-divider"] }),
10
- /* @__PURE__ */ s("div", { className: e["mega-menu-column"], children: [
11
- /* @__PURE__ */ s("div", { className: e["mega-menu-items"], children: [
12
- /* @__PURE__ */ a("div", { className: e["mega-menu-heading"], children: n.heading }),
13
- n.items.map((i) => /* @__PURE__ */ a(t, { className: e["mega-menu-item"], asChild: !0, onSelect: m, children: /* @__PURE__ */ s("a", { href: i.href, onClick: i.onClick, children: [
14
- /* @__PURE__ */ a("span", { className: e["mega-menu-item-label"], children: i.label }),
15
- i.description && /* @__PURE__ */ a("span", { className: e["mega-menu-item-description"], children: i.description.length > 60 ? `${i.description.slice(0, 60)}…` : i.description })
16
- ] }) }, i.label))
13
+ return /* @__PURE__ */ n(m, { children: /* @__PURE__ */ n(t, { align: "end", className: i["mega-menu-content"], children: d.map((a, s) => /* @__PURE__ */ l("div", { className: i["mega-menu-column-wrapper"], children: [
14
+ s > 0 && /* @__PURE__ */ n("div", { className: i["mega-menu-divider"] }),
15
+ /* @__PURE__ */ l("div", { className: i["mega-menu-column"], children: [
16
+ /* @__PURE__ */ l("div", { className: i["mega-menu-items"], children: [
17
+ a.heading && /* @__PURE__ */ n("div", { className: i["mega-menu-heading"], children: a.heading }),
18
+ a.items.map((e) => /* @__PURE__ */ n(r, { className: i["mega-menu-item"], asChild: !0, disabled: e.disabled, onSelect: c, children: /* @__PURE__ */ l("a", { href: e.disabled ? void 0 : e.href, onClick: e.disabled ? void 0 : e.onClick, children: [
19
+ /* @__PURE__ */ n("span", { className: i["mega-menu-item-label"], children: e.label }),
20
+ e.description && /* @__PURE__ */ n("span", { className: i["mega-menu-item-description"], children: e.description.length > 60 ? `${e.description.slice(0, 60)}…` : e.description })
21
+ ] }) }, e.label))
17
22
  ] }),
18
- n.footerAction && /* @__PURE__ */ a("div", { className: e["mega-menu-footer"], children: n.footerAction })
23
+ a.footerAction && /* @__PURE__ */ n("div", { className: i["mega-menu-footer"], children: /* @__PURE__ */ n(o, { type: "secondary", size: "sm", icon: h[a.footerAction.variant], iconPosition: "left", onClick: a.footerAction.onClick, disabled: a.footerAction.disabled, children: a.footerAction.label }) })
19
24
  ] })
20
- ] }, n.heading)) }) });
25
+ ] }, a.heading ?? s)) }) });
21
26
  }
22
27
  export {
23
- g as default
28
+ b as default
24
29
  };
package/dist/web.config CHANGED
@@ -1,9 +1,9 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <configuration>
3
- <system.webServer>
4
- <staticContent>
5
- <remove fileExtension=".json"/>
6
- <mimeMap fileExtension=".json" mimeType="application/json"/>
7
- </staticContent>
8
- </system.webServer>
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <configuration>
3
+ <system.webServer>
4
+ <staticContent>
5
+ <remove fileExtension=".json"/>
6
+ <mimeMap fileExtension=".json" mimeType="application/json"/>
7
+ </staticContent>
8
+ </system.webServer>
9
9
  </configuration>
package/package.json CHANGED
@@ -1,94 +1,94 @@
1
- {
2
- "name": "@alixpartners/ui-components",
3
- "version": "2.5.5",
4
- "type": "module",
5
- "files": [
6
- "dist"
7
- ],
8
- "exports": "./dist/main.js",
9
- "module": "./dist/main.js",
10
- "types": "./dist/main.d.ts",
11
- "license": "SEE LICENSE IN LICENSE.md",
12
- "repository": "https://alixpartners-dev.visualstudio.com/_git/AP.UIComponents",
13
- "main": "./dist/umd/index.js",
14
- "scripts": {
15
- "build": "npm run generate-illustrations && tsc -b && vite build",
16
- "lint": "eslint . --ext ts,tsx",
17
- "lint:fix": "eslint . --ext ts,tsx --fix",
18
- "format": "prettier --check .",
19
- "format:fix": "prettier --write .",
20
- "stylelint": "stylelint **/*.css",
21
- "stylelint:fix": "stylelint **/*.css --fix",
22
- "storybook": "storybook dev -p 6006",
23
- "build-storybook": "storybook build",
24
- "test": "vitest",
25
- "test:unit": "vitest --project unit",
26
- "test:storybook": "vitest --project storybook",
27
- "test:ui": "vitest --ui",
28
- "test:playwright": "playwright test",
29
- "test:playwright:chromium": "playwright test --project=chromium",
30
- "test:playwright:firefox": "playwright test --project=firefox",
31
- "test:playwright:webkit": "playwright test --project=webkit",
32
- "coverage": "vitest run --coverage",
33
- "generate-icons": "node ./src/assets/generateIconsHelperFiles.js",
34
- "generate-illustrations": "node ./src/assets/generateIllustrationsHelperFiles.js",
35
- "generate-e2e-code": "npx playwright codegen"
36
- },
37
- "dependencies": {
38
- "clsx": "^2.1.1"
39
- },
40
- "peerDependencies": {
41
- "notistack": "^3.0.1",
42
- "radix-ui": "^1.4.2",
43
- "react": "^18.3.1",
44
- "react-dom": "^18.3.1"
45
- },
46
- "devDependencies": {
47
- "@chromatic-com/storybook": "^4.0.1",
48
- "@eslint/js": "^9.25.0",
49
- "@playwright/test": "^1.60.0",
50
- "@storybook/addon-designs": "^10.0.2",
51
- "@storybook/addon-docs": "^9.0.18",
52
- "@storybook/addon-onboarding": "^9.0.18",
53
- "@storybook/addon-vitest": "9.0.18",
54
- "@storybook/react-vite": "^9.0.18",
55
- "@testing-library/react": "^16.3.0",
56
- "@types/node": "^22.15.21",
57
- "@types/react": "^19.1.2",
58
- "@types/react-dom": "^19.1.2",
59
- "@vitejs/plugin-react": "^4.4.1",
60
- "@vitest/browser": "^3.1.4",
61
- "@vitest/coverage-v8": "^3.1.4",
62
- "@vitest/ui": "^3.1.4",
63
- "babel-plugin-react-remove-properties": "^0.3.0",
64
- "eslint": "^9.25.0",
65
- "eslint-config-prettier": "^10.1.5",
66
- "eslint-plugin-react-hooks": "^5.2.0",
67
- "eslint-plugin-react-refresh": "^0.4.19",
68
- "eslint-plugin-storybook": "^9.0.18",
69
- "glob": "^11.0.2",
70
- "globals": "^16.0.0",
71
- "happy-dom": "^15.11.6",
72
- "jsdom": "^26.1.0",
73
- "notistack": "^3.0.1",
74
- "playwright": "^1.60.0",
75
- "postcss-scss": "^4.0.9",
76
- "prettier": "^3.5.3",
77
- "sass": "^1.89.0",
78
- "storybook": "^9.0.18",
79
- "stylelint": "^16.19.1",
80
- "stylelint-config-standard": "^38.0.0",
81
- "stylelint-scss": "^6.12.0",
82
- "typescript": "~5.8.3",
83
- "typescript-eslint": "^8.30.1",
84
- "vite": "^6.3.5",
85
- "vite-plugin-dts": "^4.5.4",
86
- "vite-plugin-lib-inject-css": "^2.2.2",
87
- "vitest": "^3.1.4"
88
- },
89
- "eslintConfig": {
90
- "extends": [
91
- "plugin:storybook/recommended"
92
- ]
93
- }
94
- }
1
+ {
2
+ "name": "@alixpartners/ui-components",
3
+ "version": "2.5.6",
4
+ "type": "module",
5
+ "files": [
6
+ "dist"
7
+ ],
8
+ "exports": "./dist/main.js",
9
+ "module": "./dist/main.js",
10
+ "types": "./dist/main.d.ts",
11
+ "license": "SEE LICENSE IN LICENSE.md",
12
+ "repository": "https://alixpartners-dev.visualstudio.com/_git/AP.UIComponents",
13
+ "main": "./dist/umd/index.js",
14
+ "scripts": {
15
+ "build": "npm run generate-illustrations && tsc -b && vite build",
16
+ "lint": "eslint . --ext ts,tsx",
17
+ "lint:fix": "eslint . --ext ts,tsx --fix",
18
+ "format": "prettier --check .",
19
+ "format:fix": "prettier --write .",
20
+ "stylelint": "stylelint **/*.css",
21
+ "stylelint:fix": "stylelint **/*.css --fix",
22
+ "storybook": "storybook dev -p 6006",
23
+ "build-storybook": "storybook build",
24
+ "test": "vitest",
25
+ "test:unit": "vitest --project unit",
26
+ "test:storybook": "vitest --project storybook",
27
+ "test:ui": "vitest --ui",
28
+ "test:playwright": "playwright test",
29
+ "test:playwright:chromium": "playwright test --project=chromium",
30
+ "test:playwright:firefox": "playwright test --project=firefox",
31
+ "test:playwright:webkit": "playwright test --project=webkit",
32
+ "coverage": "vitest run --coverage",
33
+ "generate-icons": "node ./src/assets/generateIconsHelperFiles.js",
34
+ "generate-illustrations": "node ./src/assets/generateIllustrationsHelperFiles.js",
35
+ "generate-e2e-code": "npx playwright codegen"
36
+ },
37
+ "dependencies": {
38
+ "clsx": "^2.1.1"
39
+ },
40
+ "peerDependencies": {
41
+ "notistack": "^3.0.1",
42
+ "radix-ui": "^1.4.2",
43
+ "react": "^18.3.1",
44
+ "react-dom": "^18.3.1"
45
+ },
46
+ "devDependencies": {
47
+ "@chromatic-com/storybook": "^4.0.1",
48
+ "@eslint/js": "^9.25.0",
49
+ "@playwright/test": "^1.60.0",
50
+ "@storybook/addon-designs": "^10.0.2",
51
+ "@storybook/addon-docs": "^9.0.18",
52
+ "@storybook/addon-onboarding": "^9.0.18",
53
+ "@storybook/addon-vitest": "9.0.18",
54
+ "@storybook/react-vite": "^9.0.18",
55
+ "@testing-library/react": "^16.3.0",
56
+ "@types/node": "^22.15.21",
57
+ "@types/react": "^19.1.2",
58
+ "@types/react-dom": "^19.1.2",
59
+ "@vitejs/plugin-react": "^4.4.1",
60
+ "@vitest/browser": "^3.1.4",
61
+ "@vitest/coverage-v8": "^3.1.4",
62
+ "@vitest/ui": "^3.1.4",
63
+ "babel-plugin-react-remove-properties": "^0.3.0",
64
+ "eslint": "^9.25.0",
65
+ "eslint-config-prettier": "^10.1.5",
66
+ "eslint-plugin-react-hooks": "^5.2.0",
67
+ "eslint-plugin-react-refresh": "^0.4.19",
68
+ "eslint-plugin-storybook": "^9.0.18",
69
+ "glob": "^11.0.2",
70
+ "globals": "^16.0.0",
71
+ "happy-dom": "^15.11.6",
72
+ "jsdom": "^26.1.0",
73
+ "notistack": "^3.0.1",
74
+ "playwright": "^1.60.0",
75
+ "postcss-scss": "^4.0.9",
76
+ "prettier": "^3.5.3",
77
+ "sass": "^1.89.0",
78
+ "storybook": "^9.0.18",
79
+ "stylelint": "^16.19.1",
80
+ "stylelint-config-standard": "^38.0.0",
81
+ "stylelint-scss": "^6.12.0",
82
+ "typescript": "~5.8.3",
83
+ "typescript-eslint": "^8.30.1",
84
+ "vite": "^6.3.5",
85
+ "vite-plugin-dts": "^4.5.4",
86
+ "vite-plugin-lib-inject-css": "^2.2.2",
87
+ "vitest": "^3.1.4"
88
+ },
89
+ "eslintConfig": {
90
+ "extends": [
91
+ "plugin:storybook/recommended"
92
+ ]
93
+ }
94
+ }