@gsa-tts/graymatter-ui 0.2.8 → 0.3.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.
Files changed (37) hide show
  1. package/README.md +81 -0
  2. package/assets/images/favicon-dark.ico +0 -0
  3. package/assets/images/favicon-dark.svg +7 -0
  4. package/assets/images/favicon-light.svg +7 -0
  5. package/assets/images/favicon.ico +0 -0
  6. package/assets/images/favicon.svg +5 -6
  7. package/dist/graymatter-ui.js +910 -898
  8. package/dist/graymatter-ui.umd.cjs +36 -32
  9. package/package.json +4 -4
  10. package/src/components/Button.svelte +27 -31
  11. package/src/components/Button.webcomponent.svelte +13 -11
  12. package/src/components/DesktopHeader.svelte +70 -53
  13. package/src/components/DesktopHeader.webcomponent.svelte +13 -9
  14. package/src/components/DesktopSideNav.svelte +200 -158
  15. package/src/components/DesktopSideNav.webcomponent.svelte +7 -5
  16. package/src/components/Head.astro +24 -2
  17. package/src/components/Logo.svelte +48 -41
  18. package/src/components/Logo.webcomponent.svelte +16 -16
  19. package/src/components/MobileBottomNav.svelte +102 -69
  20. package/src/components/MobileBottomNav.webcomponent.svelte +13 -4
  21. package/src/components/MobileSideMenu.svelte +70 -42
  22. package/src/components/MobileSideMenu.webcomponent.svelte +6 -4
  23. package/src/components/MobileTopNav.svelte +24 -19
  24. package/src/components/MobileTopNav.webcomponent.svelte +6 -6
  25. package/src/components/NavigationInitializer.svelte +10 -2
  26. package/src/components/ProfileMenu.svelte +116 -27
  27. package/src/components/UsaSkipNav.svelte +23 -0
  28. package/src/components/icons/ApiIcon.svelte +182 -33
  29. package/src/components/icons/ChatIcon.svelte +10 -10
  30. package/src/components/icons/CloseIcon.svelte +10 -10
  31. package/src/components/icons/ConsoleIcon.svelte +68 -13
  32. package/src/components/icons/DiscoverIcon.svelte +14 -14
  33. package/src/components/icons/HelpIcon.svelte +2 -1
  34. package/src/components/icons/MenuIcon.svelte +47 -7
  35. package/src/components/index.ts +1 -1
  36. package/src/layouts/BaseLayout.astro +1 -1
  37. package/src/components/UsaSkipNav.astro +0 -5
package/src/components/icons/ApiIcon.svelte CHANGED
@@ -2,48 +2,197 @@
2
2
  export let isSelected = false;
3
3
  </script>
4
4
 
5
- <svg
6
- xmlns="http://www.w3.org/2000/svg"
7
- width="24"
8
- height="24"
9
- viewBox="0 0 24 24"
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="24"
8
+ height="24"
9
+ viewBox="0 0 24 24"
10
10
  fill="none"
11
11
  >
12
12
  {#if isSelected}
13
13
  <!-- Selected state - black outline with filled center -->
14
- <rect x="4.41699" y="4.62451" width="15.1664" height="15.1664" rx="1.75" stroke="black" stroke-width="1.5"/>
14
+ <rect
15
+ x="4.41699"
16
+ y="4.62451"
17
+ width="15.1664"
18
+ height="15.1664"
19
+ rx="1.75"
20
+ stroke="black"
21
+ stroke-width="1.5"
22
+ />
15
23
  <g>
16
- <path d="M9.5 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
17
- <path d="M3.66664 14.4998L2 14.4998" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
18
- <path d="M22.0001 14.4998L20.3335 14.4998" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
19
- <path d="M9.5 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
20
- <path d="M12.0005 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
21
- <path d="M3.66664 12.0005L2 12.0005" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
22
- <path d="M22.0001 12.0005L20.3335 12.0005" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
23
- <path d="M12.0005 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
24
- <path d="M14.4995 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
25
- <path d="M3.66664 9.5L2 9.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
26
- <path d="M22.0001 9.5L20.3335 9.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
27
- <path d="M14.4995 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
24
+ <path
25
+ d="M9.5 3.66664V2"
26
+ stroke="black"
27
+ stroke-width="1.5"
28
+ stroke-linecap="round"
29
+ />
30
+ <path
31
+ d="M3.66664 14.4998L2 14.4998"
32
+ stroke="black"
33
+ stroke-width="1.5"
34
+ stroke-linecap="round"
35
+ />
36
+ <path
37
+ d="M22.0001 14.4998L20.3335 14.4998"
38
+ stroke="black"
39
+ stroke-width="1.5"
40
+ stroke-linecap="round"
41
+ />
42
+ <path
43
+ d="M9.5 21.9999V20.3333"
44
+ stroke="black"
45
+ stroke-width="1.5"
46
+ stroke-linecap="round"
47
+ />
48
+ <path
49
+ d="M12.0005 3.66664V2"
50
+ stroke="black"
51
+ stroke-width="1.5"
52
+ stroke-linecap="round"
53
+ />
54
+ <path
55
+ d="M3.66664 12.0005L2 12.0005"
56
+ stroke="black"
57
+ stroke-width="1.5"
58
+ stroke-linecap="round"
59
+ />
60
+ <path
61
+ d="M22.0001 12.0005L20.3335 12.0005"
62
+ stroke="black"
63
+ stroke-width="1.5"
64
+ stroke-linecap="round"
65
+ />
66
+ <path
67
+ d="M12.0005 21.9999V20.3333"
68
+ stroke="black"
69
+ stroke-width="1.5"
70
+ stroke-linecap="round"
71
+ />
72
+ <path
73
+ d="M14.4995 3.66664V2"
74
+ stroke="black"
75
+ stroke-width="1.5"
76
+ stroke-linecap="round"
77
+ />
78
+ <path
79
+ d="M3.66664 9.5L2 9.5"
80
+ stroke="black"
81
+ stroke-width="1.5"
82
+ stroke-linecap="round"
83
+ />
84
+ <path
85
+ d="M22.0001 9.5L20.3335 9.5"
86
+ stroke="black"
87
+ stroke-width="1.5"
88
+ stroke-linecap="round"
89
+ />
90
+ <path
91
+ d="M14.4995 21.9999V20.3333"
92
+ stroke="black"
93
+ stroke-width="1.5"
94
+ stroke-linecap="round"
95
+ />
28
96
  </g>
29
- <path d="M10.5 8.52856H13.7559C14.7224 8.52856 15.5059 9.31207 15.5059 10.2786V13.5344C15.5059 14.5009 14.7224 15.2844 13.7559 15.2844H10.5C9.5335 15.2844 8.75 14.5009 8.75 13.5344V10.2786C8.75 9.31207 9.5335 8.52856 10.5 8.52856Z" fill="black" stroke="black" stroke-width="1.5"/>
97
+ <path
98
+ d="M10.5 8.52856H13.7559C14.7224 8.52856 15.5059 9.31207 15.5059 10.2786V13.5344C15.5059 14.5009 14.7224 15.2844 13.7559 15.2844H10.5C9.5335 15.2844 8.75 14.5009 8.75 13.5344V10.2786C8.75 9.31207 9.5335 8.52856 10.5 8.52856Z"
99
+ fill="black"
100
+ stroke="black"
101
+ stroke-width="1.5"
102
+ />
30
103
  {:else}
31
104
  <!-- Default state - gray outline -->
32
- <rect x="4.41699" y="4.62451" width="15.1664" height="15.1664" rx="1.75" stroke="#585C63" stroke-width="1.5"/>
105
+ <rect
106
+ x="4.41699"
107
+ y="4.62451"
108
+ width="15.1664"
109
+ height="15.1664"
110
+ rx="1.75"
111
+ stroke="#585C63"
112
+ stroke-width="1.5"
113
+ />
33
114
  <g>
34
- <path d="M9.5 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
35
- <path d="M3.66664 14.4995L2 14.4995" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
36
- <path d="M22.0001 14.4995L20.3335 14.4995" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
37
- <path d="M9.5 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
38
- <path d="M12.0005 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
39
- <path d="M3.66664 12.0002L2 12.0002" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
40
- <path d="M22.0001 12.0002L20.3335 12.0002" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
41
- <path d="M12.0005 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
42
- <path d="M14.4995 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
43
- <path d="M3.66664 9.49976L2 9.49976" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
44
- <path d="M22.0001 9.49976L20.3335 9.49976" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
45
- <path d="M14.4995 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
115
+ <path
116
+ d="M9.5 3.66664V2"
117
+ stroke="#585C63"
118
+ stroke-width="1.5"
119
+ stroke-linecap="round"
120
+ />
121
+ <path
122
+ d="M3.66664 14.4995L2 14.4995"
123
+ stroke="#585C63"
124
+ stroke-width="1.5"
125
+ stroke-linecap="round"
126
+ />
127
+ <path
128
+ d="M22.0001 14.4995L20.3335 14.4995"
129
+ stroke="#585C63"
130
+ stroke-width="1.5"
131
+ stroke-linecap="round"
132
+ />
133
+ <path
134
+ d="M9.5 21.9999V20.3333"
135
+ stroke="#585C63"
136
+ stroke-width="1.5"
137
+ stroke-linecap="round"
138
+ />
139
+ <path
140
+ d="M12.0005 3.66664V2"
141
+ stroke="#585C63"
142
+ stroke-width="1.5"
143
+ stroke-linecap="round"
144
+ />
145
+ <path
146
+ d="M3.66664 12.0002L2 12.0002"
147
+ stroke="#585C63"
148
+ stroke-width="1.5"
149
+ stroke-linecap="round"
150
+ />
151
+ <path
152
+ d="M22.0001 12.0002L20.3335 12.0002"
153
+ stroke="#585C63"
154
+ stroke-width="1.5"
155
+ stroke-linecap="round"
156
+ />
157
+ <path
158
+ d="M12.0005 21.9999V20.3333"
159
+ stroke="#585C63"
160
+ stroke-width="1.5"
161
+ stroke-linecap="round"
162
+ />
163
+ <path
164
+ d="M14.4995 3.66664V2"
165
+ stroke="#585C63"
166
+ stroke-width="1.5"
167
+ stroke-linecap="round"
168
+ />
169
+ <path
170
+ d="M3.66664 9.49976L2 9.49976"
171
+ stroke="#585C63"
172
+ stroke-width="1.5"
173
+ stroke-linecap="round"
174
+ />
175
+ <path
176
+ d="M22.0001 9.49976L20.3335 9.49976"
177
+ stroke="#585C63"
178
+ stroke-width="1.5"
179
+ stroke-linecap="round"
180
+ />
181
+ <path
182
+ d="M14.4995 21.9999V20.3333"
183
+ stroke="#585C63"
184
+ stroke-width="1.5"
185
+ stroke-linecap="round"
186
+ />
46
187
  </g>
47
- <rect x="8.52881" y="8.52856" width="6.75594" height="6.75594" rx="1.75" stroke="#585C63" stroke-width="1.5"/>
188
+ <rect
189
+ x="8.52881"
190
+ y="8.52856"
191
+ width="6.75594"
192
+ height="6.75594"
193
+ rx="1.75"
194
+ stroke="#585C63"
195
+ stroke-width="1.5"
196
+ />
48
197
  {/if}
49
198
  </svg>
package/src/components/icons/ChatIcon.svelte CHANGED
@@ -2,24 +2,24 @@
2
2
  export let isSelected = false;
3
3
  </script>
4
4
 
5
- <svg
6
- xmlns="http://www.w3.org/2000/svg"
7
- width="24"
8
- height="24"
9
- viewBox="0 0 24 24"
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="24"
8
+ height="24"
9
+ viewBox="0 0 24 24"
10
10
  fill="none"
11
11
  >
12
12
  {#if isSelected}
13
13
  <!-- Selected state - black filled -->
14
- <path
15
- fill-rule="evenodd"
16
- clip-rule="evenodd"
17
- d="M17.0508 3C19.6009 3.00039 21.6688 5.06802 21.6689 7.61816V13.2832C21.6688 15.8333 19.6009 17.901 17.0508 17.9014H13.2686L9.23926 21.7168C8.58852 22.3323 7.5166 21.8705 7.5166 20.9746V17.8984C5.01299 17.8445 3.00011 15.7997 3 13.2832V7.61816C3.00012 5.06785 5.06785 3.00012 7.61816 3H17.0508Z"
14
+ <path
15
+ fill-rule="evenodd"
16
+ clip-rule="evenodd"
17
+ d="M17.0508 3C19.6009 3.00039 21.6688 5.06802 21.6689 7.61816V13.2832C21.6688 15.8333 19.6009 17.901 17.0508 17.9014H13.2686L9.23926 21.7168C8.58852 22.3323 7.5166 21.8705 7.5166 20.9746V17.8984C5.01299 17.8445 3.00011 15.7997 3 13.2832V7.61816C3.00012 5.06785 5.06785 3.00012 7.61816 3H17.0508Z"
18
18
  fill="black"
19
19
  />
20
20
  {:else}
21
21
  <!-- Default state - gray -->
22
- <path
22
+ <path
23
23
  d="M17.0508 3C19.6009 3.00039 21.6688 5.06802 21.6689 7.61816V13.2832C21.6688 15.8333 19.6009 17.901 17.0508 17.9014H13.2686L9.23926 21.7168C8.58852 22.3323 7.5166 21.8705 7.5166 20.9746V17.8984C5.01299 17.8445 3.00011 15.7997 3 13.2832V7.61816C3.00012 5.06785 5.06785 3.00012 7.61816 3H17.0508ZM7.61816 4.45898C5.87327 4.4591 4.4591 5.87327 4.45898 7.61816V13.2832C4.4591 15.0281 5.87327 16.4432 7.61816 16.4434L8.24609 16.4424C8.64868 16.4424 8.97539 16.7693 8.97559 17.1719V19.958L12.4775 16.6426C12.6186 16.5091 12.7994 16.4443 12.9795 16.4443V16.4434H17.0508C18.7954 16.443 20.2099 15.0279 20.21 13.2832V7.61816C20.2098 5.87344 18.7954 4.45938 17.0508 4.45898H7.61816Z"
24
24
  fill="#585C63"
25
25
  />
package/src/components/icons/CloseIcon.svelte CHANGED
@@ -1,18 +1,18 @@
1
1
  <script lang="ts">
2
2
  </script>
3
3
 
4
- <svg
5
- xmlns="http://www.w3.org/2000/svg"
6
- width="24"
7
- height="24"
8
- viewBox="0 0 24 24"
4
+ <svg
5
+ xmlns="http://www.w3.org/2000/svg"
6
+ width="24"
7
+ height="24"
8
+ viewBox="0 0 24 24"
9
9
  fill="none"
10
10
  >
11
- <path
12
- d="M6 18L18 6M6 6L18 18"
13
- stroke="#585C63"
14
- stroke-width="1.5"
15
- stroke-linecap="round"
11
+ <path
12
+ d="M6 18L18 6M6 6L18 18"
13
+ stroke="#585C63"
14
+ stroke-width="1.5"
15
+ stroke-linecap="round"
16
16
  stroke-linejoin="round"
17
17
  />
18
18
  </svg>
package/src/components/icons/ConsoleIcon.svelte CHANGED
@@ -2,24 +2,79 @@
2
2
  export let isSelected = false;
3
3
  </script>
4
4
 
5
- <svg
6
- xmlns="http://www.w3.org/2000/svg"
7
- width="24"
8
- height="24"
9
- viewBox="0 0 24 24"
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="24"
8
+ height="24"
9
+ viewBox="0 0 24 24"
10
10
  fill="none"
11
11
  >
12
12
  {#if isSelected}
13
13
  <!-- Selected state - black filled bars -->
14
- <rect x="2.75" y="6.02856" width="3.7459" height="12.9262" fill="black" stroke="black" stroke-width="1.5"/>
15
- <rect x="9.96338" y="9.96313" width="3.7459" height="8.9918" fill="black" stroke="black" stroke-width="1.5"/>
16
- <rect x="17.1763" y="2.75" width="3.7459" height="16.2049" fill="black" stroke="black" stroke-width="1.5"/>
17
- <path d="M2.32764 22H21.344" stroke="black" stroke-width="1.5" stroke-linecap="square"/>
14
+ <rect
15
+ x="2.75"
16
+ y="6.02856"
17
+ width="3.7459"
18
+ height="12.9262"
19
+ fill="black"
20
+ stroke="black"
21
+ stroke-width="1.5"
22
+ />
23
+ <rect
24
+ x="9.96338"
25
+ y="9.96313"
26
+ width="3.7459"
27
+ height="8.9918"
28
+ fill="black"
29
+ stroke="black"
30
+ stroke-width="1.5"
31
+ />
32
+ <rect
33
+ x="17.1763"
34
+ y="2.75"
35
+ width="3.7459"
36
+ height="16.2049"
37
+ fill="black"
38
+ stroke="black"
39
+ stroke-width="1.5"
40
+ />
41
+ <path
42
+ d="M2.32764 22H21.344"
43
+ stroke="black"
44
+ stroke-width="1.5"
45
+ stroke-linecap="square"
46
+ />
18
47
  {:else}
19
48
  <!-- Default state - gray -->
20
- <rect x="2.75" y="6.02856" width="3.7459" height="12.9262" stroke="#585C63" stroke-width="1.5"/>
21
- <rect x="9.96338" y="9.96313" width="3.7459" height="8.9918" stroke="#585C63" stroke-width="1.5"/>
22
- <rect x="17.1763" y="2.75" width="3.7459" height="16.2049" stroke="#585C63" stroke-width="1.5"/>
23
- <path d="M2.32764 22H21.344" stroke="#585C63" stroke-width="1.5" stroke-linecap="square"/>
49
+ <rect
50
+ x="2.75"
51
+ y="6.02856"
52
+ width="3.7459"
53
+ height="12.9262"
54
+ stroke="#585C63"
55
+ stroke-width="1.5"
56
+ />
57
+ <rect
58
+ x="9.96338"
59
+ y="9.96313"
60
+ width="3.7459"
61
+ height="8.9918"
62
+ stroke="#585C63"
63
+ stroke-width="1.5"
64
+ />
65
+ <rect
66
+ x="17.1763"
67
+ y="2.75"
68
+ width="3.7459"
69
+ height="16.2049"
70
+ stroke="#585C63"
71
+ stroke-width="1.5"
72
+ />
73
+ <path
74
+ d="M2.32764 22H21.344"
75
+ stroke="#585C63"
76
+ stroke-width="1.5"
77
+ stroke-linecap="square"
78
+ />
24
79
  {/if}
25
80
  </svg>
package/src/components/icons/DiscoverIcon.svelte CHANGED
@@ -2,28 +2,28 @@
2
2
  export let isSelected = false;
3
3
  </script>
4
4
 
5
- <svg
6
- xmlns="http://www.w3.org/2000/svg"
7
- width="24"
8
- height="24"
9
- viewBox="0 0 24 24"
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="24"
8
+ height="24"
9
+ viewBox="0 0 24 24"
10
10
  fill="none"
11
11
  >
12
12
  {#if isSelected}
13
13
  <!-- Selected state - black filled -->
14
- <path
15
- fill-rule="evenodd"
16
- clip-rule="evenodd"
17
- d="M10.7883 3.2108C11.2367 2.13286 12.7637 2.13286 13.212 3.2108L15.294 8.21652L20.6981 8.64976C21.8619 8.74306 22.3337 10.1953 21.4471 10.9549L17.3298 14.4818L18.5877 19.7553C18.8585 20.8909 17.6232 21.7884 16.6268 21.1799L12.0002 18.354L7.37353 21.1799C6.37721 21.7884 5.14182 20.8909 5.4127 19.7553L6.67062 14.4818L2.55328 10.9549C1.66664 10.1953 2.13851 8.74306 3.30224 8.64976L8.70633 8.21652L10.7883 3.2108Z"
14
+ <path
15
+ fill-rule="evenodd"
16
+ clip-rule="evenodd"
17
+ d="M10.7883 3.2108C11.2367 2.13286 12.7637 2.13286 13.212 3.2108L15.294 8.21652L20.6981 8.64976C21.8619 8.74306 22.3337 10.1953 21.4471 10.9549L17.3298 14.4818L18.5877 19.7553C18.8585 20.8909 17.6232 21.7884 16.6268 21.1799L12.0002 18.354L7.37353 21.1799C6.37721 21.7884 5.14182 20.8909 5.4127 19.7553L6.67062 14.4818L2.55328 10.9549C1.66664 10.1953 2.13851 8.74306 3.30224 8.64976L8.70633 8.21652L10.7883 3.2108Z"
18
18
  fill="black"
19
19
  />
20
20
  {:else}
21
21
  <!-- Default state - gray -->
22
- <path
23
- d="M11.4807 3.49883C11.6729 3.03685 12.3273 3.03685 12.5195 3.49883L14.6454 8.61028C14.7264 8.80504 14.9096 8.93811 15.1199 8.95497L20.6381 9.39736C21.1369 9.43735 21.3391 10.0598 20.9591 10.3853L16.7548 13.9867C16.5946 14.1239 16.5246 14.3392 16.5736 14.5444L17.858 19.9293C17.9741 20.416 17.4447 20.8007 17.0177 20.5398L12.2933 17.6542C12.1133 17.5443 11.8869 17.5443 11.7069 17.6542L6.98251 20.5398C6.55551 20.8007 6.02606 20.416 6.14215 19.9293L7.42664 14.5444C7.47558 14.3392 7.40562 14.1239 7.24543 13.9867L3.04111 10.3853C2.66112 10.0598 2.86335 9.43735 3.36209 9.39736L8.88034 8.95497C9.0906 8.93811 9.27375 8.80504 9.35476 8.61028L11.4807 3.49883Z"
24
- stroke="#585C63"
25
- stroke-width="1.5"
26
- stroke-linecap="round"
22
+ <path
23
+ d="M11.4807 3.49883C11.6729 3.03685 12.3273 3.03685 12.5195 3.49883L14.6454 8.61028C14.7264 8.80504 14.9096 8.93811 15.1199 8.95497L20.6381 9.39736C21.1369 9.43735 21.3391 10.0598 20.9591 10.3853L16.7548 13.9867C16.5946 14.1239 16.5246 14.3392 16.5736 14.5444L17.858 19.9293C17.9741 20.416 17.4447 20.8007 17.0177 20.5398L12.2933 17.6542C12.1133 17.5443 11.8869 17.5443 11.7069 17.6542L6.98251 20.5398C6.55551 20.8007 6.02606 20.416 6.14215 19.9293L7.42664 14.5444C7.47558 14.3392 7.40562 14.1239 7.24543 13.9867L3.04111 10.3853C2.66112 10.0598 2.86335 9.43735 3.36209 9.39736L8.88034 8.95497C9.0906 8.93811 9.27375 8.80504 9.35476 8.61028L11.4807 3.49883Z"
24
+ stroke="#585C63"
25
+ stroke-width="1.5"
26
+ stroke-linecap="round"
27
27
  stroke-linejoin="round"
28
28
  />
29
29
  {/if}
package/src/components/icons/HelpIcon.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script lang="ts">
2
2
  export let isHovered: boolean = false;
3
3
  </script>
4
+
4
5
  <svg
5
6
  xmlns="http://www.w3.org/2000/svg"
6
7
  width="24"
@@ -15,4 +16,4 @@
15
16
  stroke-linecap="round"
16
17
  stroke-linejoin="round"
17
18
  />
18
- </svg>
19
+ </svg>
package/src/components/icons/MenuIcon.svelte CHANGED
@@ -14,21 +14,61 @@
14
14
  >
15
15
  {#if isDisabled}
16
16
  <!-- Disabled state -->
17
- <path d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z" stroke="#C7CDD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
18
- <path d="M{isOpen ? '8.18018' : '9.18018'} {isOpen ? '5.45068' : '3.27222'}V{isOpen ? '18.5208' : '20.9203'}" stroke="#C7CDD6" stroke-width="1.5" />
17
+ <path
18
+ d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z"
19
+ stroke="#C7CDD6"
20
+ stroke-width="1.5"
21
+ stroke-linecap="round"
22
+ stroke-linejoin="round"
23
+ />
24
+ <path
25
+ d="M{isOpen ? '8.18018' : '9.18018'} {isOpen
26
+ ? '5.45068'
27
+ : '3.27222'}V{isOpen ? '18.5208' : '20.9203'}"
28
+ stroke="#C7CDD6"
29
+ stroke-width="1.5"
30
+ />
19
31
  {:else if isHovered}
20
32
  {#if isOpen}
21
33
  <!-- Hovered, nav open: arrow left -->
22
- <path d="M12.25 18L6 12M6 12L12.25 6M6 12L21 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
23
- <path d="M3 3V21" stroke="black" stroke-width="1.5" stroke-linecap="round" />
34
+ <path
35
+ d="M12.25 18L6 12M6 12L12.25 6M6 12L21 12"
36
+ stroke="black"
37
+ stroke-width="1.5"
38
+ stroke-linecap="round"
39
+ stroke-linejoin="round"
40
+ />
41
+ <path
42
+ d="M3 3V21"
43
+ stroke="black"
44
+ stroke-width="1.5"
45
+ stroke-linecap="round"
46
+ />
24
47
  {:else}
25
48
  <!-- Hovered, nav collapsed: arrow right -->
26
- <path d="M11.75 18.25L18 12M18 12L11.75 5.75M18 12L3 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
27
- <path d="M21 3V21" stroke="black" stroke-width="1.5" stroke-linecap="round" />
49
+ <path
50
+ d="M11.75 18.25L18 12M18 12L11.75 5.75M18 12L3 12"
51
+ stroke="black"
52
+ stroke-width="1.5"
53
+ stroke-linecap="round"
54
+ stroke-linejoin="round"
55
+ />
56
+ <path
57
+ d="M21 3V21"
58
+ stroke="black"
59
+ stroke-width="1.5"
60
+ stroke-linecap="round"
61
+ />
28
62
  {/if}
29
63
  {:else}
30
64
  <!-- Default state -->
31
- <path d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z" stroke="#585C63" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
65
+ <path
66
+ d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z"
67
+ stroke="#585C63"
68
+ stroke-width="1.5"
69
+ stroke-linecap="round"
70
+ stroke-linejoin="round"
71
+ />
32
72
  {#if isOpen}
33
73
  <path d="M8.18018 5.45068V18.5208" stroke="#585C63" stroke-width="1.5" />
34
74
  {:else}
package/src/components/index.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  // Astro Components
2
2
  export { default as Head } from './Head.astro';
3
3
  export { default as UsaBanner } from './UsaBanner.astro';
4
- export { default as UsaSkipNav } from './UsaSkipNav.astro';
5
4
 
6
5
  // Svelte Components
7
6
  export { default as Logo } from './Logo.svelte';
@@ -12,6 +11,7 @@ export { default as MobileTopNav } from './MobileTopNav.svelte';
12
11
  export { default as MobileBottomNav } from './MobileBottomNav.svelte';
13
12
  export { default as MobileSideMenu } from './MobileSideMenu.svelte';
14
13
  export { default as NavigationInitializer } from './NavigationInitializer.svelte';
14
+ export { default as UsaSkipNav } from './UsaSkipNav.svelte';
15
15
 
16
16
  // Icon Components
17
17
  export * from './icons/index.js';
package/src/layouts/BaseLayout.astro CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  import '../styles/base/global.css';
3
3
  import Head from '../components/Head.astro';
4
- import UsaSkipNav from '../components/UsaSkipNav.astro';
4
+ import UsaSkipNav from '../components/UsaSkipNav.svelte';
5
5
  import { getPageTitle } from '../helpers/meta';
6
6
  import GoogleTagManager from '../components/GoogleTagManager.astro';
7
7
 
package/src/components/UsaSkipNav.astro DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- const { mainContentId = '#main-content' } = Astro.props;
3
- ---
4
-
5
- <a href={mainContentId} class="usa-skipnav">Skip to main content</a>