Skip to content

Commit 504f5cf

Browse files
RoyEJohnsonRoyEJohnson
authored
Core 1015 port research page js to ts (#2746)
* Port research page components to TS * Write tests and add a few accessibility features * Prettier
1 parent 39347f6 commit 504f5cf

19 files changed

+2030
-382
lines changed

‎src/app/pages/research/components/contact-us.js‎ renamed to ‎src/app/pages/research/components/contact-us.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import {Section} from '~/pages/research/components/section';
77
export const ContactUs = () => (
88
<Section backgroundColor={colors.lightTeal} padding={false}>
99
<Box
10-
padding={{ vertical: 'xlarge' }}
11-
direction={{ mobile: 'column' }}
12-
align={{ desktop: 'center' }}
13-
gap='xlarge'
10+
padding={{vertical: 'xlarge'}}
11+
direction={{mobile: 'column'}}
12+
align={{desktop: 'center'}}
13+
gap="xlarge"
1414
>
1515
<h3>Connect with our Research Team</h3>
1616
<a
@@ -23,8 +23,10 @@ export const ContactUs = () => (
2323
alignSelf: 'start'
2424
}
2525
}}
26-
target='_blank'
27-
href='https://riceuniversity.co1.qualtrics.com/jfe/form/SV_6EbRsmpDb2Hs69w?jfefe=new' rel="noreferrer">
26+
target="_blank"
27+
href="https://riceuniversity.co1.qualtrics.com/jfe/form/SV_6EbRsmpDb2Hs69w?jfefe=new"
28+
rel="noreferrer"
29+
>
2830
Contact Us
2931
</a>
3032
</Box>

‎src/app/pages/research/components/funders.js‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎src/app/pages/research/components/funders.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/** @jsx jsx */
2+
import {jsx} from '@emotion/react';
3+
import {Box} from 'boxible';
4+
import styled from '@emotion/styled';
5+
import {colors} from '~/pages/research/theme';
6+
import {Section} from '~/pages/research/components/section';
7+
8+
const Supporter = styled.a({
9+
display: 'flex',
10+
alignItems: 'center'
11+
});
12+
13+
const SupporterImage = styled.img({
14+
width: '100%',
15+
height: 'auto'
16+
});
17+
18+
export const Funders = () => {
19+
return (
20+
<Section>
21+
<Box
22+
direction="column"
23+
padding={{vertical: 'large'}}
24+
align={{mobile: 'center'}}
25+
>
26+
<div
27+
css={{
28+
margin: 'auto'
29+
}}
30+
>
31+
<h3 className="fw-bold align-self-start">
32+
Support from Scientific Agencies
33+
</h3>
34+
<Box justify="center">
35+
<Supporter target="_blank" href="https://ies.ed.gov/">
36+
<SupporterImage
37+
alt="Institute of Education Sciences logo"
38+
src="/dist/images/learning-research/funders/ies-logo.webp"
39+
/>
40+
</Supporter>
41+
<Supporter
42+
target="_blank"
43+
href="https://www.nsf.org/gb/en"
44+
>
45+
<SupporterImage
46+
alt="National Science Foundation logo"
47+
src="/dist/images/learning-research/funders/nsf-logo.webp"
48+
/>
49+
</Supporter>
50+
</Box>
51+
52+
<div>
53+
<a
54+
href="https://openstax.org/foundation"
55+
target="_blank"
56+
className="mb-2 large-link"
57+
css={{color: colors.linkText}}
58+
rel="noreferrer"
59+
>
60+
<h5>View Other Philanthropic Supporters</h5>
61+
</a>
62+
63+
<p className="x-small" css={{color: colors.grayText}}>
64+
*The research reported here was supported by the
65+
Institute of Education Sciences, U.S. Department of
66+
Education, through Grant R305N210064 to Rice
67+
University. The opinions expressed are those of the
68+
authors and do not represent views of the Institute
69+
or the U.S. Department of Education.
70+
</p>
71+
</div>
72+
</div>
73+
</Box>
74+
</Section>
75+
);
76+
};

‎src/app/pages/research/components/header.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/app/pages/research/components/header.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/** @jsx jsx */
2+
import {jsx} from '@emotion/react';
3+
import {colors, media} from '../theme';
4+
import styled from '@emotion/styled';
5+
import {Box} from 'boxible';
6+
import {Section} from '~/pages/research/components/section';
7+
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
8+
import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare';
9+
10+
export const HeaderImage = styled.img({
11+
width: '35%',
12+
[media.mobile]: {
13+
width: '85%'
14+
},
15+
[media.tablet]: {
16+
width: '60%'
17+
}
18+
});
19+
20+
export const Header = ({
21+
data: {missionBody}
22+
}: {
23+
data: {missionBody: string};
24+
}) => {
25+
return (
26+
<Section backgroundColor={colors.lightBlue}>
27+
<Box
28+
direction={{mobile: 'column', tablet: 'column', desktop: 'row'}}
29+
align="center"
30+
>
31+
<h1
32+
css={{color: colors.darkText, flex: 5}}
33+
className="fw-bolder"
34+
>
35+
{missionBody}
36+
</h1>
37+
<HeaderImage
38+
src="/dist/images/learning-research/banner-image.png"
39+
alt="banner-image"
40+
css={{flex: 2}}
41+
/>
42+
</Box>
43+
</Section>
44+
);
45+
};
46+
47+
export const Banner = ({
48+
data: {bannerBody, bannerHeader, bannerCTA, bannerURL}
49+
}: {
50+
data: {
51+
bannerBody: string;
52+
bannerHeader: string;
53+
bannerCTA?: string;
54+
bannerURL?: string;
55+
};
56+
}) => {
57+
if (!bannerBody) {
58+
return null;
59+
}
60+
return (
61+
<Section padding={false} backgroundColor={colors.lightTeal}>
62+
<Box
63+
align={{mobile: 'center'}}
64+
direction={{mobile: 'column'}}
65+
padding={{vertical: 'large'}}
66+
gap="xlarge"
67+
>
68+
<h4
69+
css={{
70+
color: colors.blackText,
71+
flex: 2,
72+
[media.desktop]: {maxWidth: 250}
73+
}}
74+
>
75+
{bannerHeader}
76+
</h4>
77+
<Box
78+
align={{mobile: 'center'}}
79+
direction="column"
80+
flex={{grow: 6, shrink: 1, basis: '0%'}}
81+
>
82+
<span css={{[media.mobile]: {textAlign: 'center'}}}>
83+
{bannerBody}
84+
</span>
85+
{bannerCTA && bannerURL && (
86+
<a
87+
className="text-decoration-none"
88+
href={bannerURL}
89+
target="_blank"
90+
rel="noreferrer"
91+
>
92+
<Box align="center" gap>
93+
<span>{bannerCTA}</span>
94+
<FontAwesomeIcon
95+
size="sm"
96+
icon={faArrowUpRightFromSquare}
97+
/>
98+
</Box>
99+
</a>
100+
)}
101+
</Box>
102+
</Box>
103+
<img
104+
className="strips"
105+
src="/dist/images/components/strips.svg"
106+
height="10"
107+
alt=""
108+
role="separator"
109+
/>
110+
</Section>
111+
);
112+
};

0 commit comments

Comments
 (0)