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

Shadcn migration - heros #13959

Merged
merged 2 commits into from
Sep 30, 2024
Merged

Shadcn migration - heros #13959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa5cdb0
migrate contenthub hero to tw
pettinarip Sep 25, 2024
12e5adc
migrate mdx hero to tw
pettinarip Sep 25, 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
60 changes: 17 additions & 43 deletions src/components/Hero/ContentHero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,22 @@
import { Box, Heading, SimpleGrid, Stack, Text } from "@chakra-ui/react"

import type { CommonHeroProps } from "@/lib/types"

import Breadcrumbs from "@/components/Breadcrumbs"
import { Image } from "@/components/Image"
import { TwImage } from "@/components/Image"
import { Stack } from "@/components/ui/flex"

import { CallToAction } from "../CallToAction"

export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">

const ContentHero = (props: ContentHeroProps) => {
const {
breadcrumbs,
heroImg,
buttons,
title,
description,
blurDataURL,
maxHeight,
} = props
Copy link
Member Author

Choose a reason for hiding this comment

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

Removed this prop as it was not being used and was a bit hacky to set up with tw.

const { breadcrumbs, heroImg, buttons, title, description, blurDataURL } =
props
return (
<Box bgImg="bgMainGradient">
<SimpleGrid
columns={{ base: 1, lg: 2 }}
maxW="1536px"
mx="auto"
alignItems="center"
>
<Box
order={{ lg: 1 }}
py={{ base: 0, lg: 12 }}
height={{
base: "300px",
md: "400px",
lg: maxHeight ? maxHeight : "full",
}}
>
<Image
<div className="bg-gradient-main">
<div className="mx-auto grid max-w-screen-2xl grid-cols-1 items-center lg:grid-cols-2">
<div className="h-[300px] md:h-[400px] lg:order-1 lg:h-full lg:py-12">
<TwImage
className="box h-full max-h-[451px] w-full flex-auto object-contain md:flex-none"
src={heroImg}
alt=""
priority
Expand All @@ -45,25 +25,19 @@ const ContentHero = (props: ContentHeroProps) => {
height={451}
// TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
sizes="(max-width: 992px) 100vw, 760px"
boxSize="full"
style={{ objectFit: "contain" }}
flex={{ base: "1 1 100%", md: "none" }}
maxHeight={451}
/>
</Box>
<Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
</div>
<Stack className="justify-center gap-9 p-8 lg:p-16">
<Breadcrumbs {...breadcrumbs} />
<Stack spacing="6">
<Heading as="h1" size="2xl">
{title}
</Heading>
<Stack className="gap-6">
<h1>{title}</h1>
{typeof description === "string" ? (
<Text fontSize="lg">{description}</Text>
<p className="text-lg">{description}</p>
) : (
description
)}
{buttons && (
<Stack direction={{ base: "column", md: "row" }} spacing="4">
<Stack className="flex-col gap-4 md:flex-row">
{buttons.map((button, idx) => {
if (!button) return
return <CallToAction key={idx} index={idx} {...button} />
Expand All @@ -75,8 +49,8 @@ const ContentHero = (props: ContentHeroProps) => {
* Add conditional Big Stat box here
*/}
</Stack>
</SimpleGrid>
</Box>
</div>
</div>
)
}

Expand Down
9 changes: 3 additions & 6 deletions src/components/Hero/MdxHero/index.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

@pettinarip Are we using this component anywhere? I don't see any instances of it

Copy link
Member Author

Choose a reason for hiding this comment

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

We are not atm. But it is planned to be used once we implement the new DS styles on the docs and other pages I believe.

Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { Heading, Stack } from "@chakra-ui/react"

import type { CommonHeroProps } from "@/lib/types"

import Breadcrumbs from "@/components/Breadcrumbs"
import { Stack } from "@/components/ui/flex"

export type MdxHeroProps = Pick<CommonHeroProps, "breadcrumbs" | "title">

const MdxHero = ({ breadcrumbs, title }: MdxHeroProps) => (
<Stack py="8" px="6" spacing="6" w="full">
<Stack className="w-full gap-6 px-6 py-8">
<Breadcrumbs {...breadcrumbs} />
<Heading as="h1" size="2xl">
{title}
</Heading>
<h1>{title}</h1>
</Stack>
)

Expand Down
4 changes: 0 additions & 4 deletions src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,10 +458,6 @@ export type CommonHeroProps<
* Preface text about the content in the given page
*/
description: ReactNode
/**
* The maximum height of the image in the hero
*/
maxHeight?: string
}

// Learning Tools
Expand Down
Loading