-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/GIVCAMP-201_blurry-bg-poster' into feature/noji…
…ra_update-package * feature/GIVCAMP-201_blurry-bg-poster: eslint update and lint fix Image on left option linter and clean up more styles BlurryPoster and new MVP Homepage components; better typing for StoryblokData in some SB components Create Blurry Poster component GIVCAMP-199 | New homepage hero (#122) More finetuning responsive Clean up Play with hero animation make font size fluid; positioning of hero elements sr only H1 New homepage hero GIVCAMP-198 | homepage Ideal fellow section with parallax explore (#121) GIVCAMP-197 | Changemaker card and section (#120) GIVCAMP-194 | Low budget data viz poc (#119) GIVCAMP-188 | Horizontal brochure poc; new CTA style (#118) Modularize import for heroicons (#117) # Conflicts: # components/Storyblok/SbHomepage.tsx # package-lock.json # package.json
- Loading branch information
Showing
33 changed files
with
1,214 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { cnb } from 'cnbuilder'; | ||
|
|
||
| export const root = 'relative bg-no-repeat bg-cover bg-center overflow-hidden'; | ||
| export const blurWrapper = 'w-full h-full backdrop-blur-md'; | ||
|
|
||
| export const heading = (imageOnLeft: boolean) => cnb('lg:rs-mt-7 rs-mb-5 lg:w-[140%]', { | ||
| 'lg:ml-[-40%]': imageOnLeft, | ||
| }); | ||
|
|
||
| export const contentWrapper = (imageOnLeft: boolean) => cnb('z-10', { | ||
| 'order-last lg:rs-pl-4': imageOnLeft, | ||
| 'order-first lg:rs-pr-2': !imageOnLeft, | ||
| }); | ||
|
|
||
| export const imageWrapper = (imageOnLeft: boolean) => cnb('', { | ||
| 'order-first': imageOnLeft, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { HTMLAttributes } from 'react'; | ||
| import { Container } from '../Container'; | ||
| import { Grid } from '../Grid'; | ||
| import { | ||
| Heading, Paragraph, Text, type HeadingType, | ||
| } from '../Typography'; | ||
| import { getProcessedImage } from '@/utilities/getProcessedImage'; | ||
| import * as styles from './BlurryPoster.styles'; | ||
| import { image } from '../Banner'; | ||
|
|
||
| type BlurryPosterProps = HTMLAttributes<HTMLDivElement> & { | ||
| bgImageSrc?: string; | ||
| bgImageFocus?: string; | ||
| imageOnLeft?: boolean; | ||
| headingLevel?: HeadingType; | ||
| heading?: string; | ||
| isSmallHeading?: boolean; | ||
| customHeading?: React.ReactNode; | ||
| body?: string; | ||
| byline?: string; | ||
| publishedDate?: string; | ||
| imageSrc?: string; | ||
| imageFocus?: string; | ||
| cta?: React.ReactNode; | ||
| }; | ||
|
|
||
| export const BlurryPoster = ({ | ||
| bgImageSrc, | ||
| bgImageFocus, | ||
| imageOnLeft, | ||
| heading, | ||
| headingLevel = 'h2', | ||
| isSmallHeading, | ||
| customHeading, | ||
| body, | ||
| byline, | ||
| publishedDate, | ||
| imageSrc, | ||
| imageFocus, | ||
| cta, | ||
| className, | ||
| ...props | ||
| }: BlurryPosterProps) => { | ||
| const bgImageStyle = bgImageSrc ? { backgroundImage: `url('${getProcessedImage(bgImageSrc, '1800x1200', bgImageFocus)}')` } : undefined; | ||
| const date = publishedDate && new Date(publishedDate); | ||
| const formattedDate = date && date.toLocaleDateString('en-US', { | ||
| month: 'long', | ||
| day: '2-digit', | ||
| year: 'numeric', | ||
| }); | ||
|
|
||
| return ( | ||
| <Container {...props} bgColor="black" width="full" className={styles.root} style={bgImageStyle}> | ||
| <div className={styles.blurWrapper}> | ||
| <Grid lg={2} className="cc rs-py-8"> | ||
| <div className={styles.contentWrapper(imageOnLeft)}> | ||
| {heading && ( | ||
| <Heading | ||
| size={isSmallHeading ? 'f8' : 'f9'} | ||
| font="druk" | ||
| color="white" | ||
| leading="none" | ||
| className={styles.heading(imageOnLeft)} | ||
| > | ||
| {heading} | ||
| </Heading> | ||
| )} | ||
| {customHeading && ( | ||
| <div className="rs-mt-7 rs-mb-5"> | ||
| {customHeading} | ||
| </div> | ||
| )} | ||
| {body && ( | ||
| <Paragraph size={2} color="white" leading="display">{body}</Paragraph> | ||
| )} | ||
| {byline && ( | ||
| <Text>{byline}</Text> | ||
| )} | ||
| {date && ( | ||
| <time dateTime={publishedDate}>{formattedDate}</time> | ||
| )} | ||
| {cta && ( | ||
| <div className="rs-mt-4"> | ||
| {cta} | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div className={styles.imageWrapper(imageOnLeft)}> | ||
| <img | ||
| src={getProcessedImage(imageSrc, '1200x1600', imageFocus)} | ||
| alt="" | ||
| className="h-full w-full object-cover object-center" | ||
| /> | ||
| </div> | ||
| </Grid> | ||
| </div> | ||
| </Container> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './BlurryPoster'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export const root = 'group relative [perspective:100rem] w-full max-w-[35rem] mx-auto break-words transition-transform focus-visible:outline-none'; | ||
| export const cardInner = 'relative w-full aspect-w-1 aspect-h-2 group-hocus:[transform:rotateY(180deg)] [transform-style:preserve-3d] transform-gpu duration-1000'; | ||
| export const cardFront = 'absolute w-full h-full top-0 left-0'; | ||
| export const cardBack = 'backface-hidden absolute w-full h-full top-0 left-0 rs-px-2 rs-py-3 bg-cardinal-red/80 [transform:rotateY(180deg)]'; | ||
| export const imageWrapper = 'overflow-hidden aspect-w-1 aspect-h-2'; | ||
| export const heading = 'mb-02em group-hocus:opacity-50 transition-opacity delay-100'; | ||
| export const content = 'group-hocus:opacity-50 transition-opacity delay-100 rs-pt-3 rs-px-2 rs-pb-9 absolute w-full bottom-0 left-0'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { cnb } from 'cnbuilder'; | ||
| import {AnimateInView, type AnimationType } from '../Animate'; | ||
| import { CtaButton } from '../Cta/CtaButton'; | ||
| import { | ||
| Heading, type HeadingType, Paragraph, Text, | ||
| } from '../Typography'; | ||
| import { FlexBox } from '../FlexBox'; | ||
| import { HeroIcon } from '../HeroIcon'; | ||
| import { ImageOverlay } from '../ImageOverlay'; | ||
| import { getProcessedImage } from '@/utilities/getProcessedImage'; | ||
| import * as styles from './ChangemakerCard.styles'; | ||
|
|
||
|
|
||
| export type ChangemakerCardProps = React.HTMLAttributes<HTMLDivElement> & { | ||
| heading?: string; | ||
| headingLevel?: HeadingType; | ||
| body?: string; | ||
| imageSrc?: string; | ||
| imageFocus?: string; | ||
| ctaLabel?: string; | ||
| ctaSrText?: string; | ||
| animation?: AnimationType; | ||
| delay?: number; | ||
| // children serves as what's on the back of the card | ||
| children?: React.ReactNode; | ||
| }; | ||
|
|
||
| export const ChangemakerCard = ({ | ||
| heading, | ||
| headingLevel = 'h3', | ||
| body, | ||
| imageSrc, | ||
| imageFocus, | ||
| ctaLabel, | ||
| ctaSrText, | ||
| animation = 'none', | ||
| delay, | ||
| children, | ||
| className, | ||
| ...props | ||
| }: ChangemakerCardProps) => ( | ||
| <AnimateInView animation={animation} delay={delay}> | ||
| <article | ||
| className={cnb(styles.root, className)} | ||
| tabIndex={0} | ||
| {...props} | ||
| > | ||
| <div className={styles.cardInner}> | ||
| {/* Front of the card */} | ||
| <div className={styles.cardFront}> | ||
| {imageSrc && ( | ||
| <div className={cnb(styles.imageWrapper)}> | ||
| <ImageOverlay | ||
| imageSrc={getProcessedImage(imageSrc, '500x1000', imageFocus)} | ||
| overlay="black-gradient-dark" | ||
| /> | ||
| </div> | ||
| )} | ||
| <div className={styles.content}> | ||
| {heading && ( | ||
| <Heading | ||
| as={headingLevel} | ||
| size={3} | ||
| leading="tight" | ||
| align="center" | ||
| className={styles.heading} | ||
| > | ||
| {heading} | ||
| </Heading> | ||
| )} | ||
| {body && ( | ||
| <Paragraph variant="card" align="center" noMargin>{body}</Paragraph> | ||
| )} | ||
| <FlexBox direction="col" alignItems="center" className="absolute bottom-50 right-36 text-white"> | ||
| <HeroIcon | ||
| noBaseStyle | ||
| icon='cursor' | ||
| className="w-65 h-65 border-2 border-white rounded-full p-16" | ||
| /> | ||
| <Text as="span" font="serif" color="white" variant="caption"> | ||
| {ctaLabel} | ||
| </Text> | ||
| </FlexBox> | ||
| </div> | ||
| </div> | ||
| {/* Back of the card */} | ||
| <FlexBox direction="col" justifyContent="center" className={styles.cardBack}> | ||
| {children} | ||
| </FlexBox> | ||
| </div> | ||
| </article> | ||
| </AnimateInView> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './ChangemakerCard'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.