Skip to content
This repository was archived by the owner on Sep 1, 2021. It is now read-only.

LIVE-1581: Item Extras Context (RFC) #1152

Closed
faresite wants to merge 8 commits into from
Closed

LIVE-1581: Item Extras Context (RFC) #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e45f63c
create Item context
Feb 8, 2021
767410f
useItem in header components
Feb 8, 2021
5bf1f67
item context wrapper
Feb 11, 2021
ba6271b
itemExtras
Feb 11, 2021
08e4a3a
get rid of getFormat in editions
Feb 11, 2021
45f3afe
get rid of getThemeStyles
Feb 11, 2021
97f076f
rename to item extras
Feb 11, 2021
b75ff6c
more renames
Feb 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/editions/article.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const Article: FC<Props> = ({ item }) => {
<article css={articleWrapperStyles(item)}>
<div css={headerBackgroundStyles(item)}>
<section css={getSectionStyles(item)}>
<Header item={item} />
<Header />
</section>
</div>
<div
Expand Down
15 changes: 6 additions & 9 deletions src/components/editions/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,12 @@ import { css } from '@emotion/core';
import type { Sizes } from '@guardian/image-rendering';
import { Img } from '@guardian/image-rendering';
import { map, none, some, withDefault } from '@guardian/types';
import type { Item } from 'item';
import { getFormat } from 'item';
import { useItemExtras } from 'itemExtrasContext';
import { pipe2 } from 'lib';
import type { FC, ReactElement } from 'react';

// ----- Component ----- //

interface Props {
item: Item;
}

const imgStyles = css`
background: none;
width: 125px;
Expand All @@ -25,9 +20,11 @@ const sizes: Sizes = {
default: '105px',
};

const Avatar: FC<Props> = ({ item }) => {
const [contributor] = item.contributors;
const format = getFormat(item);
const Avatar: FC = () => {
const {
contributors: [contributor],
format,
} = useItemExtras();

return pipe2(
contributor.image,
Expand Down
18 changes: 9 additions & 9 deletions src/components/editions/byline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ import type {
} from '@guardian/src-foundations/typography/types';
import type { Format } from '@guardian/types';
import { Design, Display } from '@guardian/types';
import type { Item } from 'item';
import { getFormat } from 'item';
import { useItemExtras } from 'itemExtrasContext';
import { maybeRender } from 'lib';
import type { FC, ReactNode } from 'react';
import { getThemeStyles } from 'themeStyles';
import EditionsAvatar from './avatar';
import { ShareIcon } from './shareIcon';
import {
Expand Down Expand Up @@ -192,7 +190,6 @@ const getStyles = (format: Format, kickerColor: string): SerializedStyles => {
// ----- Component ----- //

interface Props {
item: Item;
shareIcon?: boolean;
large?: boolean;
avatar?: boolean;
Expand Down Expand Up @@ -221,16 +218,19 @@ const renderText = (
}
});

const Byline: FC<Props> = ({ item, shareIcon, large, avatar }) => {
const format = getFormat(item);
const { kicker: kickerColor } = getThemeStyles(format.theme);
const Byline: FC<Props> = ({ shareIcon, large, avatar }) => {
const {
bylineHtml,
format,
themeStyles: { kicker: kickerColor },
} = useItemExtras();

const ignoreKickerColour = (format: Format): boolean =>
format.design === Design.Media || format.display === Display.Immersive;

const bylineColor = ignoreKickerColour(format) ? neutral[100] : kickerColor;

return maybeRender(item.bylineHtml, (byline) => (
return maybeRender(bylineHtml, (byline) => (
<div css={getStyles(format, bylineColor)}>
<address>{renderText(byline, bylineColor, large)}</address>
{shareIcon && (
Expand All @@ -240,7 +240,7 @@ const Byline: FC<Props> = ({ item, shareIcon, large, avatar }) => {
)}
{avatar && (
<div css={avatarWrapperStyles}>
<EditionsAvatar item={item} />
<EditionsAvatar />
</div>
)}
</div>
Expand Down
20 changes: 9 additions & 11 deletions src/components/editions/galleryImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,22 @@ import { Img } from '@guardian/image-rendering';
import { neutral, remSpace } from '@guardian/src-foundations';
import { from } from '@guardian/src-foundations/mq';
import { textSans } from '@guardian/src-foundations/typography';
import type { Format, Option } from '@guardian/types';
import type { Option } from '@guardian/types';
import { map, none, some, withDefault } from '@guardian/types';
import type { Image } from 'bodyElement';
import { useItemExtras } from 'itemExtrasContext';
import { maybeRender, pipe2 } from 'lib';
import type { FC } from 'react';
import React from 'react';
import { getThemeStyles } from 'themeStyles';

const width = '100%';

type Props = {
image: Image;
format: Format;
};

type CaptionProps = {
details: CaptionDetails;
format: Format;
};

type CaptionDetails = {
Expand Down Expand Up @@ -126,8 +124,10 @@ const CaptionDescription: FC<{ description: string }> = ({ description }) => {
return <p css={styles}>{description}</p>;
};

const GalleryImageCaption: FC<CaptionProps> = ({ details, format }) => {
const { kicker } = getThemeStyles(format.theme);
const GalleryImageCaption: FC<CaptionProps> = ({ details }) => {
const {
themeStyles: { kicker },
} = useItemExtras();
const tabletWidth = '170px';
const styles = css`
${from.tablet} {
Expand All @@ -149,7 +149,8 @@ const GalleryImageCaption: FC<CaptionProps> = ({ details, format }) => {
);
};

const GalleryImage: FC<Props> = ({ image, format }) => {
const GalleryImage: FC<Props> = ({ image }) => {
const { format } = useItemExtras();
return (
<figure css={styles} className="editions-gallery-figure">
<Img
Expand All @@ -164,10 +165,7 @@ const GalleryImage: FC<Props> = ({ image, format }) => {
credit: none,
})}
/>
<GalleryImageCaption
details={getCaptionDetails(image.caption)}
format={format}
/>
<GalleryImageCaption details={getCaptionDetails(image.caption)} />
</figure>
);
};
Expand Down
162 changes: 79 additions & 83 deletions src/components/editions/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import Series from 'components/editions/series';
import Standfirst from 'components/editions/standfirst';
import type { Item } from 'item';
import { isPicture } from 'item';
import type { FC, ReactElement } from 'react';
import { useItemExtras } from 'itemExtrasContext';
import type { FC } from 'react';
import {
articleMarginStyles,
headerBackgroundColour,
Expand All @@ -32,10 +33,6 @@ const tablet = tabletContentWidth + 12;

// ----- Component ----- //

interface HeaderProps {
item: Item;
}

const headerStyles = css`
${sidePadding}
`;
Expand Down Expand Up @@ -142,129 +139,128 @@ const linesBorderStyles = css`
border-right: 1px solid ${border.secondary};
`;

const StandardHeader: FC<HeaderProps> = ({ item }) => (
const StandardHeader: FC = () => (
<header css={headerStyles}>
<HeaderMedia item={item} />
<Series item={item} />
<Headline item={item} />
<Standfirst item={item} />
<HeaderMedia />
<Series />
<Headline />
<Standfirst />
<Lines />
<Byline item={item} shareIcon />
<Byline shareIcon />
</header>
);

const ShowcaseHeader: FC<HeaderProps> = ({ item }) => (
const ShowcaseHeader: FC = () => (
<header css={headerStyles}>
<Series item={item} />
<Headline item={item} />
<HeaderMedia item={item} />
<Standfirst item={item} />
<Series />
<Headline />
<HeaderMedia />
<Standfirst />
<Lines />
<Byline item={item} shareIcon />
<Byline shareIcon />
</header>
);

const AnalysisHeader: FC<HeaderProps> = ({ item }) => (
const AnalysisHeader: FC = () => (
<header css={headerStyles}>
<HeaderMedia item={item} />
<Headline item={item} />
<Byline item={item} large />
<HeaderMedia />
<Headline />
<Byline large />
<Lines />
<Standfirst item={item} shareIcon />
<Standfirst shareIcon />
</header>
);

const CommentHeader: FC<HeaderProps> = ({ item }) => (
const CommentHeader: FC = () => (
<header css={headerStyles}>
<HeaderMedia item={item} />
<Headline item={item} />
<Byline item={item} large avatar />
<HeaderMedia />
<Headline />
<Byline large avatar />
<Lines />
<Standfirst item={item} shareIcon />
<Standfirst shareIcon />
</header>
);

const InterviewHeader: FC<HeaderProps> = ({ item }) => (
<header>
<HeaderMedia item={item} />
<div css={interviewStyles(item)}>
<Headline item={item} />
<Standfirst item={item} />
</div>
<Lines className={linesBorderStyles} />
<Byline item={item} shareIcon />
</header>
);
const InterviewHeader: FC = () => {
const itemExtras = useItemExtras();
return (
<header>
<HeaderMedia />
<div css={interviewStyles(itemExtras)}>
<Headline />
<Standfirst />
</div>
<Lines className={linesBorderStyles} />
<Byline shareIcon />
</header>
);
};

const GalleryHeader: FC<HeaderProps> = ({ item }) => (
const GalleryHeader: FC = () => (
<header css={galleryHeaderStyles}>
<HeaderMedia item={item} />
<HeaderMedia />
<div css={galleryInnerHeaderStyles}>
<Headline item={item} />
<Headline />
<div css={galleryHeaderBorderStyles}>
<Standfirst item={item} />
<Standfirst />
<Lines className={galleryLinesStyles} />
<Byline item={item} shareIcon />
<Byline shareIcon />
</div>
</div>
</header>
);

const PictureHeader: FC<HeaderProps> = ({ item }) => (
const PictureHeader: FC = () => (
<header css={pictureHeaderStyles}>
<div css={galleryInnerHeaderStyles}>
<div css={galleryHeaderBorderStyles}>
<Headline item={item} />
<Standfirst item={item} />
<Headline />
<Standfirst />
<Lines className={galleryLinesStyles} />
<Byline item={item} shareIcon />
<Byline shareIcon />
</div>
</div>
<HeaderMedia item={item} />
<HeaderMedia />
</header>
);

const ImmersiveHeader: FC<HeaderProps> = ({ item }) => (
<header>
<HeaderMedia item={item} />
<div css={immersiveHeadlineStyles(item)}>
<Headline item={item} />
</div>
<div css={immersiveStandfirstStyles}>
<Standfirst item={item} />
<Lines />
</div>
<Byline item={item} shareIcon />
</header>
);
const ImmersiveHeader: FC = () => {
const itemExtras = useItemExtras();
return (
<header>
<HeaderMedia />
<div css={immersiveHeadlineStyles(itemExtras)}>
<Headline />
</div>
<div css={immersiveStandfirstStyles}>
<Standfirst />
<Lines />
</div>
<Byline shareIcon />
</header>
);
};

const renderArticleHeader = (item: Item): ReactElement<HeaderProps> => {
const Container: FC = () => {
const { display, design, tags } = useItemExtras();
// Display.Immersive needs to come before Design.Interview
if (item.display === Display.Immersive) {
return <ImmersiveHeader item={item} />;
} else if (item.design === Design.Interview) {
return <InterviewHeader item={item} />;
} else if (item.display === Display.Showcase) {
return <ShowcaseHeader item={item} />;
} else if (item.design === Design.Analysis) {
return <AnalysisHeader item={item} />;
} else if (item.design === Design.Comment) {
return <CommentHeader item={item} />;
} else if (item.design === Design.Media) {
return isPicture(item.tags) ? (
<PictureHeader item={item} />
) : (
<GalleryHeader item={item} />
);
if (display === Display.Immersive) {
return <ImmersiveHeader />;
} else if (design === Design.Interview) {
return <InterviewHeader />;
} else if (display === Display.Showcase) {
return <ShowcaseHeader />;
} else if (design === Design.Analysis) {
return <AnalysisHeader />;
} else if (design === Design.Comment) {
return <CommentHeader />;
} else if (design === Design.Media) {
return isPicture(tags) ? <PictureHeader /> : <GalleryHeader />;
} else {
return <StandardHeader item={item} />;
return <StandardHeader />;
}
};

const Container: FC<HeaderProps> = ({ item }) => {
return <>{renderArticleHeader(item)}</>;
};

// ----- Exports ----- //

export default Container;
Loading