From 653516b747381b31a7d0b86fbf0109f653956b94 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 30 Jan 2023 14:07:57 +0000 Subject: [PATCH 1/2] feat: remove kicker slash test --- .../src/web/components/Kicker.tsx | 40 ++++--------------- 1 file changed, 7 insertions(+), 33 deletions(-) diff --git a/dotcom-rendering/src/web/components/Kicker.tsx b/dotcom-rendering/src/web/components/Kicker.tsx index 454deb8bc14..dc122c51cb7 100644 --- a/dotcom-rendering/src/web/components/Kicker.tsx +++ b/dotcom-rendering/src/web/components/Kicker.tsx @@ -18,14 +18,6 @@ const kickerStyles = (colour: string) => css` display: inline-block; `; -const slashStyles = css` - &::after { - content: '/'; - display: inline-block; - margin-left: 4px; - } -`; - export const Kicker = ({ text, color, @@ -33,31 +25,13 @@ export const Kicker = ({ showSlash = true, hideLineBreak, }: Props) => { - const [removeKickerSlash, setRemoveKickerSlash] = useState(false); - - useEffect(() => { - setRemoveKickerSlash( - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- window not available on server - window?.guardian.config.tests.removeKickerSlashesVariant === - 'variant', - ); - }, []); - - if (removeKickerSlash) { - return ( - <> - - {showPulsingDot && } - {text} - - {!hideLineBreak &&
} - - ); - } return ( - - {showPulsingDot && } - {text} - + <> + + {showPulsingDot && } + {text} + + {!hideLineBreak &&
} + ); }; From 6e97cff394d6a8a7358341a54d4004baaf7b41c9 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 30 Jan 2023 14:08:16 +0000 Subject: [PATCH 2/2] Refactor: remove unusued showSlash prop --- .../src/web/components/Card/Card.stories.tsx | 20 ------------ .../src/web/components/Card/Card.tsx | 11 ------- .../web/components/CardHeadline.stories.tsx | 23 ++----------- .../src/web/components/CardHeadline.tsx | 3 -- .../src/web/components/FrontCard.tsx | 1 - .../src/web/components/Kicker.tsx | 3 -- .../web/components/LinkHeadline.stories.tsx | 32 +------------------ .../src/web/components/LinkHeadline.tsx | 3 -- .../web/components/MostViewedFooterItem.tsx | 1 - .../web/components/MostViewedRightItem.tsx | 1 - .../src/web/components/SupportingContent.tsx | 1 - 11 files changed, 3 insertions(+), 96 deletions(-) diff --git a/dotcom-rendering/src/web/components/Card/Card.stories.tsx b/dotcom-rendering/src/web/components/Card/Card.stories.tsx index 085cd6da230..c3cc12c542e 100644 --- a/dotcom-rendering/src/web/components/Card/Card.stories.tsx +++ b/dotcom-rendering/src/web/components/Card/Card.stories.tsx @@ -433,26 +433,6 @@ export const WithQuotesSpecialReportAlt = () => { ); }; -export const WithNoSlash = () => { - return ( - - - - ); -}; - -export const WithNoLinebreak = () => { - return ( - - - - ); -}; - export const WithAnAvatar = () => { return ( <> diff --git a/dotcom-rendering/src/web/components/Card/Card.tsx b/dotcom-rendering/src/web/components/Card/Card.tsx index 0862a536105..4bef7048792 100644 --- a/dotcom-rendering/src/web/components/Card/Card.tsx +++ b/dotcom-rendering/src/web/components/Card/Card.tsx @@ -58,10 +58,6 @@ export type Props = { showMainVideo?: boolean; kickerText?: string; showPulsingDot?: boolean; - /** Sometimes kickers and headlines are separated by a slash */ - showSlash?: boolean; - /** Sometimes kickers and headlines are separated by a linebreak */ - hideLineBreak?: boolean; starRating?: number; minWidthInPixels?: number; /** Used for Ophan tracking */ @@ -233,8 +229,6 @@ export const Card = ({ showMainVideo, kickerText, showPulsingDot, - showSlash, - hideLineBreak, starRating, minWidthInPixels, dataLinkName, @@ -414,11 +408,6 @@ export const Card = ({ format.design === ArticleDesign.LiveBlog || showPulsingDot } - showSlash={ - format.design === ArticleDesign.LiveBlog || - showSlash - } - hideLineBreak={hideLineBreak} byline={byline} showByline={showByline} isDynamo={isDynamo} diff --git a/dotcom-rendering/src/web/components/CardHeadline.stories.tsx b/dotcom-rendering/src/web/components/CardHeadline.stories.tsx index 3d8f6373f36..54298d72eca 100644 --- a/dotcom-rendering/src/web/components/CardHeadline.stories.tsx +++ b/dotcom-rendering/src/web/components/CardHeadline.stories.tsx @@ -211,23 +211,7 @@ export const liveStory = () => ( ); liveStory.story = { name: 'With Live kicker' }; -export const noSlash = () => ( -
- -
-); -noSlash.story = { name: 'With Live kicker but no slash' }; - -export const noLinebreak = () => ( +export const noLineBreak = () => (
( />
); -noSlash.story = { name: 'With Live kicker but no slash' }; +noLineBreak.story = { name: 'With Live kicker but no line break' }; export const pulsingDot = () => (
@@ -308,7 +292,6 @@ export const OpinionKicker = () => ( }} showQuotes={true} kickerText="George Monbiot" - showSlash={true} size={size} />
@@ -335,7 +318,6 @@ export const SpecialReport = () => ( }} showQuotes={true} kickerText="Special Report" - showSlash={true} /> ); @@ -352,7 +334,6 @@ export const Busy = () => ( }} showQuotes={true} kickerText="Aerial Yoga" - showSlash={true} /> ); diff --git a/dotcom-rendering/src/web/components/CardHeadline.tsx b/dotcom-rendering/src/web/components/CardHeadline.tsx index 9cdcef03e4a..3990ee3a571 100644 --- a/dotcom-rendering/src/web/components/CardHeadline.tsx +++ b/dotcom-rendering/src/web/components/CardHeadline.tsx @@ -26,7 +26,6 @@ type Props = { containerPalette?: DCRContainerPalette; kickerText?: string; showPulsingDot?: boolean; - showSlash?: boolean; hideLineBreak?: boolean; showQuotes?: boolean; // Even with design !== Comment, a piece can be opinion size?: SmallHeadlineSize; @@ -233,7 +232,6 @@ export const CardHeadline = ({ showQuotes, kickerText, showPulsingDot, - showSlash, hideLineBreak, size = 'medium', sizeOnMobile, @@ -274,7 +272,6 @@ export const CardHeadline = ({ text={kickerText} color={kickerColour} showPulsingDot={showPulsingDot} - showSlash={showSlash} hideLineBreak={hideLineBreak} /> )} diff --git a/dotcom-rendering/src/web/components/FrontCard.tsx b/dotcom-rendering/src/web/components/FrontCard.tsx index eddd204b0ce..c72ae63c86c 100644 --- a/dotcom-rendering/src/web/components/FrontCard.tsx +++ b/dotcom-rendering/src/web/components/FrontCard.tsx @@ -35,7 +35,6 @@ export const FrontCard = (props: Props) => { webPublicationDate: trail.webPublicationDate, kickerText: trail.kickerText, showPulsingDot: trail.format.design === ArticleDesign.LiveBlog, - showSlash: true, showClock: false, imageUrl: trail.image, isCrossword: trail.isCrossword, diff --git a/dotcom-rendering/src/web/components/Kicker.tsx b/dotcom-rendering/src/web/components/Kicker.tsx index dc122c51cb7..5ef2209b593 100644 --- a/dotcom-rendering/src/web/components/Kicker.tsx +++ b/dotcom-rendering/src/web/components/Kicker.tsx @@ -1,5 +1,4 @@ import { css } from '@emotion/react'; -import { useEffect, useState } from 'react'; import { PulsingDot } from './PulsingDot.importable'; // Defines a prefix to be used with a headline (e.g. 'Live /') @@ -7,7 +6,6 @@ type Props = { text: string; color: string; showPulsingDot?: boolean; - showSlash?: boolean; hideLineBreak?: boolean; }; @@ -22,7 +20,6 @@ export const Kicker = ({ text, color, showPulsingDot, - showSlash = true, hideLineBreak, }: Props) => { return ( diff --git a/dotcom-rendering/src/web/components/LinkHeadline.stories.tsx b/dotcom-rendering/src/web/components/LinkHeadline.stories.tsx index 6d0fe9405f9..d048bf7fa54 100644 --- a/dotcom-rendering/src/web/components/LinkHeadline.stories.tsx +++ b/dotcom-rendering/src/web/components/LinkHeadline.stories.tsx @@ -42,27 +42,10 @@ export const liveStory = () => ( ); liveStory.story = { name: 'With Live kicker' }; -// TODO remove after test -export const noSlash = () => ( -
- -
-); -noSlash.story = { name: 'With Live kicker but no slash' }; - export const noLinebreak = () => (
( }} showQuotes={true} kickerText="George Monbiot" - showSlash={true} />
); @@ -151,7 +133,6 @@ export const SpecialReport = () => ( }} showQuotes={true} kickerText="Special Report" - showSlash={true} /> ); @@ -169,7 +150,6 @@ export const InUnderlinedState = () => ( showUnderline={true} size="small" kickerText="I am never underlined" - showSlash={true} link={{ to: 'https://www.theguardian.com/us-news/2019/nov/14/nancy-pelosi-trump-ukraine-bribery', }} @@ -188,7 +168,6 @@ export const linkStory = () => ( theme: ArticlePillar.Sport, }} kickerText="I am not a link" - showSlash={true} link={{ to: 'https://www.theguardian.com/us-news/2019/nov/14/nancy-pelosi-trump-ukraine-bribery', }} @@ -208,7 +187,6 @@ export const LiveBlogSizes = () => ( }} showQuotes={true} kickerText="Large live" - showSlash={true} showPulsingDot={true} size="large" /> @@ -222,7 +200,6 @@ export const LiveBlogSizes = () => ( }} showQuotes={true} kickerText="Medium live" - showSlash={true} showPulsingDot={true} size="medium" /> @@ -236,7 +213,6 @@ export const LiveBlogSizes = () => ( }} showQuotes={true} kickerText="Small live" - showSlash={true} showPulsingDot={true} size="small" /> @@ -250,7 +226,6 @@ export const LiveBlogSizes = () => ( }} showQuotes={true} kickerText="Tiny live" - showSlash={true} showPulsingDot={true} size="tiny" /> @@ -269,7 +244,6 @@ export const DeadBlogSizes = () => ( }} showQuotes={true} kickerText="Large dead" - showSlash={true} showPulsingDot={false} size="large" /> @@ -283,7 +257,6 @@ export const DeadBlogSizes = () => ( }} showQuotes={true} kickerText="Medium dead" - showSlash={true} showPulsingDot={false} size="medium" /> @@ -297,7 +270,6 @@ export const DeadBlogSizes = () => ( }} showQuotes={true} kickerText="Small dead" - showSlash={true} showPulsingDot={false} size="small" /> @@ -311,7 +283,6 @@ export const DeadBlogSizes = () => ( }} showQuotes={true} kickerText="Tiny dead" - showSlash={true} showPulsingDot={false} size="tiny" /> @@ -329,7 +300,6 @@ export const Updated = () => ( theme: ArticlePillar.News, }} showPulsingDot={true} - showSlash={false} hideLineBreak={true} kickerText="Updated 7m ago" size="tiny" diff --git a/dotcom-rendering/src/web/components/LinkHeadline.tsx b/dotcom-rendering/src/web/components/LinkHeadline.tsx index 874e1e45f8f..790d0af3194 100644 --- a/dotcom-rendering/src/web/components/LinkHeadline.tsx +++ b/dotcom-rendering/src/web/components/LinkHeadline.tsx @@ -11,7 +11,6 @@ type Props = { showUnderline?: boolean; // Some headlines have text-decoration underlined when hovered kickerText?: string; showPulsingDot?: boolean; - showSlash?: boolean; hideLineBreak?: boolean; showQuotes?: boolean; // When true the QuoteIcon is shown size?: SmallHeadlineSize; @@ -71,7 +70,6 @@ export const LinkHeadline = ({ showUnderline = false, kickerText, showPulsingDot, - showSlash, hideLineBreak, showQuotes = false, size = 'medium', @@ -87,7 +85,6 @@ export const LinkHeadline = ({ text={kickerText} color={palette.text.linkKicker} showPulsingDot={showPulsingDot} - showSlash={showSlash} hideLineBreak={hideLineBreak} /> )} diff --git a/dotcom-rendering/src/web/components/MostViewedFooterItem.tsx b/dotcom-rendering/src/web/components/MostViewedFooterItem.tsx index 71ade6aa478..841f578966c 100644 --- a/dotcom-rendering/src/web/components/MostViewedFooterItem.tsx +++ b/dotcom-rendering/src/web/components/MostViewedFooterItem.tsx @@ -93,7 +93,6 @@ export const MostViewedFooterItem = ({ format={format} size="small" kickerText="Live" - showSlash={true} hideLineBreak={false} showPulsingDot={true} showQuotes={false} diff --git a/dotcom-rendering/src/web/components/MostViewedRightItem.tsx b/dotcom-rendering/src/web/components/MostViewedRightItem.tsx index c6ec0afb052..f2fe72a40c5 100644 --- a/dotcom-rendering/src/web/components/MostViewedRightItem.tsx +++ b/dotcom-rendering/src/web/components/MostViewedRightItem.tsx @@ -99,7 +99,6 @@ export const MostViewedRightItem = ({ trail, mostViewedItemIndex }: Props) => { size="small" showUnderline={isHovered} kickerText="Live" - showSlash={false} hideLineBreak={true} byline={ trail.showByline ? trail.byline : undefined diff --git a/dotcom-rendering/src/web/components/SupportingContent.tsx b/dotcom-rendering/src/web/components/SupportingContent.tsx index 94ae7de152d..882098f9e77 100644 --- a/dotcom-rendering/src/web/components/SupportingContent.tsx +++ b/dotcom-rendering/src/web/components/SupportingContent.tsx @@ -131,7 +131,6 @@ export const SupportingContent = ({