Skip to content

Commit

Permalink
Add forward Ref to FlexBox; styles clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@yvonnetangsu
yvonnetangsu committed Jan 23, 2025
1 parent 2134896 commit fcc421a
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 39 deletions.
12 changes: 7 additions & 5 deletions components/FlexBox/FlexBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -14,7 +14,7 @@ type FlexBoxProps = HTMLAttributes<HTMLElement> & {
children?: ReactNode;
};

export const FlexBox = ({
export const FlexBox = forwardRef<HTMLElement, FlexBoxProps>(({
as: AsComponent = 'div',
direction,
gap,
Expand All @@ -25,9 +25,10 @@ export const FlexBox = ({
children,
className,
...props
}: FlexBoxProps) => (
}, ref) => (
<AsComponent
{...props}
ref={ref}
className={cnb(
'flex',
direction ? styles.flexDirection[direction] : '',
Expand All @@ -41,4 +42,5 @@ export const FlexBox = ({
>
{children}
</AsComponent>
);
));

26 changes: 22 additions & 4 deletions components/ImageSlider/ImageSlider.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,41 @@
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';
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',
'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',
'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 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-gc-black/90 backdrop-blur-lg w-screen';
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';
58 changes: 28 additions & 30 deletions components/ImageSlider/ImageSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { HeroIcon } from '@/components/HeroIcon';
import { NextPrevButton } from '@/components/ImageSlider/NextPrevButton';
import { Slide } from '@/components/ImageSlider/Slide';
import { RichText } from '@/components/RichText';
import { SrOnlyText } from '@/components/Typography';
import { SrOnlyText, Text } from '@/components/Typography';
import { type MarginType } from '@/utilities/datasource';
import { getProcessedImage } from '@/utilities/getProcessedImage';
import { getIsSbImagePortrait } from '@/utilities/getIsSbImagePortrait';
Expand Down Expand Up @@ -68,6 +68,7 @@ export const ImageSlider = ({
sliderRef.current?.slickGoTo(activeSlide, true);
};

// This moves the thumbnail into view when the active slide changes.
const adjustPagerPosition = () => {
const windowBox = pagerWindowRef.current?.getBoundingClientRect();
const pagerBox = pagerRef.current?.getBoundingClientRect();
Expand Down Expand Up @@ -121,24 +122,24 @@ export const ImageSlider = ({
appendDots: (dots: React.ReactNode) => {
return (
<div>
<FlexBox justifyContent="center" className="gap-16 mt-10 sm:mt-0">
<FlexBox justifyContent="center" className={styles.buttonWrapper}>
<NextPrevButton
direction="prev"
isLightText={isLightText}
onClick={clickPrev}
className="relative sm:absolute sm:-left-60 md:-left-80 sm:top-[-30cqw]"
className={styles.nextButton}
/>
<NextPrevButton
direction="next"
isLightText={isLightText}
onClick={clickNext}
className="relative sm:absolute sm:-right-60 md:-right-80 sm:top-[-30cqw]"
className={styles.prevButton}
/>
</FlexBox>
<FlexBox justifyContent="center" className="sm:justify-between mt-9">
<div aria-hidden="true" className="counter leading-none text-center">
<FlexBox justifyContent="center" className={styles.counterExpandWrapper}>
<Text as="span" aria-hidden="true" leading="none" align="center">
{`${activeSlide + 1}/${slides?.length}`}
</div>
</Text>
<SrOnlyText>{`Slide ${activeSlide + 1} of ${slides?.length}`}</SrOnlyText>
{showExpandLink && (
<button
Expand All @@ -149,30 +150,27 @@ export const ImageSlider = ({
aria-label="Expand gallery in full screen modal"
>
Expand
<HeroIcon icon="expand" className="inline-block ml-02em group-hocus-visible:scale-110" />
<HeroIcon icon="expand" className={styles.expandIcon} />
</button>
)}
</FlexBox>
<RichText
textColor={isLightText ? 'white' : 'black-70'}
linkColor={isLightText ? 'digital-red-xlight' : 'unset'}
wysiwyg={slides[activeSlide]?.caption}
className="rs-mt-0 max-w-prose *:leading-snug *:gc-caption"
className={styles.caption}
/>
<FlexBox alignItems="center" justifyContent="center" className="rs-mt-0">
<div
className="relative hidden sm:block overflow-hidden grow"
ref={pagerWindowRef}
<div ref={pagerWindowRef} className={styles.pagerWindow}>
<FlexBox
as="ul"
alignItems="end"
className={styles.pagerList}
ref={pagerRef}
style={{ transform: `translateX(${pagerOffset}px)` }}
>
<ul
className="pager flex list-unstyled items-end *:mb-0 *:leading-[0] gap-10"
ref={pagerRef}
style={{ transform: `translateX(${pagerOffset}px)` }}
>
{dots}
</ul>
</div>
</FlexBox>
{dots}
</FlexBox>
</div>
</div>
);
},
Expand Down Expand Up @@ -206,7 +204,7 @@ export const ImageSlider = ({
<>
<Container as="section" width="full" mt={marginTop} mb={marginBottom} aria-label={ariaLabel} className={styles.root} {...props}>
<Slider
className="leading-none"
className={styles.slider}
ref={sliderRef}
{...sliderSettings}
>
Expand Down Expand Up @@ -259,9 +257,9 @@ export const ImageSlider = ({
/>
</button>
<section aria-label={`${ariaLabel} full screen view`}>
<Container className="mt-90 md:mt-100 relative max-w-1500 mx-auto">
<div className={styles.modalSliderWrapper}>
<Slider
className="relative !flex items-center gap-20 md:gap-30 leading-none"
className={styles.modalSlider}
ref={modalSliderRef}
{...modalSliderSettings}
>
Expand All @@ -273,17 +271,17 @@ export const ImageSlider = ({
/>
))}
</Slider>
</Container>
<div className="relative mt-9">
<span aria-hidden="true" className="block leading-none text-center">
</div>
<div className={styles.belowModalSlider}>
<Text as="span" leading="none" align="center" aria-hidden="true" className={styles.modalCounter}>
{`${activeSlide + 1}/${slides?.length}`}
</span>
</Text>
<SrOnlyText>{`Slide ${activeSlide + 1} of ${slides?.length}`}</SrOnlyText>
<RichText
textColor="white"
linkColor="digital-red-xlight"
wysiwyg={slides[activeSlide]?.caption}
className="rs-mt-0 max-w-prose mx-auto *:leading-snug *:gc-caption"
className={styles.modalCaption}
/>
</div>
</section>
Expand Down

0 comments on commit fcc421a

Please sign in to comment.