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 = () => ( + + + +); +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..35506113ffe --- /dev/null +++ b/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 ( + + ); +}; 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 ; case 'fixed/large/slow-XIV': return ; + case 'fixed/small/slow-IV': + return ; default: return

{containerType} is not yet supported

; }