Skip to content

Commit

Permalink
Action feedback, notably make the carousel component in an island
Browse files Browse the repository at this point in the history
  • Loading branch information
@Georges-GNM
Georges-GNM committed Oct 18, 2024
1 parent 4594073 commit 9091928
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 96 deletions.
20 changes: 9 additions & 11 deletions dotcom-rendering/src/components/DecideContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { FlexibleSpecial } from './FlexibleSpecial';
import { Island } from './Island';
import { NavList } from './NavList';
import { ScrollableHighlights } from './ScrollableHighlights.importable';
import { ScrollableSmall } from './ScrollableSmall.importable';
import { ScrollableSmall } from './ScrollableSmall';

type Props = {
trails: DCRFrontCard[];
Expand Down Expand Up @@ -252,16 +252,14 @@ export const DecideContainer = ({
);
case 'scrollable/small':
return (
<Island priority="critical">
<ScrollableSmall
trails={trails}
imageLoading={imageLoading}
containerType={'scrollable/small'}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
/>
</Island>
<ScrollableSmall
trails={trails}
imageLoading={imageLoading}
containerType={'scrollable/small'}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
/>
);
case 'scrollable/medium':
case 'scrollable/feature':
Expand Down
106 changes: 56 additions & 50 deletions ...ing/src/components/ScrollableCarousel.tsx → ...ponents/ScrollableCarousel.Importable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,10 @@ const generateCarouselColumnStyles = (totalCards: number) => {
/**
* A component used in the carousel fronts containers (e.g. small/medium/feature)
*
* ## Why does this need to be an Island?
*
* The carouselling arrow buttons need to run javascript.
*/

export const ScrollableCarousel = ({ children, carouselLength }: Props) => {
const carouselRef = useRef<HTMLOListElement | null>(null);
const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
Expand Down Expand Up @@ -210,56 +212,60 @@ export const ScrollableCarousel = ({ children, carouselLength }: Props) => {
}, []);

return (
<>
<div css={carouselContainerStyles}>
<ol
ref={carouselRef}
css={[
carouselStyles,
generateCarouselColumnStyles(carouselLength),
]}
data-heatphan-type="carousel"
>
{children}
</ol>
<div css={buttonContainerStyles}>
<Hide until={'tablet'}>
{carouselLength > 2 && (
<div css={buttonLayoutStyles}>
<Button
hideLabel={true}
iconSide="left"
icon={<SvgChevronLeftSingle />}
onClick={() => scrollTo('left')}
priority="tertiary"
theme={
previousButtonEnabled
? themeButton
: themeButtonDisabled
}
size="small"
disabled={!previousButtonEnabled}
/>
<div css={carouselContainerStyles}>
<ol
ref={carouselRef}
css={[
carouselStyles,
generateCarouselColumnStyles(carouselLength),
]}
data-heatphan-type="carousel"
>
{children}
</ol>
<div css={buttonContainerStyles}>
<Hide until={'tablet'}>
{carouselLength > 2 && (
<div css={buttonLayoutStyles}>
<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}
/>
</div>
)}
</Hide>
</div>{' '}
<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>
)}
</Hide>
</div>
</>
</div>
);
};
2 changes: 1 addition & 1 deletion dotcom-rendering/src/components/ScrollableSmall.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
import { trails } from '../../fixtures/manual/highlights-trails';
import { FrontSection } from './FrontSection';
import { ScrollableSmall } from './ScrollableSmall.importable';
import { ScrollableSmall } from './ScrollableSmall';

export default {
title: 'Components/ScrollableSmall',
Expand Down
70 changes: 36 additions & 34 deletions ...components/ScrollableSmall.importable.tsx → ...dering/src/components/ScrollableSmall.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import type {
DCRFrontCard,
} from '../types/front';
import { FrontCard } from './FrontCard';
import { ScrollableCarousel } from './ScrollableCarousel';
import { Island } from './Island';
import { ScrollableCarousel } from './ScrollableCarousel.Importable';

type Props = {
trails: DCRFrontCard[];
Expand Down Expand Up @@ -51,10 +52,6 @@ const verticalLineStyles = css`

/**
* A container used on fronts to display a carousel of small cards
*
* ## Why does this need to be an Island?
*
* The carouselling arrow buttons need to run javascript.
*/
export const ScrollableSmall = ({
trails,
Expand All @@ -65,34 +62,39 @@ export const ScrollableSmall = ({
showAge,
}: Props) => {
return (
<ScrollableCarousel carouselLength={trails.length}>
{trails.map((trail) => {
return (
<li key={trail.url} css={[itemStyles, verticalLineStyles]}>
<FrontCard
trail={trail}
imageLoading={imageLoading}
absoluteServerTimes={!!absoluteServerTimes}
containerPalette={containerPalette}
containerType={containerType}
showAge={!!showAge}
headlineSize="small"
headlineSizeOnMobile="small"
headlineSizeOnTablet="small"
imagePositionOnDesktop="left"
imagePositionOnMobile="left"
imageSize="small" // TODO - needs fixed width images
trailText={undefined} // unsupported
supportingContent={undefined} // unsupported
aspectRatio="5:4"
kickerText={trail.kickerText}
showLivePlayable={trail.showLivePlayable}
showTopBarDesktop={false}
showTopBarMobile={false}
/>
</li>
);
})}
</ScrollableCarousel>
<Island priority="feature" defer={{ until: 'visible' }}>
<ScrollableCarousel carouselLength={trails.length}>
{trails.map((trail) => {
return (
<li
key={trail.url}
css={[itemStyles, verticalLineStyles]}
>
<FrontCard
trail={trail}
imageLoading={imageLoading}
absoluteServerTimes={!!absoluteServerTimes}
containerPalette={containerPalette}
containerType={containerType}
showAge={!!showAge}
headlineSize="small"
headlineSizeOnMobile="small"
headlineSizeOnTablet="small"
imagePositionOnDesktop="left"
imagePositionOnMobile="left"
imageSize="small" // TODO - needs fixed width images
trailText={undefined} // unsupported
supportingContent={undefined} // unsupported
aspectRatio="5:4"
kickerText={trail.kickerText}
showLivePlayable={trail.showLivePlayable}
showTopBarDesktop={false}
showTopBarMobile={false}
/>
</li>
);
})}
</ScrollableCarousel>
</Island>
);
};

0 comments on commit 9091928

Please sign in to comment.