Merge remote-tracking branch 'origin/SLB-405-Fade-effect' into dev

AmazeeLabs · May 28, 2024 · 4ffc207 · 4ffc207
2 parents eb72708 + 1d1ce5f
commit 4ffc207
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 316 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -8,7 +8,7 @@
     "@amazeelabs/gatsby-plugin-operations": "^1.1.3",
     "@amazeelabs/gatsby-plugin-static-dirs": "^1.0.1",
     "@amazeelabs/gatsby-source-silverback": "^1.14.0",
-    "@amazeelabs/publisher": "^2.4.17",
+    "@amazeelabs/publisher": "^2.4.30",
     "@amazeelabs/strangler-netlify": "^1.1.9",
     "@amazeelabs/token-auth-middleware": "^1.1.1",
     "@custom/cms": "workspace:*",

diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx 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 (
+    <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>
+  );
+}
diff --git 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 (
-    <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>
   );
 }
 

diff --git 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 (
-    <div className="container-page my-8">
-      <div className="container-content">
-        <hr className="container-text text-gray-200" />
+    <FadeUp yGap={50}>
+      <div className="container-page my-8">
+        <div className="container-content">
+          <hr className="container-text my-8 text-gray-200" />
+        </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git 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
-    <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>
   );
 }
 

diff --git 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 (
-    <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>
   );
 }
diff --git 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 (
-    <div className="container-page my-10">
-      <div className="container-content">
-        <div className="container-text">
-          <div
-            className={clsx([
-              'prose lg:prose-xl',
-              '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 my-10">
+        <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>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -2,24 +2,27 @@ import { BlockMediaFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
 import { UnreachableCaseError } from '../../../utils/unreachable-case-error';
+import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockMedia(props: BlockMediaFragment) {
   if (!props.media) {
     return null;
   }
   return (
-    <div className="container-page mt-16 mb-8">
-      <div className="container-content">
-        <figure className="container-text">
-          <Media {...props.media} />
-          {props.caption ? (
-            <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
-              <Html markup={props.caption} />
-            </figcaption>
-          ) : null}
-        </figure>
+    <FadeUp yGap={50}>
+      <div className="container-page mt-16 mb-8">
+        <div className="container-content">
+          <figure className="container-text">
+            <Media {...props.media} />
+            {props.caption ? (
+              <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
+                <Html markup={props.caption} />
+              </figcaption>
+            ) : null}
+          </figure>
+        </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }