Skip to content

Commit de288df

Browse files
mplibunaomplibunao
committed
- Adds shadcn separator
- Sets triggerOnce to RedUnderline to reduce cls - Sets react keys to fallback to array index since id seems to be optionally typed - Creates CTAGrid component - Fixes CallToAction Button and Link nesting by using radix's asChild prop so we don't render a button - Adds additional tailwind sizes for border-radius and screen in tailwind config - Fixes bug with meta having 10 empty slots in array - Fixes css variable used in tailwind for the color orange - CTAGrid collection improvements: - makes the action required since it's the only field (better types and perf) - Adds interfaceName - Removes the maxrows limits since we should be able to put as many actions in the cta grid - Fixes read access control for the rest of the collection (probably due to the seeded admin user)
1 parent e43b2db commit de288df

25 files changed

+609
-194
lines changed

‎apps/web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
},
3636
"dependencies": {
3737
"@radix-ui/react-dialog": "1.0.4",
38+
"@radix-ui/react-separator": "1.0.3",
3839
"@radix-ui/react-slot": "1.0.2",
3940
"@radix-ui/react-toggle": "1.0.3",
4041
"@radix-ui/react-tooltip": "1.0.6",

‎apps/web/src/app/components/Blocks/RedUnderline.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const RedUnderline = (props: RedUnderlineProps): JSX.Element => {
1010
rootMargin: '0% 0% -25% 0%',
1111
fallbackInView: false,
1212
threshold: [0, 0.5, 1.0],
13+
triggerOnce: true,
1314
})
1415

1516
return (

‎apps/web/src/app/components/Blocks/RenderBlocks.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@ import { type Page } from 'payload/generated-types'
22
import { Suspense } from 'react'
33

44
import { Skeleton } from '../ui/skeleton'
5-
import { ContentBlock, MediaBlock, CTABlock } from './sections/LazyComponents'
5+
import {
6+
ContentBlock,
7+
MediaBlock,
8+
CTABlock,
9+
CTAGridBlock,
10+
} from './sections/LazyComponents'
611

712
type BlockTypes = Page['layout'][number]['blockType']
813

914
const components: Record<BlockTypes, React.LazyExoticComponent<any>> = {
1015
content: ContentBlock,
1116
media: MediaBlock,
1217
cta: CTABlock,
18+
'cta-grid': CTAGridBlock,
1319
}
1420

1521
type Props = {
@@ -19,13 +25,13 @@ type Props = {
1925

2026
export const RenderBlocks = ({ layout, className }: Props) => (
2127
<div className={className}>
22-
{layout?.map((block) => {
28+
{layout?.map((block, i) => {
2329
const Block: React.FC<any> = components[block.blockType]
2430

2531
if (Block) {
2632
return (
2733
<Suspense
28-
key={block.id}
34+
key={block.id ?? i}
2935
fallback={
3036
<div className='w-full flex items-center space-x-4 justify-center md:py-5 py-2'>
3137
<Skeleton className='h-12 w-12 rounded-full md:h-20 md:w-20' />
@@ -36,7 +42,7 @@ export const RenderBlocks = ({ layout, className }: Props) => (
3642
</div>
3743
}
3844
>
39-
<section key={block.id}>
45+
<section key={block.id ?? i}>
4046
<Block {...block} />
4147
</section>
4248
</Suspense>

‎apps/web/src/app/components/Blocks/sections/CTAGrid.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { type CTAGridBlockType } from '~/cms/payload-types'
2+
3+
import { BackgroundColor } from '../../BackgroundColor'
4+
import { Icon } from '../../Icon/Icon'
5+
import { Container, Grid, Gutter } from '../../Layout'
6+
import { SiteLink } from '../../SiteLink'
7+
import { Separator } from '../../ui/separator'
8+
9+
export interface CTAGridProps extends CTAGridBlockType {}
10+
11+
export const CTAGrid = ({ actions }: CTAGridProps): JSX.Element => {
12+
return (
13+
<div className='p-0'>
14+
<ul className='p-0 m-0'>
15+
{actions.map(({ headline, link, icon, id }, i) => (
16+
<li key={id ?? i} className='group'>
17+
<SiteLink
18+
{...link}
19+
className='flex flex-row items-center text-antique relative'
20+
>
21+
<Container className='w-full z-10'>
22+
<Grid>
23+
<div className='col-span-12'>
24+
<div className='flex py-12 px-0 flex-col items-start sm:flex-row sm:items-center'>
25+
<p className='h4 text-antique flex-grow mr-9'>
26+
{headline}
27+
</p>
28+
29+
<p className='h5 m-0 flex items-center'>
30+
{link.label}
31+
{icon === 'arrow' && (
32+
<Icon
33+
id='arrow'
34+
className='ml-6 max-w-[30px] md:max-w-[40px] transition-transform duration-300 h-auto translate-x-2 translate-y-0'
35+
/>
36+
)}
37+
</p>
38+
39+
{i + 1 !== actions.length ? (
40+
<Separator className='bg-antique absolute left-0 right-0 bottom-0' />
41+
) : null}
42+
</div>
43+
</div>
44+
</Grid>
45+
</Container>
46+
47+
<Gutter className='absolute h-full w-full' left>
48+
<BackgroundColor
49+
color='gray'
50+
className='h-full w-full overflow-hidden relative transition duration-300 ease-in-out opacity-9'
51+
/>
52+
</Gutter>
53+
</SiteLink>
54+
</li>
55+
))}
56+
</ul>
57+
</div>
58+
)
59+
}

‎apps/web/src/app/components/Blocks/sections/CallToAction.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,21 @@ export const CallToAction = (props: CallToActionProps): JSX.Element => {
2424
</BackgroundColor>
2525

2626
<ul className='flex flex-wrap list-none m-0 p-0'>
27-
{props.actions?.map(({ link, id }) => (
28-
<li key={id} className='flex flex-wrap list-none m-0 p-0'>
29-
<SiteLink {...link} className='no-underline' prefetch='viewport'>
30-
<Button color={props.backgroundColor.color}>
27+
{props.actions?.map(({ link, id }, i) => (
28+
<li key={id ?? i} className='flex flex-wrap list-none m-0 p-0'>
29+
<Button
30+
color={props.backgroundColor.color}
31+
asChild
32+
className='my-6 mx-0'
33+
>
34+
<SiteLink
35+
{...link}
36+
className='no-underline'
37+
prefetch='viewport'
38+
>
3139
{link.label}
32-
</Button>
33-
</SiteLink>
40+
</SiteLink>
41+
</Button>
3442
</li>
3543
))}
3644
</ul>

‎apps/web/src/app/components/Blocks/sections/Content.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ export const Content = (props: ContentTypeProps) => {
7373
) : null}
7474

7575
<Grid>
76-
{props.columns.map((col) => (
76+
{props.columns.map((col, i) => (
7777
<div
78-
key={col.id}
78+
key={col.id ?? i}
7979
className={richTextCellStyles({
8080
alignment: col.alignment,
8181
width: col.width,

‎apps/web/src/app/components/Blocks/sections/LazyComponents.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ export const MediaBlock = React.lazy(() =>
99
export const CTABlock = React.lazy(() =>
1010
import('./CallToAction').then((module) => ({ default: module.CallToAction })),
1111
)
12+
export const CTAGridBlock = React.lazy(() =>
13+
import('./CTAGrid').then((module) => ({ default: module.CTAGrid })),
14+
)

‎apps/web/src/app/components/Footer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export const Footer = ({ footer, socialMedia }: FooterProps): JSX.Element => {
4949
<Grid>
5050
{footer && Array.isArray(footer.nav) && footer.nav.length > 0 ? (
5151
<ul className='col-span-8 md:col-span-6'>
52-
{footer.nav.map(({ link, id }) => (
53-
<li key={id}>
52+
{footer.nav.map(({ link, id }, i) => (
53+
<li key={id ?? i}>
5454
<SiteLink
5555
{...link}
5656
prefetch='viewport'
@@ -80,8 +80,8 @@ export const Footer = ({ footer, socialMedia }: FooterProps): JSX.Element => {
8080
))}
8181

8282
<ul className='p-0 my-16 mx-0'>
83-
{socialMedia.map(({ id, label, url }) => (
84-
<li key={id}>
83+
{socialMedia.map(({ id, label, url }, i) => (
84+
<li key={id ?? i}>
8585
<a
8686
href={url}
8787
target='_blank'

‎apps/web/src/app/components/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const Header = ({ megaMenu, socialMedia }: HeaderProps): JSX.Element => {
5959
<Grid className='z-0 md:z-auto pointer-events-none md:pointer-events-auto mb-72 md:mb-0 '>
6060
<nav className='col-span-8'>
6161
{megaMenu?.nav?.map(({ link, id }, i) => (
62-
<h3 key={id} className={i === 0 ? 'm-0' : undefined}>
62+
<h3 key={id ?? i} className={i === 0 ? 'm-0' : undefined}>
6363
<SiteLink
6464
{...link}
6565
className='text-antique hover:transition-all hover:duration-300 hover:ease-linear hover:text-blue pointer-events-all'
@@ -73,8 +73,8 @@ export const Header = ({ megaMenu, socialMedia }: HeaderProps): JSX.Element => {
7373

7474
{socialMedia.length > 0 && (
7575
<div className='col-span-3'>
76-
{socialMedia.map(({ url, label, id }) => (
77-
<div className='large' key={id}>
76+
{socialMedia.map(({ url, label, id }, i) => (
77+
<div className='large' key={id ?? i}>
7878
<a
7979
href={url}
8080
target='_blank'

‎apps/web/src/app/components/Layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ export const Gutter = (props: GutterProps): JSX.Element => {
4343
<div
4444
className={twMerge(
4545
props.className,
46-
props.left ? 'pl-0 xl:pl-40' : '',
47-
props.right ? 'pr-0 xl:pr-40' : '',
46+
props.left ? 'pl-0 xl:pl-40 3xl:pl-72' : '',
47+
props.right ? 'pr-0 xl:pr-40 3xl:pr-72' : '',
4848
)}
4949
>
5050
{props.children}

‎apps/web/src/app/components/ui/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cn } from '~/app/utils/misc.ts'
55
import { type ColorsRecord } from '~/cms/fields/ColorPicker/colorPickerField'
66

77
const buttonVariants = cva(
8-
'cursor-pointer rounded-3xl bg-gray border-0 py-0 px-12 h-24 inline-flex items-center my-12 mx-auto shadow-none label',
8+
'cursor-pointer rounded-4xl bg-gray border-0 py-0 px-8 h-16 inline-flex items-center my-8 mx-auto shadow-none label',
99
{
1010
variants: {
1111
color: {

‎apps/web/src/app/components/ui/separator.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as SeparatorPrimitive from '@radix-ui/react-separator'
2+
import * as React from 'react'
3+
import { cn } from '~/app/utils/misc.ts'
4+
5+
const Separator = React.forwardRef<
6+
React.ElementRef<typeof SeparatorPrimitive.Root>,
7+
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
8+
>(
9+
(
10+
{ className, orientation = 'horizontal', decorative = true, ...props },
11+
ref,
12+
) => (
13+
<SeparatorPrimitive.Root
14+
ref={ref}
15+
decorative={decorative}
16+
orientation={orientation}
17+
className={cn(
18+
'shrink-0 bg-border',
19+
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
20+
className,
21+
)}
22+
{...props}
23+
/>
24+
),
25+
)
26+
Separator.displayName = SeparatorPrimitive.Root.displayName
27+
28+
export { Separator }

‎apps/web/src/app/modules/page/page.utils.server.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ export const getPageMeta = ({
1717
const description = page.meta.description ?? siteInfo?.meta.description
1818
const ogImage = page.meta.ogImage ?? siteInfo?.meta.ogImage
1919

20-
const pageMeta: V2_ServerRuntimeMetaDescriptor[] =
21-
Array<V2_ServerRuntimeMetaDescriptor>(10)
20+
const pageMeta: V2_ServerRuntimeMetaDescriptor[] = []
2221

2322
pageMeta.push(
2423
...[

‎apps/web/src/app/styles/tailwind.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
--red: 2 100% 59%;
8080
--blue: 187 43% 73%;
8181
--yellow: 54 100% 68%;
82-
--orange: 36, 97%, 64%;
82+
--orange: 36 97% 64%;
8383

8484
--background: 0 0% 100%;
8585
--foreground: 0 0% 3.9%;

‎apps/web/src/app/utils/seo.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -804,8 +804,7 @@ export const formatOgTypeMeta = (
804804
}
805805

806806
export const getRootMeta = (url: string, siteInfo?: SiteInfo) => {
807-
const rootMeta: V2_ServerRuntimeMetaDescriptor[] =
808-
Array<V2_ServerRuntimeMetaDescriptor>(10)
807+
const rootMeta: V2_ServerRuntimeMetaDescriptor[] = []
809808

810809
rootMeta.push(
811810
...[

‎apps/web/src/cms/blocks/CTAGrid.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ export const CTAGrid: Block = {
88
singular: 'CTA Grid',
99
plural: 'CTA Grids',
1010
},
11+
interfaceName: 'CTAGridBlockType',
1112
fields: [
1213
{
1314
name: 'actions',
1415
label: 'Actions',
1516
type: 'array',
17+
required: true,
1618
minRows: 1,
17-
maxRows: 2,
1819
fields: [
1920
{
2021
name: 'headline',

‎apps/web/src/cms/collections/Categories.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { slugField } from '../fields/slug'
44

55
export const Categories: CollectionConfig = {
66
slug: 'categories',
7+
access: {
8+
read: () => true,
9+
},
710
fields: [
811
{
912
name: 'title',

‎apps/web/src/cms/collections/FormSubmissions.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { type CollectionConfig } from 'payload/dist/collections/config/types'
22

33
export const FormSubmissions: CollectionConfig = {
44
slug: 'form-submissions',
5+
access: {
6+
read: () => true,
7+
},
58
fields: [
69
{
710
type: 'text',

‎apps/web/src/cms/collections/Studies.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ import { slugField } from '../fields/slug'
1919

2020
export const Studies: CollectionConfig = {
2121
slug: 'studies',
22+
access: {
23+
read: () => true,
24+
},
2225
fields: [
2326
{
2427
name: 'title',

‎apps/web/src/cms/globals/Footer.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { navField } from '../fields/nav'
66
export const Footer: GlobalConfig = {
77
slug: 'footer',
88
label: 'Footer',
9+
access: {
10+
read: () => true,
11+
},
912
hooks: {
1013
afterChange: [
1114
async ({ req, doc }) => {

‎apps/web/src/cms/globals/MegaMenu.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { navField } from '../fields/nav'
66
export const MegaMenu: GlobalConfig = {
77
slug: 'mega-menu',
88
label: 'Mega Menu',
9+
access: {
10+
read: () => true,
11+
},
912
hooks: {
1013
afterChange: [
1114
async ({ req, doc }) => {

‎apps/web/src/cms/globals/SocialMedia.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { SOCIAL_MEDIA_KEY } from '~/constants/globalsCacheKeys'
44
export const SocialMedia: GlobalConfig = {
55
slug: 'social-media',
66
label: 'Social Media',
7+
access: {
8+
read: () => true,
9+
},
710
hooks: {
811
afterChange: [
912
async ({ req, doc }) => {

0 commit comments

Comments
 (0)