Skip to content

Commit 486e62b

Browse files
kylemhkylemh
committed
Merge remote-tracking branch 'origin/main' into update-registration-form
2 parents 9b87646 + 67b81b5 commit 486e62b

15 files changed

Lines changed: 121 additions & 84 deletions

File tree

‎common/constants/navigation.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const getInvolved = {
5353
const merchStore = {
5454
name: 'Merch Store',
5555
href: '/swag',
56+
isExternal: true,
5657
};
5758

5859
const jobs = {

‎common/constants/partners.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,6 @@ const partners = [
1919
url: 'https://github.com/?utm_source=operationcode',
2020
type: PARTNER_TYPES.KIND,
2121
},
22-
{
23-
name: 'Slack',
24-
logoSource: `${s3}partnerLogos/slack.png`,
25-
url: 'https://slack.com/?utm_source=operationcode',
26-
type: PARTNER_TYPES.PAID,
27-
},
2822
{
2923
name: 'Elyon International',
3024
logoSource: `${s3}partnerLogos/elyon.png`,

‎components/Branding/ColorSection/ColorSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ function ColorSection() {
1515
});
1616

1717
return (
18-
<>
18+
<div className="text-center">
1919
<Content
2020
title="Colors"
2121
hasTitleUnderline
2222
theme="white"
2323
columns={[
2424
<div>
25-
<h3 className="text-center">Primary</h3>
25+
<h3>Primary</h3>
2626
<Swatch colorName={primaryColor.name} hexCode={primaryColor.hexCode} />
2727
</div>,
2828
<div>
29-
<h3 className="text-center">Secondary</h3>
29+
<h3>Secondary</h3>
3030
<Swatch colorName={secondaryColor.name} hexCode={secondaryColor.hexCode} />
3131
</div>,
3232
]}
@@ -38,7 +38,7 @@ function ColorSection() {
3838
<Swatch colorName={colorName} hexCode={brandColorsObject[colorName]} key={colorName} />
3939
))}
4040
/>
41-
</>
41+
</div>
4242
);
4343
}
4444

‎components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap‎

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

33
exports[`ColorSection > should render with required props 1`] = `
4-
<React.Fragment>
4+
<div
5+
className="text-center"
6+
>
57
<Content
68
columns={
79
[
810
<div>
9-
<h3
10-
className="text-center"
11-
>
11+
<h3>
1212
Primary
1313
</h3>
1414
<Swatch
@@ -17,9 +17,7 @@ exports[`ColorSection > should render with required props 1`] = `
1717
/>
1818
</div>,
1919
<div>
20-
<h3
21-
className="text-center"
22-
>
20+
<h3>
2321
Secondary
2422
</h3>
2523
<Swatch
@@ -49,5 +47,5 @@ exports[`ColorSection > should render with required props 1`] = `
4947
theme="white"
5048
title="Other On-Brand Colors"
5149
/>
52-
</React.Fragment>
50+
</div>
5351
`;

‎components/Branding/LogoSection/LogoSection.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ function LogoSection() {
1515
<ul className={styles.logoSizeList}>
1616
{/* - SMALL LOGOS - */}
1717
<li className={classNames(styles.logoSizeListItem, styles.smallLogos)}>
18-
<h5>Small Logos</h5>
19-
<p>
18+
<h5 className="text-center">Small Logos</h5>
19+
<p className="mx-auto">
2020
For use when Operation Code&apos;s logo name is between 0-1 inch in height. In most
2121
cases, use the Original Small Logo. The Stacked Small Logo is to be used where
2222
graphics needs are larger in vertical height than horizontal width with the Operation
@@ -25,7 +25,7 @@ function LogoSection() {
2525

2626
<ul className={styles.logoTypeList}>
2727
<li className={styles.logoTypeListItem}>
28-
<h6>TYPICAL</h6>
28+
<h6 className="text-center">TYPICAL</h6>
2929
<ul className={styles.badgeList}>
3030
<li>
3131
<Badge
@@ -87,8 +87,8 @@ function LogoSection() {
8787
</li>
8888

8989
<li className={styles.logoTypeListItem}>
90-
<h6>Stacked Logos</h6>
91-
<p>
90+
<h6 className="text-center">Stacked Logos</h6>
91+
<p className="mx-auto">
9292
Use the Large Stacked Original logo in areas where you have more vertical space
9393
than horizontal. Only use the Red Stacked Logo for special holidays such as
9494
Thanksgiving, fall events, and Christmas. The Light Stacked Logo is to be used
@@ -141,8 +141,8 @@ function LogoSection() {
141141
</li>
142142

143143
<li className={styles.logoTypeListItem}>
144-
<h6>Medals</h6>
145-
<p>
144+
<h6 className="text-center">Medals</h6>
145+
<p className="mx-auto">
146146
Use the following medals when you are prompted to upload a thumbnail logo only or
147147
profile photo. In most cases, use the OC Blue Medal. The Red Medal should only be
148148
used for holidays and special events (such as Thanksgiving, fall, or Christmas).
@@ -196,8 +196,8 @@ function LogoSection() {
196196
</li>
197197

198198
<li className={styles.logoTypeListItem}>
199-
<h6>Badges</h6>
200-
<p>
199+
<h6 className="text-center">Badges</h6>
200+
<p className="mx-auto">
201201
You may also use badges as a profile photo or thumbnail. Badges should be used to
202202
accompany corporate sponsors or alliance partnerships on shared branding. Use the
203203
original OC Blue Badge in most cases, except the Red Badge for special events and
@@ -256,8 +256,8 @@ function LogoSection() {
256256

257257
{/* - LARGE LOGOS - */}
258258
<li className={classNames(styles.logoSizeListItem, styles.largeLogos)}>
259-
<h5>Large Logos</h5>
260-
<p>
259+
<h5 className="text-center">Large Logos</h5>
260+
<p className="mx-auto">
261261
Use the Original Large Logo in almost all cases above 1 inch in height. The Red Large
262262
Logo is to be used in special events (such as Thanksgiving, fall or Christmas), and
263263
the Light Large Logo is to be used with dark backgrounds or bright colored
@@ -266,7 +266,7 @@ function LogoSection() {
266266

267267
<ul className={styles.logoTypeList}>
268268
<li className={styles.logoTypeListItem}>
269-
<h6>TYPICAL</h6>
269+
<h6 className="text-center">TYPICAL</h6>
270270

271271
<ul className={styles.badgeList}>
272272
<li>

‎components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap‎

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,23 @@ exports[`LogoSection > should render with required props 1`] = `
1010
<li
1111
className="logoSizeListItem"
1212
>
13-
<h5>
13+
<h5
14+
className="text-center"
15+
>
1416
Small Logos
1517
</h5>
16-
<p>
18+
<p
19+
className="mx-auto"
20+
>
1721
For use when Operation Code's logo name is between 0-1 inch in height. In most cases, use the Original Small Logo. The Stacked Small Logo is to be used where graphics needs are larger in vertical height than horizontal width with the Operation Code logo name still under 1 inch in height.
1822
</p>
1923
<ul>
2024
<li
2125
className="logoTypeListItem"
2226
>
23-
<h6>
27+
<h6
28+
className="text-center"
29+
>
2430
TYPICAL
2531
</h6>
2632
<ul
@@ -87,10 +93,14 @@ exports[`LogoSection > should render with required props 1`] = `
8793
<li
8894
className="logoTypeListItem"
8995
>
90-
<h6>
96+
<h6
97+
className="text-center"
98+
>
9199
Stacked Logos
92100
</h6>
93-
<p>
101+
<p
102+
className="mx-auto"
103+
>
94104
Use the Large Stacked Original logo in areas where you have more vertical space than horizontal. Only use the Red Stacked Logo for special holidays such as Thanksgiving, fall events, and Christmas. The Light Stacked Logo is to be used with dark or contrasting bright colored backgrounds.
95105
</p>
96106
<ul
@@ -143,10 +153,14 @@ exports[`LogoSection > should render with required props 1`] = `
143153
<li
144154
className="logoTypeListItem"
145155
>
146-
<h6>
156+
<h6
157+
className="text-center"
158+
>
147159
Medals
148160
</h6>
149-
<p>
161+
<p
162+
className="mx-auto"
163+
>
150164
Use the following medals when you are prompted to upload a thumbnail logo only or profile photo. In most cases, use the OC Blue Medal. The Red Medal should only be used for holidays and special events (such as Thanksgiving, fall, or Christmas). The Navy Medal should be used memorandums or lighter bright colored backgrounds.
151165
</p>
152166
<ul
@@ -199,10 +213,14 @@ exports[`LogoSection > should render with required props 1`] = `
199213
<li
200214
className="logoTypeListItem"
201215
>
202-
<h6>
216+
<h6
217+
className="text-center"
218+
>
203219
Badges
204220
</h6>
205-
<p>
221+
<p
222+
className="mx-auto"
223+
>
206224
You may also use badges as a profile photo or thumbnail. Badges should be used to accompany corporate sponsors or alliance partnerships on shared branding. Use the original OC Blue Badge in most cases, except the Red Badge for special events and holidays (Thanksgiving, fall and Christmas). The Navy Badge may be used with light backgrounds and bright colored backgrounds.
207225
</p>
208226
<ul
@@ -257,17 +275,23 @@ exports[`LogoSection > should render with required props 1`] = `
257275
<li
258276
className="logoSizeListItem largeLogos"
259277
>
260-
<h5>
278+
<h5
279+
className="text-center"
280+
>
261281
Large Logos
262282
</h5>
263-
<p>
283+
<p
284+
className="mx-auto"
285+
>
264286
Use the Original Large Logo in almost all cases above 1 inch in height. The Red Large Logo is to be used in special events (such as Thanksgiving, fall or Christmas), and the Light Large Logo is to be used with dark backgrounds or bright colored backgrounds.
265287
</p>
266288
<ul>
267289
<li
268290
className="logoTypeListItem"
269291
>
270-
<h6>
292+
<h6
293+
className="text-center"
294+
>
271295
TYPICAL
272296
</h6>
273297
<ul

‎components/Nav/Nav.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Logo from 'public/static/images/logo.svg';
77
import { desktopNavItems, mobileNavItems } from 'common/constants/navigation';
88
import NavMobile from 'components/Nav/NavMobile/NavMobile';
99
import dynamic from 'next/dynamic';
10+
import { twMerge } from 'tailwind-merge';
1011
import UserLogo from '../../public/static/images/icons/FontAwesome/user.svg';
1112
import styles from './Nav.module.css';
1213

@@ -48,7 +49,10 @@ export const Nav = () => {
4849
<nav data-testid="Desktop Nav">
4950
<Link href="/" key="Home">
5051
<a
51-
className={classNames(styles.logoLink, styles.link)}
52+
className={classNames(
53+
styles.logoLink,
54+
twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3'),
55+
)}
5256
onContextMenu={event => {
5357
event.preventDefault();
5458
Router.push('/branding');
@@ -58,7 +62,7 @@ export const Nav = () => {
5862
</a>
5963
</Link>
6064

61-
<ul className={styles.link}>
65+
<ul className={twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}>
6266
{desktopNavItems.map(navItem => (
6367
<NavListItem
6468
key={navItem.name}
@@ -74,7 +78,14 @@ export const Nav = () => {
7478
{/* stylistic one-off */}
7579
<li key="Donate">
7680
<Link href="/donate">
77-
<a className={classNames(styles.link, styles.donateLink)}>Donate</a>
81+
<a
82+
className={classNames(
83+
twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3'),
84+
styles.donateLink,
85+
)}
86+
>
87+
Donate
88+
</a>
7889
</Link>
7990
</li>
8091
</ul>

‎components/Nav/NavListItem/NavListItem.tsx‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@ import classNames from 'classnames';
33
import Link from 'next/link';
44
import PlusIcon from 'static/images/icons/plus.svg';
55
import MinusIcon from 'static/images/icons/minus.svg';
6+
import OutboundLink from 'components/OutboundLink/OutboundLink';
7+
import { twMerge } from 'tailwind-merge';
68
import styles from './NavListItem.module.css';
79

810
interface SublinkType {
911
name: string;
12+
1013
href: string;
14+
15+
/** @default false */
16+
isExternal?: boolean;
1117
}
1218

1319
export interface NavListItemPropsType {
@@ -58,7 +64,10 @@ function NavListItem({ sublinks, href, name, icon = null }: NavListItemPropsType
5864
<li className={styles.NavListItem}>
5965
<Link href={href}>
6066
<a
61-
className={classNames(styles.link, styles.navItemLink)}
67+
className={classNames(
68+
twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3'),
69+
styles.navItemLink,
70+
)}
6271
onMouseEnter={exposeSublinks}
6372
onMouseLeave={hideSublinks}
6473
role="link"
@@ -99,18 +108,31 @@ function NavListItem({ sublinks, href, name, icon = null }: NavListItemPropsType
99108
{sublinks.map((sublink, index) => (
100109
<li className={styles.sublinkListItem} key={sublink.name}>
101110
{/* 😞 next/link fought being mocked, so `prefetch` has test-specific code */}
102-
<Link href={sublink.href} prefetch={process.env.NODE_ENV === 'production'}>
103-
<a
104-
className={styles.link}
105-
key={sublink.name}
106-
role="link"
107-
tabIndex={0}
111+
{!sublink.isExternal ? (
112+
<Link href={sublink.href} prefetch={process.env.NODE_ENV === 'production'}>
113+
<a
114+
className={twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}
115+
role="link"
116+
tabIndex={0}
117+
data-testid={`Nav Item ${sublink.name}`}
118+
onKeyDown={event => handleKeyDown(event, index)}
119+
>
120+
<span className={styles.linkContent}>{sublink.name}</span>
121+
</a>
122+
</Link>
123+
) : (
124+
<OutboundLink
125+
analyticsEventLabel={`Clicked on ${sublink.name} -> ${sublink.href}`}
126+
className={twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}
108127
data-testid={`Nav Item ${sublink.name}`}
109-
onKeyDown={event => handleKeyDown(event, index)}
128+
href={sublink.href}
129+
hasIcon
110130
>
111-
<span className={styles.linkContent}>{sublink.name}</span>
112-
</a>
113-
</Link>
131+
<span className={twMerge(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}>
132+
{sublink.name}
133+
</span>
134+
</OutboundLink>
135+
)}
114136
</li>
115137
))}
116138
</ul>

‎components/Nav/NavListItem/__tests__/__snapshots__/NavListItem.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports[`NavListItem > should render with required props passed 1`] = `
88
href="/test"
99
>
1010
<a
11-
className="link navItemLink"
11+
className="link [&>svg]:-bottom-2 [&>svg]:right-3 navItemLink"
1212
data-testid="Nav Item Test"
1313
onMouseEnter={[Function]}
1414
onMouseLeave={[Function]}

0 commit comments

Comments
 (0)