@newjersey/njwds 2.4.0 → 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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newjersey/njwds",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "NJ Web Design Standards",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -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,14 @@
1
+ label: Modal
2
+ status: ready
3
+
4
+ variants:
5
+ - name: default
6
+ label: Default
7
+ context:
8
+ openButtonText: Open default modal
9
+
10
+ - name: large
11
+ label: Large
12
+ context:
13
+ openButtonText: Open large modal
14
+ classes: usa-modal--lg
@@ -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>