Skip to content

Commit

Permalink
Refactor test format in PullQuoteComponents.stories.tsx
Browse files Browse the repository at this point in the history 
Co-authored-by: Max Duval <max.duval@guardian.co.uk>
Co-authored-by: Olly Namey <olly.namey@guardian.co.uk>
  • Loading branch information
@ioannakok @mxdvl
3 people committed Nov 1, 2022
1 parent 650a3ae commit 8688230
Showing 1 changed file with 106 additions and 73 deletions.
179 changes: 106 additions & 73 deletions dotcom-rendering/src/web/components/PullQuoteBlockComponent.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,47 +13,10 @@ export default {
title: 'Components/PullQuoteBlockComponent',
};

const format = {
news: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticlePillar.News,
},
opinion: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Comment,
theme: ArticlePillar.Opinion,
},
sport: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticlePillar.Sport,
},
culture: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticlePillar.Culture,
},
lifestyle: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticlePillar.Lifestyle,
},
specialReport: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticleSpecial.SpecialReport,
},
specialReportAlt: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticleSpecial.SpecialReportAlt,
},
labs: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticleSpecial.Labs,
},
const defaultFormat = {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: ArticlePillar.News,
};

const photoEssayNews = {
Expand All @@ -64,15 +27,20 @@ const photoEssayNews = {

// Inline
export const SportInline = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Sport,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.sport}
palette={decidePalette(format.sport)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -85,15 +53,20 @@ SportInline.story = {
};

export const LabsInline = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.Labs,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.labs}
palette={decidePalette(format.labs)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -106,15 +79,20 @@ LabsInline.story = {
};

export const LifestyleInline = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Lifestyle,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.lifestyle}
palette={decidePalette(format.lifestyle)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -127,15 +105,20 @@ LifestyleInline.story = {
};

export const CultureInline = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Culture,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.culture}
palette={decidePalette(format.culture)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -155,8 +138,8 @@ export const NewsInline = () => {
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.news}
palette={decidePalette(format.news)}
format={defaultFormat}
palette={decidePalette(defaultFormat)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -169,15 +152,20 @@ NewsInline.story = {
};

export const OpinionInline = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Opinion,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.opinion}
palette={decidePalette(format.opinion)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -190,15 +178,20 @@ OpinionInline.story = {
};

export const SpecialReportInline = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.SpecialReport,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.specialReport}
palette={decidePalette(format.specialReport)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -212,15 +205,20 @@ SpecialReportInline.story = {

// Supporting
export const SportSupporting = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.News,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.sport}
palette={decidePalette(format.sport)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -233,15 +231,20 @@ SportSupporting.story = {
};

export const LabsSupporting = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.Labs,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.labs}
palette={decidePalette(format.labs)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -254,15 +257,20 @@ LabsSupporting.story = {
};

export const LifestyleSupporting = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Lifestyle,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.lifestyle}
palette={decidePalette(format.lifestyle)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -275,15 +283,20 @@ LifestyleSupporting.story = {
};

export const CultureSupporting = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Culture,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.culture}
palette={decidePalette(format.culture)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -303,8 +316,8 @@ export const NewsSupporting = () => {
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.news}
palette={decidePalette(format.news)}
format={defaultFormat}
palette={decidePalette(defaultFormat)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -317,15 +330,20 @@ NewsSupporting.story = {
};

export const OpinionSupporting = () => {
const format = {
...defaultFormat,
theme: ArticlePillar.Opinion,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.opinion}
palette={decidePalette(format.opinion)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -338,15 +356,20 @@ OpinionSupporting.story = {
};

export const SpecialReportSupporting = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.SpecialReport,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.specialReport}
palette={decidePalette(format.specialReport)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -359,15 +382,20 @@ SpecialReportSupporting.story = {
};

export const SpecialReportAltInline = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.SpecialReportAlt,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.specialReportAlt}
palette={decidePalette(format.specialReportAlt)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="inline"
attribution="Julie-Lou Dubreuilh"
Expand All @@ -380,15 +408,20 @@ SpecialReportAltInline.story = {
};

export const SpecialReportAltSupporting = () => {
const format = {
...defaultFormat,
theme: ArticleSpecial.SpecialReportAlt,
};

return (
<Section
showTopBorder={false}
centralBorder="full"
showSideBorders={false}
>
<PullQuoteBlockComponent
format={format.specialReportAlt}
palette={decidePalette(format.specialReportAlt)}
format={format}
palette={decidePalette(format)}
html="Even if part of my job is filthy, I still love it – it’s my work"
role="supporting"
attribution="Julie-Lou Dubreuilh"
Expand Down

0 comments on commit 8688230

Please sign in to comment.