Skip to content

[WIP]: Tag page cards updates #15693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
domlander wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[WIP]: Tag page cards updates #15693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,6 @@ const podcastImageStyles = (
}

/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */

${from.desktop} {
width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
height: ${isHorizontalOnDesktop ? 'unset' : '120px'};
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/Card/components/UL.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export const UL = ({
verticalDividerColour = palette('--section-border'),
}: Props) => {
const spacingPx = getSpacingPx(hasLargeSpacing);

return (
<ul
css={[
Expand Down
182 changes: 38 additions & 144 deletions dotcom-rendering/src/components/DecideContainerByTrails.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { breakpoints } from '@guardian/source/foundations';
import {
multipleBrandedTrails,
singleBrandedTrails,
trails,
trails as trailsFromFixtures,
} from '../../fixtures/manual/trails';
import { DecideContainerByTrails } from './DecideContainerByTrails';
import { FrontSection } from './FrontSection';
Expand All @@ -23,261 +23,157 @@ export default {

const ASPECT_RATIO = '5:4';

export const OneCardFast = () => {
const trails = trailsFromFixtures.map((trail) => ({
...trail,
trailText:
'Cat Ipsum Chase ball of string eat plants, meow, and throw up because I ate plants going to catch the red dot today going to catch the red dot today. Decide to want nothing to do with my owner today.',
}));

export const OneCard = () => {
return (
<FrontSection title="Fast - One card" editionId="UK">
<FrontSection title="One card" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 1)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
OneCardFast.storyName = 'Fast - One card';

export const TwoCardFast = () => {
export const TwoCards = () => {
return (
<FrontSection title="Fast - Two cards" editionId="UK">
<FrontSection title="Two cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 2)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
TwoCardFast.storyName = 'Fast - Two cards';

export const ThreeCardFast = () => {
export const ThreeCards = () => {
return (
<FrontSection title="Fast - Three cards" editionId="UK">
<FrontSection title="Three cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 3)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
ThreeCardFast.storyName = 'Fast - Three cards';

export const FourCardFast = () => {
export const FourCards = () => {
return (
<FrontSection title="Fast - Four cards" editionId="UK">
<FrontSection title="Four cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 4)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FourCardFast.storyName = 'Fast - Four cards';

export const FiveCardFast = () => {
export const FiveCards = () => {
return (
<FrontSection title="Fast - Five cards" editionId="UK">
<FrontSection title="Five cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 5)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FiveCardFast.storyName = 'Fast - Five cards';

export const SixCardFast = () => {
export const SixCards = () => {
return (
<FrontSection title="Fast - Six cards" editionId="UK">
<FrontSection title="Six cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 6)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
SixCardFast.storyName = 'Fast - Six cards';

export const SevenCardFast = () => {
export const SevenCards = () => {
return (
<FrontSection title="Fast - Seven cards" editionId="UK">
<FrontSection title="Seven cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 7)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
SevenCardFast.storyName = 'Fast - Seven cards';

export const EightCardFast = () => {
export const EightCards = () => {
return (
<FrontSection title="Fast - Eight cards" editionId="UK">
<FrontSection title="Eight cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 8)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};

EightCardFast.storyName = 'Fast - Eight cards';

export const TwelveCardFast = () => {
return (
<FrontSection title="Fast - Twelve cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 12)}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
TwelveCardFast.storyName = 'Fast - Twelve cards';

export const OneCardSlow = () => {
return (
<FrontSection title="Slow - One card" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 1)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
OneCardSlow.storyName = 'Slow - One card';

export const TwoCardSlow = () => {
return (
<FrontSection title="Slow - Two cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 2)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
TwoCardSlow.storyName = 'Slow - Two cards';

export const ThreeCardSlow = () => {
return (
<FrontSection title="Slow - Three cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 3)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
ThreeCardSlow.storyName = 'Slow - Three cards';

export const FourCardSlow = () => {
export const NineCards = () => {
return (
<FrontSection title="Slow - Four cards" editionId="UK">
<FrontSection title="Nine cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 4)}
speed="slow"
trails={trails.slice(0, 9)}
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FourCardSlow.storyName = 'Slow - Four cards';

export const FiveCardSlow = () => {
export const TenCards = () => {
return (
<FrontSection title="Slow - Five cards" editionId="UK">
<FrontSection title="Ten cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 5)}
speed="slow"
trails={trails.slice(0, 10)}
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FiveCardSlow.storyName = 'Slow - Five cards';

export const SixCardSlow = () => {
export const ElevenCards = () => {
return (
<FrontSection title="Slow - Six cards" editionId="UK">
<FrontSection title="Eleven cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 6)}
speed="slow"
trails={trails.slice(0, 11)}
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
SixCardSlow.storyName = 'Slow - Six cards';

export const SevenCardSlow = () => {
return (
<FrontSection title="Slow - Seven cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 7)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
SevenCardSlow.storyName = 'Slow - Seven cards';

export const EightCardSlow = () => {
return (
<FrontSection title="Slow - Eight cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 8)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};

EightCardSlow.storyName = 'Slow - Eight cards';

export const TwelveCardSlow = () => {
export const TwelveCards = () => {
return (
<FrontSection title="Slow - Twelve cards" editionId="UK">
<FrontSection title="Twelve cards" editionId="UK">
<DecideContainerByTrails
trails={trails.slice(0, 12)}
speed="slow"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
TwelveCardSlow.storyName = 'Slow - Twelve cards';

export const FiveCardWithSingleBranding = () => {
export const FiveCardsWithSingleBranding = () => {
return (
<FrontSection
title="Five cards with single branding"
Expand Down Expand Up @@ -308,25 +204,23 @@ export const FiveCardWithSingleBranding = () => {
>
<DecideContainerByTrails
trails={singleBrandedTrails}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FiveCardWithSingleBranding.storyName = 'Five cards with single branding';
FiveCardsWithSingleBranding.storyName = 'Five cards with single branding';

export const FiveCardWithMultipleBranding = () => {
export const FiveCardsWithMultipleBranding = () => {
return (
<FrontSection title="Five cards with multiple branding" editionId="UK">
<DecideContainerByTrails
trails={multipleBrandedTrails}
speed="fast"
imageLoading="eager"
aspectRatio={ASPECT_RATIO}
/>
</FrontSection>
);
};
FiveCardWithMultipleBranding.storyName = 'Five cards with multiple branding';
FiveCardsWithMultipleBranding.storyName = 'Five cards with multiple branding';
Loading
Loading