@sofidevo/astro-dynamic-header 1.0.18 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -23
- package/package.json +11 -5
- package/src/NavMenu.astro +1 -1
package/README.md
CHANGED
|
@@ -146,27 +146,6 @@ interface MenuItemType {
|
|
|
146
146
|
- Edge-to-edge design
|
|
147
147
|
- Ideal for traditional website layouts
|
|
148
148
|
|
|
149
|
-
## Individual Components
|
|
150
|
-
|
|
151
|
-
You can also import and use components individually:
|
|
152
|
-
|
|
153
|
-
```astro
|
|
154
|
-
---
|
|
155
|
-
// Import individual components
|
|
156
|
-
import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu';
|
|
157
|
-
import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav';
|
|
158
|
-
import HamburgerButton from '@sofidevo/astro-dynamic-header/HamburgerButton';
|
|
159
|
-
|
|
160
|
-
// Or use the .astro extension explicitly
|
|
161
|
-
import NavMenu from '@sofidevo/astro-dynamic-header/NavMenu.astro';
|
|
162
|
-
import MobileNav from '@sofidevo/astro-dynamic-header/MobileNav.astro';
|
|
163
|
-
import HamburgerButton from '@sofidevo/astro-dynamic-header/HamburgerButton.astro';
|
|
164
|
-
---
|
|
165
|
-
|
|
166
|
-
<NavMenu menuItems={menuItems} showHomeLink={true} homeText="Home" />
|
|
167
|
-
<MobileNav menuItems={menuItems} accentColor="#00ffff" />
|
|
168
|
-
<HamburgerButton color="#ffffff" />
|
|
169
|
-
```
|
|
170
149
|
|
|
171
150
|
## Styling and Customization
|
|
172
151
|
|
|
@@ -242,9 +221,43 @@ If you encounter import errors, try these solutions:
|
|
|
242
221
|
|
|
243
222
|
Visit our demo website to see the component in action with interactive examples and complete documentation.
|
|
244
223
|
|
|
245
|
-
##
|
|
224
|
+
## Testing
|
|
225
|
+
|
|
226
|
+
This project includes a comprehensive test suite with 34 tests covering all critical functionality.
|
|
227
|
+
|
|
228
|
+
### Running Tests
|
|
229
|
+
|
|
230
|
+
```bash
|
|
231
|
+
# Run all tests
|
|
232
|
+
npm test
|
|
233
|
+
|
|
234
|
+
# Run tests in watch mode
|
|
235
|
+
npm run test:watch
|
|
236
|
+
|
|
237
|
+
# Run tests with coverage report
|
|
238
|
+
npm run test:coverage
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Test Coverage
|
|
242
|
+
|
|
243
|
+
The test suite covers:
|
|
244
|
+
|
|
245
|
+
#### Component Logic Tests
|
|
246
|
+
- **Header Component** (4 tests): Hamburger controller functionality, menu toggle behavior
|
|
247
|
+
- **HamburgerButton Component** (10 tests): Button states, responsive behavior, accessibility
|
|
248
|
+
- **MobileNav Component** (7 tests): Dropdown structure, nested submenus, conditional rendering
|
|
249
|
+
- **NavMenu Component** (6 tests): Dynamic positioning, submenu interactions, viewport adjustments
|
|
250
|
+
|
|
251
|
+
#### Integration Tests (7 tests)
|
|
252
|
+
- Component interaction flows
|
|
253
|
+
- Responsive behavior between mobile/desktop
|
|
254
|
+
- Keyboard navigation and accessibility
|
|
255
|
+
- Menu state management during navigation
|
|
246
256
|
|
|
247
|
-
|
|
257
|
+
### Test Technologies
|
|
258
|
+
- **Vitest**: Fast testing framework
|
|
259
|
+
- **jsdom**: DOM simulation for component testing
|
|
260
|
+
- **TypeScript**: Type-safe test writing
|
|
248
261
|
|
|
249
262
|
## License
|
|
250
263
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sofidevo/astro-dynamic-header",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "A dynamic Astro header component that switches between floating and fullscreen styles",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.ts",
|
|
@@ -27,7 +27,10 @@
|
|
|
27
27
|
"build": "astro build",
|
|
28
28
|
"dev": "astro dev",
|
|
29
29
|
"check": "astro check",
|
|
30
|
-
"check:watch": "astro check --watch"
|
|
30
|
+
"check:watch": "astro check --watch",
|
|
31
|
+
"test": "vitest run",
|
|
32
|
+
"test:watch": "vitest",
|
|
33
|
+
"test:coverage": "vitest run --coverage"
|
|
31
34
|
},
|
|
32
35
|
"keywords": [
|
|
33
36
|
"astro",
|
|
@@ -50,8 +53,12 @@
|
|
|
50
53
|
},
|
|
51
54
|
"devDependencies": {
|
|
52
55
|
"@astrojs/check": "^0.9.0",
|
|
56
|
+
"@types/jsdom": "^21.1.7",
|
|
57
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
53
58
|
"astro": "^5.12.8",
|
|
54
|
-
"
|
|
59
|
+
"jsdom": "^26.1.0",
|
|
60
|
+
"typescript": "^5.0.0",
|
|
61
|
+
"vitest": "^3.2.4"
|
|
55
62
|
},
|
|
56
63
|
"repository": {
|
|
57
64
|
"type": "git",
|
|
@@ -60,6 +67,5 @@
|
|
|
60
67
|
"bugs": {
|
|
61
68
|
"url": "https://github.com/SofiDevO/astro-dynamic-header/issues"
|
|
62
69
|
},
|
|
63
|
-
"homepage": "https://
|
|
64
|
-
"demo": "https://base-astro-psi.vercel.app/fullscreen-demo"
|
|
70
|
+
"homepage": "https://base-astro-psi.vercel.app/fullscreen-demo"
|
|
65
71
|
}
|
package/src/NavMenu.astro
CHANGED
|
@@ -63,7 +63,7 @@ const pagePathname = Astro.url.pathname;
|
|
|
63
63
|
const rect = subsubmenu.getBoundingClientRect();
|
|
64
64
|
|
|
65
65
|
if (rect.right > viewportWidth) {
|
|
66
|
-
(subsubmenu as HTMLElement).style.left = "-
|
|
66
|
+
(subsubmenu as HTMLElement).style.left = "-210%";
|
|
67
67
|
(subsubmenu as HTMLElement).style.right = "auto";
|
|
68
68
|
const leftRect = subsubmenu.getBoundingClientRect();
|
|
69
69
|
|