Skip to content

Commit 7f300ea

Browse files
committed
pushing up initial slim work
1 parent 4e4fef7 commit 7f300ea

File tree

6 files changed

+280
-7
lines changed

6 files changed

+280
-7
lines changed

app/scripts/components/common/layout-root/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
9898
/>
9999
)}
100100
</PageBody>
101-
<PageFooter />
101+
<PageFooter hideFooter />
102102
</Page>
103103
);
104104
}
Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,47 @@
11
import React from 'react';
2-
import { USWDSFooter } from '$components/common/uswds';
3-
export default function PageFooter() {
2+
import NasaLogoColor from '../../nasa-logo-color';
3+
4+
import {
5+
USWDSFooter,
6+
USWDSLink,
7+
USWDSFooterNav,
8+
USWDSLogo
9+
} from '$components/common/uswds';
10+
export default function PageFooter(hideFooter) {
411
return (
512
<>
6-
<USWDSFooter />
13+
{/* //commenting out hidefooter functionality for inflight work{!hideFooter && ( */}
14+
<USWDSFooter
15+
size='slim'
16+
// returnToTop={returnToTop}
17+
primary={
18+
<div className='usa-footer__primary-container grid-row bg-base-lightest'>
19+
<div className='mobile-lg:grid-col-8'>
20+
<USWDSFooterNav
21+
size='slim'
22+
links={Array(4).fill(
23+
<USWDSLink
24+
variant='nav'
25+
href='#'
26+
className='usa-footer__primary-link'
27+
>
28+
Primary Link
29+
</USWDSLink>
30+
)}
31+
/>
32+
</div>
33+
</div>
34+
}
35+
secondary={
36+
<USWDSLogo
37+
size='slim'
38+
//Nasa logo not showing.
39+
image={<NasaLogoColor />}
40+
heading={<p className='usa-footer__logo-heading'>Name of Agency</p>}
41+
/>
42+
}
43+
/>
44+
{/* )} */}
745
</>
846
);
947
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use '$styles/veda-ui-theme-vars.scss' as themeVars;
2+
.usa-footer__secondary-section {
3+
color: themeVars.$veda-uswds-color-base-dark;
4+
}
5+
.usa-footer__primary-section {
6+
color: themeVars.$veda-uswds-color-base-lightest;
7+
}

app/scripts/components/common/uswds/footer/index.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import React from 'react';
2-
import { Footer, FooterNav, SocialLink, Logo, Address } from '@trussworks/react-uswds';
2+
import {
3+
Footer,
4+
FooterNav,
5+
SocialLink,
6+
Logo,
7+
Address,
8+
FooterExtendedNavList
9+
} from '@trussworks/react-uswds';
310

411
export function USWDSFooter(props) {
512
return <Footer {...props} />;
@@ -15,4 +22,7 @@ export function USWDSLogo(props) {
1522
}
1623
export function USWDSAddress(props) {
1724
return <Address {...props} />;
18-
}
25+
}
26+
export function USWDSFooterExtendedNavList(props) {
27+
return <FooterExtendedNavList {...props} />;
28+
}

app/scripts/components/common/uswds/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export {
77
USWDSSocialLink,
88
USWDSLogo,
99
USWDSAddress,
10-
USWDSFooterNav
10+
USWDSFooterNav,
11+
USWDSFooterExtendedNavList
1112
} from './footer';
Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React from 'react';
2+
3+
export default function NasaLogoColor() {
4+
return (
5+
<svg
6+
width={312}
7+
height={258}
8+
viewBox='0 0 312 258'
9+
style={{
10+
fillRule: 'evenodd',
11+
clipRule: 'evenodd',
12+
strokeLinejoin: 'round',
13+
strokeMiterlimit: 2
14+
}}
15+
>
16+
<title>NASA</title>
17+
<g id='nasa-logo-pos'>
18+
<path
19+
d='M273.427,387C273.427,457.761 215.188,516 144.427,516C73.665,516 15.427,457.761 15.427,387C15.427,316.239 73.665,258 144.427,258C215.188,258 273.427,316.239 273.427,387Z'
20+
style={{ fill: 'rgb(0,102,179)', fillRule: 'nonzero' }}
21+
/>
22+
<path
23+
d='M146.205,269.721C146.205,270.297 145.731,270.771 145.154,270.771C144.578,270.771 144.104,270.297 144.104,269.721C144.104,269.145 144.578,268.67 145.154,268.67C145.731,268.67 146.205,269.145 146.205,269.721Z'
24+
style={{ fill: 'white', fillRule: 'nonzero' }}
25+
/>
26+
<path
27+
d='M153.48,285.643C153.48,286.353 152.896,286.936 152.187,286.936C151.477,286.936 150.893,286.353 150.893,285.643C150.893,284.934 151.477,284.35 152.187,284.35C152.896,284.35 153.48,284.934 153.48,285.643Z'
28+
style={{ fill: 'white', fillRule: 'nonzero' }}
29+
/>
30+
<path
31+
d='M172.393,311.67C172.393,312.379 171.81,312.963 171.1,312.963C170.39,312.963 169.807,312.379 169.807,311.67C169.807,310.959 170.39,310.376 171.1,310.376C171.81,310.376 172.393,310.959 172.393,311.67Z'
32+
style={{ fill: 'white', fillRule: 'nonzero' }}
33+
/>
34+
<path
35+
d='M142.002,294.615C142.002,295.191 141.528,295.666 140.951,295.666C140.375,295.666 139.901,295.191 139.901,294.615C139.901,294.039 140.375,293.564 140.951,293.564C141.528,293.564 142.002,294.039 142.002,294.615Z'
36+
style={{ fill: 'white', fillRule: 'nonzero' }}
37+
/>
38+
<path
39+
d='M153.318,300.596C153.318,301.172 152.843,301.647 152.267,301.647C151.691,301.647 151.217,301.172 151.217,300.596C151.217,300.02 151.691,299.545 152.267,299.545C152.843,299.545 153.318,300.02 153.318,300.596Z'
40+
style={{ fill: 'white', fillRule: 'nonzero' }}
41+
/>
42+
<path
43+
d='M138.607,283.865C138.607,284.574 138.023,285.158 137.314,285.158C136.604,285.158 136.021,284.574 136.021,283.865C136.021,283.156 136.604,282.572 137.314,282.572C138.023,282.572 138.607,283.156 138.607,283.865Z'
44+
style={{ fill: 'white', fillRule: 'nonzero' }}
45+
/>
46+
<path
47+
d='M121.472,294.292C121.472,294.869 120.998,295.343 120.422,295.343C119.845,295.343 119.371,294.869 119.371,294.292C119.371,293.716 119.845,293.241 120.422,293.241C120.998,293.241 121.472,293.716 121.472,294.292Z'
48+
style={{ fill: 'white', fillRule: 'nonzero' }}
49+
/>
50+
<path
51+
d='M124.544,296.394C124.544,296.97 124.069,297.444 123.493,297.444C122.917,297.444 122.442,296.97 122.442,296.394C122.442,295.817 122.917,295.343 123.493,295.343C124.069,295.343 124.544,295.817 124.544,296.394Z'
52+
style={{ fill: 'white', fillRule: 'nonzero' }}
53+
/>
54+
<path
55+
d='M127.615,298.495C127.615,299.071 127.14,299.545 126.564,299.545C125.987,299.545 125.513,299.071 125.513,298.495C125.513,297.918 125.987,297.444 126.564,297.444C127.14,297.444 127.615,297.918 127.615,298.495Z'
56+
style={{ fill: 'white', fillRule: 'nonzero' }}
57+
/>
58+
<path
59+
d='M122.927,302.536C122.927,303.112 122.453,303.587 121.877,303.587C121.3,303.587 120.826,303.112 120.826,302.536C120.826,301.959 121.3,301.485 121.877,301.485C122.453,301.485 122.927,301.959 122.927,302.536Z'
60+
style={{ fill: 'white', fillRule: 'nonzero' }}
61+
/>
62+
<path
63+
d='M98.517,319.671C98.517,320.248 98.043,320.722 97.466,320.722C96.89,320.722 96.415,320.248 96.415,319.671C96.415,319.095 96.89,318.621 97.466,318.621C98.043,318.621 98.517,319.095 98.517,319.671Z'
64+
style={{ fill: 'white', fillRule: 'nonzero' }}
65+
/>
66+
<path
67+
d='M103.044,325.168C103.044,325.744 102.569,326.218 101.993,326.218C101.417,326.218 100.942,325.744 100.942,325.168C100.942,324.591 101.417,324.117 101.993,324.117C102.569,324.117 103.044,324.591 103.044,325.168Z'
68+
style={{ fill: 'white', fillRule: 'nonzero' }}
69+
/>
70+
<path
71+
d='M99.487,413.915C99.487,414.491 99.012,414.966 98.436,414.966C97.86,414.966 97.385,414.491 97.385,413.915C97.385,413.339 97.86,412.864 98.436,412.864C99.012,412.864 99.487,413.339 99.487,413.915Z'
72+
style={{ fill: 'white', fillRule: 'nonzero' }}
73+
/>
74+
<path
75+
d='M100.134,438.404C100.134,439.115 99.549,439.699 98.84,439.699C98.131,439.699 97.547,439.115 97.547,438.404C97.547,437.696 98.131,437.113 98.84,437.113C99.549,437.113 100.134,437.696 100.134,438.404Z'
76+
style={{ fill: 'white', fillRule: 'nonzero' }}
77+
/>
78+
<path
79+
d='M86.231,450.935C86.231,451.511 85.756,451.986 85.18,451.986C84.604,451.986 84.13,451.511 84.13,450.935C84.13,450.357 84.604,449.884 85.18,449.884C85.756,449.884 86.231,450.357 86.231,450.935Z'
80+
style={{ fill: 'white', fillRule: 'nonzero' }}
81+
/>
82+
<path
83+
d='M69.58,456.027C69.58,456.736 68.996,457.32 68.287,457.32C67.578,457.32 66.994,456.736 66.994,456.027C66.994,455.316 67.578,454.732 68.287,454.732C68.996,454.732 69.58,455.316 69.58,456.027Z'
84+
style={{ fill: 'white', fillRule: 'nonzero' }}
85+
/>
86+
<path
87+
d='M66.186,444.71C66.186,445.419 65.602,446.003 64.893,446.003C64.183,446.003 63.599,445.419 63.599,444.71C63.599,444.001 64.183,443.417 64.893,443.417C65.602,443.417 66.186,444.001 66.186,444.71Z'
88+
style={{ fill: 'white', fillRule: 'nonzero' }}
89+
/>
90+
<path
91+
d='M64.246,451.904C64.246,452.48 63.772,452.954 63.195,452.954C62.619,452.954 62.145,452.48 62.145,451.904C62.145,451.327 62.619,450.853 63.195,450.853C63.772,450.853 64.246,451.327 64.246,451.904Z'
92+
style={{ fill: 'white', fillRule: 'nonzero' }}
93+
/>
94+
<path
95+
d='M51.798,445.923C51.798,446.499 51.324,446.974 50.747,446.974C50.171,446.974 49.697,446.499 49.697,445.923C49.697,445.347 50.171,444.872 50.747,444.872C51.324,444.872 51.798,445.347 51.798,445.923Z'
96+
style={{ fill: 'white', fillRule: 'nonzero' }}
97+
/>
98+
<path
99+
d='M95.283,466.129C95.283,466.705 94.809,467.18 94.233,467.18C93.656,467.18 93.182,466.705 93.182,466.129C93.182,465.553 93.656,465.078 94.233,465.078C94.809,465.078 95.283,465.553 95.283,466.129Z'
100+
style={{ fill: 'white', fillRule: 'nonzero' }}
101+
/>
102+
<path
103+
d='M108.378,456.511C108.378,457.22 107.794,457.804 107.085,457.804C106.376,457.804 105.792,457.22 105.792,456.511C105.792,455.802 106.376,455.218 107.085,455.218C107.794,455.218 108.378,455.802 108.378,456.511Z'
104+
style={{ fill: 'white', fillRule: 'nonzero' }}
105+
/>
106+
<path
107+
d='M109.833,468.877C109.833,469.453 109.359,469.928 108.782,469.928C108.206,469.928 107.731,469.453 107.731,468.877C107.731,468.301 108.206,467.828 108.782,467.828C109.359,467.828 109.833,468.301 109.833,468.877Z'
108+
style={{ fill: 'white', fillRule: 'nonzero' }}
109+
/>
110+
<path
111+
d='M163.664,457.077C163.664,457.654 163.19,458.128 162.613,458.128C162.037,458.128 161.563,457.654 161.563,457.077C161.563,456.499 162.037,456.027 162.613,456.027C163.19,456.027 163.664,456.499 163.664,457.077Z'
112+
style={{ fill: 'white', fillRule: 'nonzero' }}
113+
/>
114+
<path
115+
d='M138.607,465.967C138.607,466.545 138.132,467.018 137.556,467.018C136.98,467.018 136.506,466.545 136.506,465.967C136.506,465.391 136.98,464.918 137.556,464.918C138.132,464.918 138.607,465.391 138.607,465.967Z'
116+
style={{ fill: 'white', fillRule: 'nonzero' }}
117+
/>
118+
<path
119+
d='M206.017,478.739C206.017,479.315 205.543,479.789 204.966,479.789C204.39,479.789 203.915,479.315 203.915,478.739C203.915,478.162 204.39,477.688 204.966,477.688C205.543,477.688 206.017,478.162 206.017,478.739Z'
120+
style={{ fill: 'white', fillRule: 'nonzero' }}
121+
/>
122+
<path
123+
d='M211.513,429.029C211.513,429.738 210.929,430.322 210.22,430.322C209.511,430.322 208.927,429.738 208.927,429.029C208.927,428.321 209.511,427.737 210.22,427.737C210.929,427.737 211.513,428.321 211.513,429.029Z'
124+
style={{ fill: 'white', fillRule: 'nonzero' }}
125+
/>
126+
<path
127+
d='M201.167,436.061C201.167,436.639 200.693,437.113 200.116,437.113C199.54,437.113 199.066,436.639 199.066,436.061C199.066,435.487 199.54,435.012 200.116,435.012C200.693,435.012 201.167,435.487 201.167,436.061Z'
128+
style={{ fill: 'white', fillRule: 'nonzero' }}
129+
/>
130+
<path
131+
d='M211.352,438.082C211.352,438.791 210.768,439.375 210.059,439.375C209.35,439.375 208.766,438.791 208.766,438.082C208.766,437.373 209.35,436.789 210.059,436.789C210.768,436.789 211.352,437.373 211.352,438.082Z'
132+
style={{ fill: 'white', fillRule: 'nonzero' }}
133+
/>
134+
<path
135+
d='M201.167,450.611C201.167,451.187 200.693,451.661 200.116,451.661C199.54,451.661 199.066,451.187 199.066,450.611C199.066,450.034 199.54,449.56 200.116,449.56C200.693,449.56 201.167,450.034 201.167,450.611Z'
136+
style={{ fill: 'white', fillRule: 'nonzero' }}
137+
/>
138+
<path
139+
d='M227.517,421.998C227.517,422.574 227.043,423.049 226.467,423.049C225.889,423.049 225.414,422.574 225.414,421.998C225.414,421.422 225.889,420.947 226.467,420.947C227.043,420.947 227.517,421.422 227.517,421.998Z'
140+
style={{ fill: 'white', fillRule: 'nonzero' }}
141+
/>
142+
<path
143+
d='M230.104,428.383C230.104,429.094 229.52,429.676 228.811,429.676C228.101,429.676 227.517,429.094 227.517,428.383C227.517,427.674 228.101,427.09 228.811,427.09C229.52,427.09 230.104,427.674 230.104,428.383Z'
144+
style={{ fill: 'white', fillRule: 'nonzero' }}
145+
/>
146+
<path
147+
d='M248.209,435.981C248.209,436.69 247.625,437.274 246.915,437.274C246.205,437.274 245.621,436.69 245.621,435.981C245.621,435.272 246.205,434.688 246.915,434.688C247.625,434.688 248.209,435.272 248.209,435.981Z'
148+
style={{ fill: 'white', fillRule: 'nonzero' }}
149+
/>
150+
<path
151+
d='M229.781,449.48C229.781,450.056 229.306,450.53 228.73,450.53C228.154,450.53 227.679,450.056 227.679,449.48C227.679,448.904 228.154,448.429 228.73,448.429C229.306,448.429 229.781,448.904 229.781,449.48Z'
152+
style={{ fill: 'white', fillRule: 'nonzero' }}
153+
/>
154+
<path
155+
d='M241.419,438.487C241.419,439.063 240.945,439.537 240.368,439.537C239.792,439.537 239.318,439.063 239.318,438.487C239.318,437.91 239.792,437.436 240.368,437.436C240.945,437.436 241.419,437.91 241.419,438.487Z'
156+
style={{ fill: 'white', fillRule: 'nonzero' }}
157+
/>
158+
<path
159+
d='M239.318,455.46C239.318,456.036 238.843,456.511 238.267,456.511C237.691,456.511 237.216,456.036 237.216,455.46C237.216,454.884 237.691,454.409 238.267,454.409C238.843,454.409 239.318,454.884 239.318,455.46Z'
160+
style={{ fill: 'white', fillRule: 'nonzero' }}
161+
/>
162+
<path
163+
d='M168.848,282.647C169.026,281.99 169.558,281.478 170.227,281.329L170.594,278.562L171.137,281.355C171.785,281.54 172.287,282.07 172.434,282.733L175.235,283.13L172.408,283.628C172.23,284.267 171.717,284.765 171.07,284.923L170.594,287.77L170.114,284.902C169.485,284.72 168.993,284.21 168.837,283.569L166.135,283.13L168.848,282.647Z'
164+
style={{ fill: 'white', fillRule: 'nonzero' }}
165+
/>
166+
<path
167+
d='M96.37,480.946C96.548,480.289 97.081,479.776 97.749,479.627L98.117,476.862L98.661,479.655C99.308,479.838 99.811,480.367 99.956,481.031L102.758,481.428L99.931,481.926C99.753,482.565 99.239,483.063 98.592,483.221L98.117,486.07L97.637,483.201C97.007,483.018 96.516,482.508 96.359,481.867L93.657,481.428L96.37,480.946Z'
168+
style={{ fill: 'white', fillRule: 'nonzero' }}
169+
/>
170+
<path
171+
d='M229.659,455.38C229.837,454.722 230.368,454.21 231.037,454.062L231.405,451.294L231.949,454.087C232.596,454.271 233.099,454.802 233.244,455.466L236.045,455.863L233.219,456.361C233.04,456.999 232.528,457.497 231.88,457.655L231.405,460.503L230.925,457.634C230.295,457.452 229.805,456.941 229.648,456.302L226.947,455.863L229.659,455.38Z'
172+
style={{ fill: 'white', fillRule: 'nonzero' }}
173+
/>
174+
<path
175+
d='M240.211,426.869C240.388,426.211 240.92,425.699 241.588,425.551L241.956,422.783L242.5,425.576C243.148,425.762 243.651,426.291 243.796,426.955L246.597,427.352L243.771,427.85C243.592,428.488 243.079,428.987 242.433,429.145L241.956,431.992L241.477,429.123C240.847,428.942 240.357,428.432 240.2,427.791L237.497,427.352L240.211,426.869Z'
176+
style={{ fill: 'white', fillRule: 'nonzero' }}
177+
/>
178+
<path
179+
d='M109.303,321.556C109.481,320.898 110.013,320.387 110.681,320.237L111.049,317.471L111.593,320.264C112.241,320.448 112.743,320.978 112.889,321.642L115.69,322.039L112.863,322.536C112.685,323.175 112.172,323.674 111.525,323.832L111.049,326.679L110.569,323.811C109.94,323.628 109.449,323.118 109.293,322.478L106.59,322.039L109.303,321.556Z'
180+
style={{ fill: 'white', fillRule: 'nonzero' }}
181+
/>
182+
<path
183+
d='M100.756,381.578C110.286,398.228 121.393,410.411 130.341,421.988C138.283,432.264 153.757,437.408 148.307,442.286C142.164,447.782 127.292,423.533 127.292,423.533C117.408,411.614 107.949,398.97 98.299,382.433L100.756,381.578Z'
184+
style={{ fill: 'white', fillRule: 'nonzero' }}
185+
/>
186+
<path
187+
d='M0,425.268C46.046,395.026 126.409,375.502 192.597,349.225C242.884,329.26 287.601,304.198 311.639,269.689C250.721,393.777 81.066,379.089 3.312,426.424L0,425.268Z'
188+
style={{ fill: 'rgb(237,28,36)', fillRule: 'nonzero' }}
189+
/>
190+
<path
191+
d='M107.05,363.738L130.11,363.738L146.644,405.374L152.155,410.905L122.134,410.905L127.645,405.374L125.687,400.294L109.117,400.294L107.413,406.103L111.365,410.905L95.701,410.905L101.213,405.374L111.837,368.554L107.05,363.738ZM122.751,393.004L116.078,376.098L111.184,393.004L122.751,393.004Z'
192+
style={{ fill: 'white', fillRule: 'nonzero' }}
193+
/>
194+
<path
195+
d='M214.184,363.738L238.118,363.738L254.653,405.374L260.164,410.905L230.143,410.905L235.654,405.374L233.696,400.294L217.125,400.294L215.421,406.103L219.373,410.905L203.71,410.905L209.222,405.374L219.845,368.554L214.184,363.738ZM230.759,393.004L224.087,376.098L219.192,393.004L230.759,393.004Z'
196+
style={{ fill: 'white', fillRule: 'nonzero' }}
197+
/>
198+
<path
199+
d='M75.758,393.113L75.758,368.554L70.972,363.738L86.925,363.738L82.14,368.554L82.14,405.374L87.651,410.905L66.693,410.905L48.637,380.361L48.637,405.374L53.277,410.905L36.6,410.905L42.111,405.374L42.111,368.554L37.325,363.738L58.21,363.738L75.758,393.113Z'
200+
style={{ fill: 'white', fillRule: 'nonzero' }}
201+
/>
202+
<path
203+
d='M196.553,375.835L196.063,361.15L191.12,364.562C184.156,362.127 176.051,362.219 170.364,364.91C165.071,367.415 159.36,372.704 160.055,380.22C160.752,387.736 166.577,390.645 171.826,393.024C178.582,396.086 185.936,397.121 185.827,401.167C185.757,403.741 181.485,405.587 178.165,405.482C175.135,405.386 165.28,404.646 160.125,398.523L161.101,413.97L166.604,409.935C173.289,412.3 181.392,413.292 188.889,410.847C196.341,408.419 204.174,402.183 199.827,391.285C197.956,386.596 192.804,383.705 189.731,382.447C186.917,381.295 178.333,377.92 175.936,376.671C173.136,375.212 173.448,370.582 180.185,369.642C186.288,368.791 194.742,373.678 196.553,375.835Z'
204+
style={{ fill: 'white', fillRule: 'nonzero' }}
205+
/>
206+
<path
207+
d='M35.658,497.677C128.131,403.298 265.971,359.693 311.639,269.689C284.138,357.193 136.85,405.454 35.408,502.115L35.658,497.677Z'
208+
style={{ fill: 'rgb(237,28,36)', fillRule: 'nonzero' }}
209+
/>
210+
<path
211+
d='M98.299,382.433C97.216,380.577 96.131,378.672 95.042,376.714C70.388,332.361 73.944,287.098 118.563,306.82C156.431,323.559 192.6,370.511 207.146,403.857C213.887,419.307 231.96,479.946 173.764,455.374L173.65,455.019C228.613,477.651 219.111,420.301 189.691,376.331C173.042,351.45 151.331,330.725 137.637,320.722C92.05,287.421 64.246,307.79 96.253,373.097C97.702,376.053 99.208,378.875 100.756,381.578L98.299,382.433Z'
212+
style={{ fill: 'white', fillRule: 'nonzero' }}
213+
/>
214+
</g>
215+
</svg>
216+
);
217+
}

0 commit comments

Comments
 (0)