Skip to content

Commit

Permalink
feat: apply fadeup effect on blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
Luqmaan Essop committed May 28, 2024
1 parent 988875b commit 1d1ce5f
Show file tree
Hide file tree
Showing 8 changed files with 187 additions and 143 deletions.
21 changes: 21 additions & 0 deletions packages/ui/src/components/Molecules/FadeUp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
'use client';
import { motion, useReducedMotion } from 'framer-motion';
import React, { PropsWithChildren } from 'react';

export function FadeUp({
yGap,
children,
className,
}: PropsWithChildren<{ yGap: number; className?: string }>) {
const reducedMotion = useReducedMotion();
return (
<motion.div
className={className}
transition={{ duration: 0.8 }}
initial={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }}
whileInView={{ opacity: 1, y: 0 }}
>
{children}
</motion.div>
);
}
46 changes: 25 additions & 21 deletions packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,35 @@ import {
import clsx from 'clsx';
import React from 'react';

import { FadeUp } from '../../Molecules/FadeUp';

export function BlockCta(props: BlockCtaFragment) {
return (
<div className="container-page">
<div className="container-content">
<div className="container-text my-2 lg:my-3">
<Link
className={clsx(
{
'flex-row-reverse':
props.iconPosition === CtaIconPosition.Before,
},
'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
)}
href={props.url ?? ('/' as Url)}
target={props.openInNewTab ? '_blank' : '_self'}
rel="noreferrer"
>
{props.text}
{!!props.icon && props.icon === CtaIconType.Arrow && (
<ArrowRightIcon />
)}
</Link>
<FadeUp yGap={50}>
<div className="container-page">
<div className="container-content">
<div className="container-text my-2 lg:my-3">
<Link
className={clsx(
{
'flex-row-reverse':
props.iconPosition === CtaIconPosition.Before,
},
'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
)}
href={props.url ?? ('/' as Url)}
target={props.openInNewTab ? '_blank' : '_self'}
rel="noreferrer"
>
{props.text}
{!!props.icon && props.icon === CtaIconType.Arrow && (
<ArrowRightIcon />
)}
</Link>
</div>
</div>
</div>
</div>
</FadeUp>
);
}

Expand Down
12 changes: 8 additions & 4 deletions packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React from 'react';

import { FadeUp } from '../../Molecules/FadeUp';

export function BlockHorizontalSeparator() {
return (
<div className="container-page">
<div className="container-content">
<hr className="container-text my-8 text-gray-200" />
<FadeUp yGap={50}>
<div className="container-page">
<div className="container-content">
<hr className="container-text my-8 text-gray-200" />
</div>
</div>
</div>
</FadeUp>
);
}
28 changes: 15 additions & 13 deletions packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,25 @@ import clsx from 'clsx';
import React from 'react';

import { isTruthy } from '../../../utils/isTruthy';
import { FadeUp } from '../../Molecules/FadeUp';

export function BlockImageTeasers(props: BlockImageTeasersFragment) {
return (
// eslint-disable-next-line tailwindcss/no-custom-classname
<section className="my-10 block-background-image-cards">
<div className="text-center">
<div
className={clsx('grid gap-2', {
'grid-cols-2': props.teasers.filter(isTruthy).length > 1,
})}
>
{props.teasers.filter(isTruthy).map((teaser, index) => (
<BlockImageTeaser key={index} {...teaser} />
))}
<FadeUp yGap={50}>
<section className="my-10 block-background-image-cards">
<div className="text-center">
<div
className={clsx('grid gap-2', {
'grid-cols-2': props.teasers.filter(isTruthy).length > 1,
})}
>
{props.teasers.filter(isTruthy).map((teaser, index) => (
<BlockImageTeaser key={index} {...teaser} />
))}
</div>
</div>
</div>
</section>
</section>
</FadeUp>
);
}

Expand Down
53 changes: 28 additions & 25 deletions packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,41 @@ import {
import clsx from 'clsx';
import React from 'react';

import { FadeUp } from '../../Molecules/FadeUp';
import { BlockMarkup } from './BlockMarkup';

export function BlockImageWithText(props: BlockImageWithTextFragment) {
return (
<div className="container-page">
<div className="container-content my-12 lg:my-16">
<div
className={clsx(
'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
{
'lg:flex-row-reverse':
props.imagePosition === ImagePosition.Right,
},
)}
>
{!!props.image?.source && (
<div className={'lg:w-1/2 self-start'}>
<Image
className="object-cover w-full"
source={props.image.source}
alt={props.image.alt || ''}
/>
</div>
)}

<div className={'lg:w-1/2 nested-container'}>
{props.textContent?.markup && (
<BlockMarkup {...props.textContent} />
<FadeUp yGap={50}>
<div className="container-page">
<div className="container-content my-12 lg:my-16">
<div
className={clsx(
'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
{
'lg:flex-row-reverse':
props.imagePosition === ImagePosition.Right,
},
)}
>
{!!props.image?.source && (
<div className={'lg:w-1/2 self-start'}>
<Image
className="object-cover w-full"
source={props.image.source}
alt={props.image.alt || ''}
/>
</div>
)}

<div className={'lg:w-1/2 nested-container'}>
{props.textContent?.markup && (
<BlockMarkup {...props.textContent} />
)}
</div>
</div>
</div>
</div>
</div>
</FadeUp>
);
}
76 changes: 40 additions & 36 deletions packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { selectAll } from 'hast-util-select';
import React, { PropsWithChildren } from 'react';
import { Plugin } from 'unified';

import { FadeUp } from '../../Molecules/FadeUp';

const unorderedItems: Plugin<[], Element> = () => (tree) => {
selectAll('ul > li', tree).forEach((node) => {
node.properties!.unordered = true;
Expand All @@ -13,44 +15,46 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {

export function BlockMarkup(props: BlockMarkupFragment) {
return (
<div className="container-page">
<div className="container-content">
<div className="container-text">
<div
className={clsx([
'prose lg:prose-xl mt-10',
'marker:text-[#111928]',
'marker:font-bold',
])}
>
<Html
plugins={[unorderedItems]}
components={{
blockquote: ({ children }: PropsWithChildren<{}>) => {
return (
<blockquote className="border-l-0 relative pl-0">
<svg
width="32"
height="24"
viewBox="0 0 32 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
fill="#9CA3AF"
/>
</svg>
{children}
</blockquote>
);
},
}}
markup={props.markup}
/>
<FadeUp yGap={50}>
<div className="container-page">
<div className="container-content">
<div className="container-text">
<div
className={clsx([
'prose lg:prose-xl mt-10',
'marker:text-[#111928]',
'marker:font-bold',
])}
>
<Html
plugins={[unorderedItems]}
components={{
blockquote: ({ children }: PropsWithChildren<{}>) => {
return (
<blockquote className="border-l-0 relative pl-0">
<svg
width="32"
height="24"
viewBox="0 0 32 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
fill="#9CA3AF"
/>
</svg>
{children}
</blockquote>
);
},
}}
markup={props.markup}
/>
</div>
</div>
</div>
</div>
</div>
</FadeUp>
);
}
6 changes: 3 additions & 3 deletions packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import { BlockMediaFragment, Html, Image } from '@custom/schema';
import React from 'react';

import { UnreachableCaseError } from '../../../utils/unreachable-case-error';
import { ScrollPop } from '../../Client/ScrollPop';
import { FadeUp } from '../../Molecules/FadeUp';

export function BlockMedia(props: BlockMediaFragment) {
if (!props.media) {
return null;
}
return (
<ScrollPop>
<FadeUp yGap={50}>
<div className="container-page">
<div className="container-content">
<figure className="mt-16 container-text">
Expand All @@ -22,7 +22,7 @@ export function BlockMedia(props: BlockMediaFragment) {
</figure>
</div>
</div>
</ScrollPop>
</FadeUp>
);
}

Expand Down
Loading

0 comments on commit 1d1ce5f

Please sign in to comment.