Skip to content

Commit

Permalink
Merge branch 'main' into cc/three-tier-banner-mobile-v1
Browse files Browse the repository at this point in the history
  • Loading branch information
charleycampbell authored Dec 12, 2024
2 parents 1e5d713 + 9b92cdd commit d04fd68
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 64 deletions.
89 changes: 89 additions & 0 deletions dotcom-rendering/src/components/CarouselNavigationButtons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { css } from '@emotion/react';
import { from, space } from '@guardian/source/foundations';
import type { ThemeButton } from '@guardian/source/react-components';
import {
Button,
SvgChevronLeftSingle,
SvgChevronRightSingle,
} from '@guardian/source/react-components';
import { palette } from '../palette';

type Props = {
previousButtonEnabled: boolean;
nextButtonEnabled: boolean;
onClickPreviousButton: () => void;
onClickNextButton: () => void;
dataLinkNameNextButton: string;
dataLinkNamePreviousButton: string;
};

const themeButton: Partial<ThemeButton> = {
borderTertiary: palette('--carousel-chevron-border'),
textTertiary: palette('--carousel-chevron'),
backgroundTertiaryHover: palette('--carousel-chevron-hover'),
};

const themeButtonDisabled: Partial<ThemeButton> = {
borderTertiary: palette('--carousel-chevron-border-disabled'),
textTertiary: palette('--carousel-chevron-disabled'),
backgroundTertiaryHover: 'transparent',
};

const buttonStyles = css`
display: none;
${from.tablet} {
display: flex;
gap: ${space[1]}px;
margin-left: auto;
}
`;

/**
* Navigation buttons for use in a carousel-like component
*/
export const CarouselNavigationButtons = ({
previousButtonEnabled,
nextButtonEnabled,
onClickPreviousButton,
onClickNextButton,
dataLinkNameNextButton,
dataLinkNamePreviousButton,
}: Props) => {
return (
<div
aria-controls="carousel"
aria-label="carousel arrows"
css={buttonStyles}
>
<Button
hideLabel={true}
iconSide="left"
icon={<SvgChevronLeftSingle />}
onClick={onClickPreviousButton}
priority="tertiary"
theme={
previousButtonEnabled ? themeButton : themeButtonDisabled
}
size="small"
disabled={!previousButtonEnabled}
aria-label="previous"
value="previous"
data-link-name={dataLinkNamePreviousButton}
/>

<Button
hideLabel={true}
iconSide="left"
icon={<SvgChevronRightSingle />}
onClick={onClickNextButton}
priority="tertiary"
theme={nextButtonEnabled ? themeButton : themeButtonDisabled}
size="small"
disabled={!nextButtonEnabled}
aria-label="next"
value="next"
data-link-name={dataLinkNameNextButton}
/>
</div>
);
};
81 changes: 17 additions & 64 deletions dotcom-rendering/src/components/ScrollableCarousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@ import {
space,
textSansBold17Object,
} from '@guardian/source/foundations';
import type { ThemeButton } from '@guardian/source/react-components';
import {
Button,
SvgChevronLeftSingle,
SvgChevronRightSingle,
} from '@guardian/source/react-components';
import { useEffect, useRef, useState } from 'react';
import { nestedOphanComponents } from '../lib/ophan-helpers';
import { palette } from '../palette';
import { CarouselNavigationButtons } from './CarouselNavigationButtons';

type Props = {
children: React.ReactNode;
Expand All @@ -39,18 +35,6 @@ const gridColumnWidth = 60;
const gridGap = 20;
const gridGapMobile = 10;

const themeButton: Partial<ThemeButton> = {
borderTertiary: palette('--carousel-chevron-border'),
textTertiary: palette('--carousel-chevron'),
backgroundTertiaryHover: palette('--carousel-chevron-hover'),
};

const themeButtonDisabled: Partial<ThemeButton> = {
borderTertiary: palette('--carousel-chevron-border-disabled'),
textTertiary: palette('--carousel-chevron-disabled'),
backgroundTertiaryHover: 'transparent',
};

/**
* On mobile the carousel extends into the outer margins to use the full width
* of the screen. From tablet onwards the carousel sits within the page grid.
Expand Down Expand Up @@ -161,15 +145,6 @@ const carouselStyles = css`
}
`;

const buttonStyles = css`
display: none;
${from.tablet} {
display: flex;
gap: ${space[1]}px;
margin-left: auto;
}
`;

const itemStyles = css`
display: flex;
scroll-snap-align: start;
Expand Down Expand Up @@ -346,44 +321,22 @@ export const ScrollableCarousel = ({
>
{children}
</ol>
{showNavigation && (
<div css={buttonStyles}>
<Button
hideLabel={true}
iconSide="left"
icon={<SvgChevronLeftSingle />}
onClick={() => scrollTo('left')}
priority="tertiary"
theme={
previousButtonEnabled
? themeButton
: themeButtonDisabled
}
size="small"
disabled={!previousButtonEnabled}
// TODO
// aria-label="Move stories backwards"
// data-link-name="container left chevron"
/>

<Button
hideLabel={true}
iconSide="left"
icon={<SvgChevronRightSingle />}
onClick={() => scrollTo('right')}
priority="tertiary"
theme={
nextButtonEnabled
? themeButton
: themeButtonDisabled
}
size="small"
disabled={!nextButtonEnabled}
// TODO
// aria-label="Move stories forwards"
// data-link-name="container right chevron"
/>
</div>
{showNavigation && (
<CarouselNavigationButtons
previousButtonEnabled={previousButtonEnabled}
nextButtonEnabled={nextButtonEnabled}
onClickPreviousButton={() => scrollTo('left')}
onClickNextButton={() => scrollTo('right')}
dataLinkNamePreviousButton={nestedOphanComponents(
'carousel',
'previous-button',
)}
dataLinkNameNextButton={nestedOphanComponents(
'carousel',
'next-button',
)}
/>
)}
</div>
);
Expand Down

0 comments on commit d04fd68

Please sign in to comment.