From 1d1ce5f7381598890d72d5768a2ffede6b03f0dc Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 28 May 2024 03:48:55 +0000 Subject: [PATCH 1/9] feat: apply fadeup effect on blocks --- .../ui/src/components/Molecules/FadeUp.tsx | 21 +++++ .../Organisms/PageContent/BlockCta.tsx | 46 +++++----- .../PageContent/BlockHorizontalSeparator.tsx | 12 ++- .../PageContent/BlockImageTeasers.tsx | 28 +++--- .../PageContent/BlockImageWithText.tsx | 53 +++++------ .../Organisms/PageContent/BlockMarkup.tsx | 76 ++++++++-------- .../Organisms/PageContent/BlockMedia.tsx | 6 +- .../Organisms/PageContent/BlockQuote.tsx | 88 ++++++++++--------- 8 files changed, 187 insertions(+), 143 deletions(-) create mode 100644 packages/ui/src/components/Molecules/FadeUp.tsx diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx new file mode 100644 index 000000000..4f5a3cb9d --- /dev/null +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -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 ( + + {children} + + ); +} diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx index 363257b8c..2a74999f9 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx @@ -8,31 +8,35 @@ import { import clsx from 'clsx'; import React from 'react'; +import { FadeUp } from '../../Molecules/FadeUp'; + export function BlockCta(props: BlockCtaFragment) { return ( -
-
-
- - {props.text} - {!!props.icon && props.icon === CtaIconType.Arrow && ( - - )} - + +
+
+
+ + {props.text} + {!!props.icon && props.icon === CtaIconType.Arrow && ( + + )} + +
-
+ ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx index 271c36326..9de52523c 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { FadeUp } from '../../Molecules/FadeUp'; + export function BlockHorizontalSeparator() { return ( -
-
-
+ +
+
+
+
-
+ ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx index 596a50f38..c36ed1dba 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx @@ -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 -
-
-
1, - })} - > - {props.teasers.filter(isTruthy).map((teaser, index) => ( - - ))} + +
+
+
1, + })} + > + {props.teasers.filter(isTruthy).map((teaser, index) => ( + + ))} +
-
-
+ + ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx index 26cbc5406..f179c667f 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx @@ -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 ( -
-
-
- {!!props.image?.source && ( -
- {props.image.alt -
- )} - -
- {props.textContent?.markup && ( - + +
+
+
+ {!!props.image?.source && ( +
+ {props.image.alt +
)} + +
+ {props.textContent?.markup && ( + + )} +
-
+ ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx index fd5a9ec22..0e9cc494d 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx @@ -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; @@ -13,44 +15,46 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => { export function BlockMarkup(props: BlockMarkupFragment) { return ( -
-
-
-
- ) => { - return ( -
- - - - {children} -
- ); - }, - }} - markup={props.markup} - /> + +
+
+
+
+ ) => { + return ( +
+ + + + {children} +
+ ); + }, + }} + markup={props.markup} + /> +
-
+ ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx index 532bd8697..2d830e2a1 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx @@ -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 ( - +
@@ -22,7 +22,7 @@ export function BlockMedia(props: BlockMediaFragment) {
- + ); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index a26e8d355..c899d09fb 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -1,53 +1,59 @@ import { BlockQuoteFragment, Html, Image } from '@custom/schema'; import React from 'react'; +import { FadeUp } from '../../Molecules/FadeUp'; + export function BlockQuote(props: BlockQuoteFragment) { return ( -
-
-
-
-
- - Quote Symbol - - -

{props.quote && }

-
- {props.image && ( - {props.image.alt +
+
+
+
+
+ + Quote Symbol + - )} -
- {props.author &&

{props.author}

} + +

{props.quote && }

+
+ {props.image && ( + {props.image.alt + )} +
+ {props.author && ( +

{props.author}

+ )} +
+ {props.role && ( +

+ / + + {props.role} + +

+ )}
- {props.role && ( -

- / - - {props.role} - -

- )} -
-
+
+
-
+ ); } From 324df6f97f09e5d370117e2534a3896df51cf873 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Thu, 30 May 2024 08:12:29 +0000 Subject: [PATCH 2/9] style(SLB-405): fix onload animation --- packages/ui/src/components/Molecules/FadeUp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 4f5a3cb9d..6a526a1b0 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -8,11 +8,14 @@ export function FadeUp({ className, }: PropsWithChildren<{ yGap: number; className?: string }>) { const reducedMotion = useReducedMotion(); + + console.log("reducedMotion:", reducedMotion) + return ( {children} From e2f4e9818bc8f7ae0f49867d510d6ae1418cf363 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Thu, 30 May 2024 08:15:13 +0000 Subject: [PATCH 3/9] style(SLB-405): cleanup debug --- packages/ui/src/components/Molecules/FadeUp.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 6a526a1b0..4fd80c053 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -9,8 +9,6 @@ export function FadeUp({ }: PropsWithChildren<{ yGap: number; className?: string }>) { const reducedMotion = useReducedMotion(); - console.log("reducedMotion:", reducedMotion) - return ( Date: Fri, 24 May 2024 09:13:39 +0000 Subject: [PATCH 4/9] style: standardize mblock margins --- .../Organisms/PageContent/BlockForm.tsx | 2 +- .../PageContent/BlockHorizontalSeparator.tsx | 8 +-- .../Organisms/PageContent/BlockMarkup.tsx | 72 +++++++++---------- .../Organisms/PageContent/BlockMedia.tsx | 22 +++--- .../Organisms/PageContent/BlockQuote.tsx | 2 +- 5 files changed, 50 insertions(+), 56 deletions(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx index 5190988c5..ff22d3f4a 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx @@ -19,7 +19,7 @@ export function BlockForm( } return ( -
+
-
-
-
-
+ +
+
); diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx index 0e9cc494d..d59b68162 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx @@ -15,43 +15,41 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => { export function BlockMarkup(props: BlockMarkupFragment) { return ( - -
-
-
-
- ) => { - return ( -
- - - - {children} -
- ); - }, - }} - markup={props.markup} - /> -
+ +
+
+
+ ) => { + return ( +
+ + + + {children} +
+ ); + }, + }} + markup={props.markup} + />
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx index 2d830e2a1..5a7119563 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx @@ -9,18 +9,16 @@ export function BlockMedia(props: BlockMediaFragment) { return null; } return ( - -
-
-
- - {props.caption ? ( -
- -
- ) : null} -
-
+ +
+
+ + {props.caption ? ( +
+ +
+ ) : null} +
); diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index c899d09fb..62549abee 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -5,7 +5,7 @@ import { FadeUp } from '../../Molecules/FadeUp'; export function BlockQuote(props: BlockQuoteFragment) { return ( - +
From 10355f64696a92d5bd9119ee42ba2628b4768aa2 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 5 Jun 2024 12:04:38 +0200 Subject: [PATCH 5/9] style(SLB-405): animation once on scroll down --- packages/ui/src/components/Molecules/FadeUp.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 4fd80c053..f908fc0b0 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -14,6 +14,7 @@ export function FadeUp({ className={className} transition={{ duration: 0.8 }} style={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }} + viewport={{ once: true }} whileInView={{ opacity: 1, y: 0 }} > {children} From 0257920f5c6c92b4c164bca38102020ea60ab9aa Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 5 Jun 2024 10:44:33 +0000 Subject: [PATCH 6/9] chore(SLB-405): add checks --- packages/ui/src/components/Molecules/FadeUp.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index f908fc0b0..91b794007 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -1,4 +1,5 @@ 'use client'; +import clsx from 'clsx'; import { motion, useReducedMotion } from 'framer-motion'; import React, { PropsWithChildren } from 'react'; @@ -9,9 +10,13 @@ export function FadeUp({ }: PropsWithChildren<{ yGap: number; className?: string }>) { const reducedMotion = useReducedMotion(); + console.log('reducedMotion:', reducedMotion); return ( Date: Wed, 5 Jun 2024 12:57:42 +0000 Subject: [PATCH 7/9] refactor(SLB-405): adjust framer-motion config --- packages/ui/src/components/Molecules/FadeUp.tsx | 9 ++------- .../Organisms/PageContent/BlockImageTeasers.tsx | 4 ++-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 91b794007..3bbc5d7ba 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -1,5 +1,4 @@ 'use client'; -import clsx from 'clsx'; import { motion, useReducedMotion } from 'framer-motion'; import React, { PropsWithChildren } from 'react'; @@ -10,15 +9,11 @@ export function FadeUp({ }: PropsWithChildren<{ yGap: number; className?: string }>) { const reducedMotion = useReducedMotion(); - console.log('reducedMotion:', reducedMotion); return ( diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx index c36ed1dba..ddae12fe9 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx @@ -7,8 +7,8 @@ import { FadeUp } from '../../Molecules/FadeUp'; export function BlockImageTeasers(props: BlockImageTeasersFragment) { return ( - -
+ +
Date: Wed, 5 Jun 2024 13:16:57 +0000 Subject: [PATCH 8/9] refactor(SLB-405): enhance reduced motion detection --- .../ui/src/components/Molecules/FadeUp.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 3bbc5d7ba..08e81b378 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -1,13 +1,32 @@ 'use client'; -import { motion, useReducedMotion } from 'framer-motion'; -import React, { PropsWithChildren } from 'react'; +import { motion } from 'framer-motion'; +import React, { PropsWithChildren, useEffect, useState } from 'react'; export function FadeUp({ yGap, children, className, }: PropsWithChildren<{ yGap: number; className?: string }>) { - const reducedMotion = useReducedMotion(); + const [reducedMotion, setReducedMotion] = useState(false); + + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); + + const handleChange = () => { + setReducedMotion(mediaQuery.matches); + }; + + // Set the initial value + handleChange(); + + // Add the event listener + mediaQuery.addEventListener('change', handleChange); + + return () => { + // Clean up the event listener on unmount + mediaQuery.removeEventListener('change', handleChange); + }; + }, [reducedMotion]); return ( Date: Wed, 5 Jun 2024 13:38:10 +0000 Subject: [PATCH 9/9] refactor(SLB-405): change opacity prop styule --- packages/ui/src/components/Molecules/FadeUp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 08e81b378..cd21940d8 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -32,7 +32,7 @@ export function FadeUp({