Skip to content

Commit d260511

Browse files
billy-lebilly-le
authored
update sponsors section (#1873)
1 parent edbe357 commit d260511

16 files changed

Lines changed: 489 additions & 289 deletions

File tree

‎common/constants/partners.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import { s3 } from 'common/constants/urls';
22
import sortBy from 'lodash/sortBy';
33

4+
// Paid Sponsors
5+
import etsy from 'static/images/sponsors/etsy_logo.png';
6+
import umpquaBank from 'static/images/sponsors/umpqua_bank_logo.png';
7+
import juniperNetworks from 'static/images/sponsors/juniper_networks_logo.png';
8+
9+
// In Kind Sponsors
10+
import google from 'static/images/sponsors/google_logo.png';
11+
import codePlatoon from 'static/images/sponsors/code_platoon_logo.png';
12+
import uniteUs from 'static/images/sponsors/unite_us_logo.png';
13+
import airbnb from 'static/images/sponsors/airbnb_logo.png';
14+
415
export const PARTNER_TYPES = {
516
PAID: 'PAID',
617
KIND: 'IN-KIND',
@@ -97,6 +108,33 @@ const partners = [
97108
url: 'https://teamtreehouse.com/?utm_source=operationcode',
98109
type: PARTNER_TYPES.KIND,
99110
},
111+
{ name: 'Etsy', logoSource: etsy.src, url: 'https://etsy.com', type: PARTNER_TYPES.PAID },
112+
{
113+
name: 'Umpqua Bank',
114+
logoSource: umpquaBank.src,
115+
url: 'https://www.umpquabank.com/',
116+
type: PARTNER_TYPES.PAID,
117+
},
118+
{
119+
name: 'Juniper Networks',
120+
logoSource: juniperNetworks.src,
121+
url: 'https://www.juniper.net',
122+
type: PARTNER_TYPES.PAID,
123+
},
124+
{ name: 'Google', logoSource: google.src, url: 'https://google.com', type: PARTNER_TYPES.KIND },
125+
{
126+
name: 'Code Platoon',
127+
logoSource: codePlatoon.src,
128+
url: 'https://www.codeplatoon.org',
129+
type: PARTNER_TYPES.KIND,
130+
},
131+
{
132+
name: 'Unite Us',
133+
logoSource: uniteUs.src,
134+
url: 'https://uniteus.com',
135+
type: PARTNER_TYPES.KIND,
136+
},
137+
{ name: 'Airbnb', logoSource: airbnb.src, url: 'https://airbnb.com', type: PARTNER_TYPES.KIND },
100138
];
101139

102140
export default sortBy(partners, 'name');

‎components/Footer/Footer.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { footerItems } from 'common/constants/navigation';
55
import Image from 'next/image';
66
import Logo from 'public/static/images/logo.svg';
77

8+
import platniumTransparencySeal from 'static/images/platinum-transparency.png';
9+
import compTia from 'static/images/sponsors/comptia_logo.png';
10+
811
export interface FooterPropsType {
912
/**
1013
* Url string applied ot the link.
@@ -49,19 +52,26 @@ function Footer() {
4952
<h6 className="mb-2">Connect With Us!</h6>
5053
<SocialMedia />
5154
</div>
52-
<div className="text-center mb-4">
55+
<div className="flex items-center justify-center gap-8 mb-4">
5356
<OutboundLink
5457
href="https://www.guidestar.org/profile/shared/52626ac8-5e8b-445a-889e-30bf1ac0b46e"
5558
analyticsEventLabel="Footer GuideStar"
5659
hasIcon={false}
5760
>
5861
<Image
59-
src="/static/images/platinum-transparency.png"
62+
src={platniumTransparencySeal}
6063
alt="GuideStar Gold Transparency Seal"
6164
width={128}
6265
height={128}
6366
/>
6467
</OutboundLink>
68+
<OutboundLink
69+
href="https://www.comptia.org"
70+
analyticsEventLabel="Footer CompTIA"
71+
hasIcon={false}
72+
>
73+
<Image src={compTia} width={128} height={128} alt="CompTIA Authorized Partner - Gold" />
74+
</OutboundLink>
6575
</div>
6676
<div className="max-w-[1000px] mx-auto pb-10">
6777
<ul className="text-xl lg:text-base px-10 md:px-0 text-center grid grid-cols-2 md:grid-cols-4 gap-7 md:gap-3 pt-3">

‎components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ exports[`Footer > should render with no props passed 1`] = `
3030
<SocialMedia />
3131
</div>
3232
<div
33-
className="text-center mb-4"
33+
className="flex items-center justify-center gap-8 mb-4"
3434
>
3535
<OutboundLink
3636
analyticsEventLabel="Footer GuideStar"
@@ -40,7 +40,19 @@ exports[`Footer > should render with no props passed 1`] = `
4040
<MockedNextImage
4141
alt="GuideStar Gold Transparency Seal"
4242
height={128}
43-
src="/static/images/platinum-transparency.png"
43+
src="/public/static/images/platinum-transparency.png"
44+
width={128}
45+
/>
46+
</OutboundLink>
47+
<OutboundLink
48+
analyticsEventLabel="Footer CompTIA"
49+
hasIcon={false}
50+
href="https://www.comptia.org"
51+
>
52+
<MockedNextImage
53+
alt="CompTIA Authorized Partner - Gold"
54+
height={128}
55+
src="/public/static/images/sponsors/comptia_logo.png"
4456
width={128}
4557
/>
4658
</OutboundLink>

‎components/PartnerLogoLink/PartnerLogoLink.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,9 @@ export interface PartnerLogoLinkPropsType {
2424
}
2525

2626
const sizeMappings = {
27-
small: {
28-
width: 100,
29-
height: 100,
30-
},
31-
medium: {
32-
width: 125,
33-
height: 125,
34-
},
35-
large: {
36-
width: 150,
37-
height: 150,
38-
},
27+
small: 'h-[100px] w-[100px]',
28+
medium: 'h-[125px] w-[125px]',
29+
large: 'h-[150px] w-[150px]',
3930
};
4031

4132
export default function PartnerLogoLink({
@@ -45,16 +36,15 @@ export default function PartnerLogoLink({
4536
size = 'medium',
4637
}: PartnerLogoLinkPropsType) {
4738
return (
48-
<div className="text-center w-36">
49-
<OutboundLink href={url} analyticsEventLabel={`Partner Logo Click - ${name}`} hasIcon={false}>
39+
<OutboundLink href={url} analyticsEventLabel={`Partner Logo Click - ${name}`} hasIcon={false}>
40+
<div className={`relative ${sizeMappings[size]}`}>
5041
<Image
51-
className="w-full h-full text-center transition-all duration-200 ease-linear grayscale opacity-60 hover:grayscale-0 hover:opacity-100 hover:transition-all hover:duration-200 hover:ease-linear"
42+
className="transition-all duration-200 ease-linear grayscale opacity-60 hover:grayscale-0 hover:opacity-100 hover:transition-all hover:duration-200 hover:ease-linear object-contain"
5243
src={logoSource}
5344
alt={`${name} logo`}
54-
{...sizeMappings[size]}
55-
layout="fixed"
45+
layout="fill"
5646
/>
57-
</OutboundLink>
58-
</div>
47+
</div>
48+
</OutboundLink>
5949
);
6050
}

‎components/PartnerLogoLink/__tests__/__snapshots__/PartnerLogoLink.test.tsx.snap‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`PartnerLogoLink > should render with required props 1`] = `
4-
<div
5-
className="text-center w-36"
4+
<a
5+
className="inline-flex items-start"
6+
href="https://user-images.githubusercontent.com"
7+
onClick={[Function]}
8+
rel="noopener noreferrer"
9+
target="_blank"
610
>
7-
<a
8-
className="inline-flex items-start"
9-
href="https://user-images.githubusercontent.com"
10-
onClick={[Function]}
11-
rel="noopener noreferrer"
12-
target="_blank"
11+
<div
12+
className="relative h-[125px] w-[125px]"
1313
>
1414
<img
1515
alt="Partner Inc. logo"
1616
src="https://user-images.githubusercontent.com/logo"
1717
/>
18-
<span
19-
className="sr-only"
20-
data-testid="SCREEN_READER_ONLY"
21-
>
22-
Opens in new window
23-
</span>
24-
</a>
25-
</div>
18+
</div>
19+
<span
20+
className="sr-only"
21+
data-testid="SCREEN_READER_ONLY"
22+
>
23+
Opens in new window
24+
</span>
25+
</a>
2626
`;

‎components/ReusableSections/SponsorsSection/SponsorsSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ const SponsorsSection = () => (
1515
<Heading text="Sponsors" hasTitleUnderline headingLevel={3} />
1616

1717
<Heading text="Corporate Partners" headingLevel={4} />
18-
<p>
18+
<p className="mb-5">
1919
These sponsors have donated cash to help keep the mission going here at Operation Code. They
2020
may or may not have also donated to our cause via others means.
2121
</p>
22-
<div className="flex justify-center items-center flex-wrap [&>*]:m-4">
22+
<div className="flex justify-center items-center flex-wrap gap-10">
2323
{partners
2424
.filter(x => isPaidSponsor(x))
2525
.map(partner => (
@@ -28,11 +28,11 @@ const SponsorsSection = () => (
2828
</div>
2929

3030
<Heading text="Corporate Supporters" headingLevel={4} />
31-
<p>
31+
<p className="mb-5">
3232
The following organizations have helped Operation Code through services, products,
3333
advertisements, scholarships, or sponsorships. We thank them for their contributions.
3434
</p>
35-
<div className="flex justify-center items-center flex-wrap [&>*]:m-4">
35+
<div className="flex justify-center items-center flex-wrap gap-10">
3636
{partners
3737
.filter(x => !isPaidSponsor(x))
3838
.map(partner => (

‎components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ describe('SponsorsSection', () => {
1616

1717
partners.forEach(partner => {
1818
const image = component.queryByAltText(`${partner.name} logo`)!;
19-
const link = image.parentNode as HTMLAnchorElement;
20-
19+
const link = image.closest('a') as HTMLAnchorElement;
2120
expect(image).toBeInTheDocument();
2221
expect(link.href.startsWith('https://')).toStrictEqual(true);
2322
});

0 commit comments

Comments
 (0)