@newjersey/njwds 2.4.0 → 2.6.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.
- package/package.json +1 -1
- package/src/components/07-form/controls/text-input.njk +18 -4
- package/src/components/banner/banner.njk +1 -1
- package/src/components/identifier/identifier.njk +1 -1
- package/src/components/modal/modal--with-forced-action.njk +48 -0
- package/src/components/modal/modal.config.yml +14 -0
- package/src/components/modal/modal.njk +56 -0
package/package.json
CHANGED
|
@@ -5,10 +5,24 @@
|
|
|
5
5
|
<label class="usa-label" for="input-focus">Text input focused</label>
|
|
6
6
|
<input class="usa-input usa-focus" id="input-focus" name="input-focus" type="text">
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
|
|
9
|
+
<label class="usa-label" for="input-error">
|
|
10
|
+
Text input label
|
|
11
|
+
</label>
|
|
12
|
+
<div class="usa-character-count">
|
|
13
|
+
<input
|
|
14
|
+
class="usa-input usa-input--error"
|
|
15
|
+
id="input-error"
|
|
16
|
+
aria-describedby="input-error-message"
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="nj-error-message-container">
|
|
20
|
+
<svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
|
|
21
|
+
<use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
|
|
22
|
+
</svg>
|
|
23
|
+
<span class="usa-error-message" id="input-error-message" role="alert"
|
|
24
|
+
>Helpful error message</span
|
|
25
|
+
>
|
|
12
26
|
</div>
|
|
13
27
|
|
|
14
28
|
<label class="usa-label" for="input-success">Text input success</label>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<div class="grid-col-auto">
|
|
10
10
|
<div class="text-white">
|
|
11
11
|
<ul>
|
|
12
|
-
<li>Governor Phil Murphy • Lt. Governor
|
|
12
|
+
<li>Governor Phil Murphy • Lt. Governor Tahesha Way</li><li><a
|
|
13
13
|
href="https://nj.gov/subscribe/" target="_blank"><svg
|
|
14
14
|
class="usa-icon bottom-neg-2px margin-right-05"
|
|
15
15
|
aria-hidden="true" focusable="false" role="img">
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
<li class="usa-identifier__required-links-item">
|
|
77
77
|
<a href="https://nj.gov/governor/admin/lt/"
|
|
78
78
|
class="usa-identifier__required-link">
|
|
79
|
-
Lt. Governor
|
|
79
|
+
Lt. Governor Tahesha Way
|
|
80
80
|
</a>
|
|
81
81
|
</li>
|
|
82
82
|
<li class="usa-identifier__required-links-item">
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<div class="padding-1">
|
|
2
|
+
<button
|
|
3
|
+
class="usa-button"
|
|
4
|
+
aria-controls="example-modal"
|
|
5
|
+
data-open-modal
|
|
6
|
+
>
|
|
7
|
+
Open modal with forced action
|
|
8
|
+
</button>
|
|
9
|
+
<div
|
|
10
|
+
class="usa-modal"
|
|
11
|
+
id="example-modal"
|
|
12
|
+
aria-labelledby="modal-heading"
|
|
13
|
+
aria-describedby="modal-description"
|
|
14
|
+
data-force-action
|
|
15
|
+
>
|
|
16
|
+
<div class="usa-modal__content">
|
|
17
|
+
<div class="usa-modal__main">
|
|
18
|
+
<h2 class="usa-modal__heading" id="modal-heading">
|
|
19
|
+
Your session will end soon.
|
|
20
|
+
</h2>
|
|
21
|
+
<div class="usa-prose">
|
|
22
|
+
<p id="modal-description">
|
|
23
|
+
You’ve been inactive for too long. Please choose to stay signed in
|
|
24
|
+
or sign out. Otherwise, you’ll be signed out automatically in 5
|
|
25
|
+
minutes.
|
|
26
|
+
</p>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="usa-modal__footer">
|
|
29
|
+
<ul class="usa-button-group">
|
|
30
|
+
<li class="usa-button-group__item">
|
|
31
|
+
<button type="button" class="usa-button" data-close-modal>
|
|
32
|
+
Yes, stay signed in
|
|
33
|
+
</button>
|
|
34
|
+
</li>
|
|
35
|
+
<li class="usa-button-group__item">
|
|
36
|
+
<button
|
|
37
|
+
type="button"
|
|
38
|
+
class="usa-button usa-button--unstyled padding-105 text-center"
|
|
39
|
+
data-close-modal
|
|
40
|
+
>
|
|
41
|
+
Sign out
|
|
42
|
+
</button>
|
|
43
|
+
</li>
|
|
44
|
+
</ul>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<div class="padding-1">
|
|
2
|
+
<button
|
|
3
|
+
class="usa-button"
|
|
4
|
+
aria-controls="example-modal"
|
|
5
|
+
data-open-modal
|
|
6
|
+
>
|
|
7
|
+
{{ openButtonText }}
|
|
8
|
+
</button>
|
|
9
|
+
<div
|
|
10
|
+
class="usa-modal {% if classes %}{{ classes }}{% endif %}"
|
|
11
|
+
id="example-modal"
|
|
12
|
+
aria-labelledby="modal-heading"
|
|
13
|
+
aria-describedby="modal-description"
|
|
14
|
+
>
|
|
15
|
+
<div class="usa-modal__content">
|
|
16
|
+
<div class="usa-modal__main">
|
|
17
|
+
<h1 class="usa-modal__heading" id="modal-heading">
|
|
18
|
+
Are you sure you want to continue?
|
|
19
|
+
</h1>
|
|
20
|
+
<div class="usa-prose">
|
|
21
|
+
<p id="modal-description">
|
|
22
|
+
You have unsaved changes that will be lost.
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="usa-modal__footer">
|
|
26
|
+
<ul class="usa-button-group">
|
|
27
|
+
<li class="usa-button-group__item">
|
|
28
|
+
<button type="button" class="usa-button" data-close-modal>
|
|
29
|
+
Continue without saving
|
|
30
|
+
</button>
|
|
31
|
+
</li>
|
|
32
|
+
<li class="usa-button-group__item">
|
|
33
|
+
<button
|
|
34
|
+
type="button"
|
|
35
|
+
class="usa-button usa-button--unstyled padding-105 text-center"
|
|
36
|
+
data-close-modal
|
|
37
|
+
>
|
|
38
|
+
Go back
|
|
39
|
+
</button>
|
|
40
|
+
</li>
|
|
41
|
+
</ul>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<button
|
|
45
|
+
type="button"
|
|
46
|
+
class="usa-button usa-modal__close"
|
|
47
|
+
aria-label="Close this window"
|
|
48
|
+
data-close-modal
|
|
49
|
+
>
|
|
50
|
+
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
|
51
|
+
<use href="{{ uswds.path }}/img/sprite.svg#close"></use>
|
|
52
|
+
</svg>
|
|
53
|
+
</button>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|