@internetarchive/ia-topnav 1.3.6-alpha.0 → 1.3.6-alpha1

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 (85) hide show
  1. package/.eslintrc +16 -16
  2. package/LICENSE +661 -661
  3. package/README.md +147 -147
  4. package/index.d.ts +109 -109
  5. package/index.js +3 -3
  6. package/package.json +61 -61
  7. package/src/assets/img/hamburger.js +38 -38
  8. package/src/assets/img/ia-icon.js +33 -33
  9. package/src/assets/img/icon-audio.js +23 -23
  10. package/src/assets/img/icon-close.js +16 -16
  11. package/src/assets/img/icon-donate-unpadded.js +16 -16
  12. package/src/assets/img/icon-donate.js +15 -15
  13. package/src/assets/img/icon-ellipses.js +15 -15
  14. package/src/assets/img/icon-ia-logo.js +22 -22
  15. package/src/assets/img/icon-images.js +15 -15
  16. package/src/assets/img/icon-search.js +15 -15
  17. package/src/assets/img/icon-software.js +15 -15
  18. package/src/assets/img/icon-texts.js +15 -15
  19. package/src/assets/img/icon-upload-unpadded.js +14 -14
  20. package/src/assets/img/icon-upload.js +15 -15
  21. package/src/assets/img/icon-user.js +15 -15
  22. package/src/assets/img/icon-video.js +15 -15
  23. package/src/assets/img/icon-web.js +15 -15
  24. package/src/assets/img/icon.js +18 -18
  25. package/src/assets/img/icons.js +33 -33
  26. package/src/assets/img/wordmark-stacked.js +13 -13
  27. package/src/data/menus.js +646 -670
  28. package/src/desktop-subnav.js +45 -45
  29. package/src/dropdown-menu.js +110 -109
  30. package/src/ia-topnav.js +324 -314
  31. package/src/lib/formatUrl.js +1 -1
  32. package/src/lib/keyboard-navigation.js +128 -0
  33. package/src/lib/location-handler.js +5 -5
  34. package/src/lib/query-handler.js +7 -7
  35. package/src/lib/toSentenceCase.js +8 -8
  36. package/src/login-button.js +79 -79
  37. package/src/media-button.js +113 -113
  38. package/src/media-menu.js +154 -133
  39. package/src/media-slider.js +118 -104
  40. package/src/media-subnav.js +112 -112
  41. package/src/more-slider.js +33 -33
  42. package/src/nav-search.js +111 -117
  43. package/src/primary-nav.js +258 -224
  44. package/src/save-page-form.js +59 -59
  45. package/src/search-menu.js +145 -115
  46. package/src/signed-out-dropdown.js +10 -10
  47. package/src/styles/base.js +48 -48
  48. package/src/styles/desktop-subnav.js +37 -37
  49. package/src/styles/dropdown-menu.js +168 -166
  50. package/src/styles/ia-topnav.js +87 -87
  51. package/src/styles/login-button.js +82 -79
  52. package/src/styles/media-button.js +156 -156
  53. package/src/styles/media-menu.js +66 -70
  54. package/src/styles/media-slider.js +81 -81
  55. package/src/styles/media-subnav.js +156 -156
  56. package/src/styles/more-slider.js +15 -15
  57. package/src/styles/nav-search.js +136 -136
  58. package/src/styles/primary-nav.js +311 -300
  59. package/src/styles/save-page-form.js +54 -54
  60. package/src/styles/search-menu.js +105 -99
  61. package/src/styles/signed-out-dropdown.js +31 -31
  62. package/src/styles/user-menu.js +31 -31
  63. package/src/styles/wayback-search.js +48 -48
  64. package/src/styles/wayback-slider.js +30 -30
  65. package/src/tracked-element.js +27 -27
  66. package/src/user-menu.js +56 -42
  67. package/src/wayback-search.js +18 -18
  68. package/src/wayback-slider.js +87 -87
  69. package/test/assets/img/hamburger.test.js +15 -15
  70. package/test/assets/img/user.test.js +15 -15
  71. package/test/data/menus.test.js +19 -19
  72. package/test/dropdown-menu.test.js +25 -25
  73. package/test/ia-icon.test.js +13 -13
  74. package/test/ia-topnav.test.js +273 -273
  75. package/test/login-button.test.js +15 -15
  76. package/test/media-button.test.js +19 -19
  77. package/test/media-menu.test.js +40 -40
  78. package/test/media-slider.test.js +57 -57
  79. package/test/more-slider.test.js +13 -13
  80. package/test/nav-search.test.js +61 -61
  81. package/test/primary-nav.test.js +82 -82
  82. package/test/save-page-form.test.js +35 -35
  83. package/test/search-menu.test.js +49 -49
  84. package/test/user-menu.test.js +33 -33
  85. package/test/wayback-slider.test.js +80 -80
@@ -1,54 +1,54 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- div {
5
- display: grid;
6
- grid-template-columns: 1fr auto;
7
- grid-column-gap: .8rem;
8
- margin: 0;
9
- padding: 0;
10
- border: none;
11
- }
12
-
13
- input[type="text"] {
14
- width: 100%;
15
- height: 3rem;
16
- box-sizing: border-box;
17
- border: 1px solid var(--savePageInputBorder);
18
- border-radius: .5rem;
19
- color: var(--grey13);
20
- font-size: inherit;
21
- }
22
-
23
- input[type="submit"] {
24
- -webkit-appearance: none;
25
- -moz-appearance: none;
26
- appearance: none;
27
- padding: .4rem .8rem;
28
- font: normal 1.3rem var(--themeFontFamily);
29
- text-transform: uppercase;
30
- color: var(--savePageSubmitText);
31
- border: none;
32
- border-radius: 16px;
33
- background: var(--savePageSubmitBg);
34
- cursor: pointer;
35
- }
36
-
37
- .error {
38
- display: none;
39
- margin-top: .5rem;
40
- font-weight: bold;
41
- color: var(--savePageErrorText);
42
- }
43
-
44
- .visible {
45
- display: block;
46
- }
47
-
48
- @media (min-width: 890px) {
49
- h3 {
50
- margin-top: 0;
51
- font: normal 100 1.6rem var(--themeFontFamily);
52
- }
53
- }
54
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ div {
5
+ display: grid;
6
+ grid-template-columns: 1fr auto;
7
+ grid-column-gap: .8rem;
8
+ margin: 0;
9
+ padding: 0;
10
+ border: none;
11
+ }
12
+
13
+ input[type="text"] {
14
+ width: 100%;
15
+ height: 3rem;
16
+ box-sizing: border-box;
17
+ border: 1px solid var(--savePageInputBorder);
18
+ border-radius: .5rem;
19
+ color: var(--grey13);
20
+ font-size: inherit;
21
+ }
22
+
23
+ input[type="submit"] {
24
+ -webkit-appearance: none;
25
+ -moz-appearance: none;
26
+ appearance: none;
27
+ padding: .4rem .8rem;
28
+ font: normal 1.3rem var(--themeFontFamily);
29
+ text-transform: uppercase;
30
+ color: var(--savePageSubmitText);
31
+ border: none;
32
+ border-radius: 16px;
33
+ background: var(--savePageSubmitBg);
34
+ cursor: pointer;
35
+ }
36
+
37
+ .error {
38
+ display: none;
39
+ margin-top: .5rem;
40
+ font-weight: bold;
41
+ color: var(--savePageErrorText);
42
+ }
43
+
44
+ .visible {
45
+ display: block;
46
+ }
47
+
48
+ @media (min-width: 890px) {
49
+ h3 {
50
+ margin-top: 0;
51
+ font: normal 100 1.6rem var(--themeFontFamily);
52
+ }
53
+ }
54
+ `;
@@ -1,99 +1,105 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- .menu-wrapper {
5
- position: relative;
6
- }
7
-
8
- button:focus,
9
- input:focus {
10
- outline-color: var(--linkColor);
11
- outline-width: 0.16rem;
12
- outline-style: auto;
13
- }
14
- .search-menu-inner {
15
- position: absolute;
16
- right: 0;
17
- left: 0;
18
- z-index: 4;
19
- padding: 0 4.5rem;
20
- font-size: 1.6rem;
21
- background-color: var(--searchMenuBg);
22
- }
23
- .tx-slide {
24
- overflow: hidden;
25
- transition-property: top;
26
- transition-duration: 0.2s;
27
- transition-timing-function: ease;
28
- }
29
- .initial,
30
- .closed {
31
- top: var(--topOffset, -1500px);
32
- }
33
- .closed {
34
- transition-duration: 0.2s;
35
- }
36
-
37
- label,
38
- a {
39
- padding: 1rem;
40
- display: block;
41
- }
42
-
43
- .advanced-search {
44
- text-decoration: none;
45
- color: var(--linkColor);
46
- }
47
-
48
- @media (min-width: 890px) {
49
- .search-menu-inner {
50
- overflow: visible;
51
- right: 2rem;
52
- left: auto;
53
- z-index: 5;
54
- padding: 1rem 2rem;
55
- transition: opacity 0.2s ease-in-out;
56
- font-size: 1.4rem;
57
- color: var(--inverseTextColor);
58
- border-radius: 2px;
59
- background: var(--primaryTextColor);
60
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
61
- }
62
-
63
- .search-menu-inner:after {
64
- position: absolute;
65
- right: 7px;
66
- top: -7px;
67
- width: 12px;
68
- height: 7px;
69
- box-sizing: border-box;
70
- color: #fff;
71
- content: '';
72
- border-bottom: 7px solid currentColor;
73
- border-left: 6px solid transparent;
74
- border-right: 6px solid transparent;
75
- }
76
-
77
- .initial,
78
- .closed {
79
- opacity: 0;
80
- transition-duration: 0.2s;
81
- }
82
-
83
- .open {
84
- opacity: 1;
85
- }
86
-
87
- label {
88
- padding: 0;
89
- }
90
-
91
- label + label {
92
- padding-top: 7px;
93
- }
94
-
95
- a {
96
- padding: 1rem 0 0 0;
97
- }
98
- }
99
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ .menu-wrapper {
5
+ position: relative;
6
+ }
7
+
8
+ button:focus,
9
+ input:focus {
10
+ outline-color: var(--linkColor);
11
+ outline-width: 0.16rem;
12
+ outline-style: auto;
13
+ outline-offset: 2px !important;
14
+ }
15
+ .search-menu-inner {
16
+ position: absolute;
17
+ right: 0;
18
+ left: 0;
19
+ z-index: 4;
20
+ padding: 0 4.5rem;
21
+ font-size: 1.6rem;
22
+ background-color: var(--searchMenuBg);
23
+ }
24
+ .tx-slide {
25
+ overflow: hidden;
26
+ transition-property: top;
27
+ transition-duration: 0.2s;
28
+ transition-timing-function: ease;
29
+ }
30
+ .initial,
31
+ .closed {
32
+ top: var(--topOffset, -1500px);
33
+ }
34
+ .closed {
35
+ transition-duration: 0.2s;
36
+ }
37
+
38
+ label,
39
+ a {
40
+ padding: 1rem;
41
+ display: block;
42
+ }
43
+
44
+ .advanced-search {
45
+ text-decoration: none;
46
+ color: var(--linkColor);
47
+ line-height: normal;
48
+ padding: 0.5rem;
49
+ margin-top: 5px;
50
+ }
51
+
52
+ @media (min-width: 890px) {
53
+ .search-menu-inner {
54
+ overflow: visible;
55
+ right: 2rem;
56
+ left: auto;
57
+ z-index: 5;
58
+ padding: 1rem 2rem;
59
+ transition: opacity 0.2s ease-in-out;
60
+ font-size: 1.4rem;
61
+ color: var(--inverseTextColor);
62
+ border-radius: 2px;
63
+ background: var(--primaryTextColor);
64
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
65
+ }
66
+
67
+ .search-menu-inner:after {
68
+ position: absolute;
69
+ right: 7px;
70
+ top: -7px;
71
+ width: 12px;
72
+ height: 7px;
73
+ box-sizing: border-box;
74
+ color: #fff;
75
+ content: '';
76
+ border-bottom: 7px solid currentColor;
77
+ border-left: 6px solid transparent;
78
+ border-right: 6px solid transparent;
79
+ }
80
+
81
+ .initial,
82
+ .closed {
83
+ opacity: 0;
84
+ transition-duration: 0.2s;
85
+ }
86
+
87
+ .open {
88
+ opacity: 1;
89
+ }
90
+
91
+ label {
92
+ padding: 0;
93
+ font-weight: normal;
94
+ margin: 0;
95
+ }
96
+
97
+ label + label {
98
+ padding-top: 7px;
99
+ }
100
+
101
+ a {
102
+ padding: 1rem 0 0 0;
103
+ }
104
+ }
105
+ `;
@@ -1,31 +1,31 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- @media (min-width: 890px) {
5
- .initial,
6
- .closed,
7
- .open {
8
- right: 33.5rem;
9
- }
10
-
11
- .search-hidden.initial,
12
- .search-hidden.closed,
13
- .search-hidden.open {
14
- right: 18.5rem;
15
- }
16
- }
17
-
18
- @media (min-width: 990px) {
19
- .initial,
20
- .closed,
21
- .open {
22
- right: 40rem;
23
- }
24
-
25
- .search-hidden.initial,
26
- .search-hidden.closed,
27
- .search-hidden.open {
28
- right: 26rem;
29
- }
30
- }
31
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ @media (min-width: 890px) {
5
+ .initial,
6
+ .closed,
7
+ .open {
8
+ right: 33.5rem;
9
+ }
10
+
11
+ .search-hidden.initial,
12
+ .search-hidden.closed,
13
+ .search-hidden.open {
14
+ right: 18.5rem;
15
+ }
16
+ }
17
+
18
+ @media (min-width: 990px) {
19
+ .initial,
20
+ .closed,
21
+ .open {
22
+ right: 40rem;
23
+ }
24
+
25
+ .search-hidden.initial,
26
+ .search-hidden.closed,
27
+ .search-hidden.open {
28
+ right: 26rem;
29
+ }
30
+ }
31
+ `;
@@ -1,31 +1,31 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- @media (min-width: 890px) {
5
- .initial,
6
- .closed,
7
- .open {
8
- right: 22.4rem;
9
- }
10
-
11
- .search-hidden.initial,
12
- .search-hidden.closed,
13
- .search-hidden.open {
14
- right: 5.8rem;
15
- }
16
- }
17
-
18
- @media (min-width: 990px) {
19
- .initial,
20
- .closed,
21
- .open {
22
- right: 27.2rem;
23
- }
24
-
25
- .search-hidden.initial,
26
- .search-hidden.closed,
27
- .search-hidden.open {
28
- right: 12rem;
29
- }
30
- }
31
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ @media (min-width: 890px) {
5
+ .initial,
6
+ .closed,
7
+ .open {
8
+ right: 22.4rem;
9
+ }
10
+
11
+ .search-hidden.initial,
12
+ .search-hidden.closed,
13
+ .search-hidden.open {
14
+ right: 5.8rem;
15
+ }
16
+ }
17
+
18
+ @media (min-width: 990px) {
19
+ .initial,
20
+ .closed,
21
+ .open {
22
+ right: 27.2rem;
23
+ }
24
+
25
+ .search-hidden.initial,
26
+ .search-hidden.closed,
27
+ .search-hidden.open {
28
+ right: 12rem;
29
+ }
30
+ }
31
+ `;
@@ -1,48 +1,48 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- form {
5
- }
6
-
7
- p {
8
- margin-bottom: 1rem;
9
- font-size: 1.6rem;
10
- text-align: center;
11
- }
12
-
13
- fieldset {
14
- padding: .5rem;
15
- border-radius: 5px;
16
- box-shadow: none;
17
- }
18
-
19
- input {
20
- padding-left: 3rem;
21
- margin-top: .3rem;
22
- font-size: 1.4rem;
23
- border-color: #bca38e;
24
- background: #fff;
25
- }
26
-
27
- input::placeholder,
28
- input::-webkit-input-placeholder {
29
- color: #8e8e8e;
30
- }
31
-
32
- .search-field svg {
33
- top: 50%;
34
- transform: translateY(-50%);
35
- }
36
-
37
- @media (min-width: 890px) {
38
- fieldset a,
39
- .search-field {
40
- display: block;
41
- width: auto;
42
- }
43
-
44
- fieldset a {
45
- margin: 0 1.5rem;
46
- }
47
- }
48
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ form {
5
+ }
6
+
7
+ p {
8
+ margin-bottom: 1rem;
9
+ font-size: 1.6rem;
10
+ text-align: center;
11
+ }
12
+
13
+ fieldset {
14
+ padding: .5rem;
15
+ border-radius: 5px;
16
+ box-shadow: none;
17
+ }
18
+
19
+ input {
20
+ padding-left: 3rem;
21
+ margin-top: .3rem;
22
+ font-size: 1.4rem;
23
+ border-color: #bca38e;
24
+ background: #fff;
25
+ }
26
+
27
+ input::placeholder,
28
+ input::-webkit-input-placeholder {
29
+ color: #8e8e8e;
30
+ }
31
+
32
+ .search-field svg {
33
+ top: 50%;
34
+ transform: translateY(-50%);
35
+ }
36
+
37
+ @media (min-width: 890px) {
38
+ fieldset a,
39
+ .search-field {
40
+ display: block;
41
+ width: auto;
42
+ }
43
+
44
+ fieldset a {
45
+ margin: 0 1.5rem;
46
+ }
47
+ }
48
+ `;
@@ -1,30 +1,30 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
- import { subnavListCSS } from './base.js';
3
-
4
- export default [subnavListCSS, css`
5
- @media (min-width: 890px) {
6
- :host {
7
- display: block;
8
- grid-column: 1 / 4;
9
- padding: 0 1.5rem;
10
- }
11
-
12
- h4 {
13
- margin-top: 0;
14
- font: normal 100 1.6rem var(--themeFontFamily);
15
- }
16
-
17
- .grid {
18
- display: grid;
19
- grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
20
- /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
21
- grid-column-gap: 2.5rem;
22
- }
23
-
24
- .link-lists {
25
- display: grid;
26
- grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
27
- grid-column-gap: 2.5rem;
28
- }
29
- }
30
- `];
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+ import { subnavListCSS } from './base.js';
3
+
4
+ export default [subnavListCSS, css`
5
+ @media (min-width: 890px) {
6
+ :host {
7
+ display: block;
8
+ grid-column: 1 / 4;
9
+ padding: 0 1.5rem;
10
+ }
11
+
12
+ h4 {
13
+ margin-top: 0;
14
+ font: normal 100 1.6rem var(--themeFontFamily);
15
+ }
16
+
17
+ .grid {
18
+ display: grid;
19
+ grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
20
+ /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
21
+ grid-column-gap: 2.5rem;
22
+ }
23
+
24
+ .link-lists {
25
+ display: grid;
26
+ grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
27
+ grid-column-gap: 2.5rem;
28
+ }
29
+ }
30
+ `];
@@ -1,27 +1,27 @@
1
- import { LitElement } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- class TrackedElement extends LitElement {
4
- trackClick(e) {
5
- const event = e.currentTarget.dataset.eventClickTracking;
6
- this.dispatchEvent(new CustomEvent('trackClick', {
7
- bubbles: true,
8
- composed: true,
9
- detail: {
10
- event
11
- },
12
- }));
13
- }
14
-
15
- trackSubmit(e) {
16
- const event = e.currentTarget.dataset.eventSubmitTracking;
17
- this.dispatchEvent(new CustomEvent('trackSubmit', {
18
- bubbles: true,
19
- composed: true,
20
- detail: {
21
- event
22
- },
23
- }));
24
- }
25
- }
26
-
27
- export default TrackedElement;
1
+ import { LitElement } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ class TrackedElement extends LitElement {
4
+ trackClick(e) {
5
+ const event = e.currentTarget.dataset.eventClickTracking;
6
+ this.dispatchEvent(new CustomEvent('trackClick', {
7
+ bubbles: true,
8
+ composed: true,
9
+ detail: {
10
+ event
11
+ },
12
+ }));
13
+ }
14
+
15
+ trackSubmit(e) {
16
+ const event = e.currentTarget.dataset.eventSubmitTracking;
17
+ this.dispatchEvent(new CustomEvent('trackSubmit', {
18
+ bubbles: true,
19
+ composed: true,
20
+ detail: {
21
+ event
22
+ },
23
+ }));
24
+ }
25
+ }
26
+
27
+ export default TrackedElement;