@dictu/navigation-bar 1.3.0 → 3.0.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 (7) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +3 -156
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/_mixin.scss +161 -62
  7. package/src/index.scss +59 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @dictu/navigation-bar
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 2478852: Breaking change: The CSS only option for the expanding of the mobile
8
+ menu that worked with a input type checkbox and the use of the :checked state
9
+ to show or hide the menu has been removed due to usability and A11Y reasons.
10
+ It is replaced with a button that requires adding handling of the state
11
+ changes during implementation. The mobile menu part of the Navigation Bar
12
+ component therefore no longer opens and closes out of the box.
13
+
14
+ Adds submenu functionality
15
+
16
+ ## 2.0.0
17
+
18
+ ### Major Changes
19
+
20
+ - 38e03b8: Removed import of design tokens inside component css
21
+ - 38e03b8: Breaking: All tokens in one import file, for better usage.
22
+
3
23
  ## 1.3.0
4
24
 
5
25
  ### Minor Changes
package/README.md CHANGED
@@ -1,13 +1,11 @@
1
1
  <!-- @license CC0-1.0 -->
2
2
 
3
- De navigation-bar component toont de navigatiebalk van het Dictu Design Systeem.
4
-
5
3
  ## Gebruik deze component
6
4
 
7
5
  Je kunt de CSS zo in je project installeren:
8
6
 
9
7
  ```console
10
- npm install --save-dev @dictu/design-tokens
8
+ npm install --save-dev @dictu/navigation-bar
11
9
  ```
12
10
 
13
11
  Je kunt de CSS uit `node_modules/` importeren:
@@ -15,163 +13,12 @@ Je kunt de CSS uit `node_modules/` importeren:
15
13
  ```html
16
14
  <link
17
15
  rel="stylesheet"
18
- href="node_modules/@dictu/design-tokens/dist/navigation-bar.css"
16
+ href="node_modules/@dictu/navigation-bar/dist/index.css"
19
17
  />
20
18
  ```
21
19
 
22
20
  Als je CSS imports gebruikt vanuit JavaScript:
23
21
 
24
22
  ```javascript
25
- import "@dictu/design-tokens/dist/navigation-bar.css";
26
- ```
27
-
28
- ## Richtlijnen
29
-
30
- - Gebruik altijd de `.dictu-navigation-bar` class voor de navigatiebalk.
31
- - Gebruik semantische HTML: `<nav aria-label="Hoofdnavigatie">` met een `<ul>`
32
- en `<li>` voor de navigatie-items.
33
- - Zorg voor goede focus-states en toetsenbordnavigatie (tab, enter, space).
34
- - Gebruik de bijbehorende CSS-variabelen voor consistente styling.
35
-
36
- ### Voorbeeldgebruik
37
-
38
- ```html
39
- <nav class="dictu-navigation-bar" aria-label="Hoofdnavigatie" role="navigation">
40
- <ul class="dictu-navigation-bar__list" role="menubar">
41
- <li class="dictu-navigation-bar__item" role="none">
42
- <a
43
- href="#"
44
- class="dictu-navigation-bar__link"
45
- role="menuitem"
46
- tabindex="0"
47
- >
48
- <span class="dictu-navigation-bar__title">Home</span>
49
- </a>
50
- </li>
51
- <li class="dictu-navigation-bar__item" role="none">
52
- <a
53
- href="#"
54
- class="dictu-navigation-bar__link"
55
- role="menuitem"
56
- tabindex="0"
57
- >
58
- <span class="dictu-navigation-bar__title">Over</span>
59
- </a>
60
- </li>
61
- </ul>
62
- </nav>
63
- ```
64
-
65
- ## CSS Klassen
66
-
67
- - `.dictu-navigation-bar` — container voor de navigatiebalk
68
- - `.dictu-navigation-bar__list` — lijst van navigatie-items
69
- - `.dictu-navigation-bar__item` — individueel navigatie-item
70
- - `.dictu-navigation-bar__link` — link in de navigatiebalk
71
- - `.dictu-navigation-bar__icon` — optioneel icoon bij een item
72
- - `.dictu-navigation-bar__icon--active` — actieve icoonstijl
73
- - `.dictu-navigation-bar__search` — zoekveld in de navigatiebalk
74
-
75
- ## Design Tokens / CSS-variabelen
76
-
77
- De component gebruikt design tokens voor kleuren, spacing, etc. Zie
78
- `proprietary/design-tokens/src/components/navigation-bar.tokens.json` voor een
79
- overzicht van beschikbare tokens. Voorbeeld:
80
-
81
- ```css
82
- .dictu-navigation-bar {
83
- --govnl-nav-bar-background-color: #fff;
84
- --govnl-nav-bar-color: #123456;
85
- /* ... */
86
- }
87
- ```
88
-
89
- ## Toegankelijkheid
90
-
91
- - Gebruik altijd een `<nav>` met `aria-label` en `role="navigation"`.
92
- - Gebruik `role="menubar"` op de `<ul>`, `role="none"` op `<li>`, en
93
- `role="menuitem"` op de links.
94
- - Gebruik `tabindex="0"` op de links voor volledige toetsenbordnavigatie.
95
- - Zorg dat links goed bereikbaar zijn met het toetsenbord.
96
- - Zorg voor voldoende contrast en zichtbare focus.
97
- - Zie
98
- [WCAG 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)
99
- en
100
- [WCAG 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html).
101
-
102
- # NavigationItem component
103
-
104
- De `NavigationItem` component is een individueel item voor gebruik binnen de
105
- navigatiebalk van het Dictu Design Systeem. Deze component ondersteunt
106
- verschillende iconen, waaronder een Home-icoon, en is volledig toegankelijk
107
- volgens WCAG 2.2-richtlijnen.
108
-
109
- ## Gebruik
110
-
111
- Gebruik deze component binnen een `<ul>` in de navigation-bar:
112
-
113
- ```html
114
- <li class="dictu-navigation-bar__item" role="none">
115
- <a href="#" class="dictu-navigation-bar__link" role="menuitem" tabindex="0">
116
- <span class="dictu-icon" aria-hidden="true">
117
- <!-- SVG voor het gewenste icoon, bijvoorbeeld Home -->
118
- <svg
119
- width="24"
120
- height="24"
121
- viewBox="0 0 24 24"
122
- xmlns="http://www.w3.org/2000/svg"
123
- >
124
- <path
125
- d="M3 12L12 4l9 8v8a2 2 0 0 1-2 2h-3a1 1 0 0 1-1-1v-4h-4v4a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2z"
126
- fill="currentColor"
127
- />
128
- </svg>
129
- </span>
130
- <span class="dictu-navigation-bar__icon"></span>
131
- Titel van het item
132
- </a>
133
- </li>
134
- ```
135
-
136
- ## Beschikbare iconen
137
-
138
- - home
139
- - settings
140
- - info
141
- - contact
142
-
143
- Het juiste icoon wordt automatisch getoond op basis van de `icon`-prop.
144
-
145
- ## Toegankelijkheid
146
-
147
- - Gebruik altijd `role="none"` op het `<li>`-element.
148
- - Gebruik `role="menuitem"` en `tabindex="0"` op de link.
149
- - Iconen zijn voorzien van `aria-hidden="true"` zodat ze niet door screenreaders
150
- worden voorgelezen.
151
-
152
- ## Voorbeeld in Storybook
153
-
154
- De Storybook story laat zien hoe je het Home-icoon gebruikt:
155
-
156
- ```js
157
- export const NavigationItem = {
158
- args: {
159
- icon: "home",
160
- title: "Dienst ICT Uitvoering",
161
- link: "https://www.dictu.nl",
162
- },
163
- };
23
+ import "@dictu/navigation-bar/dist/index.css";
164
24
  ```
165
-
166
- ## Styling
167
-
168
- De styling wordt verzorgd door de navigation-bar CSS. Gebruik altijd de juiste
169
- klassen:
170
-
171
- - `.dictu-navigation-bar__item`
172
- - `.dictu-navigation-bar__link`
173
- - `.dictu-icon`
174
-
175
- ## Licentie
176
-
177
- EUPL-1.2
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .dictu-navigation-bar{--govnl-nav-bar-max-inline-size: 1280px;--govnl-nav-bar-padding-inline: 0px;--govnl-nav-bar-container-inline-size: 100%;--govnl-nav-bar-content-column-gap: 0px;--govnl-nav-bar-icon-size: 1.5em;--govnl-nav-bar-link-text-decoration: none;--govnl-nav-bar-menu-label-background-color: none;--govnl-nav-bar-mobile-max-inline-size: 100%;--govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);--govnl-nav-bar-icon-color: var(--govnl-brand-primary-500);--govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-active-color: var(--govnl-document-inverse-color);--govnl-nav-bar-link-background-color: var(--govnl-document-background-color);--govnl-nav-bar-link-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-focus-background-color: var(--govnl-brand-primary-50);--govnl-nav-bar-link-focus-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-hover-background-color: var(--govnl-brand-primary-50);--govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-500);--govnl-nav-bar-link-padding-block: var(--govnl-space-sm);--govnl-nav-bar-link-padding-inline: var(--govnl-space-xs);--govnl-nav-bar-link-column-gap: var(--govnl-gap-content-min) / 2;--govnl-nav-bar-background-color: var(--govnl-document-background-color);--govnl-nav-bar-color: var(--govnl-brand-primary-500);--govnl-nav-bar-border-color: var(--govnl-brand-primary-400);--govnl-nav-bar-search-padding-block: var(--govnl-space-xs);--govnl-nav-bar-search-padding-inline: var(--govnl-space-xs);--govnl-nav-bar-menu-label-gap: var(--govnl-gap-content-min) / 2;--govnl-nav-bar-menu-label-padding-inline: var(--govnl-space-sm);--govnl-nav-bar-menu-label-padding-block: var(--govnl-space-2xs);--govnl-nav-bar-menu-label-color: var(--govnl-brand-primary-500);--govnl-nav-bar-menu-label-font-size: var(--govnl-document-font-size);--govnl-nav-bar-font-size: var(--govnl-document-font-size)}.dictu-focus-ring:focus-visible{outline:var(--govnl-focus-outline-color, revert) var(--govnl-focus-outline-style, revert) var(--govnl-focus-outline-width, revert);outline-offset:var(--govnl-focus-outline-offset, revert);z-index:1}.dictu-navigation-bar{margin-block:0;margin-inline:0;background-color:var(--govnl-nav-bar-background-color);border-block-end:var(--govnl-nav-bar-border-block-end-width) solid var(--govnl-nav-bar-border-color);color:var(--govnl-nav-bar-color);display:flex;max-inline-size:var(--govnl-nav-bar-max-inline-size);padding-inline:var(--govnl-nav-bar-padding-inline)}.dictu-navigation-bar__list{display:flex;gap:var(--govnl-nav-bar-content-column-gap);list-style:none;margin:0;padding:0}.dictu-navigation-bar__item{align-items:center;display:flex}.dictu-navigation-bar__link{align-items:center;background-color:var(--govnl-nav-bar-link-background-color);box-sizing:border-box;color:var(--govnl-nav-bar-link-color);column-gap:calc(var(--govnl-nav-bar-link-column-gap));display:flex;height:100%;padding-block:var(--govnl-nav-bar-link-padding-block);padding-inline:var(--govnl-nav-bar-link-padding-inline);text-decoration:var(--govnl-nav-bar-link-text-decoration)}.dictu-navigation-bar__link:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__link:focus{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link:focus-visible{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link-active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__icon{align-items:center;block-size:var(--govnl-nav-bar-icon-size);color:var(--govnl-nav-bar-icon-color);display:inline-flex;inline-size:var(--govnl-nav-bar-icon-size);justify-content:center}.dictu-navigation-bar__toggle{display:none}.dictu-navigation-bar__menu-label{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:none;font-size:1rem;gap:.5rem;padding:.5rem 1rem}@media(width <= 48em){.dictu-navigation-bar{align-items:center;box-sizing:border-box;display:grid;grid-template-columns:minmax(50px, max-content);grid-template-rows:auto auto;max-inline-size:100%}.dictu-navigation-bar .dictu-navigation-bar__toggle{grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__home{display:block;grid-column:1;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__menu-label{display:flex;grid-column:2;grid-row:1}.dictu-navigation-bar .dictu-navigation-bar__link{width:100%}.dictu-navigation-bar .dictu-navigation-bar__list{background:var(--govnl-nav-bar-background-color);display:none;flex-direction:column;grid-column:1/span 6;grid-row:2}.dictu-navigation-bar__toggle:checked~.dictu-navigation-bar__list{display:flex}}@media(width >= 48.01em){.dictu-navigation-bar__menu-label{display:none}.dictu-navigation-bar__home{display:none}.dictu-navigation-bar__list{box-shadow:none;display:flex;flex-direction:row}}/*# sourceMappingURL=index.css.map */
1
+ .dictu-focus-ring:focus-visible{outline:var(--govnl-focus-outline-color, revert) var(--govnl-focus-outline-style, revert) var(--govnl-focus-outline-width, revert);outline-offset:var(--govnl-focus-outline-offset, revert);z-index:1}.dictu-navigation-bar{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;background-color:var(--govnl-nav-bar-background-color);border-block-end:var(--govnl-nav-bar-border-block-end-width) solid var(--govnl-nav-bar-border-color);color:var(--govnl-nav-bar-color);display:flex;max-inline-size:var(--govnl-nav-bar-max-inline-size);padding-inline:var(--govnl-nav-bar-padding-inline)}.dictu-navigation-bar__list{display:flex;gap:var(--govnl-nav-bar-content-column-gap);list-style:none;margin:0;padding:0}.dictu-navigation-bar__list--hidden{display:none}.dictu-navigation-bar__item:has(.dictu-navigation-bar__submenu-toggler){position:relative}.dictu-navigation-bar__submenu-toggler{align-items:center;background-color:var(--govnl-nav-bar-submenu-toggler-background-color);border-width:var(--govnl-nav-bar-submenu-toggler-border-width);box-sizing:border-box;color:var(--govnl-nav-bar-submenu-toggler-color);column-gap:calc(var(--govnl-nav-bar-submenu-toggler-column-gap));display:flex;font-size:inherit;height:100%;padding-block:var(--govnl-nav-bar-submenu-toggler-padding-block);padding-inline:var(--govnl-nav-bar-submenu-toggler-padding-inline);text-decoration:var(--govnl-nav-bar-submenu-toggler-text-decoration)}.dictu-navigation-bar__submenu-toggler[aria-expanded=true]{background-color:var(--govnl-nav-bar-submenu-toggler-expanded-background-color);font-weight:var(--govnl-nav-bar-submenu-toggler-expanded-font-weight)}.dictu-navigation-bar__submenu-toggler:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__submenu-toggler:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__submenu-toggler:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link{align-items:center;background-color:var(--govnl-nav-bar-link-background-color);box-sizing:border-box;color:var(--govnl-nav-bar-link-color);column-gap:calc(var(--govnl-nav-bar-link-column-gap));display:flex;height:100%;padding-block:var(--govnl-nav-bar-link-padding-block);padding-inline:var(--govnl-nav-bar-link-padding-inline);text-decoration:var(--govnl-nav-bar-link-text-decoration)}.dictu-navigation-bar__link:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__link:focus{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link:focus-visible{background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__link:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__icon{--govnl-icon-size: var(--govnl-nav-bar-icon-size);align-items:center;color:var(--govnl-nav-bar-icon-color);display:inline-flex;justify-content:center}.dictu-navigation-bar__toggle{align-items:center;background-color:var(--govnl-nav-bar-submenu-toggler-background-color);border-width:var(--govnl-nav-bar-submenu-toggler-border-width);box-sizing:border-box;color:var(--govnl-nav-bar-submenu-toggler-color);column-gap:calc(var(--govnl-nav-bar-submenu-toggler-column-gap));display:none;font-size:inherit;height:100%;padding-block:var(--govnl-nav-bar-submenu-toggler-padding-block);padding-inline:var(--govnl-nav-bar-submenu-toggler-padding-inline);text-decoration:var(--govnl-nav-bar-submenu-toggler-text-decoration)}.dictu-navigation-bar__toggle[aria-expanded=true]{background-color:var(--govnl-nav-bar-submenu-toggler-expanded-background-color)}.dictu-navigation-bar__toggle:hover{background-color:var(--govnl-nav-bar-link-hover-background-color);color:var(--govnl-nav-bar-link-hover-color)}.dictu-navigation-bar__toggle:active{background-color:var(--govnl-nav-bar-link-active-background-color);color:var(--govnl-nav-bar-link-active-color)}.dictu-navigation-bar__toggle:focus-visible:not(:active){background-color:var(--govnl-nav-bar-link-focus-background-color);color:var(--govnl-nav-bar-link-focus-color)}.dictu-navigation-bar__menu-icon{--govnl-icon-size: var(--govnl-nav-bar-icon-size);color:var(--govnl-nav-bar-icon-color)}.dictu-navigation-bar__submenu{background-color:var(--govnl-nav-bar-submenu-background-color);border-bottom-left-radius:var(--govnl-nav-bar-submenu-border-bottom-left-radius);border-bottom-right-radius:var(--govnl-nav-bar-submenu-border-bottom-right-radius);min-inline-size:var(--govnl-nav-bar-submenu-max-inline-size);overflow-wrap:break-word;padding-block:var(--govnl-nav-bar-submenu-padding-block-start) var(--govnl-nav-bar-submenu-padding-block-end);padding-inline:var(--govnl-nav-bar-submenu-padding-inline-start) var(--govnl-nav-bar-submenu-padding-inline-end);position:absolute;top:100%}.dictu-navigation-bar__submenu-list{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style-type:none}.dictu-navigation-bar__submenu-item{display:flex}.dictu-navigation-bar__submenu--hidden{display:none}.dictu-navigation-bar__submenu-link{background-color:rgba(0,0,0,0);padding-block:var(--govnl-nav-bar-submenu-link-padding-block-start) var(--govnl-nav-bar-submenu-link-padding-block-end);padding-inline:var(--govnl-nav-bar-submenu-link-padding-inline-start) var(--govnl-nav-bar-submenu-link-padding-inline-end)}@media(width <= 48em){.dictu-navigation-bar{flex-direction:column}.dictu-navigation-bar__submenu{background-color:rgba(0,0,0,0);border-bottom-left-radius:0;border-bottom-right-radius:0;overflow-wrap:initial;padding-block:var(--govnl-nav-bar-mobile-submenu-padding-block-start) var(--govnl-nav-bar-mobile-submenu-padding-block-end);padding-inline:var(--govnl-nav-bar-mobile-submenu-padding-inline-start) var(--govnl-nav-bar-mobile-submenu-padding-inline-end);position:relative;top:0}.dictu-navigation-bar__submenu-toggler{background-color:rgba(0,0,0,0);justify-content:space-between;width:100%}.dictu-navigation-bar__toggle{display:flex}.dictu-navigation-bar__list{background-color:var(--govnl-nav-bar-submenu-background-color);flex-direction:column}.dictu-navigation-bar__link{background-color:rgba(0,0,0,0)}.dictu-navigation-bar__submenu-link{width:100%}}/*# sourceMappingURL=index.css.map */
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../node_modules/@dictu/design-tokens/dist/navigation-bar.css","../../../node_modules/@dictu/utility-focus-ring/dist/index.css","../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAIA,sBACE,wCACA,oCACA,4CACA,wCACA,iCACA,2CACA,kDACA,6CACA,4EACA,2DACA,kEACA,6EACA,uEACA,8EACA,2DACA,2EACA,iEACA,2EACA,iEACA,0DACA,2DACA,kEACA,yEACA,sDACA,6DACA,4DACA,6DACA,iEACA,iEACA,iEACA,iEACA,sEACA,2DCrCF,sOCUA,sBCJE,eACA,gBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDJF,4BCQE,aACA,4CACA,gBACA,SACA,UDRF,4BCYE,mBACA,aDTF,4BCaE,mBACA,4DACA,sBACA,sCACA,sDACA,aACA,YACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,kCACE,kEACA,4CAGF,0CACE,kEACA,4CAGF,mCACE,mEACA,6CDrCJ,4BC0CE,mBACA,0CACA,sCACA,oBACA,2CACA,uBD3CF,8BC+CE,aD3CF,kCC+CE,mBACA,gBACA,YACA,cACA,eACA,aACA,eACA,UACA,mBDlDF,sBCuDE,sBACE,mBACA,sBACA,aACA,gDACA,6BACA,qBAIF,oDACE,cACA,WAGF,kDACE,cACA,cACA,WAGF,wDACE,aACA,cACA,WAGF,kDACE,WAGF,kDACE,iDACA,aACA,sBACA,qBACA,WAGF,kEACE,cD1FJ,yBCgGE,kCACE,aAGF,4BACE,aAGF,4BACE,gBACA,aACA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../node_modules/@dictu/utility-focus-ring/dist/index.css","../src/index.scss","../src/_mixin.scss"],"names":[],"mappings":"AAAA,sOCSA,sBCHE,eACA,gBACA,gBACA,iBAMA,uDACA,qGACA,iCACA,aACA,qDACA,mDDPF,4BCeE,aACA,4CACA,gBACA,SACA,UDfF,oCCmBE,aDdA,wECuIA,kBDlIF,uCCsIE,mBACA,uEACA,+DACA,sBACA,iDACA,iEACA,aACA,kBACA,YACA,iEACA,mEACA,qEAEA,2DACE,gFACA,sEAGF,6CACE,kEACA,4CAGF,8CACE,mEACA,6CAIA,kEACE,kEACA,4CDjKN,4BCeE,mBACA,4DACA,sBACA,sCACA,sDACA,aACA,YACA,sDACA,wDACA,0DAEA,kCACE,kEACA,4CAGF,kCACE,kEACA,4CAGF,0CACE,kEACA,4CAGF,mCACE,mEACA,6CDvCJ,4BCgDE,kDAEA,mBACA,sCACA,oBACA,uBDjDF,8BCwEE,mBACA,uEACA,+DACA,sBACA,iDACA,iEACA,aACA,kBACA,YACA,iEACA,mEACA,qEAEA,kDACE,gFAGF,oCACE,kEACA,4CAGF,qCACE,mEACA,6CAIA,yDACE,kEACA,4CDlGN,iCC4GE,kDAEA,sCD1GF,+BC6JE,+DACA,iFACA,mFACA,6DACA,yBACA,8GACA,iHACA,kBACA,SDjKF,oCC7CE,eACA,gBACA,gBACA,iBAkOA,qBDpLF,oCCwLE,aDpLF,uCC6JE,aDzJF,oCCoLE,+BACA,wHAEA,2HDlLF,sBACE,sBC7CA,sBDiDA,+BCmJA,+BACA,4BACA,6BACA,sBACA,4HAEA,+HAEA,kBACA,MDxJA,uCCyHA,+BACA,8BACA,WDvHA,8BCkEA,aD9DA,4BC5CA,+DACA,sBD+CA,4BCVA,+BDcA,oCC8JA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dictu/navigation-bar",
3
- "version": "1.3.0",
3
+ "version": "3.0.0",
4
4
  "author": "Dienst ICT Uitvoering",
5
5
  "description": "Navigation Bar CSS component.",
6
6
  "license": "EUPL-1.2",
package/src/_mixin.scss CHANGED
@@ -6,6 +6,8 @@
6
6
  @mixin reset {
7
7
  margin-block: 0;
8
8
  margin-inline: 0;
9
+ padding-block: 0;
10
+ padding-inline: 0;
9
11
  }
10
12
 
11
13
  @mixin dictu-navigation-bar {
@@ -19,6 +21,10 @@
19
21
  padding-inline: var(--govnl-nav-bar-padding-inline);
20
22
  }
21
23
 
24
+ @mixin dictu-navigation-bar--mobile {
25
+ flex-direction: column;
26
+ }
27
+
22
28
  @mixin dictu-navigation-bar__list {
23
29
  display: flex;
24
30
  gap: var(--govnl-nav-bar-content-column-gap);
@@ -27,9 +33,14 @@
27
33
  padding: 0;
28
34
  }
29
35
 
30
- @mixin dictu-navigation-bar__item {
31
- align-items: center;
32
- display: flex;
36
+ @mixin dictu-navigation-bar__list--hidden {
37
+ display: none;
38
+ }
39
+
40
+ @mixin dictu-navigation-bar__list--mobile {
41
+ // @TODO: Should be --govnl-nav-bar-mobile-list-background-color when it is added.
42
+ background-color: var(--govnl-nav-bar-submenu-background-color);
43
+ flex-direction: column;
33
44
  }
34
45
 
35
46
  @mixin dictu-navigation-bar__link {
@@ -59,96 +70,184 @@
59
70
  color: var(--govnl-nav-bar-link-focus-color);
60
71
  }
61
72
 
62
- &-active {
73
+ &:active {
63
74
  background-color: var(--govnl-nav-bar-link-active-background-color);
64
75
  color: var(--govnl-nav-bar-link-active-color);
65
76
  }
66
77
  }
67
78
 
79
+ @mixin dictu-navigation-bar__link--mobile {
80
+ background-color: transparent;
81
+ }
82
+
68
83
  @mixin dictu-navigation-bar__icon {
84
+ --govnl-icon-size: var(--govnl-nav-bar-icon-size);
85
+
69
86
  align-items: center;
70
- block-size: var(--govnl-nav-bar-icon-size);
71
87
  color: var(--govnl-nav-bar-icon-color);
72
88
  display: inline-flex;
73
- inline-size: var(--govnl-nav-bar-icon-size);
74
89
  justify-content: center;
75
90
  }
76
91
 
77
- @mixin dictu-navigation-bar__toggle {
78
- display: none;
79
- }
92
+ /*
93
+ @TODO: The navigation bar toggler for mobile menu does not have an own token set.
94
+ Currently the tokens for the submenu toggler are being used. Following tokens should be added:
95
+ - govnl.nav-bar.toggle.background-color
96
+ - govnl.nav-bar.toggle.border-width
97
+ - govnl.nav-bar.toggle.color
98
+ - govnl.nav-bar.toggle.column-gap
99
+ - govnl.nav-bar.toggle.padding-block
100
+ - govnl.nav-bar.toggle.padding-inline
101
+ - govnl.nav-bar.toggle.text-decoration
102
+ - govnl.nav-bar.toggle.expanded.background-color
103
+ - govnl.nav-bar.toggle.hover.background-color
104
+ - govnl.nav-bar.toggle.hover.color
105
+ - govnl.nav-bar.toggle.active.background-color
106
+ - govnl.nav-bar.toggle.active.color
107
+ - govnl.nav-bar.toggle.focus-visible.background-color
108
+ - govnl.nav-bar.toggle.focus-visible.color
109
+ */
80
110
 
81
- @mixin dictu-navigation-bar__menu-label {
111
+ @mixin dictu-navigation-bar__toggle {
82
112
  align-items: center;
83
- background: none;
84
- border: none;
85
- color: inherit;
86
- cursor: pointer;
113
+ background-color: var(--govnl-nav-bar-submenu-toggler-background-color);
114
+ border-width: var(--govnl-nav-bar-submenu-toggler-border-width);
115
+ box-sizing: border-box;
116
+ color: var(--govnl-nav-bar-submenu-toggler-color);
117
+ column-gap: calc(var(--govnl-nav-bar-submenu-toggler-column-gap));
87
118
  display: none;
88
- font-size: 1rem;
89
- gap: 0.5rem;
90
- padding: 0.5rem 1rem;
91
- }
119
+ font-size: inherit;
120
+ height: 100%;
121
+ padding-block: var(--govnl-nav-bar-submenu-toggler-padding-block);
122
+ padding-inline: var(--govnl-nav-bar-submenu-toggler-padding-inline);
123
+ text-decoration: var(--govnl-nav-bar-submenu-toggler-text-decoration);
92
124
 
93
- // Mobile styles <= 768px
94
- @mixin dictu-navigation-bar--mobile {
95
- .dictu-navigation-bar {
96
- align-items: center;
97
- box-sizing: border-box;
98
- display: grid;
99
- grid-template-columns: minmax(50px, max-content);
100
- grid-template-rows: auto auto;
101
- max-inline-size: 100%;
125
+ &[aria-expanded="true"] {
126
+ background-color: var(--govnl-nav-bar-submenu-toggler-expanded-background-color);
102
127
  }
103
128
 
104
- // Place first 3 children in first row, fourth in second row
105
- .dictu-navigation-bar .dictu-navigation-bar__toggle {
106
- grid-column: 2;
107
- grid-row: 1;
129
+ &:hover {
130
+ background-color: var(--govnl-nav-bar-link-hover-background-color);
131
+ color: var(--govnl-nav-bar-link-hover-color);
108
132
  }
109
133
 
110
- .dictu-navigation-bar .dictu-navigation-bar__home {
111
- display: block;
112
- grid-column: 1;
113
- grid-row: 1;
134
+ &:active {
135
+ background-color: var(--govnl-nav-bar-link-active-background-color);
136
+ color: var(--govnl-nav-bar-link-active-color);
114
137
  }
115
138
 
116
- .dictu-navigation-bar .dictu-navigation-bar__menu-label {
117
- display: flex;
118
- grid-column: 2;
119
- grid-row: 1;
139
+ &:focus-visible {
140
+ &:not(:active) {
141
+ background-color: var(--govnl-nav-bar-link-focus-background-color);
142
+ color: var(--govnl-nav-bar-link-focus-color);
143
+ }
120
144
  }
145
+ }
121
146
 
122
- .dictu-navigation-bar .dictu-navigation-bar__link {
123
- width: 100%;
124
- }
147
+ @mixin dictu-navigation-bar__toggle--mobile {
148
+ display: flex;
149
+ }
125
150
 
126
- .dictu-navigation-bar .dictu-navigation-bar__list {
127
- background: var(--govnl-nav-bar-background-color);
128
- display: none;
129
- flex-direction: column;
130
- grid-column: 1 / span 6;
131
- grid-row: 2;
132
- }
151
+ @mixin dictu-navigation-bar__menu-icon {
152
+ --govnl-icon-size: var(--govnl-nav-bar-icon-size);
133
153
 
134
- .dictu-navigation-bar__toggle:checked ~ .dictu-navigation-bar__list {
135
- display: flex;
136
- }
154
+ color: var(--govnl-nav-bar-icon-color);
155
+ }
156
+
157
+ @mixin dictu-navigation-bar__item--submenu {
158
+ position: relative;
137
159
  }
138
160
 
139
- // Desktop styles > 768px
140
- @mixin dictu-navigation-bar--desktop {
141
- .dictu-navigation-bar__menu-label {
142
- display: none;
161
+ @mixin dictu-navigation-bar__submenu-toggler {
162
+ align-items: center;
163
+ background-color: var(--govnl-nav-bar-submenu-toggler-background-color);
164
+ border-width: var(--govnl-nav-bar-submenu-toggler-border-width);
165
+ box-sizing: border-box;
166
+ color: var(--govnl-nav-bar-submenu-toggler-color);
167
+ column-gap: calc(var(--govnl-nav-bar-submenu-toggler-column-gap));
168
+ display: flex;
169
+ font-size: inherit; // @TODO: add --govnl-nav-bar-submenu-toggler-font-size when it is added.
170
+ height: 100%;
171
+ padding-block: var(--govnl-nav-bar-submenu-toggler-padding-block);
172
+ padding-inline: var(--govnl-nav-bar-submenu-toggler-padding-inline);
173
+ text-decoration: var(--govnl-nav-bar-submenu-toggler-text-decoration);
174
+
175
+ &[aria-expanded="true"] {
176
+ background-color: var(--govnl-nav-bar-submenu-toggler-expanded-background-color);
177
+ font-weight: var(--govnl-nav-bar-submenu-toggler-expanded-font-weight);
143
178
  }
144
179
 
145
- .dictu-navigation-bar__home {
146
- display: none;
180
+ &:hover {
181
+ background-color: var(--govnl-nav-bar-link-hover-background-color);
182
+ color: var(--govnl-nav-bar-link-hover-color);
147
183
  }
148
184
 
149
- .dictu-navigation-bar__list {
150
- box-shadow: none;
151
- display: flex;
152
- flex-direction: row;
185
+ &:active {
186
+ background-color: var(--govnl-nav-bar-link-active-background-color);
187
+ color: var(--govnl-nav-bar-link-active-color);
188
+ }
189
+
190
+ &:focus-visible {
191
+ &:not(:active) {
192
+ background-color: var(--govnl-nav-bar-link-focus-background-color);
193
+ color: var(--govnl-nav-bar-link-focus-color);
194
+ }
153
195
  }
154
196
  }
197
+
198
+ @mixin dictu-navigation-bar__submenu-toggler--mobile {
199
+ background-color: transparent;
200
+ justify-content: space-between;
201
+ width: 100%;
202
+ }
203
+
204
+ @mixin dictu-navigation-bar__submenu {
205
+ background-color: var(--govnl-nav-bar-submenu-background-color);
206
+ border-bottom-left-radius: var(--govnl-nav-bar-submenu-border-bottom-left-radius);
207
+ border-bottom-right-radius: var(--govnl-nav-bar-submenu-border-bottom-right-radius);
208
+ min-inline-size: var(--govnl-nav-bar-submenu-max-inline-size); // @TODO Change into min inline size token when added.
209
+ overflow-wrap: break-word;
210
+ padding-block: var(--govnl-nav-bar-submenu-padding-block-start) var(--govnl-nav-bar-submenu-padding-block-end);
211
+ padding-inline: var(--govnl-nav-bar-submenu-padding-inline-start) var(--govnl-nav-bar-submenu-padding-inline-end);
212
+ position: absolute;
213
+ top: 100%;
214
+ }
215
+
216
+ @mixin dictu-navigation-bar__submenu--hidden {
217
+ display: none;
218
+ }
219
+
220
+ @mixin dictu-navigation-bar__submenu--mobile {
221
+ background-color: transparent;
222
+ border-bottom-left-radius: 0;
223
+ border-bottom-right-radius: 0;
224
+ overflow-wrap: initial;
225
+ padding-block: var(--govnl-nav-bar-mobile-submenu-padding-block-start)
226
+ var(--govnl-nav-bar-mobile-submenu-padding-block-end);
227
+ padding-inline: var(--govnl-nav-bar-mobile-submenu-padding-inline-start)
228
+ var(--govnl-nav-bar-mobile-submenu-padding-inline-end);
229
+ position: relative;
230
+ top: 0;
231
+ }
232
+
233
+ @mixin dictu-navigation-bar__submenu-list {
234
+ @include reset;
235
+
236
+ list-style-type: none;
237
+ }
238
+
239
+ @mixin dictu-navigation-bar__submenu-item {
240
+ display: flex;
241
+ }
242
+
243
+ @mixin dictu-navigation-bar__submenu-link {
244
+ background-color: transparent; // token?
245
+ padding-block: var(--govnl-nav-bar-submenu-link-padding-block-start)
246
+ var(--govnl-nav-bar-submenu-link-padding-block-end);
247
+ padding-inline: var(--govnl-nav-bar-submenu-link-padding-inline-start)
248
+ var(--govnl-nav-bar-submenu-link-padding-inline-end);
249
+ }
250
+
251
+ @mixin dictu-navigation-bar__submenu-link--mobile {
252
+ width: 100%;
253
+ }
package/src/index.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  * Copyright (c) 2021-2025 dictu
4
4
  */
5
5
 
6
- @use "pkg:@dictu/design-tokens/dist/navigation-bar" as design-tokens;
7
6
  @use "pkg:@dictu/utility-focus-ring/dist/index" as focus-ring;
8
7
 
9
8
  @use "./mixin.scss" as mixin;
@@ -16,8 +15,18 @@
16
15
  @include mixin.dictu-navigation-bar__list;
17
16
  }
18
17
 
18
+ .dictu-navigation-bar__list--hidden {
19
+ @include mixin.dictu-navigation-bar__list--hidden;
20
+ }
21
+
19
22
  .dictu-navigation-bar__item {
20
- @include mixin.dictu-navigation-bar__item;
23
+ &:has(.dictu-navigation-bar__submenu-toggler) {
24
+ @include mixin.dictu-navigation-bar__item--submenu;
25
+ }
26
+ }
27
+
28
+ .dictu-navigation-bar__submenu-toggler {
29
+ @include mixin.dictu-navigation-bar__submenu-toggler;
21
30
  }
22
31
 
23
32
  .dictu-navigation-bar__link {
@@ -32,16 +41,57 @@
32
41
  @include mixin.dictu-navigation-bar__toggle;
33
42
  }
34
43
 
35
- .dictu-navigation-bar__menu-label {
36
- @include mixin.dictu-navigation-bar__menu-label;
44
+ .dictu-navigation-bar__menu-icon {
45
+ @include mixin.dictu-navigation-bar__menu-icon;
46
+ }
47
+
48
+ .dictu-navigation-bar__submenu {
49
+ @include mixin.dictu-navigation-bar__submenu;
50
+ }
51
+
52
+ .dictu-navigation-bar__submenu-list {
53
+ @include mixin.dictu-navigation-bar__submenu-list;
54
+ }
55
+
56
+ .dictu-navigation-bar__submenu-item {
57
+ @include mixin.dictu-navigation-bar__submenu-item;
58
+ }
59
+
60
+ .dictu-navigation-bar__submenu--hidden {
61
+ @include mixin.dictu-navigation-bar__submenu--hidden;
62
+ }
63
+
64
+ .dictu-navigation-bar__submenu-link {
65
+ @include mixin.dictu-navigation-bar__submenu-link;
37
66
  }
38
67
 
39
68
  // Responsive: mobile
40
69
  @media (width <= 48em) {
41
- @include mixin.dictu-navigation-bar--mobile;
42
- }
70
+ .dictu-navigation-bar {
71
+ @include mixin.dictu-navigation-bar--mobile;
72
+ }
73
+
74
+ .dictu-navigation-bar__submenu {
75
+ @include mixin.dictu-navigation-bar__submenu--mobile;
76
+ }
77
+
78
+ .dictu-navigation-bar__submenu-toggler {
79
+ @include mixin.dictu-navigation-bar__submenu-toggler--mobile;
80
+ }
81
+
82
+ .dictu-navigation-bar__toggle {
83
+ @include mixin.dictu-navigation-bar__toggle--mobile;
84
+ }
85
+
86
+ .dictu-navigation-bar__list {
87
+ @include mixin.dictu-navigation-bar__list--mobile;
88
+ }
89
+
90
+ .dictu-navigation-bar__link {
91
+ @include mixin.dictu-navigation-bar__link--mobile;
92
+ }
43
93
 
44
- // Responsive: desktop
45
- @media (width >= 48.01em) {
46
- @include mixin.dictu-navigation-bar--desktop;
94
+ .dictu-navigation-bar__submenu-link {
95
+ @include mixin.dictu-navigation-bar__submenu-link--mobile;
96
+ }
47
97
  }