From 2ebcd02d0b5afb00b72554b9d1ff8589dd21ae17 Mon Sep 17 00:00:00 2001
From: Ashleigh Carr <ashcorr20@gmail.com>
Date: Wed, 27 Apr 2022 13:32:35 +0000
Subject: [PATCH 1/2] feat: Add fixed/small/slow-IV container

---
 .../components/FixedSmallSlowIV.stories.tsx   | 37 ++++++++++++
 .../src/web/components/FixedSmallSlowIV.tsx   | 57 +++++++++++++++++++
 .../src/web/lib/DecideContainer.tsx           |  3 +
 3 files changed, 97 insertions(+)
 create mode 100644 dotcom-rendering/src/web/components/FixedSmallSlowIV.stories.tsx
 create mode 100644 dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx

diff --git a/dotcom-rendering/src/web/components/FixedSmallSlowIV.stories.tsx b/dotcom-rendering/src/web/components/FixedSmallSlowIV.stories.tsx
new file mode 100644
index 00000000000..b1075766226
--- /dev/null
+++ b/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' };
diff --git a/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx b/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx
new file mode 100644
index 00000000000..cdb1f7b45c7
--- /dev/null
+++ b/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx
@@ -0,0 +1,57 @@
+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
+						percentage="25%"
+						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>
+	);
+};
diff --git a/dotcom-rendering/src/web/lib/DecideContainer.tsx b/dotcom-rendering/src/web/lib/DecideContainer.tsx
index 5ef15fe7343..1ce82fd76c5 100644
--- a/dotcom-rendering/src/web/lib/DecideContainer.tsx
+++ b/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>;
 	}

From a58fba7124dfb5126ee7a63c7a9560ab1ba74d72 Mon Sep 17 00:00:00 2001
From: Ashleigh Carr <ashcorr20@gmail.com>
Date: Thu, 28 Apr 2022 10:51:48 +0100
Subject: [PATCH 2/2] chore: Remove unecessary percentage in
 fixed/small/slow-IV

Co-authored-by: Oliver Lloyd <oliverlloyd@users.noreply.github.com>
---
 dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx b/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx
index cdb1f7b45c7..35506113ffe 100644
--- a/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx
+++ b/dotcom-rendering/src/web/components/FixedSmallSlowIV.tsx
@@ -15,7 +15,6 @@ export const FixedSmallSlowIV = ({ trails }: Props) => {
 			{slicedTrails.map((trail, index) => {
 				return (
 					<LI
-						percentage="25%"
 						padSides={true}
 						showDivider={index > 0}
 						padBottomOnMobile={true}