@internetarchive/ia-topnav 1.3.5 → 1.3.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 (84) 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 -646
  28. package/src/desktop-subnav.js +45 -45
  29. package/src/dropdown-menu.js +109 -109
  30. package/src/ia-topnav.js +314 -314
  31. package/src/lib/formatUrl.js +1 -1
  32. package/src/lib/location-handler.js +5 -5
  33. package/src/lib/query-handler.js +7 -7
  34. package/src/lib/toSentenceCase.js +8 -8
  35. package/src/login-button.js +79 -79
  36. package/src/media-button.js +113 -113
  37. package/src/media-menu.js +133 -133
  38. package/src/media-slider.js +104 -104
  39. package/src/media-subnav.js +112 -112
  40. package/src/more-slider.js +33 -33
  41. package/src/nav-search.js +117 -125
  42. package/src/primary-nav.js +224 -224
  43. package/src/save-page-form.js +59 -59
  44. package/src/search-menu.js +115 -115
  45. package/src/signed-out-dropdown.js +10 -10
  46. package/src/styles/base.js +48 -48
  47. package/src/styles/desktop-subnav.js +37 -37
  48. package/src/styles/dropdown-menu.js +166 -166
  49. package/src/styles/ia-topnav.js +87 -87
  50. package/src/styles/login-button.js +79 -79
  51. package/src/styles/media-button.js +156 -156
  52. package/src/styles/media-menu.js +70 -70
  53. package/src/styles/media-slider.js +81 -81
  54. package/src/styles/media-subnav.js +156 -156
  55. package/src/styles/more-slider.js +15 -15
  56. package/src/styles/nav-search.js +136 -136
  57. package/src/styles/primary-nav.js +300 -300
  58. package/src/styles/save-page-form.js +54 -54
  59. package/src/styles/search-menu.js +99 -99
  60. package/src/styles/signed-out-dropdown.js +31 -31
  61. package/src/styles/user-menu.js +31 -31
  62. package/src/styles/wayback-search.js +48 -48
  63. package/src/styles/wayback-slider.js +30 -30
  64. package/src/tracked-element.js +27 -27
  65. package/src/user-menu.js +42 -42
  66. package/src/wayback-search.js +18 -18
  67. package/src/wayback-slider.js +87 -87
  68. package/test/assets/img/hamburger.test.js +15 -15
  69. package/test/assets/img/user.test.js +15 -15
  70. package/test/data/menus.test.js +19 -19
  71. package/test/dropdown-menu.test.js +25 -25
  72. package/test/ia-icon.test.js +13 -13
  73. package/test/ia-topnav.test.js +273 -273
  74. package/test/login-button.test.js +15 -15
  75. package/test/media-button.test.js +19 -19
  76. package/test/media-menu.test.js +40 -40
  77. package/test/media-slider.test.js +57 -57
  78. package/test/more-slider.test.js +13 -13
  79. package/test/nav-search.test.js +61 -61
  80. package/test/primary-nav.test.js +82 -82
  81. package/test/save-page-form.test.js +35 -35
  82. package/test/search-menu.test.js +49 -49
  83. package/test/user-menu.test.js +33 -33
  84. package/test/wayback-slider.test.js +80 -80
@@ -1,156 +1,156 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- a {
5
- display: inline-block;
6
- text-decoration: none;
7
- }
8
-
9
- .menu-item {
10
- display: inline-block;
11
- width: 100%;
12
- padding: 0;
13
- font-size: 1.6rem;
14
- text-align: left;
15
- background: transparent;
16
- -webkit-box-align: center;
17
- -ms-flex-align: center;
18
- align-items: center;
19
- }
20
-
21
- .menu-item:focus {
22
- outline: none;
23
- }
24
-
25
- .label {
26
- display: inline-block;
27
- padding: 0;
28
- font-weight: 400;
29
- color: var(--primaryTextColor);
30
- text-align: left;
31
- vertical-align: middle;
32
- }
33
-
34
- .menu-item > .icon {
35
- display: inline-flex;
36
- vertical-align: middle;
37
- -webkit-box-align: center;
38
- -ms-flex-align: center;
39
- align-items: center;
40
- -webkit-box-pack: center;
41
- -ms-flex-pack: center;
42
- justify-content: center;
43
- }
44
-
45
- .menu-item > .icon > svg {
46
- height: 4rem;
47
- width: 4rem;
48
- }
49
-
50
- .menu-item.selected .icon {
51
- background-color: var(--activeButtonBg);
52
- border-radius: 1rem 0 0 1rem;
53
- }
54
-
55
- .icon .fill-color {
56
- fill: #999;
57
- }
58
-
59
- .icon.active .fill-color {
60
- fill: #fff;
61
- }
62
-
63
- .donate .fill-color {
64
- fill: #f00;
65
- }
66
-
67
- @media (min-width: 890px) {
68
- .menu-item {
69
- width: auto;
70
- height: 5rem;
71
- color: var(--mediaLabelDesktopColor);
72
- display: inline-flex;
73
- }
74
- .menu-item:hover,
75
- .menu-item:active,
76
- .menu-item:focus {
77
- color: var(--linkHoverColor);
78
- }
79
-
80
- .menu-item:hover .fill-color,
81
- .menu-item:active .fill-color,
82
- .menu-item:focus .fill-color {
83
- fill: var(--linkHoverColor);
84
- }
85
-
86
- .label {
87
- display: none;
88
- }
89
-
90
- .label,
91
- .web:after {
92
- padding-right: 1rem;
93
- font-size: 1.3rem;
94
- text-transform: uppercase;
95
- color: inherit;
96
- }
97
-
98
- .web:after {
99
- display: none;
100
- content: "web";
101
- }
102
- .donate,
103
- .more {
104
- display: none;
105
- }
106
-
107
- .menu-item.selected {
108
- background: var(--activeDesktopMenuIcon);
109
- }
110
-
111
- .menu-item.selected .label,
112
- .menu-item.selected.web:after {
113
- color: var(--linkHoverColor);
114
- }
115
-
116
- .menu-item.selected .icon {
117
- background: transparent;
118
- }
119
-
120
- /* selected state icon colors */
121
- .web.selected .fill-color {
122
- fill: #ffcd27;
123
- }
124
-
125
- .texts.selected .fill-color {
126
- fill: #faab3c;
127
- }
128
-
129
- .video.selected .fill-color {
130
- fill: #f1644b;
131
- }
132
-
133
- .audio.selected .fill-color {
134
- fill: #00adef;
135
- }
136
-
137
- .software.selected .fill-color {
138
- fill: #9ecc4f;
139
- }
140
-
141
- .images.selected .fill-color {
142
- fill: #aa99c9;
143
- }
144
- }
145
-
146
- @media (min-width: 1200px) {
147
- .label,
148
- .web:after {
149
- display: inline;
150
- }
151
-
152
- .web .label {
153
- display: none;
154
- }
155
- }
156
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ a {
5
+ display: inline-block;
6
+ text-decoration: none;
7
+ }
8
+
9
+ .menu-item {
10
+ display: inline-block;
11
+ width: 100%;
12
+ padding: 0;
13
+ font-size: 1.6rem;
14
+ text-align: left;
15
+ background: transparent;
16
+ -webkit-box-align: center;
17
+ -ms-flex-align: center;
18
+ align-items: center;
19
+ }
20
+
21
+ .menu-item:focus {
22
+ outline: none;
23
+ }
24
+
25
+ .label {
26
+ display: inline-block;
27
+ padding: 0;
28
+ font-weight: 400;
29
+ color: var(--primaryTextColor);
30
+ text-align: left;
31
+ vertical-align: middle;
32
+ }
33
+
34
+ .menu-item > .icon {
35
+ display: inline-flex;
36
+ vertical-align: middle;
37
+ -webkit-box-align: center;
38
+ -ms-flex-align: center;
39
+ align-items: center;
40
+ -webkit-box-pack: center;
41
+ -ms-flex-pack: center;
42
+ justify-content: center;
43
+ }
44
+
45
+ .menu-item > .icon > svg {
46
+ height: 4rem;
47
+ width: 4rem;
48
+ }
49
+
50
+ .menu-item.selected .icon {
51
+ background-color: var(--activeButtonBg);
52
+ border-radius: 1rem 0 0 1rem;
53
+ }
54
+
55
+ .icon .fill-color {
56
+ fill: #999;
57
+ }
58
+
59
+ .icon.active .fill-color {
60
+ fill: #fff;
61
+ }
62
+
63
+ .donate .fill-color {
64
+ fill: #f00;
65
+ }
66
+
67
+ @media (min-width: 890px) {
68
+ .menu-item {
69
+ width: auto;
70
+ height: 5rem;
71
+ color: var(--mediaLabelDesktopColor);
72
+ display: inline-flex;
73
+ }
74
+ .menu-item:hover,
75
+ .menu-item:active,
76
+ .menu-item:focus {
77
+ color: var(--linkHoverColor);
78
+ }
79
+
80
+ .menu-item:hover .fill-color,
81
+ .menu-item:active .fill-color,
82
+ .menu-item:focus .fill-color {
83
+ fill: var(--linkHoverColor);
84
+ }
85
+
86
+ .label {
87
+ display: none;
88
+ }
89
+
90
+ .label,
91
+ .web:after {
92
+ padding-right: 1rem;
93
+ font-size: 1.3rem;
94
+ text-transform: uppercase;
95
+ color: inherit;
96
+ }
97
+
98
+ .web:after {
99
+ display: none;
100
+ content: "web";
101
+ }
102
+ .donate,
103
+ .more {
104
+ display: none;
105
+ }
106
+
107
+ .menu-item.selected {
108
+ background: var(--activeDesktopMenuIcon);
109
+ }
110
+
111
+ .menu-item.selected .label,
112
+ .menu-item.selected.web:after {
113
+ color: var(--linkHoverColor);
114
+ }
115
+
116
+ .menu-item.selected .icon {
117
+ background: transparent;
118
+ }
119
+
120
+ /* selected state icon colors */
121
+ .web.selected .fill-color {
122
+ fill: #ffcd27;
123
+ }
124
+
125
+ .texts.selected .fill-color {
126
+ fill: #faab3c;
127
+ }
128
+
129
+ .video.selected .fill-color {
130
+ fill: #f1644b;
131
+ }
132
+
133
+ .audio.selected .fill-color {
134
+ fill: #00adef;
135
+ }
136
+
137
+ .software.selected .fill-color {
138
+ fill: #9ecc4f;
139
+ }
140
+
141
+ .images.selected .fill-color {
142
+ fill: #aa99c9;
143
+ }
144
+ }
145
+
146
+ @media (min-width: 1200px) {
147
+ .label,
148
+ .web:after {
149
+ display: inline;
150
+ }
151
+
152
+ .web .label {
153
+ display: none;
154
+ }
155
+ }
156
+ `;
@@ -1,70 +1,70 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- :host {
5
- outline: none;
6
- }
7
-
8
- .media-menu-inner {
9
- z-index: -1;
10
- top: -40rem;
11
- background-color: var(--mediaMenuBg);
12
- margin: 0;
13
- overflow: hidden;
14
- transition-duration: 0.2s;
15
- transition-property: top;
16
- transition-timing-function: ease;
17
- }
18
-
19
- .menu-group {
20
- position: relative;
21
- line-height: normal;
22
- }
23
-
24
- /* Mobile view styles */
25
- @media (max-width: 889px) {
26
- .media-menu-container {
27
- position: relative;
28
- }
29
-
30
- .media-menu-inner {
31
- position: absolute;
32
- width: 100%;
33
- }
34
-
35
- .open .media-menu-inner {
36
- top: 0;
37
- }
38
-
39
- .overflow-clip {
40
- position: absolute;
41
- z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
42
- top: 0;
43
- left: 0;
44
- height: 0;
45
- width: 100%;
46
- overflow: hidden;
47
- transition-duration: 0.2s;
48
- transition-property: height;
49
- }
50
-
51
- .open .overflow-clip {
52
- height: 40rem;
53
- }
54
- }
55
-
56
- /* Desktop view styles */
57
- @media (min-width: 890px) {
58
- .media-menu-inner {
59
- display: block;
60
- position: static;
61
- width: auto;
62
- height: 5rem;
63
- transition-property: none;
64
- }
65
-
66
- .menu-group {
67
- font-size: 0;
68
- }
69
- }
70
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ :host {
5
+ outline: none;
6
+ }
7
+
8
+ .media-menu-inner {
9
+ z-index: -1;
10
+ top: -40rem;
11
+ background-color: var(--mediaMenuBg);
12
+ margin: 0;
13
+ overflow: hidden;
14
+ transition-duration: 0.2s;
15
+ transition-property: top;
16
+ transition-timing-function: ease;
17
+ }
18
+
19
+ .menu-group {
20
+ position: relative;
21
+ line-height: normal;
22
+ }
23
+
24
+ /* Mobile view styles */
25
+ @media (max-width: 889px) {
26
+ .media-menu-container {
27
+ position: relative;
28
+ }
29
+
30
+ .media-menu-inner {
31
+ position: absolute;
32
+ width: 100%;
33
+ }
34
+
35
+ .open .media-menu-inner {
36
+ top: 0;
37
+ }
38
+
39
+ .overflow-clip {
40
+ position: absolute;
41
+ z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
42
+ top: 0;
43
+ left: 0;
44
+ height: 0;
45
+ width: 100%;
46
+ overflow: hidden;
47
+ transition-duration: 0.2s;
48
+ transition-property: height;
49
+ }
50
+
51
+ .open .overflow-clip {
52
+ height: 40rem;
53
+ }
54
+ }
55
+
56
+ /* Desktop view styles */
57
+ @media (min-width: 890px) {
58
+ .media-menu-inner {
59
+ display: block;
60
+ position: static;
61
+ width: auto;
62
+ height: 5rem;
63
+ transition-property: none;
64
+ }
65
+
66
+ .menu-group {
67
+ font-size: 0;
68
+ }
69
+ }
70
+ `;
@@ -1,81 +1,81 @@
1
- import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
-
3
- export default css`
4
- .media-slider-container {
5
- position: relative;
6
- }
7
-
8
- .overflow-clip {
9
- display: none;
10
- position: absolute;
11
- top: 3rem;
12
- right: 0;
13
- left: 0;
14
- height: 0;
15
- overflow: hidden;
16
- transition: height 0.2s ease;
17
- }
18
-
19
- .information-menu {
20
- position: absolute;
21
- top: 0;
22
- right: 0;
23
- left: 0;
24
- padding: 0;
25
- height: 31.9rem;
26
- overflow-x: hidden;
27
- font-size: 1.4rem;
28
- background: var(--mediaSliderBg);
29
- }
30
-
31
- .open {
32
- display: block;
33
- }
34
-
35
- .hidden {
36
- display: none;
37
- }
38
-
39
- .info-box {
40
- padding: 1rem;
41
- }
42
-
43
- @media (max-width: 889px) {
44
- .overflow-clip.open {
45
- display: block;
46
- height: 35.8rem;
47
- left: 4rem;
48
- top: 0;
49
- }
50
- }
51
-
52
- @media (min-width: 890px) {
53
- .overflow-clip {
54
- display: block;
55
- }
56
-
57
- .information-menu {
58
- left: 0;
59
- z-index: 3;
60
- height: auto;
61
- min-height: 21rem;
62
- background: var(--mediaSliderDesktopBg);
63
- transform: translate(0, -100%);
64
- transition: transform 0.2s ease;
65
- }
66
-
67
- .overflow-clip.open {
68
- height: 22rem;
69
- }
70
-
71
- .information-menu.open {
72
- transform: translate(0, 0);
73
- }
74
-
75
- .info-box {
76
- max-width: 100rem;
77
- padding: 1.5rem 0;
78
- margin: 0 auto;
79
- }
80
- }
81
- `;
1
+ import { css } from 'https://offshoot.prod.archive.org/lit.js';
2
+
3
+ export default css`
4
+ .media-slider-container {
5
+ position: relative;
6
+ }
7
+
8
+ .overflow-clip {
9
+ display: none;
10
+ position: absolute;
11
+ top: 3rem;
12
+ right: 0;
13
+ left: 0;
14
+ height: 0;
15
+ overflow: hidden;
16
+ transition: height 0.2s ease;
17
+ }
18
+
19
+ .information-menu {
20
+ position: absolute;
21
+ top: 0;
22
+ right: 0;
23
+ left: 0;
24
+ padding: 0;
25
+ height: 31.9rem;
26
+ overflow-x: hidden;
27
+ font-size: 1.4rem;
28
+ background: var(--mediaSliderBg);
29
+ }
30
+
31
+ .open {
32
+ display: block;
33
+ }
34
+
35
+ .hidden {
36
+ display: none;
37
+ }
38
+
39
+ .info-box {
40
+ padding: 1rem;
41
+ }
42
+
43
+ @media (max-width: 889px) {
44
+ .overflow-clip.open {
45
+ display: block;
46
+ height: 35.8rem;
47
+ left: 4rem;
48
+ top: 0;
49
+ }
50
+ }
51
+
52
+ @media (min-width: 890px) {
53
+ .overflow-clip {
54
+ display: block;
55
+ }
56
+
57
+ .information-menu {
58
+ left: 0;
59
+ z-index: 3;
60
+ height: auto;
61
+ min-height: 21rem;
62
+ background: var(--mediaSliderDesktopBg);
63
+ transform: translate(0, -100%);
64
+ transition: transform 0.2s ease;
65
+ }
66
+
67
+ .overflow-clip.open {
68
+ height: 22rem;
69
+ }
70
+
71
+ .information-menu.open {
72
+ transform: translate(0, 0);
73
+ }
74
+
75
+ .info-box {
76
+ max-width: 100rem;
77
+ padding: 1.5rem 0;
78
+ margin: 0 auto;
79
+ }
80
+ }
81
+ `;