@alixpartners/ui-components 2.4.4 → 2.5.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.
Files changed (22) hide show
  1. package/README.md +97 -97
  2. package/dist/assets/Button.css +1 -1
  3. package/dist/assets/Illustration.css +1 -0
  4. package/dist/assets/NavBar.css +1 -1
  5. package/dist/assets/illustrations-map.d.ts +18 -0
  6. package/dist/components/Button/Button.d.ts +3 -1
  7. package/dist/components/Button/Button.js +23 -20
  8. package/dist/components/Button/Button.test.js +60 -54
  9. package/dist/components/Illustration/Illustration.d.ts +3 -0
  10. package/dist/components/Illustration/Illustration.js +206 -0
  11. package/dist/components/Illustration/Illustration.test.d.ts +1 -0
  12. package/dist/components/Illustration/Illustration.test.js +40 -0
  13. package/dist/components/Illustration/constants.d.ts +34 -0
  14. package/dist/components/Illustration/types.d.ts +22 -0
  15. package/dist/components/Illustration/utils.d.ts +11 -0
  16. package/dist/components/NavBar/NavBar.js +123 -121
  17. package/dist/components/TabNavigation/TabNavigation.d.ts +2 -1
  18. package/dist/components/TabNavigation/TabNavigation.js +4 -3
  19. package/dist/main.d.ts +1 -0
  20. package/dist/main.js +18 -16
  21. package/dist/web.config +8 -8
  22. package/package.json +88 -87
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/Button.css CHANGED
@@ -1 +1 @@
1
- .Button-module__btn___daEdK{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;border:none;text-align:center;font-family:Roboto,sans-serif;font-style:normal;font-weight:500;line-height:100%;cursor:pointer}.Button-module__btn-icon___G7m4S{display:flex;justify-content:center;align-items:center}.Button-module__btn-icon-sm___w7eg9{width:16px;height:16px;font-size:16px!important}.Button-module__btn-icon-md___8Ywy2{width:20px;height:20px;font-size:20px!important}.Button-module__btn-primary___vwY5K{border-radius:2px;color:#fff;background:#498e2b;gap:2px}.Button-module__btn-primary___vwY5K:hover{background:#3f7b25}.Button-module__btn-primary___vwY5K:disabled{background:#8dca7e;cursor:not-allowed}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG{background:#498e2b}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG:hover{background:#3f7b25}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG:disabled{background:#8dca7e}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb{background:#cb282e}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb:hover{background:#ac272c}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb:disabled{background:#f99397}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU{background:#878787}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU:hover{background:#727272}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU:disabled{background:#ccc}.Button-module__btn-primary___vwY5K .Button-module__loading-spinner___T25--{color:#fff}.Button-module__btn-secondary___w3xYM{border-radius:2px;border:1px solid #498e2b;background:#fff;gap:2px;color:#498e2b}.Button-module__btn-secondary___w3xYM:hover{border:1px solid #498e2b;color:#fff;background:#3f7b25}.Button-module__btn-secondary___w3xYM:disabled{border:1px solid #8dca7e;color:#8dca7e;background:#fff;cursor:not-allowed}.Button-module__btn-secondary___w3xYM .Button-module__loading-spinner___T25--{color:#8dca7e}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb{border:1px solid #cb282e;color:#cb282e}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb:hover:not(:disabled){border:1px solid #ac272c;color:#fff;background:#ac272c}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb:disabled{border:1px solid #f99397;color:#f99397}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb .Button-module__loading-spinner___T25--{color:#f99397}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU{border:1px solid #878787;color:#878787}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU:hover:not(:disabled){border:1px solid #727272;color:#fff;background:#727272}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU:disabled{border:1px solid #cccccc;color:#ccc}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU .Button-module__loading-spinner___T25--{color:#ccc}.Button-module__btn-tertiary___G-7lD{gap:2px;color:#4a4a4a;background:none}.Button-module__btn-tertiary___G-7lD:hover{color:#3f7b25}.Button-module__btn-tertiary___G-7lD:disabled{color:#ccc;cursor:not-allowed}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb{color:#cb282e}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb:hover{color:#ac272c}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb:disabled{color:#f99397}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb .Button-module__loading-spinner___T25--{color:#f99397}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU{color:#878787}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU:hover{color:#727272}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU:disabled{color:#ccc}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU .Button-module__loading-spinner___T25--,.Button-module__btn-tertiary___G-7lD .Button-module__loading-spinner___T25--{color:#ccc}.Button-module__btn-primary___vwY5K.Button-module__btn-disabled___eg1uH{background:#8dca7e;cursor:not-allowed}.Button-module__btn-primary___vwY5K .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}.Button-module__btn-secondary___w3xYM.Button-module__btn-disabled___eg1uH{border:1px solid #8dca7e;color:#8dca7e;background:#fff;cursor:not-allowed}.Button-module__btn-secondary___w3xYM .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}.Button-module__btn-tertiary___G-7lD.Button-module__btn-disabled___eg1uH{color:#ccc;cursor:not-allowed}.Button-module__btn-tertiary___G-7lD .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}@keyframes Button-module__loading___QfItr{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.Button-module__btn-sm___KNlkv{height:24px;padding:0 8px}.Button-module__btn-md___C8vqh{height:32px;padding:0 12px}.Button-module__btn-sm___KNlkv:not(.Button-module__btn-tertiary___G-7lD):not(:has(.Button-module__btn-icon___G7m4S:only-child)){min-width:78px;box-sizing:border-box}.Button-module__btn-md___C8vqh:not(.Button-module__btn-tertiary___G-7lD):not(:has(.Button-module__btn-icon___G7m4S:only-child)){min-width:94px;box-sizing:border-box}.Button-module__btn-sm___KNlkv:has(.Button-module__btn-icon___G7m4S:only-child){padding:0;width:24px}.Button-module__btn-md___C8vqh:has(.Button-module__btn-icon___G7m4S:only-child){padding:0;width:32px}.Button-module__btn-sm___KNlkv:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 8px 0 4px}.Button-module__btn-sm___KNlkv:has(.Button-module__loading-spinner___T25--){padding:0 8px 0 4px}.Button-module__btn-md___C8vqh:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 12px 0 8px}.Button-module__btn-md___C8vqh:has(.Button-module__loading-spinner___T25--){padding:0 12px 0 8px}.Button-module__btn-md___C8vqh .Button-module__btn-text___3ccH9{font-size:15px;font-weight:500;line-height:20px}.Button-module__btn-sm___KNlkv .Button-module__btn-text___3ccH9{font-size:13px;font-weight:500;line-height:18px}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD .Button-module__btn-text___3ccH9{font-size:13px}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD .Button-module__btn-text___3ccH9{font-size:12px}.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child) .Button-module__btn-icon-sm___w7eg9{width:20px;height:20px;font-size:20px}.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child) .Button-module__btn-icon-md___8Ywy2{width:24px;height:24px;font-size:24px}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD,.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD{padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child){padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__loading-spinner___T25--){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__loading-spinner___T25--){padding:0}.Button-module__btn-link___5KUtD{padding:0;margin:0;color:inherit;text-decoration:none}
1
+ .Button-module__btn___daEdK{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;border:none;text-align:center;font-family:Roboto,sans-serif;font-style:normal;font-weight:500;line-height:100%;cursor:pointer}.Button-module__btn-icon___G7m4S{display:flex;justify-content:center;align-items:center}.Button-module__btn-icon-position-left___qTvYS{flex-direction:row}.Button-module__btn-icon-position-right___janSP{flex-direction:row-reverse}.Button-module__btn-icon-sm___w7eg9{width:16px;height:16px;font-size:16px!important}.Button-module__btn-icon-md___8Ywy2{width:20px;height:20px;font-size:20px!important}.Button-module__btn-primary___vwY5K{border-radius:2px;color:#fff;background:#498e2b;gap:2px}.Button-module__btn-primary___vwY5K:hover{background:#3f7b25}.Button-module__btn-primary___vwY5K:disabled{background:#8dca7e;cursor:not-allowed}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG{background:#498e2b}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG:hover{background:#3f7b25}.Button-module__btn-primary___vwY5K.Button-module__btn-default___hpiKG:disabled{background:#8dca7e}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb{background:#cb282e}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb:hover{background:#ac272c}.Button-module__btn-primary___vwY5K.Button-module__btn-danger___jTLwb:disabled{background:#f99397}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU{background:#878787}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU:hover{background:#727272}.Button-module__btn-primary___vwY5K.Button-module__btn-cancel___4SwgU:disabled{background:#ccc}.Button-module__btn-primary___vwY5K .Button-module__loading-spinner___T25--{color:#fff}.Button-module__btn-secondary___w3xYM{border-radius:2px;border:1px solid #498e2b;background:#fff;gap:2px;color:#498e2b}.Button-module__btn-secondary___w3xYM:hover{border:1px solid #498e2b;color:#fff;background:#3f7b25}.Button-module__btn-secondary___w3xYM:disabled{border:1px solid #8dca7e;color:#8dca7e;background:#fff;cursor:not-allowed}.Button-module__btn-secondary___w3xYM .Button-module__loading-spinner___T25--{color:#8dca7e}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb{border:1px solid #cb282e;color:#cb282e}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb:hover:not(:disabled){border:1px solid #ac272c;color:#fff;background:#ac272c}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb:disabled{border:1px solid #f99397;color:#f99397}.Button-module__btn-secondary___w3xYM.Button-module__btn-danger___jTLwb .Button-module__loading-spinner___T25--{color:#f99397}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU{border:1px solid #878787;color:#878787}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU:hover:not(:disabled){border:1px solid #727272;color:#fff;background:#727272}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU:disabled{border:1px solid #cccccc;color:#ccc}.Button-module__btn-secondary___w3xYM.Button-module__btn-cancel___4SwgU .Button-module__loading-spinner___T25--{color:#ccc}.Button-module__btn-tertiary___G-7lD{gap:2px;color:#4a4a4a;background:none}.Button-module__btn-tertiary___G-7lD:hover{color:#3f7b25}.Button-module__btn-tertiary___G-7lD:disabled{color:#ccc;cursor:not-allowed}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb{color:#cb282e}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb:hover{color:#ac272c}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb:disabled{color:#f99397}.Button-module__btn-tertiary___G-7lD.Button-module__btn-danger___jTLwb .Button-module__loading-spinner___T25--{color:#f99397}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU{color:#878787}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU:hover{color:#727272}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU:disabled{color:#ccc}.Button-module__btn-tertiary___G-7lD.Button-module__btn-cancel___4SwgU .Button-module__loading-spinner___T25--,.Button-module__btn-tertiary___G-7lD .Button-module__loading-spinner___T25--{color:#ccc}.Button-module__btn-primary___vwY5K.Button-module__btn-disabled___eg1uH{background:#8dca7e;cursor:not-allowed}.Button-module__btn-primary___vwY5K .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}.Button-module__btn-secondary___w3xYM.Button-module__btn-disabled___eg1uH{border:1px solid #8dca7e;color:#8dca7e;background:#fff;cursor:not-allowed}.Button-module__btn-secondary___w3xYM .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}.Button-module__btn-tertiary___G-7lD.Button-module__btn-disabled___eg1uH{color:#ccc;cursor:not-allowed}.Button-module__btn-tertiary___G-7lD .Button-module__btn-loading___vAg78{animation:Button-module__loading___QfItr 2s linear infinite}@keyframes Button-module__loading___QfItr{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.Button-module__btn-sm___KNlkv{height:24px;padding:0 8px}.Button-module__btn-md___C8vqh{height:32px;padding:0 12px}.Button-module__btn-sm___KNlkv:not(.Button-module__btn-tertiary___G-7lD):not(:has(.Button-module__btn-icon___G7m4S:only-child)){min-width:78px;box-sizing:border-box}.Button-module__btn-md___C8vqh:not(.Button-module__btn-tertiary___G-7lD):not(:has(.Button-module__btn-icon___G7m4S:only-child)){min-width:94px;box-sizing:border-box}.Button-module__btn-sm___KNlkv:has(.Button-module__btn-icon___G7m4S:only-child){padding:0;width:24px}.Button-module__btn-md___C8vqh:has(.Button-module__btn-icon___G7m4S:only-child){padding:0;width:32px}.Button-module__btn-sm___KNlkv:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 8px 0 4px}.Button-module__btn-icon-position-right___janSP.Button-module__btn-sm___KNlkv:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 4px 0 8px}.Button-module__btn-sm___KNlkv:has(.Button-module__loading-spinner___T25--){padding:0 8px 0 4px}.Button-module__btn-icon-position-right___janSP.Button-module__btn-sm___KNlkv:has(.Button-module__loading-spinner___T25--){padding:0 4px 0 8px}.Button-module__btn-md___C8vqh:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 12px 0 8px}.Button-module__btn-md___C8vqh:has(.Button-module__loading-spinner___T25--){padding:0 12px 0 8px}.Button-module__btn-icon-position-right___janSP.Button-module__btn-md___C8vqh:has(.Button-module__loading-spinner___T25--){padding:0 8px 0 12px}.Button-module__btn-icon-position-right___janSP.Button-module__btn-md___C8vqh:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0 8px 0 12px}.Button-module__btn-md___C8vqh .Button-module__btn-text___3ccH9{font-size:15px;font-weight:500;line-height:20px}.Button-module__btn-sm___KNlkv .Button-module__btn-text___3ccH9{font-size:13px;font-weight:500;line-height:18px}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD .Button-module__btn-text___3ccH9{font-size:13px}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD .Button-module__btn-text___3ccH9{font-size:12px}.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child) .Button-module__btn-icon-sm___w7eg9{width:20px;height:20px;font-size:20px}.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child) .Button-module__btn-icon-md___8Ywy2{width:24px;height:24px;font-size:24px}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD,.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD{padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child){padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0}.Button-module__btn-sm___KNlkv.Button-module__btn-tertiary___G-7lD:has(.Button-module__loading-spinner___T25--){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:only-child){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__btn-icon___G7m4S:not(:only-child)){padding:0}.Button-module__btn-md___C8vqh.Button-module__btn-tertiary___G-7lD:has(.Button-module__loading-spinner___T25--){padding:0}.Button-module__btn-link___5KUtD{padding:0;margin:0;color:inherit;text-decoration:none}
package/dist/assets/Illustration.css ADDED
@@ -0,0 +1 @@
1
+ .Illustration-module__illustration-container___VNBFu{position:relative;width:600px;height:360px}.Illustration-module__illustration-text-container___gN5R3{height:172px;width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.Illustration-module__illustration-text___UB7b1{color:#4a4a4a;font-size:32px;font-weight:600;text-align:center;margin:0;padding:0}
package/dist/assets/NavBar.css CHANGED
@@ -1 +1 @@
1
- .NavBar-module__navbar-wrapper___e-f8y{background-color:#333;width:100%;height:48px;padding:0 20px;box-sizing:border-box}.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;margin-left:auto;margin-right:auto}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:12px}.NavBar-module__navbar-logo-link___r8CV2{display:flex;align-items:center;cursor:pointer}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;min-height:24px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{font-size:18px;font-weight:500;letter-spacing:1px;color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center}.NavBar-module__navbar-menu-button___f1doV{margin-right:20px}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:20px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff;line-height:1}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:15px;font-weight:500}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action-active___J7eRN{box-shadow:inset 0 -3px #5cb335!important}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open]{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{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}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{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}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional-separator___F7jfY{width:2px;height:26px;align-self:center;background-color:#727272;margin-left:20px;margin-right:20px}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:20px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;padding-top:8px;padding-bottom:8px;height:47px;box-sizing:border-box;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-additional-icon___jhULk{color:#fff;font-size:24px!important;width:24px;height:24px}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:28px;height:28px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}
1
+ .NavBar-module__navbar-wrapper___e-f8y{background-color:#333;width:100%;height:48px;padding:0 20px;box-sizing:border-box}.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;margin-left:auto;margin-right:auto}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:12px}.NavBar-module__navbar-logo-link___r8CV2{display:flex;align-items:center;cursor:pointer}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;min-height:24px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{font-size:18px;font-weight:500;letter-spacing:1px;color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center}.NavBar-module__navbar-menu-button___f1doV{margin-right:20px}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:20px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff;line-height:1}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;padding-top:16px;padding-bottom:16px;font-size:15px;font-weight:500}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action-active___J7eRN{box-shadow:inset 0 -3px #5cb335!important}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open]{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{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}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{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}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional-separator___F7jfY{width:2px;height:26px;align-self:center;background-color:#727272;margin-left:20px;margin-right:20px}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:20px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;padding-top:8px;padding-bottom:8px;height:47px;box-sizing:border-box;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{box-shadow:inset 0 -3px #878787}.NavBar-module__navbar-menu-additional-icon___jhULk{width:24px;height:24px}.NavBar-module__navbar-menu-additional-icon-notification___RH-yL,.NavBar-module__navbar-menu-additional-icon-help___5sqmP{color:#fff;font-size:24px!important}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:28px;height:28px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}
package/dist/assets/illustrations-map.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ export declare const ILLUSTRATIONS_BY_LEVEL: {
2
+ readonly 1: {
3
+ readonly empty: readonly ["add-instance", "add-list", "credential", "folder", "notification", "repository", "search", "select-intance", "thumbs-up", "unknown"];
4
+ };
5
+ readonly 2: {
6
+ readonly ai: readonly ["file"];
7
+ readonly alert: readonly ["alert-icon", "copy", "lock"];
8
+ readonly empty: readonly ["add-instance", "add-list", "copy", "credential", "empty-folder", "filter-search", "folder", "hello", "hidden", "import", "messages", "news", "notification", "repository", "search", "select-instance", "start", "thumbs-up", "unknown", "upload-credential", "upload-table"];
9
+ readonly error: readonly ["error-icon"];
10
+ readonly success: readonly ["person", "sent", "table", "thumbs-up"];
11
+ };
12
+ readonly 3: {
13
+ readonly error: readonly ["error-barrier", "error-overload", "error-planets", "error-plug", "error-time"];
14
+ };
15
+ };
16
+ export type IllustrationLevel = keyof typeof ILLUSTRATIONS_BY_LEVEL;
17
+ export type IllustrationCategory<L extends IllustrationLevel> = Extract<keyof (typeof ILLUSTRATIONS_BY_LEVEL)[L], string>;
18
+ export type IllustrationName<L extends IllustrationLevel, C extends IllustrationCategory<L>> = (typeof ILLUSTRATIONS_BY_LEVEL)[L][C] extends readonly (infer N)[] ? Extract<N, string> : never;
package/dist/components/Button/Button.d.ts CHANGED
@@ -6,6 +6,7 @@ export type ButtonProps = {
6
6
  size?: 'sm' | 'md';
7
7
  variant?: 'default' | 'danger' | 'cancel';
8
8
  icon?: ApIcon;
9
+ iconPosition?: 'left' | 'right';
9
10
  disabled?: boolean;
10
11
  loading?: boolean;
11
12
  children?: React.ReactNode;
@@ -24,6 +25,7 @@ export type ButtonProps = {
24
25
  * @param {'default' | 'danger' | 'cancel'} props.variant - The variant of button (affects color scheme and semantic meaning)
25
26
  * @param {'sm' | 'md'} props.size - The size of the button (affects padding, font size, and icon dimensions)
26
27
  * @param {ApIcon} [props.icon] - Optional icon to display before the button text
28
+ * @param {'left' | 'right'} [props.iconPosition] - The position of the icon (affects the layout of the icon and text)
27
29
  * @param {boolean} [props.disabled] - Whether the button is disabled (prevents interaction and applies disabled styling)
28
30
  * @param {boolean} [props.loading] - Whether the button is in a loading state (shows loading spinner and prevents interaction)
29
31
  * @param {React.ReactNode} [props.children] - The content to display inside the button (text or other elements)
@@ -32,4 +34,4 @@ export type ButtonProps = {
32
34
  * @param {() => void} [props.onClick] - Callback fired when the button is clicked
33
35
  * @returns {JSX.Element} The rendered Button component
34
36
  */
35
- export default function Button({ type, variant, size, icon, disabled, loading, children, className, iconClassName, tabIndex, link, linkTarget, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
37
+ export default function Button({ type, variant, size, icon, iconPosition, disabled, loading, children, className, iconClassName, tabIndex, link, linkTarget, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/Button/Button.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import { jsx as o, jsxs as w } from "react/jsx-runtime";
2
- import { c as i } from "../../clsx-OuTLNxxd.js";
2
+ import { c as r } from "../../clsx-OuTLNxxd.js";
3
3
  import x from "../Spinner/Spinner.js";
4
4
  import K from "../Icon/Icon.js";
5
- import '../../assets/Button.css';const k = "Button-module__btn___daEdK", p = "Button-module__loading___QfItr", t = {
6
- btn: k,
5
+ import '../../assets/Button.css';const h = "Button-module__btn___daEdK", k = "Button-module__loading___QfItr", t = {
6
+ btn: h,
7
7
  "btn-icon": "Button-module__btn-icon___G7m4S",
8
+ "btn-icon-position-left": "Button-module__btn-icon-position-left___qTvYS",
9
+ "btn-icon-position-right": "Button-module__btn-icon-position-right___janSP",
8
10
  "btn-icon-sm": "Button-module__btn-icon-sm___w7eg9",
9
11
  "btn-icon-md": "Button-module__btn-icon-md___8Ywy2",
10
12
  "btn-primary": "Button-module__btn-primary___vwY5K",
@@ -16,7 +18,7 @@ import '../../assets/Button.css';const k = "Button-module__btn___daEdK", p = "Bu
16
18
  "btn-tertiary": "Button-module__btn-tertiary___G-7lD",
17
19
  "btn-disabled": "Button-module__btn-disabled___eg1uH",
18
20
  "btn-loading": "Button-module__btn-loading___vAg78",
19
- loading: p,
21
+ loading: k,
20
22
  "btn-sm": "Button-module__btn-sm___KNlkv",
21
23
  "btn-md": "Button-module__btn-md___C8vqh",
22
24
  "btn-text": "Button-module__btn-text___3ccH9",
@@ -26,31 +28,32 @@ import '../../assets/Button.css';const k = "Button-module__btn___daEdK", p = "Bu
26
28
  link: l,
27
29
  linkTarget: n
28
30
  }) => l ? /* @__PURE__ */ o("a", { href: l, target: n, className: t["btn-link"], children: e }) : e;
29
- function G({
31
+ function T({
30
32
  type: e,
31
33
  variant: l = "default",
32
34
  size: n = "md",
33
35
  icon: d,
36
+ iconPosition: c = "left",
34
37
  disabled: b = !1,
35
- loading: a = !1,
36
- children: m,
37
- className: c,
38
- iconClassName: s,
39
- tabIndex: B = 0,
40
- link: f = "",
41
- linkTarget: g = "_self",
38
+ loading: i = !1,
39
+ children: a,
40
+ className: s,
41
+ iconClassName: B,
42
+ tabIndex: f = 0,
43
+ link: g = "",
44
+ linkTarget: y = "_self",
42
45
  ...u
43
46
  }) {
44
- const y = (_) => {
45
- var r;
46
- (_.key === "Enter" || _.key === " ") && (_.preventDefault(), _.currentTarget.click()), (r = u.onKeyDown) == null || r.call(u, _);
47
+ const p = (_) => {
48
+ var m;
49
+ (_.key === "Enter" || _.key === " ") && (_.preventDefault(), _.currentTarget.click()), (m = u.onKeyDown) == null || m.call(u, _);
47
50
  };
48
- return /* @__PURE__ */ o("button", { tabIndex: b ? -1 : B, type: "button", className: i(t.btn, t[`btn-${e}`], t[`btn-${l}`], t[`btn-${n}`], b && t["btn-disabled"], c), disabled: b || a, onKeyDown: y, ...u, children: /* @__PURE__ */ w(D, { link: f, linkTarget: g, children: [
49
- !!d && !a && /* @__PURE__ */ o(K, { icon: d, className: i(t["btn-icon"], t[`btn-icon-${n}`], s) }),
50
- a && /* @__PURE__ */ o(x, { size: n, color: "white", className: t["loading-spinner"] }),
51
- m && /* @__PURE__ */ o("span", { className: t["btn-text"], children: m })
51
+ return /* @__PURE__ */ o("button", { tabIndex: b ? -1 : f, type: "button", className: r(t.btn, t[`btn-${e}`], t[`btn-${l}`], t[`btn-${n}`], t[`btn-icon-position-${c}`], b && t["btn-disabled"], s), disabled: b || i, onKeyDown: p, ...u, children: /* @__PURE__ */ w(D, { link: g, linkTarget: y, children: [
52
+ !!d && !i && /* @__PURE__ */ o(K, { icon: d, className: r(t["btn-icon"], t[`btn-icon-${n}`], B) }),
53
+ i && /* @__PURE__ */ o(x, { size: n, color: "white", className: t["loading-spinner"] }),
54
+ a && /* @__PURE__ */ o("span", { className: t["btn-text"], children: a })
52
55
  ] }) });
53
56
  }
54
57
  export {
55
- G as default
58
+ T as default
56
59
  };
package/dist/components/Button/Button.test.js CHANGED
@@ -1,141 +1,147 @@
1
1
  import { jsx as i, jsxs as u, Fragment as m } from "react/jsx-runtime";
2
- import { d as l, i as s, r as d, s as n, g as t, v as c, f as r } from "../../vi.bdSIJ99Y-017e_Pkz.js";
3
- import a from "./Button.js";
4
- import { u as y } from "../../index-DkTDHhag.js";
2
+ import { d as l, i as s, r as d, s as n, g as t, v as r, f as c } from "../../vi.bdSIJ99Y-017e_Pkz.js";
3
+ import o from "./Button.js";
4
+ import { u as p } from "../../index-DkTDHhag.js";
5
5
  l("Button", () => {
6
6
  l("Rendering", () => {
7
7
  l("Basic rendering", () => {
8
8
  s("should render button with children", () => {
9
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
9
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
10
10
  const e = n.getByTestId("button");
11
11
  t(e).toBeInTheDocument(), t(e).toHaveTextContent("Click me");
12
12
  }), s("should render button without children", () => {
13
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md" }));
13
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md" }));
14
14
  const e = n.getByTestId("button");
15
15
  t(e).toBeInTheDocument(), t(e).toHaveTextContent("");
16
16
  }), s("should render button with icon", () => {
17
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" }));
18
- const e = n.getByTestId("button"), o = n.getByTestId("button-icon");
19
- t(e).toBeInTheDocument(), t(o).toBeInTheDocument(), t(o.className).toContain("ap-icon-check");
17
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" }));
18
+ const e = n.getByTestId("button"), a = n.getByTestId("button-icon");
19
+ t(e).toBeInTheDocument(), t(a).toBeInTheDocument(), t(a.className).toContain("ap-icon-check");
20
20
  }), s("should not render icon when icon prop is not provided", () => {
21
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
21
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
22
22
  const e = n.queryByTestId("button-icon");
23
23
  t(e).not.toBeInTheDocument();
24
24
  }), s("should render loading spinner when loading is true", () => {
25
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", loading: !0, children: "Click me" }));
25
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", loading: !0, children: "Click me" }));
26
26
  const e = n.getByTestId("loading-spinner");
27
27
  t(e).toBeInTheDocument(), t(e.className).toContain("loading-spinner");
28
28
  }), s("should not render loading spinner when loading is false", () => {
29
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", loading: !1, children: "Click me" }));
29
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", loading: !1, children: "Click me" }));
30
30
  const e = n.queryByTestId("loading-spinner");
31
31
  t(e).not.toBeInTheDocument();
32
32
  });
33
33
  }), l("Disabled state", () => {
34
34
  s("should render enabled when disabled prop is not provided", () => {
35
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
35
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
36
36
  const e = n.getByTestId("button");
37
37
  t(e).toBeEnabled();
38
38
  }), s("should render enabled when disabled prop is false", () => {
39
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !1, children: "Click me" }));
39
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !1, children: "Click me" }));
40
40
  const e = n.getByTestId("button");
41
41
  t(e).toBeEnabled();
42
42
  }), s("should render disabled when disabled prop is true", () => {
43
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }));
43
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }));
44
44
  const e = n.getByTestId("button");
45
45
  t(e).toBeDisabled();
46
46
  });
47
47
  }), l("CSS Classes", () => {
48
48
  s("should apply base button class", () => {
49
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
49
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
50
50
  const e = n.getByTestId("button");
51
51
  t(e.className).toContain("btn");
52
52
  }), s("should apply variant classes", () => {
53
53
  const {
54
54
  rerender: e
55
- } = d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
56
- let o = n.getByTestId("button");
57
- t(o.className).toContain("btn-default"), e(/* @__PURE__ */ i(a, { type: "primary", variant: "danger", size: "md", children: "Click me" })), o = n.getByTestId("button"), t(o.className).toContain("btn-danger"), e(/* @__PURE__ */ i(a, { type: "primary", variant: "cancel", size: "md", children: "Click me" })), o = n.getByTestId("button"), t(o.className).toContain("btn-cancel");
55
+ } = d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
56
+ let a = n.getByTestId("button");
57
+ t(a.className).toContain("btn-default"), e(/* @__PURE__ */ i(o, { type: "primary", variant: "danger", size: "md", children: "Click me" })), a = n.getByTestId("button"), t(a.className).toContain("btn-danger"), e(/* @__PURE__ */ i(o, { type: "primary", variant: "cancel", size: "md", children: "Click me" })), a = n.getByTestId("button"), t(a.className).toContain("btn-cancel");
58
58
  }), s("should apply size classes", () => {
59
59
  const {
60
60
  rerender: e
61
- } = d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "sm", children: "Click me" }));
62
- let o = n.getByTestId("button");
63
- t(o.className).toContain("btn-sm"), e(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" })), o = n.getByTestId("button"), t(o.className).toContain("btn-md");
61
+ } = d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "sm", children: "Click me" }));
62
+ let a = n.getByTestId("button");
63
+ t(a.className).toContain("btn-sm"), e(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" })), a = n.getByTestId("button"), t(a.className).toContain("btn-md");
64
64
  }), s("should apply disabled class when disabled", () => {
65
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }));
65
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }));
66
66
  const e = n.getByTestId("button");
67
67
  t(e.className).toContain("btn-disabled");
68
68
  }), s("should not apply disabled class when enabled", () => {
69
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !1, children: "Click me" }));
69
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !1, children: "Click me" }));
70
70
  const e = n.getByTestId("button");
71
71
  t(e.className).not.toContain("btn-disabled");
72
72
  }), s("should apply icon classes when icon is provided", () => {
73
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" }));
73
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" }));
74
74
  const e = n.getByTestId("button-icon");
75
75
  t(e.className).toContain("btn-icon"), t(e.className).toContain("btn-icon-md");
76
76
  }), s("should apply icon size classes", () => {
77
77
  const {
78
78
  rerender: e
79
- } = d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "sm", icon: "ap-icon-check", children: "Click me" }));
80
- let o = n.getByTestId("button-icon");
81
- t(o.className).toContain("btn-icon-sm"), e(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" })), o = n.getByTestId("button-icon"), t(o.className).toContain("btn-icon-md");
79
+ } = d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "sm", icon: "ap-icon-check", children: "Click me" }));
80
+ let a = n.getByTestId("button-icon");
81
+ t(a.className).toContain("btn-icon-sm"), e(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" })), a = n.getByTestId("button-icon"), t(a.className).toContain("btn-icon-md");
82
+ }), s("should apply icon position classes", () => {
83
+ const {
84
+ rerender: e
85
+ } = d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", children: "Click me" }));
86
+ let a = n.getByTestId("button");
87
+ t(a.className).toContain("btn-icon-position-left"), e(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", icon: "ap-icon-check", iconPosition: "right", children: "Click me" })), a = n.getByTestId("button"), t(a.className).toContain("btn-icon-position-right");
82
88
  }), s("should apply text class when children are provided", () => {
83
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
89
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
84
90
  const e = n.getByTestId("button-text");
85
91
  t(e.className).toContain("btn-text");
86
92
  });
87
93
  });
88
94
  }), l("User Interactions", () => {
89
95
  s("should call onClick when clicked", () => {
90
- const e = c.fn();
91
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", onClick: e, children: "Click me" }));
92
- const o = n.getByTestId("button");
93
- r.click(o), t(e).toHaveBeenCalledTimes(1);
96
+ const e = r.fn();
97
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", onClick: e, children: "Click me" }));
98
+ const a = n.getByTestId("button");
99
+ c.click(a), t(e).toHaveBeenCalledTimes(1);
94
100
  }), s("should not call onClick when disabled", () => {
95
- const e = c.fn();
96
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !0, onClick: e, children: "Click me" }));
97
- const o = n.getByTestId("button");
98
- r.click(o), t(e).not.toHaveBeenCalled();
101
+ const e = r.fn();
102
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !0, onClick: e, children: "Click me" }));
103
+ const a = n.getByTestId("button");
104
+ c.click(a), t(e).not.toHaveBeenCalled();
99
105
  }), s("should not call onClick when loading", () => {
100
- const e = c.fn();
101
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", loading: !0, onClick: e, children: "Click me" }));
102
- const o = n.getByTestId("button");
103
- r.click(o), t(e).not.toHaveBeenCalled();
106
+ const e = r.fn();
107
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", loading: !0, onClick: e, children: "Click me" }));
108
+ const a = n.getByTestId("button");
109
+ c.click(a), t(e).not.toHaveBeenCalled();
104
110
  }), s("should handle keyboard interactions", () => {
105
- const e = c.fn();
106
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", onClick: e, children: "Click me" }));
107
- const o = n.getByTestId("button");
108
- r.keyDown(o, {
111
+ const e = r.fn();
112
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", onClick: e, children: "Click me" }));
113
+ const a = n.getByTestId("button");
114
+ c.keyDown(a, {
109
115
  key: "Enter"
110
- }), t(e).toHaveBeenCalledTimes(1), r.keyDown(o, {
116
+ }), t(e).toHaveBeenCalledTimes(1), c.keyDown(a, {
111
117
  key: " "
112
118
  }), t(e).toHaveBeenCalledTimes(2);
113
119
  }), s("should not handle keyboard interactions when disabled", () => {
114
- const e = c.fn();
115
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !0, onClick: e, children: "Click me" }));
116
- const o = n.getByTestId("button");
117
- r.keyDown(o, {
120
+ const e = r.fn();
121
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !0, onClick: e, children: "Click me" }));
122
+ const a = n.getByTestId("button");
123
+ c.keyDown(a, {
118
124
  key: "Enter"
119
- }), t(e).not.toHaveBeenCalled(), r.keyDown(o, {
125
+ }), t(e).not.toHaveBeenCalled(), c.keyDown(a, {
120
126
  key: " "
121
127
  }), t(e).not.toHaveBeenCalled();
122
128
  });
123
129
  }), l("Accessibility", () => {
124
130
  s("should have proper button type attribute", () => {
125
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
131
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
126
132
  const e = n.getByTestId("button");
127
133
  t(e).toHaveAttribute("type", "button");
128
134
  }), s("should be focusable when enabled", () => {
129
- d(/* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", children: "Click me" }));
135
+ d(/* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", children: "Click me" }));
130
136
  const e = n.getByTestId("button");
131
137
  e.focus(), t(e).toHaveFocus();
132
138
  }), s("skips disabled button when tabbing", async () => {
133
139
  d(/* @__PURE__ */ u(m, { children: [
134
140
  /* @__PURE__ */ i("input", {}),
135
- /* @__PURE__ */ i(a, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }),
141
+ /* @__PURE__ */ i(o, { type: "primary", variant: "default", size: "md", disabled: !0, children: "Click me" }),
136
142
  /* @__PURE__ */ i("a", { href: "/", children: "after" })
137
143
  ] }));
138
- const e = y.setup();
144
+ const e = p.setup();
139
145
  await e.tab(), t(n.getByTestId("before")).toHaveFocus(), await e.tab(), t(n.getByTestId("after")).toHaveFocus(), t(n.getByTestId("button")).not.toHaveFocus();
140
146
  });
141
147
  });
package/dist/components/Illustration/Illustration.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { IllustrationCategory, IllustrationLevel, IllustrationName, IllustrationProps } from './types';
2
+ export default function Illustration(props: IllustrationProps): import("react/jsx-runtime").JSX.Element | null;
3
+ export type { IllustrationCategory, IllustrationLevel, IllustrationName, IllustrationProps };