Merge pull request #4767 from guardian/ash/FixedSmallSlowIV.tsx

feat: Add support for fixed/small/slow-IV container type

dotcom-rendering/src/web/components/FixedSmallSlowIV.stories.tsx

@@ -0,0 +1,37 @@
+import { breakpoints } from '@guardian/source-foundations';
+import { ContainerLayout } from './ContainerLayout';
+import { FixedSmallSlowIV } from './FixedSmallSlowIV';
+
+import { trails } from '../../../fixtures/manual/trails';
+
+export default {
+	component: FixedSmallSlowIV,
+	title: 'Components/FixedSmallSlowIV',
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.mobileMedium,
+				breakpoints.mobileLandscape,
+				breakpoints.phablet,
+				breakpoints.tablet,
+				breakpoints.desktop,
+				breakpoints.leftCol,
+				breakpoints.wide,
+			],
+		},
+	},
+};
+
+export const Default = () => (
+	<ContainerLayout
+		title="FixedSmallSlowIV"
+		showTopBorder={true}
+		sideBorders={true}
+		padContent={false}
+		centralBorder="partial"
+	>
+		<FixedSmallSlowIV trails={trails} />
+	</ContainerLayout>
+);
+Default.story = { name: 'FixedSmallSlowIV' };

dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx

@@ -0,0 +1,56 @@
+import { ArticleDesign } from '@guardian/libs';
+import { Card } from './Card/Card';
+import { LI } from './Card/components/LI';
+import { UL } from './Card/components/UL';
+
+type Props = {
+	trails: TrailType[];
+};
+
+export const FixedSmallSlowIV = ({ trails }: Props) => {
+	const slicedTrails = trails.slice(0, 4);
+
+	return (
+		<UL direction="row">
+			{slicedTrails.map((trail, index) => {
+				return (
+					<LI
+						padSides={true}
+						showDivider={index > 0}
+						padBottomOnMobile={true}
+					>
+						<Card
+							linkTo={trail.url}
+							format={trail.format}
+							headlineText={trail.headline}
+							trailText={trail.trailText}
+							headlineSize="medium"
+							byline={trail.byline}
+							showByline={trail.showByline}
+							showQuotes={
+								trail.format.design === ArticleDesign.Comment ||
+								trail.format.design === ArticleDesign.Letter
+							}
+							webPublicationDate={trail.webPublicationDate}
+							kickerText={trail.kickerText}
+							showPulsingDot={
+								trail.format.design === ArticleDesign.LiveBlog
+							}
+							showSlash={true}
+							showClock={false}
+							imageUrl={trail.image}
+							imagePosition="top"
+							imagePositionOnMobile="left"
+							imageSize="medium"
+							mediaType={trail.mediaType}
+							mediaDuration={trail.mediaDuration}
+							commentCount={trail.commentCount}
+							starRating={trail.starRating}
+							branding={trail.branding}
+						/>
+					</LI>
+				);
+			})}
+		</UL>
+	);
+};

dotcom-rendering/src/web/lib/DecideContainer.tsx

@@ -1,6 +1,7 @@
 import { DynamicFast } from '../components/DynamicFast';
 import { DynamicSlow } from '../components/DynamicSlow';
 import { FixedLargeSlowXIV } from '../components/FixedLargeSlowXIV';
+import { FixedSmallSlowIV } from '../components/FixedSmallSlowIV';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -15,6 +16,8 @@ export const DecideContainer = ({ trails, containerType }: Props) => {
 			return <DynamicSlow trails={trails} />;
 		case 'fixed/large/slow-XIV':
 			return <FixedLargeSlowXIV trails={trails} />;
+		case 'fixed/small/slow-IV':
+			return <FixedSmallSlowIV trails={trails} />;
 		default:
 			return <p>{containerType} is not yet supported</p>;
 	}