Skip to content

Commit

Permalink
Revert "Revert "Merge pull request #1606 from guardian/display-const-…
Browse files Browse the repository at this point in the history 
…enum""
  • Loading branch information
@oliverlloyd
oliverlloyd committed Jun 24, 2020
1 parent c2c3bd9 commit 72d7fc8
Show file tree
Hide file tree
Showing 33 changed files with 193 additions and 185 deletions.
6 changes: 5 additions & 1 deletion index.d.ts
View file
Expand Up @@ -9,7 +9,11 @@ type RealPillars = 'news' | 'opinion' | 'sport' | 'culture' | 'lifestyle';
type FakePillars = 'labs';
type Pillar = RealPillars | FakePillars;

type Display = 'standard' | 'immersive' | 'showcase';
declare const enum Display {
Standard,
Immersive,
Showcase,
}

// https://github.com/guardian/content-api-scala-client/blob/master/client/src/main/scala/com.gu.contentapi.client/utils/DesignType.scala
type DesignType =
Expand Down
2 changes: 1 addition & 1 deletion src/web/components/ArticleBody.tsx
View file
Expand Up @@ -30,7 +30,7 @@ const bodyStyle = (display: Display) => css`
}
h2 {
${display === 'immersive'
${display === Display.Immersive
? headline.medium({ fontWeight: 'light' })
: headline.xxsmall({ fontWeight: 'bold' })};
}
Expand Down
48 changes: 24 additions & 24 deletions src/web/components/ArticleHeadline.stories.tsx
View file
Expand Up @@ -24,7 +24,7 @@ export const ArticleStory = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is how the default headline looks"
display="standard"
display={Display.Standard}
designType="Article"
pillar="news"
tags={[]}
Expand All @@ -44,7 +44,7 @@ export const oldHeadline = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is an old headline"
display="standard"
display={Display.Standard}
designType="Article"
pillar="news"
tags={[
Expand All @@ -71,7 +71,7 @@ export const Feature = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is a Feature headline, it has colour applied based on pillar"
display="standard"
display={Display.Standard}
designType="Feature"
pillar="lifestyle"
tags={[]}
Expand All @@ -96,7 +96,7 @@ export const ShowcaseInterview = () => (
>
<ArticleHeadline
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
display="showcase"
display={Display.Showcase}
designType="Interview"
pillar="culture"
tags={[]}
Expand All @@ -105,7 +105,7 @@ export const ShowcaseInterview = () => (
/>
</div>
<MainMedia
display="standard"
display={Display.Standard}
designType="Article"
hideCaption={true}
elements={mainMediaElements}
Expand All @@ -126,19 +126,19 @@ export const Interview = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
display="standard"
display={Display.Standard}
designType="Interview"
pillar="culture"
tags={[]}
byline="Byline text"
/>
<Standfirst
display="standard"
display={Display.Standard}
designType="Interview"
standfirst="This is the standfirst text. We include here to demonstrate spacing in this case where we have a Interview type article that does not have a showcase main media element"
/>
<MainMedia
display="standard"
display={Display.Standard}
designType="Article"
hideCaption={true}
elements={mainMediaElements}
Expand All @@ -159,7 +159,7 @@ export const Comment = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="Yes, the billionaire club is one we really need to shut down"
display="standard"
display={Display.Standard}
designType="Comment"
pillar="opinion"
tags={[]}
Expand All @@ -179,7 +179,7 @@ export const Analysis = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is an Analysis headline, it's underlined. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
display="standard"
display={Display.Standard}
designType="Analysis"
pillar="news"
tags={[]}
Expand All @@ -199,7 +199,7 @@ export const Media = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is Media"
display="standard"
display={Display.Standard}
designType="Media"
pillar="news"
tags={[]}
Expand All @@ -219,7 +219,7 @@ export const Review = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is Review"
display="standard"
display={Display.Standard}
designType="Review"
pillar="news"
tags={[]}
Expand All @@ -239,7 +239,7 @@ export const AdvertisementFeature = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is AdvertisementFeature"
display="standard"
display={Display.Standard}
designType="AdvertisementFeature"
pillar="news"
tags={[]}
Expand All @@ -259,7 +259,7 @@ export const PhotoEssay = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is PhotoEssay"
display="standard"
display={Display.Standard}
designType="PhotoEssay"
pillar="news"
tags={[]}
Expand All @@ -279,7 +279,7 @@ export const Quiz = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is Quiz"
display="standard"
display={Display.Standard}
designType="Quiz"
pillar="news"
tags={[]}
Expand All @@ -299,7 +299,7 @@ export const GuardianLabs = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is GuardianLabs"
display="standard"
display={Display.Standard}
designType="GuardianLabs"
pillar="news"
tags={[]}
Expand All @@ -319,7 +319,7 @@ export const Recipe = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is Recipe"
display="standard"
display={Display.Standard}
designType="Recipe"
pillar="news"
tags={[]}
Expand All @@ -339,7 +339,7 @@ export const Immersive = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when display type is Immersive"
display="immersive"
display={Display.Immersive}
designType="Article"
pillar="news"
tags={[]}
Expand All @@ -359,7 +359,7 @@ export const ImmersiveNoMainMedia = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when display type is Immersive, but with no main media"
display="immersive"
display={Display.Immersive}
designType="Article"
pillar="news"
tags={[]}
Expand All @@ -384,7 +384,7 @@ export const ImmersiveComment = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when display type is Immersive and designType Comment"
display="immersive"
display={Display.Immersive}
designType="Comment"
pillar="news"
tags={[]}
Expand All @@ -404,7 +404,7 @@ export const GuardianView = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is GuardianView"
display="standard"
display={Display.Standard}
designType="GuardianView"
pillar="news"
tags={[]}
Expand All @@ -424,7 +424,7 @@ export const MatchReport = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is MatchReport"
display="standard"
display={Display.Standard}
designType="MatchReport"
pillar="news"
tags={[]}
Expand All @@ -444,7 +444,7 @@ export const SpecialReport = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is SpecialReport"
display="standard"
display={Display.Standard}
designType="SpecialReport"
pillar="news"
tags={[]}
Expand All @@ -464,7 +464,7 @@ export const Live = () => (
<ArticleContainer>
<ArticleHeadline
headlineString="This is the headline you see when design type is Live"
display="standard"
display={Display.Standard}
designType="Live"
pillar="news"
tags={[]}
Expand Down
7 changes: 4 additions & 3 deletions src/web/components/ArticleHeadline.tsx
View file
Expand Up @@ -172,7 +172,7 @@ export const ArticleHeadline = ({
noMainMedia,
}: Props) => {
switch (display) {
case 'immersive': {
case Display.Immersive: {
switch (designType) {
case 'Comment':
case 'GuardianView':
Expand Down Expand Up @@ -243,8 +243,9 @@ export const ArticleHeadline = ({
}
break;
}
case 'showcase':
case 'standard': {
case Display.Showcase:
case Display.Standard:
default: {
switch (designType) {
case 'Review':
case 'Recipe':
Expand Down
14 changes: 7 additions & 7 deletions src/web/components/ArticleMeta.stories.tsx
View file
Expand Up @@ -50,7 +50,7 @@ export const ArticleStory = () => {
return (
<Container>
<ArticleMeta
display="standard"
display={Display.Standard}
designType="Article"
pillar="news"
pageId=""
Expand Down Expand Up @@ -89,7 +89,7 @@ export const BrandingStory = () => {
aboutThisLink:
'https://www.theguardian.com/info/2016/jan/25/content-funding',
}}
display="standard"
display={Display.Standard}
designType="Article"
pillar="news"
pageId=""
Expand All @@ -111,7 +111,7 @@ export const FeatureStory = () => {
return (
<Container>
<ArticleMeta
display="standard"
display={Display.Standard}
designType="Feature"
pillar="culture"
pageId=""
Expand All @@ -132,7 +132,7 @@ export const CommentStory = () => {
return (
<Container>
<ArticleMeta
display="standard"
display={Display.Standard}
designType="Comment"
pillar="opinion"
pageId=""
Expand All @@ -153,7 +153,7 @@ export const InterviewStory = () => {
return (
<Container>
<ArticleMeta
display="standard"
display={Display.Standard}
designType="Interview"
pillar="lifestyle"
pageId=""
Expand All @@ -174,7 +174,7 @@ export const ImmersiveStory = () => {
return (
<Container>
<ArticleMeta
display="immersive"
display={Display.Immersive}
designType="Immersive"
pillar="news"
pageId=""
Expand All @@ -195,7 +195,7 @@ export const TwoContributorsStory = () => {
return (
<Container>
<ArticleMeta
display="standard"
display={Display.Standard}
designType="Feature"
pillar="sport"
pageId=""
Expand Down
18 changes: 9 additions & 9 deletions src/web/components/ArticleMeta.tsx
View file
Expand Up @@ -80,9 +80,9 @@ const metaContainer = ({
designType: DesignType;
}) => {
switch (display) {
case 'immersive':
case 'showcase':
case 'standard': {
case Display.Immersive:
case Display.Showcase:
case Display.Standard: {
switch (designType) {
case 'PhotoEssay':
return css`
Expand Down Expand Up @@ -142,10 +142,10 @@ const getAuthorName = (tags: TagType[]) => {

const shouldShowAvatar = (designType: DesignType, display: Display) => {
switch (display) {
case 'immersive':
case Display.Immersive:
return false;
case 'showcase':
case 'standard': {
case Display.Showcase:
case Display.Standard: {
switch (designType) {
case 'Feature':
case 'Review':
Expand Down Expand Up @@ -174,10 +174,10 @@ const shouldShowAvatar = (designType: DesignType, display: Display) => {

const shouldShowContributor = (designType: DesignType, display: Display) => {
switch (display) {
case 'immersive':
case Display.Immersive:
return false;
case 'showcase':
case 'standard': {
case Display.Showcase:
case Display.Standard: {
switch (designType) {
case 'Comment':
case 'GuardianView':
Expand Down
2 changes: 1 addition & 1 deletion src/web/components/ArticleStandfirst.stories.tsx
View file
Expand Up @@ -21,7 +21,7 @@ export const defaultStory = () => {
</LeftColumn>
<ArticleContainer>
<ArticleStandfirst
display="standard"
display={Display.Standard}
designType="Article"
standfirst="This the default standfirst text. Aut explicabo officia delectus omnis repellendus voluptas"
pillar="news"
Expand Down

0 comments on commit 72d7fc8

Please sign in to comment.