@natachah/vanilla-frontend 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/docs/main.js +2 -2
  2. package/docs/pages/base/typography.html +4 -0
  3. package/docs/pages/components/button.html +16 -2
  4. package/docs/pages/components/card.html +2 -2
  5. package/docs/pages/components/dialog.html +13 -11
  6. package/docs/pages/components/form.html +25 -1
  7. package/docs/pages/components/list.html +2 -2
  8. package/docs/pages/javascript/{sidebar.html → drawer.html} +17 -16
  9. package/docs/pages/javascript/scroll.html +4 -4
  10. package/docs/pages/javascript/tabpanel.html +2 -2
  11. package/docs/pages/javascript/toggle.html +3 -3
  12. package/docs/pages/javascript/tree.html +89 -72
  13. package/docs/pages/quick-start/customization.html +95 -86
  14. package/docs/pages/quick-start/installation.html +1 -0
  15. package/docs/pages/quick-start/mixins.html +7 -7
  16. package/docs/src/js/doc-code.js +1 -1
  17. package/docs/src/js/doc-layout.js +2 -2
  18. package/js/{_sidebar.js → _drawer.js} +16 -15
  19. package/js/_toggle.js +2 -0
  20. package/js/_tree.js +9 -3
  21. package/js/tests/{sidebar.test.js → drawer.test.js} +27 -27
  22. package/js/tests/tree.test.js +11 -10
  23. package/js/utilities/_cookie.js +2 -2
  24. package/natachah-vanilla-frontend-0.1.6.tgz +0 -0
  25. package/package.json +1 -1
  26. package/scss/abstracts/_mixins.scss +2 -0
  27. package/scss/base/_reset.scss +12 -26
  28. package/scss/base/_typography.scss +3 -2
  29. package/scss/components/_button.scss +1 -1
  30. package/scss/components/_dropdown.scss +1 -1
  31. package/scss/components/_form.scss +8 -8
  32. package/scss/themes/_root.scss +8 -0
  33. package/natachah-vanilla-frontend-0.1.4.tgz +0 -0
package/docs/pages/quick-start/customization.html CHANGED
@@ -28,60 +28,69 @@
28
28
  <doc-code data-type="scss">
29
29
  :root {
30
30
 
31
- // Typography
32
- --font-size: 16px;
33
- --line-height: 1.5;
34
- --font-family: Arial;
35
- --font-weight: normal;
36
-
37
- --font-size-h1: 2.25em; // 36px
38
- --font-size-h2: 2.00em; // 32px
39
- --font-size-h3: 1.75em; // 28px
40
- --font-size-h4: 1.50em; // 24px
41
- --font-size-h5: 1.25em; // 20px
42
- --font-size-h6: 1.125em; // 18px
43
- --font-size-large: 1.125em; // 18px
44
- --font-size-small: .875em; // 14px
45
-
46
- // Anchor
47
- --decoration: none;
48
-
49
- // Layouts
50
- --padding-inline: .75em;
51
- --padding-block: .5em;
52
-
53
- // Border
54
- --border-size: 1px;
55
- --border-style: solid;
56
- --border-radius: .25rem;
57
-
58
- // Focus (outline)
59
- --focus-size: 3px;
60
- --focus-style: solid;
61
- --focus-offset: 0;
62
- --focus-opacity: 50%;
63
-
64
- // Hover (color-mix)
65
- --hover-color: black;
66
- --hover-percent: 5%;
67
-
68
- // Active (color-mix)
69
- --active-color: black;
70
- --active-percent: 10%;
71
-
72
- // Disabled
73
- --disabled-opacity: 50%;
74
-
75
- // Colors
76
- --color-body: white;
77
- --color-font: black;
78
- --color-primary: #B790E5;
79
- --color-error: #DC3030;
80
- --color-success: #008A00;
81
- --color-warning: #FFA500;
82
-
83
- // Contrasts
84
- --color-warning-contrast: black;
31
+ // Typography
32
+ --font-size: 16px;
33
+ --line-height: 1.5;
34
+ --font-family: Arial;
35
+ --font-weight: normal;
36
+
37
+ --font-size-h1: 2.25em; // 36px
38
+ --font-size-h2: 2.00em; // 32px
39
+ --font-size-h3: 1.75em; // 28px
40
+ --font-size-h4: 1.50em; // 24px
41
+ --font-size-h5: 1.25em; // 20px
42
+ --font-size-h6: 1.125em; // 18px
43
+ --font-size-large: 1.125em; // 18px
44
+ --font-size-small: .875em; // 14px
45
+
46
+ // Anchor
47
+ --decoration: none;
48
+
49
+ // Layouts
50
+ --padding-inline: .75em;
51
+ --padding-block: .5em;
52
+
53
+ // Border
54
+ --border-size: 1px;
55
+ --border-style: solid;
56
+ --border-radius: .25rem;
57
+
58
+ // Focus (outline)
59
+ --focus-size: 3px;
60
+ --focus-style: solid;
61
+ --focus-offset: 0;
62
+ --focus-opacity: 50%;
63
+
64
+ // Hover (color-mix)
65
+ --hover-color: black;
66
+ --hover-percent: 5%;
67
+
68
+ // Active (color-mix)
69
+ --active-color: black;
70
+ --active-percent: 10%;
71
+
72
+ // Disabled
73
+ --disabled-opacity: 50%;
74
+
75
+ // Colors
76
+ --color-body: white;
77
+ --color-font: black;
78
+ --color-primary: #B790E5;
79
+ --color-error: #DC3030;
80
+ --color-success: #008A00;
81
+ --color-warning: #FFA500;
82
+
83
+ // Contrasts
84
+ --color-warning-contrast: black;
85
+
86
+ // Icons
87
+ --icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" /></svg>');
88
+ --icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" /><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" /></svg>');
89
+ --icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" /><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" /></svg>');
90
+ --icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" /></svg>');
91
+ --icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" /></svg>');
92
+ --icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" /></svg>');
93
+ --icon-switch: var(--icon-radio);
85
94
 
86
95
  }
87
96
  </doc-code>
@@ -129,28 +138,28 @@
129
138
  <doc-code data-type="scss">
130
139
  @forward '@natachah/vanilla-frontend/scss/abstracts/_options.scss' with (
131
140
 
132
- $colors: (
133
- primary,
134
- success,
135
- error,
136
- warning
137
- );
138
-
139
- $color-variations: (
140
- badge: $colors,
141
- button: $colors,
142
- card: $colors,
143
- disclosure: $colors,
144
- list: $colors
145
- );
146
-
147
- $outline-variations: (
148
- badge,
149
- button,
150
- card,
151
- disclosure,
152
- list
153
- );
141
+ $colors: (
142
+ primary,
143
+ success,
144
+ error,
145
+ warning
146
+ );
147
+
148
+ $color-variations: (
149
+ badge: $colors,
150
+ button: $colors,
151
+ card: $colors,
152
+ disclosure: $colors,
153
+ list: $colors
154
+ );
155
+
156
+ $outline-variations: (
157
+ badge,
158
+ button,
159
+ card,
160
+ disclosure,
161
+ list
162
+ );
154
163
  );
155
164
  </doc-code>
156
165
 
@@ -164,16 +173,16 @@
164
173
 
165
174
  <doc-code data-type="scss">
166
175
  @use '@natachah/vanilla-frontend/scss/abstracts/_default.scss' with (
167
- $item-properties: (
168
- color: var(--color-font),
169
- background: transparent,
170
- border-size: var(--border-size),
171
- border-style: var(--border-style),
172
- border-color: transparent,
173
- border-radius: var(--border-radius),
174
- padding-inline: var(--padding-inline),
175
- padding-block: var(--padding-block)
176
- );
176
+ $item-properties: (
177
+ color: var(--color-font),
178
+ background: transparent,
179
+ border-size: var(--border-size),
180
+ border-style: var(--border-style),
181
+ border-color: transparent,
182
+ border-radius: var(--border-radius),
183
+ padding-inline: var(--padding-inline),
184
+ padding-block: var(--padding-block)
185
+ );
177
186
  );
178
187
  </doc-code>
179
188
 
package/docs/pages/quick-start/installation.html CHANGED
@@ -80,6 +80,7 @@
80
80
  import Consent from "@natachah/vanilla-frontend/js/_consent"
81
81
  import Dialog from "@natachah/vanilla-frontend/js/_dialog"
82
82
  import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
83
+ import Drawer from "@natachah/vanilla-frontend/js/_drawer"
83
84
  import Scroll from "@natachah/vanilla-frontend/js/_scroll"
84
85
  import Slider from "@natachah/vanilla-frontend/js/_slider"
85
86
  import Sortable from "@natachah/vanilla-frontend/js/_sortable"
package/docs/pages/quick-start/mixins.html CHANGED
@@ -113,7 +113,7 @@
113
113
  </doc-code>
114
114
  <doc-code id="setting" data-type="scss" role="tabpanel">
115
115
  $outline-variations: (
116
- my-component-name
116
+ my-component-name
117
117
  );
118
118
  </doc-code>
119
119
  </div>
@@ -144,7 +144,7 @@
144
144
  </doc-code>
145
145
  <doc-code id="setting" data-type="scss" role="tabpanel">
146
146
  $color-variations: (
147
- my-component-name: (primary, other-color)
147
+ my-component-name: (primary, other-color)
148
148
  );
149
149
  </doc-code>
150
150
  </div>
@@ -185,9 +185,9 @@
185
185
  </doc-code>
186
186
  <doc-code id="scss" data-type="scss" role="tabpanel">
187
187
  @container (max-width:800px) {
188
- table {
189
- @include as-responsive-table()
190
- }
188
+ table {
189
+ @include as-responsive-table()
190
+ }
191
191
  }
192
192
  </doc-code>
193
193
  <doc-code id="css" data-type="css" role="tabpanel">
@@ -219,11 +219,11 @@
219
219
  </doc-code>
220
220
  <doc-code id="scss" data-type="scss" role="tabpanel">
221
221
  #wider {
222
- @include flex-grid-wider-column(3)
222
+ @include flex-grid-wider-column(3)
223
223
  }
224
224
 
225
225
  #offset {
226
- @include flex-grid-offset-column(2)
226
+ @include flex-grid-offset-column(2)
227
227
  }
228
228
  </doc-code>
229
229
  </div>
package/docs/src/js/doc-code.js CHANGED
@@ -61,7 +61,7 @@ class DocCode extends HTMLElement {
61
61
  const type = this.getAttribute('data-type') ?? 'html'
62
62
 
63
63
  // Clean the code
64
- let content = type === 'html' ? this.innerHTML : this.textContent
64
+ let content = type === 'html' || type === 'scss' ? this.innerHTML : this.textContent
65
65
  var pattern = content.match(/\s*\n[\t\s]*/)
66
66
  content = content.replace(new RegExp(pattern, "g"), '\n').replaceAll('=""', '')
67
67
  content = content.trim()
package/docs/src/js/doc-layout.js CHANGED
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
18
18
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
19
19
  <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
20
20
  </svg>
21
- 0.1.4
21
+ 0.1.6
22
22
  </span>
23
23
  </li>
24
24
  <li>
@@ -88,9 +88,9 @@ class DocLayout extends HTMLElement {
88
88
  <li><a href="/pages/javascript/comfort.html">Comfort</a></li>
89
89
  <li><a href="/pages/javascript/consent.html">Consent</a></li>
90
90
  <li><a href="/pages/javascript/cookie.html">Cookie</a></li>
91
+ <li><a href="/pages/javascript/drawer.html">Drawer</a></li>
91
92
  <li><a href="/pages/javascript/form.html">Form helper</a></li>
92
93
  <li><a href="/pages/javascript/scroll.html">Scroll</a></li>
93
- <li><a href="/pages/javascript/sidebar.html">Sidebar</a></li>
94
94
  <li><a href="/pages/javascript/sortable.html">Sortable</a></li>
95
95
  <li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
96
96
  <li><a href="/pages/javascript/toggle.html">Toggle</a></li>
package/js/{_sidebar.js → _drawer.js} RENAMED
@@ -1,8 +1,9 @@
1
1
  /**
2
2
  * ------------------------------------------------------------------
3
- * Sidebar
3
+ * Drawer
4
4
  * ------------------------------------------------------------------
5
- * This class enable the functionality to toggles multiple tabpanel
5
+ * This class enable the functionality to toggles a drawer to show/hide some content
6
+ * Most used case is a sidebar or a main menu to hide on mobile
6
7
  *
7
8
  * @author Natacha Herth
8
9
  * @copyright Natacha Herth, design & web development
@@ -12,7 +13,7 @@
12
13
  import BaseComponent from './utilities/_base-component'
13
14
  import ErrorMessage from "./utilities/_error"
14
15
 
15
- export default class Sidebar extends BaseComponent {
16
+ export default class Drawer extends BaseComponent {
16
17
 
17
18
  static OPTIONS = {
18
19
  breakpoint: 960,
@@ -30,12 +31,12 @@ export default class Sidebar extends BaseComponent {
30
31
  if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
31
32
 
32
33
  // Run the SUPER constructor from BaseComponent
33
- super(el, options, 'sidebar')
34
+ super(el, options, 'drawer')
34
35
 
35
36
  // Define the properties
36
37
  this._buttons = document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? []
37
38
 
38
- this._backdrop = document.getElementById('backdrop')
39
+ this._backdrop = document.getElementById('backdrop') ?? null
39
40
 
40
41
  this._timeout = false
41
42
 
@@ -55,10 +56,10 @@ export default class Sidebar extends BaseComponent {
55
56
  */
56
57
  #init() {
57
58
 
58
- // On load check if need to open/close the sidebar
59
+ // On load check if need to open/close the drawer
59
60
  if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.toggle()
60
61
 
61
- // On resize check if need to open/close the sidebar
62
+ // On resize check if need to open/close the drawer
62
63
  window.onresize = () => {
63
64
  clearTimeout(this._timeout)
64
65
  this._timeout = setTimeout(() => {
@@ -66,19 +67,19 @@ export default class Sidebar extends BaseComponent {
66
67
  }, 250)
67
68
  }
68
69
 
69
- // On click on the button toggle the sidebar
70
- this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle()))
70
+ // On click on the button toggle the drawer
71
+ this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle(true)))
71
72
 
72
- // On click on the backdrop, close the sidebar
73
- this._backdrop.addEventListener('click', () => this.toggle())
73
+ // On click on the backdrop, close the drawer
74
+ if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
74
75
 
75
76
  }
76
77
 
77
78
  /**
78
- * Toggle the sidebar
79
+ * Toggle the drawer
79
80
  *
80
81
  */
81
- toggle() {
82
+ toggle(enableFocus = false) {
82
83
 
83
84
  // Change the state
84
85
  this._isOpen = !this._isOpen
@@ -89,11 +90,11 @@ export default class Sidebar extends BaseComponent {
89
90
  button.setAttribute('aria-expanded', this._isOpen)
90
91
  })
91
92
 
92
- // Change the [hidden] attribute on the sidebar
93
+ // Change the [hidden] attribute on the drawer
93
94
  this._element.hidden = !this._isOpen
94
95
 
95
96
  // Toggle the focus
96
- if (this._focus && this._isOpen) this._focus.focus()
97
+ if (enableFocus && this._focus && this._isOpen) this._focus.focus()
97
98
 
98
99
  }
99
100
 
package/js/_toggle.js CHANGED
@@ -103,6 +103,8 @@ export default class Toggle extends BaseComponent {
103
103
  // Toggle the [hidden] attribute
104
104
  toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
105
105
 
106
+ if (!toggable.hidden && toggable.hasAttribute('tabindex')) toggable.focus()
107
+
106
108
  })
107
109
 
108
110
  // Update the [aria-expanded] attribute if there is any toggables visible
package/js/_tree.js CHANGED
@@ -25,9 +25,9 @@ export default class Tree extends BaseComponent {
25
25
  super(el, options, 'tree')
26
26
 
27
27
  // Define the properties
28
- this._type = this._element.role == 'tree' ? 'list' : 'grid'
28
+ this._type = this._element.tagName == 'TABLE' ? 'grid' : 'list'
29
29
 
30
- this._withHandle = this._element.querySelector('[data-handle=tree]') ? true : false
30
+ this._withHandle = this._type == 'grid' && this._element.querySelector('[data-handle=tree]') ? true : false
31
31
 
32
32
  this._items = this._element.querySelectorAll('[aria-expanded]')
33
33
 
@@ -67,11 +67,17 @@ export default class Tree extends BaseComponent {
67
67
  item.setAttribute('aria-expanded', !isExpanded)
68
68
 
69
69
  // Get children to toggle
70
- const children = item.hasAttribute('aria-owns') ? item.getAttribute('aria-owns').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
70
+ const children = item.hasAttribute('aria-controls') ? item.getAttribute('aria-controls').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
71
71
 
72
72
  // Toggle the [hidden] attribute on the children
73
73
  children.forEach(child => child.hidden = isExpanded)
74
74
 
75
+ // Set the focus on the required child
76
+ if (!isExpanded) {
77
+ const childToFocus = children.find(el => el.hasAttribute('tabindex')) ?? null
78
+ if (childToFocus) childToFocus.focus()
79
+ }
80
+
75
81
  // If type grid, collapse the subchildren
76
82
  if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this.toggle(child))
77
83
 
package/js/tests/{sidebar.test.js → drawer.test.js} RENAMED
@@ -1,20 +1,20 @@
1
1
  /**
2
2
  * ------------------------------------------------------------------
3
- * TEST for the _sidebar.js
3
+ * TEST for the _drawer.js
4
4
  * ------------------------------------------------------------------
5
5
  * The test will take care of:
6
6
  * - Constructor: Passing the correct parameters
7
7
  * - Constructor: Return the correct properties
8
- * - #Init: On click on the button toggle the sidebar
9
- * - #Init: On click on the backdrop, close the sidebar
8
+ * - #Init: On click on the button toggle the drawer
9
+ * - #Init: On click on the backdrop, close the drawer
10
10
  */
11
11
 
12
12
  import { describe, test, expect, beforeAll } from "vitest"
13
13
  import { fireEvent } from "@testing-library/dom"
14
- import Sidebar from "../_sidebar"
14
+ import Drawer from "../_drawer"
15
15
  import ErrorMessage from "../utilities/_error"
16
16
 
17
- let fakeSidebar
17
+ let fakeDrawer
18
18
 
19
19
  /**
20
20
  * Before all tests
@@ -25,72 +25,72 @@ beforeAll(() => {
25
25
 
26
26
  document.body.innerHTML =
27
27
  '<div id="backdrop"></div>' +
28
- '<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar"></button>' +
29
- '<aside id="sidebar" tabindex="0" hidden><button id="focus"></button></aside>'
28
+ '<button aria-expanded="false" aria-pressed="false" aria-controls="drawer"></button>' +
29
+ '<aside id="drawer" tabindex="0" hidden><button id="focus"></button></aside>'
30
30
 
31
31
  Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
32
32
 
33
- fakeSidebar = new Sidebar(document.getElementById('sidebar'))
33
+ fakeDrawer = new Drawer(document.getElementById('drawer'))
34
34
 
35
35
  })
36
36
 
37
37
  describe('Structure of the class', () => {
38
38
 
39
39
  test('Constructor: Passing the correct parameters', () => {
40
- expect(() => new Sidebar(document.getElementById('sidebar'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
40
+ expect(() => new Drawer(document.getElementById('drawer'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
41
41
  })
42
42
 
43
43
  test('Constructor: Return the correct properties', () => {
44
- expect(fakeSidebar._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="sidebar"]'))
45
- expect(fakeSidebar._backdrop).toStrictEqual(document.getElementById('backdrop'))
46
- expect(fakeSidebar._isOpen).toBeTruthy()
47
- expect(fakeSidebar._focus).toStrictEqual(document.getElementById('focus'))
44
+ expect(fakeDrawer._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="drawer"]'))
45
+ expect(fakeDrawer._backdrop).toStrictEqual(document.getElementById('backdrop'))
46
+ expect(fakeDrawer._isOpen).toBeTruthy()
47
+ expect(fakeDrawer._focus).toStrictEqual(document.getElementById('focus'))
48
48
  })
49
49
 
50
50
  })
51
51
 
52
52
  describe('#Init(', () => {
53
53
 
54
- test('On click on the button toggle the sidebar', () => {
54
+ test('On click on the button toggle the drawer', () => {
55
55
 
56
- const button = fakeSidebar._buttons[0]
56
+ const button = fakeDrawer._buttons[0]
57
57
 
58
- expect(fakeSidebar._isOpen).toBeTruthy()
59
- expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
58
+ expect(fakeDrawer._isOpen).toBeTruthy()
59
+ expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
60
60
  expect(button.getAttribute('aria-pressed')).toBe('true')
61
61
  expect(button.getAttribute('aria-expanded')).toBe('true')
62
62
 
63
63
  fireEvent(button, new MouseEvent('click'))
64
64
 
65
- expect(fakeSidebar._isOpen).toBeFalsy()
66
- expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
65
+ expect(fakeDrawer._isOpen).toBeFalsy()
66
+ expect(fakeDrawer._element.hasAttribute('hidden')).toBeTruthy()
67
67
  expect(button.getAttribute('aria-pressed')).toBe('false')
68
68
  expect(button.getAttribute('aria-expanded')).toBe('false')
69
69
 
70
70
  fireEvent(button, new MouseEvent('click'))
71
71
 
72
- expect(fakeSidebar._isOpen).toBeTruthy()
73
- expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
72
+ expect(fakeDrawer._isOpen).toBeTruthy()
73
+ expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
74
74
  expect(button.getAttribute('aria-pressed')).toBe('true')
75
75
  expect(button.getAttribute('aria-expanded')).toBe('true')
76
76
 
77
77
  })
78
78
 
79
- test('On click on the backdrop, close the sidebar', () => {
79
+ test('On click on the backdrop, close the drawer', () => {
80
80
 
81
81
  Object.defineProperty(window, 'innerWidth', { configurable: true, value: 800 })
82
82
 
83
- const button = fakeSidebar._buttons[0]
83
+ const button = fakeDrawer._buttons[0]
84
84
 
85
- expect(fakeSidebar._isOpen).toBeTruthy()
86
- expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
85
+ expect(fakeDrawer._isOpen).toBeTruthy()
86
+ expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
87
87
  expect(button.getAttribute('aria-pressed')).toBe('true')
88
88
  expect(button.getAttribute('aria-expanded')).toBe('true')
89
89
 
90
90
  fireEvent(document.getElementById('backdrop'), new MouseEvent('click'))
91
91
 
92
- expect(fakeSidebar._isOpen).toBeFalsy()
93
- expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
92
+ expect(fakeDrawer._isOpen).toBeFalsy()
93
+ expect(fakeDrawer._element.hasAttribute('hidden')).toBeTruthy()
94
94
  expect(button.getAttribute('aria-pressed')).toBe('false')
95
95
  expect(button.getAttribute('aria-expanded')).toBe('false')
96
96
 
package/js/tests/tree.test.js CHANGED
@@ -30,26 +30,27 @@ let fakeListTree, fakeGridTree, fakeLi, fakeRow, customClick
30
30
  beforeAll(() => {
31
31
 
32
32
  document.body.innerHTML =
33
- '<ul id="fakeListTree" role="tree">' +
34
- '<li role="treeitem"></li>' +
35
- '<li role="treeitem" aria-expanded="false" aria-owns="child">' +
36
- '<ul id="child" role="group" hidden>' +
37
- '<li role="treeitem"></li>' +
33
+ '<ul id="fakeListTree">' +
34
+ '<li></li>' +
35
+ '<li>' +
36
+ '<button role="link" aria-controls="child" aria-expanded="false">Toggle</button>' +
37
+ '<ul id="child" hidden>' +
38
+ '<li></li>' +
38
39
  '</ul>' +
39
40
  '</li>' +
40
- '<li role="treeitem"></li>' +
41
+ '<li></li>' +
41
42
  '</ul>' +
42
- '<table id="fakeGridTree" role="treegrid">' +
43
+ '<table id="fakeGridTree">' +
43
44
  '<tr aria-level="1"><td></td></tr>' +
44
- '<tr aria-level="1" aria-expanded="false" aria-owns="lvl2"><td data-handle="tree"></td></tr>' +
45
- '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-owns="lvl3" hidden><td data-handle="tree"></td></tr>' +
45
+ '<tr aria-level="1" aria-expanded="false" aria-controls="lvl2"><td data-handle="tree"></td></tr>' +
46
+ '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-controls="lvl3" hidden><td data-handle="tree"></td></tr>' +
46
47
  '<tr id="lvl3" aria-level="3" hidden><td></td></tr>' +
47
48
  '<tr aria-level="1"><td></td></tr>' +
48
49
  '</table>'
49
50
 
50
51
  fakeListTree = new Tree(document.getElementById('fakeListTree'))
51
52
  fakeGridTree = new Tree(document.getElementById('fakeGridTree'))
52
- fakeLi = fakeListTree._element.querySelector('li[aria-expanded]')
53
+ fakeLi = fakeListTree._element.querySelector('li [aria-expanded]')
53
54
  fakeRow = fakeGridTree._element.querySelector('tr[aria-level="1"][aria-expanded]')
54
55
 
55
56
  customClick = new MouseEvent('click')
package/js/utilities/_cookie.js CHANGED
@@ -61,7 +61,7 @@ export default class Cookie {
61
61
  */
62
62
  set(value) {
63
63
  if (!(value instanceof Object)) throw new Error(ErrorMessage.instanceOf('value', 'Object'))
64
- document.cookie = `${this.#NAME}=${JSON.stringify(value)};SameSite=Lax`
64
+ document.cookie = `${this.#NAME}=${JSON.stringify(value)};SameSite=Lax;Path=/;`
65
65
  }
66
66
 
67
67
  /**
@@ -91,7 +91,7 @@ export default class Cookie {
91
91
  *
92
92
  */
93
93
  delete() {
94
- document.cookie = this.#NAME + "=;SameSite=Lax; expires = Thu, 01 Jan 1970 00:00:00 GMT"
94
+ document.cookie = this.#NAME + "=;SameSite=Lax;Path=/; expires = Thu, 01 Jan 1970 00:00:00 GMT"
95
95
  }
96
96
 
97
97
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@natachah/vanilla-frontend",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "A vanilla frontend framework",
5
5
  "keywords": [
6
6
  "html5",
package/scss/abstracts/_mixins.scss CHANGED
@@ -117,6 +117,8 @@
117
117
  // Reset
118
118
  margin: 0;
119
119
  padding: 0;
120
+ border-radius: var(--#{$name}-border-radius, map.get($properties, border-radius));
121
+ background-color: var(--#{$name}-background, map.get($properties, background));
120
122
 
121
123
  &:is(ul, ol) {
122
124
  list-style: none;