DS-1021 | Image Slider Gallery (#381)

undefined
SU-SWS · Jan 30, 2025 · 6be90ee · 6be90ee
1 parent 1366ee1
commit 6be90ee
Show file tree

Hide file tree

Showing 22 changed files with 629 additions and 34 deletions.
diff --git a/app/(storyblok)/error.tsx b/app/(storyblok)/error.tsx
@@ -5,8 +5,8 @@ import { Masthead } from '@/components/Masthead';
 import { Container } from '@/components/Container';
 
 export default function Error({error, reset}: {
-  error: Error & { digest?: string }
-  reset: () => void
+  error: Error & { digest?: string };
+  reset: VoidFunction;
 }) {
   useEffect(() => {
     // Log the error to an error reporting service
@@ -24,4 +24,4 @@ export default function Error({error, reset}: {
       </main>
     </div>
   );
-}
+}
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -5,8 +5,8 @@ import { Masthead } from '@/components/Masthead';
 import { Container } from '@/components/Container';
 
 export default function Error({error, reset}: {
-  error: Error & { digest?: string }
-  reset: () => void
+  error: Error & { digest?: string };
+  reset: VoidFunction;
 }) {
   useEffect(() => {
     // Log the error to an error reporting service
@@ -24,4 +24,4 @@ export default function Error({error, reset}: {
       </main>
     </div>
   );
-}
+}
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.slick-track, .slick-list {
+  @apply w-full;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import './globals.css';
+import '../styles/slick.min.css';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { cnb } from 'cnbuilder';
 import { Source_Sans_3, Source_Serif_4 } from 'next/font/google';

diff --git a/components/FlexBox/FlexBox.tsx b/components/FlexBox/FlexBox.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, HTMLAttributes, forwardRef } from 'react';
 import { cnb } from 'cnbuilder';
 import * as styles from './FlexBox.styles';
 import * as types from './FlexBox.types';
 
 type FlexBoxProps = HTMLAttributes<HTMLElement> & {
-  as?: types.FlexElementType;
+  as?: React.ElementType;
   direction?: types.FlexDirectionType;
   wrap?: types.FlexWrapType;
   gap?: boolean;
@@ -14,7 +14,7 @@ type FlexBoxProps = HTMLAttributes<HTMLElement> & {
   children?: ReactNode;
 };
 
-export const FlexBox = ({
+export const FlexBox = forwardRef<HTMLElement, FlexBoxProps>(({
   as: AsComponent = 'div',
   direction,
   gap,
@@ -25,9 +25,10 @@ export const FlexBox = ({
   children,
   className,
   ...props
-}: FlexBoxProps) => (
+}, ref) => (
   <AsComponent
     {...props}
+    ref={ref}
     className={cnb(
       'flex',
       direction ? styles.flexDirection[direction] : '',
@@ -41,4 +42,5 @@ export const FlexBox = ({
   >
     {children}
   </AsComponent>
-);
+));
+
diff --git a/components/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx
@@ -5,9 +5,11 @@ import {
   ArrowDownTrayIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
+  ArrowsPointingOutIcon,
   ArrowUpRightIcon,
   Bars3Icon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
   ChevronUpIcon,
   CursorArrowRaysIcon,
@@ -34,9 +36,11 @@ export const iconMap = {
   copy: DocumentDuplicateIcon,
   check: CheckIcon,
   'chevron-down': ChevronDownIcon,
+  'chevron-left': ChevronLeftIcon,
   'chevron-right': ChevronRightIcon,
   'chevron-up': ChevronUpIcon,
   download: ArrowDownTrayIcon,
+  expand: ArrowsPointingOutIcon,
   'triangle-down': PlayIcon,
   'triangle-right': PlayIcon,
   'triangle-up': PlayIcon,
@@ -80,6 +84,7 @@ export const iconBaseStyle: IconBaseStyleType = {
   'triangle-up': 'w-09em scale-x-90 -rotate-90 mt-02em',
   download: 'w-09em',
   email: 'w-1em',
+  expand: 'w-1em -mt-02em',
   external: 'w-08em stroke-[2.5]',
   left: 'w-08em',
   link: 'w-09em -mt-01em',

diff --git a/components/ImageSlider/ImageSlider.styles.ts b/components/ImageSlider/ImageSlider.styles.ts
@@ -0,0 +1,42 @@
+import { cnb } from 'cnbuilder';
+
+export const root = 'mx-auto w-full sm:w-[calc(100%_-12rem)] md:w-[calc(100%_-17rem)]';
+
+export const slider = 'leading-none';
+export const buttonWrapper = 'gap-16 mt-10 sm:mt-0';
+export const buttonBase = 'relative sm:absolute sm:top-[-33cqw] lg:top-[-31cqw]';
+export const nextButton = `${buttonBase} sm:-left-60 md:-left-80`;
+export const prevButton = `${buttonBase} sm:-right-60 md:-right-80`;
+export const counterExpandWrapper = 'sm:justify-between mt-9';
+
+export const pagerWindow = 'rs-mt-0 relative hidden sm:block overflow-hidden';
+export const pagerList = 'list-unstyled *:mb-0 *:leading-[0] gap-10 transition-transform';
+export const thumbButton = (active: boolean, isPortrait: boolean) => cnb(
+  'inline-block hocus-visible:opacity-100 hocus-visible:border-b-digital-red-light hocus-visible:-translate-y-9 transition-all border-b-[3px] pt-9 pb-6',
+  active ? 'opacity-100 border-b-[3px] border-b-digital-red-light -translate-y-9' : 'opacity-70 border-b-transparent',
+  isPortrait ? 'w-50 md:w-65' : 'w-80 md:w-100',
+);
+export const expandButton = (isLightText: boolean) => cnb(
+  'group hidden sm:inline-block font-semibold leading-none gc-card hocus-visible:underline [transform:translate3d(0,0,0)];',
+  isLightText ? 'text-digital-red-xlight hocus-visible:text-white' : 'text-digital-red-light hocus-visible:text-gc-black',
+);
+export const expandIcon = 'inline-block ml-02em group-hocus-visible:scale-110';
+export const skipButton = 'hidden sm:block skiplink focus:!relative left-0 -top-30 break-words type-0 whitespace-normal';
+export const caption = 'rs-mt-0 max-w-prose *:leading-snug *:gc-caption';
+
+// Modal styles
+export const dialog = 'hidden sm:block relative z-[150]';
+export const srOnly = 'sr-only';
+export const dialogOverlay = 'fixed inset-0 bg-black-true/90 backdrop-blur-lg w-screen';
+export const dialogWrapper = 'fixed inset-0 w-screen overflow-y-auto overscroll-contain overflow-x-hidden';
+export const dialogPanel = 'relative cc flex flex-col w-screen inset-0 break-words justify-start text-white';
+export const modalClose = 'absolute top-20 z-[200] right-0 block mr-0 ml-auto rs-mb-2 p-9 border-2 border-digital-red-xlight bg-black-true rounded-full hocus-visible:border-dashed hocus-visible:border-white transition-transform hocus-visible:rotate-90';
+export const modalIcon = 'text-white size-26';
+export const contentWrapper = 'relative w-full';
+
+// Modal Slider elements
+export const modalSliderWrapper = 'relative mt-90 md:mt-100 mx-auto';
+export const modalSlider = 'relative !flex items-center gap-20 md:gap-30 leading-none';
+export const belowModalSlider = 'relative mt-9';
+export const modalCounter = 'block';
+export const modalCaption = 'rs-mt-0 max-w-prose mx-auto *:leading-snug *:gc-caption';