Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carrers page #99

Merged
merged 7 commits into from
Jul 16, 2024
Merged

Carrers page #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2eb2391
filter out archived jobs
renemennab Jul 12, 2024
fe72c29
change footer to careers
renemennab Jul 12, 2024
ee3f838
enable careers page
renemennab Jul 12, 2024
b6ef8a0
change copy
renemennab Jul 12, 2024
3505acb
hyperlink email
renemennab Jul 15, 2024
d53b248
align product and solution nav with logo
renemennab Jul 15, 2024
0da9987
filter archived from directus
renemennab Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions pages/careers/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { ColorModeProvider } from '@pluralsh/design-system'
import Head from 'next/head'
import Script from 'next/script'

import { useTheme } from 'styled-components'

import { ResponsiveAspectRatioSC } from '@src/components/AspectRatio'
import { BenefitCard } from '@src/components/BenefitCard'
import { FooterVariant } from '@src/components/FooterFull'
Expand Down Expand Up @@ -83,6 +85,8 @@ function Photo({
}

export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
const theme = useTheme()

return (
<>
<Head>
Expand Down Expand Up @@ -263,9 +267,15 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
heading="Open positions"
intro={
<p>
We’re actively seeking passionate individuals to join our team
and contribute to our mission. Explore our open positions and
unlock exciting opportunities to make a meaningful impact.
We are not actively hiring for new positions right now, but
we’re always interested and receiving general applications to
&nbsp;
<a
style={{ ...theme.partials.marketingText.inlineLink }}
href="mailto:[email protected]"
>
[email protected]
</a>
</p>
}
className={classNames(
Expand Down
2 changes: 1 addition & 1 deletion src/components/FooterNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const navItems = [
href: '/about',
},
{
children: 'Join the team',
children: 'Careers',
href: '/careers',
},
{
Expand Down
87 changes: 39 additions & 48 deletions src/components/NavigationDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import { type ComponentProps, useMemo } from 'react'
import { useMemo } from 'react'

import { ColorModeProvider } from '@pluralsh/design-system'

import styled from 'styled-components'

import { type NavData, useNavData } from '@src/contexts/NavDataContext'

import { mqs } from '../breakpoints'

import { ProductTopNavMenu } from './menu/ProductNav'
import { SolutionTopNavMenu } from './menu/SolutionNav'
import { TopNavMenu } from './menu/TopNavMenu'
Expand All @@ -33,59 +29,54 @@ function flattenNavData(navData: NavData): NavData {
return ret
}

export const NavigationDesktop = styled(
({ ...props }: ComponentProps<'div'>) => {
const navData = useNavData()
const flatNav = useMemo(() => flattenNavData(navData), [navData])
export function NavigationDesktop({ logoRef }) {
const navData = useNavData()
const flatNav = useMemo(() => flattenNavData(navData), [navData])
const logoLeft = logoRef?.current?.getBoundingClientRect()?.left

return (
<ColorModeProvider mode="dark">
<div {...props}>
{flatNav?.map((navItem, i) => {
if (navItem?.mobile_only) {
return null
return (
<ColorModeProvider mode="dark">
<div className="hidden gap-xsmall lg:flex">
{flatNav?.map((navItem, i) => {
if (navItem?.mobile_only) {
return null
}
if (navItem?.subnav) {
if (!i) {
return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we check the ids directly instead of using indexes for these? might be hard to debug if someone changes the order around in the future

<ProductTopNavMenu
key={navItem.id}
navItem={navItem}
left={logoLeft}
/>
)
}
if (navItem?.subnav) {
if (!i) {
return (
<ProductTopNavMenu
key={navItem.id}
navItem={navItem}
/>
)
}
if (i === 1) {
return (
<SolutionTopNavMenu
key={navItem.id}
navItem={navItem}
/>
)
}

if (i === 1) {
return (
<TopNavMenu
<SolutionTopNavMenu
key={navItem.id}
navItem={navItem}
left={logoLeft}
/>
)
}

return (
<NavItemLink
key={navItem?.id}
<TopNavMenu
key={navItem.id}
navItem={navItem}
/>
)
})}
</div>
</ColorModeProvider>
)
}
)(({ theme }) => ({
display: 'none',
[mqs.fullHeader]: {
display: 'flex',
gap: theme.spacing.xsmall,
},
}))
}

return (
<NavItemLink
key={navItem?.id}
navItem={navItem}
/>
)
})}
</div>
</ColorModeProvider>
)
}
12 changes: 10 additions & 2 deletions src/components/PageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { type ComponentProps, type ReactNode, useEffect, useState } from 'react'
import {
type ComponentProps,
type ReactNode,
useEffect,
useRef,
useState,
} from 'react'

import { Button, PluralLogoFull, usePrevious } from '@pluralsh/design-system'
import NextLink from 'next/link'
Expand Down Expand Up @@ -58,6 +64,7 @@ export function PageHeader({
useKey(['Escape'], () => {
setMenuIsOpen(false)
})
const logoRef = useRef(null)

return (
<HeaderWrap
Expand All @@ -75,6 +82,7 @@ export function PageHeader({
className="logoLink flex flex-shrink-0"
passHref
aria-label="Go to Plural homepage"
ref={logoRef}
>
<PluralLogoFull
color={
Expand All @@ -84,7 +92,7 @@ export function PageHeader({
}
/>
</NextLink>
<NavigationDesktop />
<NavigationDesktop logoRef={logoRef} />
</nav>
<Filler />
<section className="rightSection">
Expand Down
13 changes: 9 additions & 4 deletions src/components/menu/ProductNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useNavigationContext } from '@pluralsh/design-system'

import { useMenuItem } from 'react-aria'
import { Item } from 'react-stately'
import styled, { useTheme } from 'styled-components'
import styled from 'styled-components'

import { type NavList } from '@src/contexts/NavDataContext'

Expand Down Expand Up @@ -43,9 +43,14 @@ function ProductTopNavMenuItem<T extends NavList>({

const TopNavMenuItemWrapper = styled.li((_) => ({}))

export function ProductTopNavMenu({ navItem }: { navItem: NavList }) {
export function ProductTopNavMenu({
navItem,
left,
}: {
navItem: NavList
left?: number
}) {
const navigate = useNavigationContext().useNavigate()
const theme = useTheme()
const items = useMemo(
() => navItem?.subnav?.filter((item): item is NavList => !!item),
[navItem.subnav]
Expand All @@ -61,7 +66,7 @@ export function ProductTopNavMenu({ navItem }: { navItem: NavList }) {
items={items}
itemRenderer={ProductTopNavMenuItem}
kind="product"
left={theme.spacing.large}
left={left}
onAction={(key) => {
const item = navItem.subnav?.find((item) => item?.id === key)
const url = item?.link?.url
Expand Down
13 changes: 9 additions & 4 deletions src/components/menu/SolutionNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useNavigationContext } from '@pluralsh/design-system'

import { useMenuItem } from 'react-aria'
import { Item } from 'react-stately'
import styled, { useTheme } from 'styled-components'
import styled from 'styled-components'

import { type NavList } from '@src/contexts/NavDataContext'

Expand Down Expand Up @@ -43,9 +43,14 @@ function SolutionTopNavMenuItem<T extends NavList>({

const TopNavMenuItemWrapper = styled.li((_) => ({}))

export function SolutionTopNavMenu({ navItem }: { navItem: NavList }) {
export function SolutionTopNavMenu({
navItem,
left,
}: {
navItem: NavList
left?: number
}) {
const navigate = useNavigationContext().useNavigate()
const theme = useTheme()
const items = useMemo(
() => navItem?.subnav?.filter((item): item is NavList => !!item),
[navItem.subnav]
Expand All @@ -61,7 +66,7 @@ export function SolutionTopNavMenu({ navItem }: { navItem: NavList }) {
items={items}
itemRenderer={SolutionTopNavMenuItem}
kind="solution"
left={theme.spacing.large}
left={left}
onAction={(key) => {
const item = navItem.subnav?.find((item) => item?.id === key)
const url = item?.link?.url
Expand Down
16 changes: 8 additions & 8 deletions src/data/getSiteSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,14 @@ export const getSiteSettings = (solutions?: Solution[]) => ({
url: '/about',
},
},
// {
// id: '6-3',
// link: {
// id: '6-3',
// title: 'Careers',
// url: '/careers',
// },
// },
{
id: '6-3',
link: {
id: '6-3',
title: 'Careers',
url: '/careers',
},
},
{
id: '6-4',
link: {
Expand Down
13 changes: 7 additions & 6 deletions src/generated/graphqlDirectus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8296,21 +8296,21 @@ export type SolutionsQueryVariables = Exact<{

export type SolutionsQuery = { __typename?: 'Query', solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, title?: string | null, description?: string | null, upper_features_title?: string | null, lower_features_title?: string | null, download_section_title?: string | null, download_section_description?: string | null, upper_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, lower_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, problems?: Array<{ __typename?: 'solution_problems', id: string, title?: string | null, subtitle?: string | null, problem?: string | null, solution?: string | null } | null> | null, featured_quote?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null }> };

export type MinJobListingFragment = { __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null };
export type MinJobListingFragment = { __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null };

export type FullJobListingFragment = { __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null };
export type FullJobListingFragment = { __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null };

export type JobListingsQueryVariables = Exact<{ [key: string]: never; }>;


export type JobListingsQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null }> };
export type JobListingsQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null }> };

export type JobListingQueryVariables = Exact<{
slug?: InputMaybe<Scalars['String']['input']>;
}>;


export type JobListingQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null }> };
export type JobListingQuery = { __typename?: 'Query', job_listings: Array<{ __typename?: 'job_listings', content?: string | null, id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null }> };

export type JobListingSlugsQueryVariables = Exact<{ [key: string]: never; }>;

Expand Down Expand Up @@ -8588,6 +8588,7 @@ export const MinJobListingFragmentDoc = gql`
department
tags
location
status
}
`;
export const FullJobListingFragmentDoc = gql`
Expand Down Expand Up @@ -8974,7 +8975,7 @@ export type SolutionsLazyQueryHookResult = ReturnType<typeof useSolutionsLazyQue
export type SolutionsQueryResult = Apollo.QueryResult<SolutionsQuery, SolutionsQueryVariables>;
export const JobListingsDocument = gql`
query JobListings {
job_listings {
job_listings(filter: {status: {_neq: "archived"}}) {
...MinJobListing
}
}
Expand Down Expand Up @@ -9008,7 +9009,7 @@ export type JobListingsLazyQueryHookResult = ReturnType<typeof useJobListingsLaz
export type JobListingsQueryResult = Apollo.QueryResult<JobListingsQuery, JobListingsQueryVariables>;
export const JobListingDocument = gql`
query JobListing($slug: String) {
job_listings(filter: {slug: {_eq: $slug}}) {
job_listings(filter: {slug: {_eq: $slug}, status: {_neq: "archived"}}) {
...FullJobListing
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/generated/pages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
{
"path": "/careers"
},
{
"path": "/community"
},
{
"path": "/contact-sales"
},
Expand Down
Loading
Loading