From 459b49e95a6516d1b0159c5c96ece530df40473d Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Wed, 11 Dec 2024 10:41:50 +0000 Subject: [PATCH 1/9] Rename FeaturedCard and split styles out --- .../FeaturedCard/FeaturedCard.stories.tsx | 2 +- content/webapp/components/Body/Body.tsx | 2 +- .../FeaturedCard/FeaturedCard.styles.ts | 96 +++++++ .../{FeaturedCard.tsx => index.tsx} | 234 ++++++------------ .../SimpleCardGrid/SimpleCardGrid.tsx | 2 +- content/webapp/pages/stories/index.tsx | 2 +- content/webapp/pages/whats-on/index.tsx | 2 +- 7 files changed, 172 insertions(+), 168 deletions(-) create mode 100644 content/webapp/components/FeaturedCard/FeaturedCard.styles.ts rename content/webapp/components/FeaturedCard/{FeaturedCard.tsx => index.tsx} (66%) diff --git a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx index 05513eceea..27f0e73f9f 100644 --- a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx +++ b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ReadmeDecorator } from '@weco/cardigan/config/decorators'; import { image } from '@weco/cardigan/stories/data/images'; import { font } from '@weco/common/utils/classnames'; -import FeaturedCard from '@weco/content/components/FeaturedCard/FeaturedCard'; +import FeaturedCard from '@weco/content/components/FeaturedCard'; import Readme from '@weco/content/components/FeaturedCard/README.mdx'; const meta: Meta = { diff --git a/content/webapp/components/Body/Body.tsx b/content/webapp/components/Body/Body.tsx index 8afcc205fc..fc7bf3e3c7 100644 --- a/content/webapp/components/Body/Body.tsx +++ b/content/webapp/components/Body/Body.tsx @@ -26,7 +26,7 @@ import { Props as ComicPreviousNextProps } from '@weco/content/components/ComicP import FeaturedCard, { convertCardToFeaturedCardProps, convertItemToFeaturedCardProps, -} from '@weco/content/components/FeaturedCard/FeaturedCard'; +} from '@weco/content/components/FeaturedCard'; import FeaturedText from '@weco/content/components/FeaturedText/FeaturedText'; import { defaultSerializer } from '@weco/content/components/HTMLSerializers/HTMLSerializers'; import OnThisPageAnchors from '@weco/content/components/OnThisPageAnchors/OnThisPageAnchors'; diff --git a/content/webapp/components/FeaturedCard/FeaturedCard.styles.ts b/content/webapp/components/FeaturedCard/FeaturedCard.styles.ts new file mode 100644 index 0000000000..c1a86e2b49 --- /dev/null +++ b/content/webapp/components/FeaturedCard/FeaturedCard.styles.ts @@ -0,0 +1,96 @@ +import styled from 'styled-components'; + +import { font, grid } from '@weco/common/utils/classnames'; +import Space from '@weco/common/views/components/styled/Space'; +import { PaletteColor } from '@weco/common/views/themes/config'; + +export const DateWrapper = styled(Space).attrs({ + className: font('intr', 4), + $v: { size: 'm', properties: ['margin-bottom'] }, +})` + margin: 0; + padding: 0; +`; + +export const FeaturedCardWrap = styled.div` + margin-left: -${props => props.theme.gutter.small}px; + margin-right: -${props => props.theme.gutter.small}px; + + ${props => props.theme.media('medium')` + margin-left: 0; + margin-right: 0; + `} +`; + +type HasIsReversed = { $isReversed: boolean }; +export const FeaturedCardLink = styled.a.attrs({ + className: 'grid', + 'data-gtm-trigger': 'featured_card_link', +})` + justify-content: flex-end; + flex-direction: ${props => (props.$isReversed ? 'row-reverse' : 'row')}; + + &, + &:link, + &:visited { + text-decoration: none; + border: none; + } +`; + +export const FeaturedCardLeft = styled.div.attrs({ + className: grid({ s: 12, m: 12, l: 7, xl: 7 }), +})``; + +export const FeaturedCardRight = styled.div` + display: flex; + flex-direction: column; + padding-left: ${props => + props.$isReversed ? 0 : props.theme.gutter.small}px; + padding-right: ${props => + props.$isReversed ? props.theme.gutter.small : 0}px; + transform: translateY(-28px); /* Height of a label (font size + padding) */ + width: 100%; + height: 100%; + min-height: 200px; + + ${props => props.theme.media('medium')` + padding-left: 0; + padding-right: 0; + `} + + ${props => + props.theme.media('large')(` + margin-left: ${props.$isReversed ? 0 : -props.theme.gutter.large + 'px'}; + transform: translateY(0); + `)} +`; + +export const FeaturedCardCopy = styled(Space).attrs({ + $h: { size: 'l', properties: ['padding-left', 'padding-right'] }, + $v: { size: 'l', properties: ['padding-top', 'padding-bottom'] }, +})<{ $textColor: PaletteColor; $background: PaletteColor }>` + flex: 1; + color: ${props => props.theme.color(props.$textColor)}; + background-color: ${props => props.theme.color(props.$background)}; + + ${props => + props.theme.media('large')(` + margin-right: -${props.theme.gutter.large}px; + `)} +`; + +export const FeaturedCardShim = styled.div.attrs<{ $background: PaletteColor }>( + { + className: `is-hidden-s is-hidden-m ${grid({ s: 12, m: 11, l: 5, xl: 5 })}`, + } +)` + position: relative; + background-color: ${props => props.theme.color(props.$background)}; + height: 21px; + + /* Prevent a white line appearing above the shim because of browser rounding errors */ + top: -1px; + margin-left: ${props => + props.$isReversed ? props.theme.gutter.large + 'px' : null}; +`; diff --git a/content/webapp/components/FeaturedCard/FeaturedCard.tsx b/content/webapp/components/FeaturedCard/index.tsx similarity index 66% rename from content/webapp/components/FeaturedCard/FeaturedCard.tsx rename to content/webapp/components/FeaturedCard/index.tsx index 8678c975ca..9a6c6ace3a 100644 --- a/content/webapp/components/FeaturedCard/FeaturedCard.tsx +++ b/content/webapp/components/FeaturedCard/index.tsx @@ -1,5 +1,4 @@ import { FunctionComponent, PropsWithChildren } from 'react'; -import styled from 'styled-components'; import { ImageType } from '@weco/common/model/image'; import { Label } from '@weco/common/model/labels'; @@ -25,6 +24,16 @@ import { Page } from '@weco/content/types/pages'; import { Season } from '@weco/content/types/seasons'; import { SeriesBasic } from '@weco/content/types/series'; +import { + DateWrapper, + FeaturedCardCopy, + FeaturedCardLeft, + FeaturedCardLink, + FeaturedCardRight, + FeaturedCardShim, + FeaturedCardWrap, +} from './FeaturedCard.styles'; + type PartialFeaturedCard = { image?: ImageType; labels: Label[]; @@ -37,6 +46,54 @@ type Props = PartialFeaturedCard & { isReversed?: boolean; }; +const FeaturedCard: FunctionComponent> = ({ + image, + labels, + children, + link, + textColor, + background, + isReversed = false, +}) => { + return ( + + + + {image && ( + + )} + +
+ + {labels && labels.length > 0 ? ( + + ) : ( +
+ )} + + {children} + + +
+
+ + + + ); +}; + export function convertCardToFeaturedCardProps( item: Card ): PartialFeaturedCard { @@ -121,167 +178,6 @@ type FeaturedCardExhibitionProps = { textColor: PaletteColor; }; -const DateWrapper = styled(Space).attrs({ - className: font('intr', 4), - $v: { size: 'm', properties: ['margin-bottom'] }, -})` - margin: 0; - padding: 0; -`; - -type FeaturedCardExhibitionBodyProps = { - exhibition: ExhibitionBasic; -}; - -const FeaturedCardExhibitionBody = ({ - exhibition, -}: FeaturedCardExhibitionBodyProps) => { - return ( -
-

{exhibition.title}

- {!exhibition.statusOverride && exhibition.start && exhibition.end && ( - - - - )} - -
- ); -}; - -const FeaturedCardWrap = styled.div` - margin-left: -${props => props.theme.gutter.small}px; - margin-right: -${props => props.theme.gutter.small}px; - - ${props => props.theme.media('medium')` - margin-left: 0; - margin-right: 0; - `} -`; - -type HasIsReversed = { $isReversed: boolean }; -const FeaturedCardLink = styled.a.attrs({ - className: 'grid', - 'data-gtm-trigger': 'featured_card_link', -})` - justify-content: flex-end; - flex-direction: ${props => (props.$isReversed ? 'row-reverse' : 'row')}; - - &, - &:link, - &:visited { - text-decoration: none; - border: none; - } -`; - -const FeaturedCardLeft = styled.div.attrs({ - className: grid({ s: 12, m: 12, l: 7, xl: 7 }), -})``; - -const FeaturedCardRight = styled.div` - display: flex; - flex-direction: column; - padding-left: ${props => - props.$isReversed ? 0 : props.theme.gutter.small}px; - padding-right: ${props => - props.$isReversed ? props.theme.gutter.small : 0}px; - transform: translateY(-28px); /* Height of a label (font size + padding) */ - width: 100%; - height: 100%; - min-height: 200px; - - ${props => props.theme.media('medium')` - padding-left: 0; - padding-right: 0; - `} - - ${props => - props.theme.media('large')(` - margin-left: ${props.$isReversed ? 0 : -props.theme.gutter.large + 'px'}; - transform: translateY(0); - `)} -`; - -const FeaturedCardCopy = styled(Space).attrs({ - $h: { size: 'l', properties: ['padding-left', 'padding-right'] }, - $v: { size: 'l', properties: ['padding-top', 'padding-bottom'] }, -})<{ $textColor: PaletteColor; $background: PaletteColor }>` - flex: 1; - color: ${props => props.theme.color(props.$textColor)}; - background-color: ${props => props.theme.color(props.$background)}; - - ${props => - props.theme.media('large')(` - margin-right: -${props.theme.gutter.large}px; - `)} -`; - -const FeaturedCardShim = styled.div.attrs<{ $background: PaletteColor }>({ - className: `is-hidden-s is-hidden-m ${grid({ s: 12, m: 11, l: 5, xl: 5 })}`, -})` - position: relative; - background-color: ${props => props.theme.color(props.$background)}; - height: 21px; - - /* Prevent a white line appearing above the shim because of browser rounding errors */ - top: -1px; - margin-left: ${props => - props.$isReversed ? props.theme.gutter.large + 'px' : null}; -`; - -const FeaturedCard: FunctionComponent> = ({ - image, - labels, - children, - link, - textColor, - background, - isReversed = false, -}) => { - return ( - - - - {image && ( - - )} - -
- - {labels && labels.length > 0 ? ( - - ) : ( -
- )} - - {children} - - -
-
- - - - ); -}; - export const FeaturedCardArticle: FunctionComponent< FeaturedCardArticleProps > = ({ article, background, textColor }) => { @@ -315,7 +211,19 @@ export const FeaturedCardExhibition: FunctionComponent< return ( - +
+

{exhibition.title}

+ {!exhibition.statusOverride && exhibition.start && exhibition.end && ( + + + + )} + +
); }; diff --git a/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx b/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx index 9dcc98bb8a..65f76e923b 100644 --- a/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx +++ b/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx @@ -9,7 +9,7 @@ import { import CssGridContainer from '@weco/common/views/components/styled/CssGridContainer'; import Space from '@weco/common/views/components/styled/Space'; import Card from '@weco/content/components/Card/Card'; -import FeaturedCard from '@weco/content/components/FeaturedCard/FeaturedCard'; +import FeaturedCard from '@weco/content/components/FeaturedCard'; import { Card as CardType } from '@weco/content/types/card'; type Props = { diff --git a/content/webapp/pages/stories/index.tsx b/content/webapp/pages/stories/index.tsx index 14b6311851..ea97faf58b 100644 --- a/content/webapp/pages/stories/index.tsx +++ b/content/webapp/pages/stories/index.tsx @@ -24,7 +24,7 @@ import Space from '@weco/common/views/components/styled/Space'; import SpacingComponent from '@weco/common/views/components/styled/SpacingComponent'; import SpacingSection from '@weco/common/views/components/styled/SpacingSection'; import CardGrid from '@weco/content/components/CardGrid/CardGrid'; -import { FeaturedCardArticle } from '@weco/content/components/FeaturedCard/FeaturedCard'; +import { FeaturedCardArticle } from '@weco/content/components/FeaturedCard'; import FeaturedText from '@weco/content/components/FeaturedText/FeaturedText'; import { defaultSerializer } from '@weco/content/components/HTMLSerializers/HTMLSerializers'; import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader'; diff --git a/content/webapp/pages/whats-on/index.tsx b/content/webapp/pages/whats-on/index.tsx index c81abe0ba0..dfc121792e 100644 --- a/content/webapp/pages/whats-on/index.tsx +++ b/content/webapp/pages/whats-on/index.tsx @@ -51,7 +51,7 @@ import CardGrid from '@weco/content/components/CardGrid/CardGrid'; import EventsByMonth from '@weco/content/components/EventsByMonth/EventsByMonth'; import ExhibitionsAndEvents from '@weco/content/components/ExhibitionsAndEvents/ExhibitionsAndEvents'; import FacilityPromo from '@weco/content/components/FacilityPromo/FacilityPromo'; -import { FeaturedCardExhibition } from '@weco/content/components/FeaturedCard/FeaturedCard'; +import { FeaturedCardExhibition } from '@weco/content/components/FeaturedCard'; import InfoBox, { InfoIconWrapper, } from '@weco/content/components/InfoBox/InfoBox'; From cf969723f2b1aea6e4ac553c18a82f49fc03c395 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Wed, 11 Dec 2024 10:45:18 +0000 Subject: [PATCH 2/9] Split helpers out of main FeaturedCard file --- .../FeaturedCard/FeaturedCard.helpers.ts | 68 +++++++++++++++++ .../webapp/components/FeaturedCard/index.tsx | 73 ++----------------- 2 files changed, 75 insertions(+), 66 deletions(-) create mode 100644 content/webapp/components/FeaturedCard/FeaturedCard.helpers.ts diff --git a/content/webapp/components/FeaturedCard/FeaturedCard.helpers.ts b/content/webapp/components/FeaturedCard/FeaturedCard.helpers.ts new file mode 100644 index 0000000000..b36c77e9a6 --- /dev/null +++ b/content/webapp/components/FeaturedCard/FeaturedCard.helpers.ts @@ -0,0 +1,68 @@ +import { ImageType } from '@weco/common/model/image'; +import { Label } from '@weco/common/model/labels'; +import linkResolver from '@weco/common/services/prismic/link-resolver'; +import { ArticleBasic } from '@weco/content/types/articles'; +import { BookBasic } from '@weco/content/types/books'; +import { Card } from '@weco/content/types/card'; +import { EventSeries } from '@weco/content/types/event-series'; +import { EventBasic } from '@weco/content/types/events'; +import { ExhibitionBasic } from '@weco/content/types/exhibitions'; +import { Guide } from '@weco/content/types/guides'; +import { Link } from '@weco/content/types/link'; +import { Page } from '@weco/content/types/pages'; +import { Season } from '@weco/content/types/seasons'; +import { SeriesBasic } from '@weco/content/types/series'; + +export type PartialFeaturedCard = { + image?: ImageType; + labels: Label[]; + link: Link; +}; + +export function convertCardToFeaturedCardProps( + item: Card +): PartialFeaturedCard { + return { + // We intentionally omit the alt text on promos, so screen reader + // users don't have to listen to the alt text before hearing the + // title of the item in the list. + // + // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 + image: item.image && { + ...item.image, + alt: '', + }, + labels: item.format ? [{ text: item.format.title }] : [], + link: { url: item.link || '', text: item.title || '' }, + }; +} + +export function convertItemToFeaturedCardProps( + item: + | ArticleBasic + | ExhibitionBasic + | Season + | Page + | EventSeries + | BookBasic + | SeriesBasic + | EventBasic + | Guide +): PartialFeaturedCard { + return { + image: item.promo?.image && { + ...item.promo.image, + // We intentionally omit the alt text on promos, so screen reader + // users don't have to listen to the alt text before hearing the + // title of the item in the list. + // + // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 + alt: '', + }, + labels: item.labels, + link: { + url: linkResolver(item), + text: item.title, + }, + }; +} diff --git a/content/webapp/components/FeaturedCard/index.tsx b/content/webapp/components/FeaturedCard/index.tsx index 9a6c6ace3a..c1a41cd8f7 100644 --- a/content/webapp/components/FeaturedCard/index.tsx +++ b/content/webapp/components/FeaturedCard/index.tsx @@ -1,7 +1,5 @@ import { FunctionComponent, PropsWithChildren } from 'react'; -import { ImageType } from '@weco/common/model/image'; -import { Label } from '@weco/common/model/labels'; import linkResolver from '@weco/common/services/prismic/link-resolver'; import { transformImage } from '@weco/common/services/prismic/transformers/images'; import { font, grid } from '@weco/common/utils/classnames'; @@ -12,18 +10,13 @@ import { PaletteColor } from '@weco/common/views/themes/config'; import DateRange from '@weco/content/components/DateRange/DateRange'; import StatusIndicator from '@weco/content/components/StatusIndicator/StatusIndicator'; import { Article } from '@weco/content/services/wellcome/content/types/api'; -import { ArticleBasic } from '@weco/content/types/articles'; -import { BookBasic } from '@weco/content/types/books'; -import { Card } from '@weco/content/types/card'; -import { EventSeries } from '@weco/content/types/event-series'; -import { EventBasic } from '@weco/content/types/events'; import { ExhibitionBasic } from '@weco/content/types/exhibitions'; -import { Guide } from '@weco/content/types/guides'; -import { Link } from '@weco/content/types/link'; -import { Page } from '@weco/content/types/pages'; -import { Season } from '@weco/content/types/seasons'; -import { SeriesBasic } from '@weco/content/types/series'; +import { + convertCardToFeaturedCardProps, + convertItemToFeaturedCardProps, + PartialFeaturedCard, +} from './FeaturedCard.helpers'; import { DateWrapper, FeaturedCardCopy, @@ -34,12 +27,6 @@ import { FeaturedCardWrap, } from './FeaturedCard.styles'; -type PartialFeaturedCard = { - image?: ImageType; - labels: Label[]; - link: Link; -}; - type Props = PartialFeaturedCard & { background: PaletteColor; textColor: PaletteColor; @@ -94,54 +81,6 @@ const FeaturedCard: FunctionComponent> = ({ ); }; -export function convertCardToFeaturedCardProps( - item: Card -): PartialFeaturedCard { - return { - // We intentionally omit the alt text on promos, so screen reader - // users don't have to listen to the alt text before hearing the - // title of the item in the list. - // - // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 - image: item.image && { - ...item.image, - alt: '', - }, - labels: item.format ? [{ text: item.format.title }] : [], - link: { url: item.link || '', text: item.title || '' }, - }; -} - -export function convertItemToFeaturedCardProps( - item: - | ArticleBasic - | ExhibitionBasic - | Season - | Page - | EventSeries - | BookBasic - | SeriesBasic - | EventBasic - | Guide -): PartialFeaturedCard { - return { - image: item.promo?.image && { - ...item.promo.image, - // We intentionally omit the alt text on promos, so screen reader - // users don't have to listen to the alt text before hearing the - // title of the item in the list. - // - // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 - alt: '', - }, - labels: item.labels, - link: { - url: linkResolver(item), - text: item.title, - }, - }; -} - type FeaturedCardArticleProps = { article: Article; background: PaletteColor; @@ -191,6 +130,7 @@ export const FeaturedCardArticle: FunctionComponent< text: article.title, }; const labels = [{ text: article.format.label }]; + return ( Date: Wed, 11 Dec 2024 10:47:04 +0000 Subject: [PATCH 3/9] Move articlebody component inside card itself --- .../webapp/components/FeaturedCard/index.tsx | 47 +++++++------------ 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/content/webapp/components/FeaturedCard/index.tsx b/content/webapp/components/FeaturedCard/index.tsx index c1a41cd8f7..ee2210881c 100644 --- a/content/webapp/components/FeaturedCard/index.tsx +++ b/content/webapp/components/FeaturedCard/index.tsx @@ -87,36 +87,6 @@ type FeaturedCardArticleProps = { textColor: PaletteColor; }; -type FeaturedCardArticleBodyProps = { - article: Article; -}; - -// TODO: make this e.g. just `CardArticleBody` and work it back into the existing promos/cards -const FeaturedCardArticleBody: FunctionComponent< - FeaturedCardArticleBodyProps -> = ({ article }) => { - return ( - <> -

{article.title}

- {article.caption &&

{article.caption}

} - {article.seriesTitle && ( - -

- Part of{' '} - {article.seriesTitle} -

- - )} - - ); -}; - -type FeaturedCardExhibitionProps = { - exhibition: ExhibitionBasic; - background: PaletteColor; - textColor: PaletteColor; -}; - export const FeaturedCardArticle: FunctionComponent< FeaturedCardArticleProps > = ({ article, background, textColor }) => { @@ -139,11 +109,26 @@ export const FeaturedCardArticle: FunctionComponent< background={background} textColor={textColor} > - +

{article.title}

+ {article.caption &&

{article.caption}

} + {article.seriesTitle && ( + +

+ Part of{' '} + {article.seriesTitle} +

+ + )} ); }; +type FeaturedCardExhibitionProps = { + exhibition: ExhibitionBasic; + background: PaletteColor; + textColor: PaletteColor; +}; + export const FeaturedCardExhibition: FunctionComponent< FeaturedCardExhibitionProps > = ({ exhibition, background, textColor }) => { From 5161e2a04cea30f411306fe931b3be5362c81a75 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Wed, 11 Dec 2024 17:06:00 +0000 Subject: [PATCH 4/9] Simplify SimpleCardGrid as its only used on homepage --- .../index.tsx} | 64 +++++++------------ content/webapp/pages/index.tsx | 16 ++--- content/webapp/types/card.ts | 36 +++++------ 3 files changed, 50 insertions(+), 66 deletions(-) rename content/webapp/components/{SimpleCardGrid/SimpleCardGrid.tsx => HomepageCardGrid/index.tsx} (60%) diff --git a/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx b/content/webapp/components/HomepageCardGrid/index.tsx similarity index 60% rename from content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx rename to content/webapp/components/HomepageCardGrid/index.tsx index 65f76e923b..36ec86b127 100644 --- a/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx +++ b/content/webapp/components/HomepageCardGrid/index.tsx @@ -1,5 +1,3 @@ -import { FunctionComponent } from 'react'; - import { getCrop } from '@weco/common/model/image'; import { cssGrid, font } from '@weco/common/utils/classnames'; import { @@ -7,21 +5,15 @@ import { gridSize12, } from '@weco/common/views/components/Layout'; import CssGridContainer from '@weco/common/views/components/styled/CssGridContainer'; -import Space from '@weco/common/views/components/styled/Space'; import Card from '@weco/content/components/Card/Card'; import FeaturedCard from '@weco/content/components/FeaturedCard'; -import { Card as CardType } from '@weco/content/types/card'; - -type Props = { - items: readonly CardType[]; - isFeaturedFirst?: boolean; -}; - -type CardGridFeaturedCardProps = { - item: CardType; -}; +import { + Card as CardType, + convertItemToCardProps, + ItemType, +} from '@weco/content/types/card'; -const CardGridFeaturedCard = ({ item }: CardGridFeaturedCardProps) => { +export const HomepageFeaturedCard = ({ item }) => { const image = getCrop(item.image, '16:9'); return ( @@ -67,35 +59,27 @@ const CardGridFeaturedCard = ({ item }: CardGridFeaturedCardProps) => { ); }; -const CardGrid: FunctionComponent = ({ - items, - isFeaturedFirst, -}: Props) => { - const cards = items.filter(item => item.type === 'card'); - const threeCards = isFeaturedFirst ? cards.slice(1) : cards.slice(0, 3); - const featuredCard = isFeaturedFirst ? cards[0] : cards[3]; +type Props = { + items: (ItemType | CardType)[]; +}; + +export const HomepageCardGrid = ({ items }: Props) => { + const threeCards = items.slice(0, 3); return ( - <> - {featuredCard && isFeaturedFirst && ( - - )} - -
- {threeCards.map((item, i) => ( + +
+ {threeCards.map((item, i) => { + const cardItem = + item.type !== 'card' ? convertItemToCardProps(item) : item; + + return (
- +
- ))} -
- - {featuredCard && !isFeaturedFirst && ( - - - - )} - + ); + })} +
+ ); }; - -export default CardGrid; diff --git a/content/webapp/pages/index.tsx b/content/webapp/pages/index.tsx index 0d4b1d9da1..0eafec6aa3 100644 --- a/content/webapp/pages/index.tsx +++ b/content/webapp/pages/index.tsx @@ -30,8 +30,11 @@ import SpacingSection from '@weco/common/views/components/styled/SpacingSection' import Standfirst from '@weco/common/views/slices/Standfirst'; import CardGrid from '@weco/content/components/CardGrid/CardGrid'; import ExhibitionsAndEvents from '@weco/content/components/ExhibitionsAndEvents/ExhibitionsAndEvents'; +import { + HomepageCardGrid, + HomepageFeaturedCard, +} from '@weco/content/components/HomepageCardGrid'; import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader'; -import SimpleCardGrid from '@weco/content/components/SimpleCardGrid/SimpleCardGrid'; import { filterEventsForNext7Days, orderEventsByNextAvailableDate, @@ -242,6 +245,7 @@ const Homepage: FunctionComponent = ({ )} + {transformedHeaderList && ( {transformedHeaderList.value.title && ( @@ -253,12 +257,8 @@ const Homepage: FunctionComponent = ({ )} - @@ -293,7 +293,7 @@ const Homepage: FunctionComponent = ({ /> - diff --git a/content/webapp/types/card.ts b/content/webapp/types/card.ts index 143391d8a1..3494d948d4 100644 --- a/content/webapp/types/card.ts +++ b/content/webapp/types/card.ts @@ -30,24 +30,24 @@ export type Card = { siteSection?: SiteSection; }; -export function convertItemToCardProps( - item: - | ArticleBasic - | EventBasic - | Season - | Page - | Series - | SeriesBasic - | ParentPage - | EventSeries - | Book - | ExhibitionBasic - | Guide - | Project - | ExhibitionGuide - | ExhibitionGuideBasic - | VisualStoryBasic -): Card { +export type ItemType = + | ArticleBasic + | EventBasic + | Season + | Page + | Series + | SeriesBasic + | ParentPage + | EventSeries + | Book + | ExhibitionBasic + | Guide + | Project + | ExhibitionGuide + | ExhibitionGuideBasic + | VisualStoryBasic; + +export function convertItemToCardProps(item: ItemType): Card { const format = 'format' in item ? item.format From 75c1b7065091620c28356ecc193f80720c92c828 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Wed, 11 Dec 2024 17:06:12 +0000 Subject: [PATCH 5/9] Remove old TODO --- content/webapp/services/prismic/transformers/body.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/content/webapp/services/prismic/transformers/body.ts b/content/webapp/services/prismic/transformers/body.ts index f4dbd4f98a..9909c513f6 100644 --- a/content/webapp/services/prismic/transformers/body.ts +++ b/content/webapp/services/prismic/transformers/body.ts @@ -381,9 +381,6 @@ export function transformContentListSlice( type: 'contentList', value: { title: asText(slice.primary.title), - // TODO: The old code would look up a `hasFeatured` field on `slice.primary`, - // but that doesn't exist in our Prismic model. - // hasFeatured: slice.primary.hasFeatured, items: contents .map(content => { switch (content.type) { From 88bf8f5a05db61f891a858dc1b9182eadd92bb54 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Thu, 12 Dec 2024 11:50:17 +0000 Subject: [PATCH 6/9] Revert changes to homepage --- .../SimpleCardGrid.tsx} | 64 ++++++++++++------- content/webapp/pages/index.tsx | 16 ++--- content/webapp/types/card.ts | 36 +++++------ 3 files changed, 66 insertions(+), 50 deletions(-) rename content/webapp/components/{HomepageCardGrid/index.tsx => SimpleCardGrid/SimpleCardGrid.tsx} (60%) diff --git a/content/webapp/components/HomepageCardGrid/index.tsx b/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx similarity index 60% rename from content/webapp/components/HomepageCardGrid/index.tsx rename to content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx index 36ec86b127..65f76e923b 100644 --- a/content/webapp/components/HomepageCardGrid/index.tsx +++ b/content/webapp/components/SimpleCardGrid/SimpleCardGrid.tsx @@ -1,3 +1,5 @@ +import { FunctionComponent } from 'react'; + import { getCrop } from '@weco/common/model/image'; import { cssGrid, font } from '@weco/common/utils/classnames'; import { @@ -5,15 +7,21 @@ import { gridSize12, } from '@weco/common/views/components/Layout'; import CssGridContainer from '@weco/common/views/components/styled/CssGridContainer'; +import Space from '@weco/common/views/components/styled/Space'; import Card from '@weco/content/components/Card/Card'; import FeaturedCard from '@weco/content/components/FeaturedCard'; -import { - Card as CardType, - convertItemToCardProps, - ItemType, -} from '@weco/content/types/card'; +import { Card as CardType } from '@weco/content/types/card'; + +type Props = { + items: readonly CardType[]; + isFeaturedFirst?: boolean; +}; + +type CardGridFeaturedCardProps = { + item: CardType; +}; -export const HomepageFeaturedCard = ({ item }) => { +const CardGridFeaturedCard = ({ item }: CardGridFeaturedCardProps) => { const image = getCrop(item.image, '16:9'); return ( @@ -59,27 +67,35 @@ export const HomepageFeaturedCard = ({ item }) => { ); }; -type Props = { - items: (ItemType | CardType)[]; -}; - -export const HomepageCardGrid = ({ items }: Props) => { - const threeCards = items.slice(0, 3); +const CardGrid: FunctionComponent = ({ + items, + isFeaturedFirst, +}: Props) => { + const cards = items.filter(item => item.type === 'card'); + const threeCards = isFeaturedFirst ? cards.slice(1) : cards.slice(0, 3); + const featuredCard = isFeaturedFirst ? cards[0] : cards[3]; return ( - -
- {threeCards.map((item, i) => { - const cardItem = - item.type !== 'card' ? convertItemToCardProps(item) : item; - - return ( + <> + {featuredCard && isFeaturedFirst && ( + + )} + +
+ {threeCards.map((item, i) => (
- +
- ); - })} -
- + ))} +
+ + {featuredCard && !isFeaturedFirst && ( + + + + )} + ); }; + +export default CardGrid; diff --git a/content/webapp/pages/index.tsx b/content/webapp/pages/index.tsx index 0eafec6aa3..0d4b1d9da1 100644 --- a/content/webapp/pages/index.tsx +++ b/content/webapp/pages/index.tsx @@ -30,11 +30,8 @@ import SpacingSection from '@weco/common/views/components/styled/SpacingSection' import Standfirst from '@weco/common/views/slices/Standfirst'; import CardGrid from '@weco/content/components/CardGrid/CardGrid'; import ExhibitionsAndEvents from '@weco/content/components/ExhibitionsAndEvents/ExhibitionsAndEvents'; -import { - HomepageCardGrid, - HomepageFeaturedCard, -} from '@weco/content/components/HomepageCardGrid'; import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader'; +import SimpleCardGrid from '@weco/content/components/SimpleCardGrid/SimpleCardGrid'; import { filterEventsForNext7Days, orderEventsByNextAvailableDate, @@ -245,7 +242,6 @@ const Homepage: FunctionComponent = ({ )} - {transformedHeaderList && ( {transformedHeaderList.value.title && ( @@ -257,8 +253,12 @@ const Homepage: FunctionComponent = ({ )} - @@ -293,7 +293,7 @@ const Homepage: FunctionComponent = ({ /> - diff --git a/content/webapp/types/card.ts b/content/webapp/types/card.ts index 3494d948d4..143391d8a1 100644 --- a/content/webapp/types/card.ts +++ b/content/webapp/types/card.ts @@ -30,24 +30,24 @@ export type Card = { siteSection?: SiteSection; }; -export type ItemType = - | ArticleBasic - | EventBasic - | Season - | Page - | Series - | SeriesBasic - | ParentPage - | EventSeries - | Book - | ExhibitionBasic - | Guide - | Project - | ExhibitionGuide - | ExhibitionGuideBasic - | VisualStoryBasic; - -export function convertItemToCardProps(item: ItemType): Card { +export function convertItemToCardProps( + item: + | ArticleBasic + | EventBasic + | Season + | Page + | Series + | SeriesBasic + | ParentPage + | EventSeries + | Book + | ExhibitionBasic + | Guide + | Project + | ExhibitionGuide + | ExhibitionGuideBasic + | VisualStoryBasic +): Card { const format = 'format' in item ? item.format From 7eeca84c3af7bdbef90b1a5d2f7965ebe71140b9 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Thu, 12 Dec 2024 12:17:18 +0000 Subject: [PATCH 7/9] Get all FeaturedCards to use the same component --- .../webapp/components/FeaturedCard/index.tsx | 82 +++++++++++++------ content/webapp/pages/stories/index.tsx | 5 +- content/webapp/pages/whats-on/index.tsx | 5 +- 3 files changed, 62 insertions(+), 30 deletions(-) diff --git a/content/webapp/components/FeaturedCard/index.tsx b/content/webapp/components/FeaturedCard/index.tsx index ee2210881c..953fd8de09 100644 --- a/content/webapp/components/FeaturedCard/index.tsx +++ b/content/webapp/components/FeaturedCard/index.tsx @@ -27,21 +27,35 @@ import { FeaturedCardWrap, } from './FeaturedCard.styles'; -type Props = PartialFeaturedCard & { +type FeaturedCardProps = PartialFeaturedCard & { background: PaletteColor; textColor: PaletteColor; isReversed?: boolean; }; -const FeaturedCard: FunctionComponent> = ({ - image, - labels, - children, - link, - textColor, - background, - isReversed = false, -}) => { +type FeaturedCardArticleProps = { + article: Article; + background: PaletteColor; + textColor: PaletteColor; +}; + +type FeaturedCardExhibitionProps = { + exhibition: ExhibitionBasic; + background: PaletteColor; + textColor: PaletteColor; +}; + +const FeaturedCardBasic = props => { + const { + image, + labels, + children, + link, + textColor, + background, + isReversed = false, + } = props; + return ( @@ -81,12 +95,6 @@ const FeaturedCard: FunctionComponent> = ({ ); }; -type FeaturedCardArticleProps = { - article: Article; - background: PaletteColor; - textColor: PaletteColor; -}; - export const FeaturedCardArticle: FunctionComponent< FeaturedCardArticleProps > = ({ article, background, textColor }) => { @@ -102,7 +110,7 @@ export const FeaturedCardArticle: FunctionComponent< const labels = [{ text: article.format.label }]; return ( - )} - + ); }; -type FeaturedCardExhibitionProps = { - exhibition: ExhibitionBasic; - background: PaletteColor; - textColor: PaletteColor; -}; - export const FeaturedCardExhibition: FunctionComponent< FeaturedCardExhibitionProps > = ({ exhibition, background, textColor }) => { const props = convertItemToFeaturedCardProps(exhibition); return ( - +

{exhibition.title}

{!exhibition.statusOverride && exhibition.start && exhibition.end && ( @@ -149,9 +151,37 @@ export const FeaturedCardExhibition: FunctionComponent< statusOverride={exhibition.statusOverride} />
- + ); }; +const FeaturedCard: FunctionComponent< + | PropsWithChildren + | (FeaturedCardArticleProps & { type: 'article' }) + | (FeaturedCardExhibitionProps & { type: 'exhibition' }) +> = props => { + if (props.type === 'article') { + return ( + + ); + } + + if (props.type === 'exhibition') { + return ( + + ); + } + + return ; +}; + export default FeaturedCard; export { convertCardToFeaturedCardProps, convertItemToFeaturedCardProps }; diff --git a/content/webapp/pages/stories/index.tsx b/content/webapp/pages/stories/index.tsx index ea97faf58b..369117cbdf 100644 --- a/content/webapp/pages/stories/index.tsx +++ b/content/webapp/pages/stories/index.tsx @@ -24,7 +24,7 @@ import Space from '@weco/common/views/components/styled/Space'; import SpacingComponent from '@weco/common/views/components/styled/SpacingComponent'; import SpacingSection from '@weco/common/views/components/styled/SpacingSection'; import CardGrid from '@weco/content/components/CardGrid/CardGrid'; -import { FeaturedCardArticle } from '@weco/content/components/FeaturedCard'; +import FeaturedCard from '@weco/content/components/FeaturedCard'; import FeaturedText from '@weco/content/components/FeaturedText/FeaturedText'; import { defaultSerializer } from '@weco/content/components/HTMLSerializers/HTMLSerializers'; import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader'; @@ -203,7 +203,8 @@ const StoriesPage: FunctionComponent = ({ - = props => { {firstExhibition ? ( - Date: Thu, 12 Dec 2024 13:32:01 +0000 Subject: [PATCH 8/9] FeaturedCard story to be interactive --- .../FeaturedCard/FeaturedCard.stories.tsx | 82 +++++++++++++------ cardigan/stories/data/content.ts | 55 ++++++++++++- cardigan/stories/data/images.ts | 71 ++++++++++++++++ .../webapp/components/FeaturedCard/index.tsx | 37 ++++----- .../services/wellcome/content/types/api.ts | 2 +- 5 files changed, 200 insertions(+), 47 deletions(-) diff --git a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx index 27f0e73f9f..0fb4276cad 100644 --- a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx +++ b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx @@ -1,6 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { ReadmeDecorator } from '@weco/cardigan/config/decorators'; +import { + contentAPIArticle, + exhibitionBasic, +} from '@weco/cardigan/stories/data/content'; import { image } from '@weco/cardigan/stories/data/images'; import { font } from '@weco/common/utils/classnames'; import FeaturedCard from '@weco/content/components/FeaturedCard'; @@ -10,13 +14,43 @@ const meta: Meta = { title: 'Components/Cards/FeaturedCard', component: FeaturedCard, args: { + type: 'card', image: image(), - labels: [{ text: 'Article' }], + labels: [{ text: 'Page' }], link: { url: '#', text: 'Remote diagnosis from wee to the web' }, background: 'neutral.700', textColor: 'white', isReversed: false, }, + argTypes: { + type: { + options: ['card', 'exhibition', 'article'], + control: { type: 'radio' }, + }, + background: { + options: ['neutral.700', 'warmNeutral.300'], + control: { type: 'select' }, + }, + textColor: { + options: ['white', 'black'], + control: { type: 'select' }, + }, + labels: { + table: { + disable: true, + }, + }, + link: { + table: { + disable: true, + }, + }, + image: { + table: { + disable: true, + }, + }, + }, }; export default meta; @@ -24,26 +58,28 @@ export default meta; type Story = StoryObj; export const Basic: Story = { name: 'FeaturedCard', - render: args => ( - -

Remote diagnosis from wee to the Web

-

- Medical practice might have moved on from when patients posted flasks of - their urine for doctors to taste, but telehealth today keeps up the - tradition of remote diagnosis – to our possible detriment. -

- - ), + render: args => { + console.log(args); + return ( + +

Remote diagnosis from wee to the Web

+

+ Medical practice might have moved on from when patients posted flasks + of their urine for doctors to taste, but telehealth today keeps up the + tradition of remote diagnosis – to our possible detriment. +

+ + ); + }, }; diff --git a/cardigan/stories/data/content.ts b/cardigan/stories/data/content.ts index 6044b06d6c..a2eb6e3616 100644 --- a/cardigan/stories/data/content.ts +++ b/cardigan/stories/data/content.ts @@ -2,7 +2,11 @@ import { faker } from '@faker-js/faker'; import untransformedBody from '@weco/cardigan/stories/data/untransformed-body'; import { Props as QuoteProps } from '@weco/content/components/Quote/Quote'; -import { Article, ArticleBasic } from '@weco/content/types/articles'; +import { Article } from '@weco/content/services/wellcome/content/types/api'; +import { + ArticleBasic, + Article as TransformedPrismicArticle, +} from '@weco/content/types/articles'; import { Organisation as OrganisationType, Person as PersonType, @@ -12,6 +16,7 @@ import { ExhibitionBasic } from '@weco/content/types/exhibitions'; import { Season } from '@weco/content/types/seasons'; import { + contentAPIImage, darkCloudImageUrl, florenceWinterfloodImageUrl, image, @@ -257,7 +262,7 @@ export const organisation: OrganisationType = { sameAs: [], }; -export const article: Article = { +export const article: TransformedPrismicArticle = { type: 'articles', id: 'YLoCLhAAACEAfyuO', uid: 'a-dark-cloud', @@ -466,5 +471,49 @@ export const exhibitionBasic: ExhibitionBasic = { end: new Date('2021-09-29T23:00:00+0000'), isPermanent: false, contributors: [], - labels: [], + labels: [{ text: 'Exhibition' }], +}; + +export const contentAPIArticle: Article = { + type: 'Article', + id: 'Zz2g4BAAAB8AAs0L', + uid: 'the-personal-cost-of-mental-illness', + title: 'The personal cost of mental illness', + caption: + 'Laura Grace Simpkins is tired of hearing how much her mental ill health costs the country. What about how much it costs her?', + format: { + type: 'ArticleFormat', + id: 'W7TfJRAAAJ1D0eLK', + label: 'Article', + }, + publicationDate: '2024-12-11T10:00:07+0000', + contributors: [ + { + type: 'Contributor', + contributor: { + type: 'Person', + id: 'YRpIOREAANdN3wpG', + label: 'Laura Grace Simpkins', + }, + role: { + type: 'EditorialContributorRole', + id: 'WcUWeCgAAFws-nGh', + label: 'Author', + }, + }, + { + type: 'Contributor', + contributor: { + type: 'Person', + id: 'Yw8WwhAAADhyTh92', + label: 'Tanya Cooper', + }, + role: { + type: 'EditorialContributorRole', + id: 'YEu7zhAAACMAX7IG', + label: 'Artist', + }, + }, + ], + image: contentAPIImage, }; diff --git a/cardigan/stories/data/images.ts b/cardigan/stories/data/images.ts index d0ab197f3a..f6a4bec0d7 100644 --- a/cardigan/stories/data/images.ts +++ b/cardigan/stories/data/images.ts @@ -3,6 +3,7 @@ import { LicenseType } from '@weco/common/model/license'; import { Picture } from '@weco/common/model/picture'; import { CaptionedImageProps } from '@weco/content/components/CaptionedImage/CaptionedImage'; import { Props as ImageGalleryProps } from '@weco/content/components/ImageGallery'; +import { ContentApiImage } from '@weco/content/services/wellcome/content/types/api'; import { singleLineOfText } from './text'; @@ -112,3 +113,73 @@ export const imageWithCrops = { }, }, }; + +export const contentAPIImage: ContentApiImage = { + type: 'PrismicImage', + dimensions: { + width: 3543, + height: 1993, + }, + alt: 'A collage combining photos and illustration featuring a woman in a blue hairnet.', + copyright: + 'The personal cost of mental illness | Tanya Cooper for Wellcome Collection | | | CC-BY-NC-ND | |', + url: 'https://images.prismic.io/wellcomecollection/Z1BdtpbqstJ98BwR_WellcomeCollection_Main.jpg?auto=format,compress', + id: 'Z1BdtpbqstJ98BwR', + edit: { + x: 0, + y: 0, + zoom: 1, + background: 'transparent', + }, + '32:15': { + dimensions: { + width: 3200, + height: 1500, + }, + alt: 'A collage combining photos and illustration featuring a woman in a blue hairnet.', + copyright: + 'The personal cost of mental illness | Tanya Cooper for Wellcome Collection | | | CC-BY-NC-ND | |', + url: florenceWinterfloodImageUrl('3200x1500'), + id: 'Z1BdtpbqstJ98BwR', + edit: { + x: 0, + y: 166, + zoom: 1, + background: 'transparent', + }, + }, + '16:9': { + dimensions: { + width: 3200, + height: 1800, + }, + alt: 'A collage combining photos and illustration featuring a woman in a blue hairnet.', + copyright: + 'The personal cost of mental illness | Tanya Cooper for Wellcome Collection | | | CC-BY-NC-ND | |', + url: florenceWinterfloodImageUrl('3200x1800'), + id: 'Z1BdtpbqstJ98BwR', + edit: { + x: 0, + y: 0, + zoom: 1, + background: 'transparent', + }, + }, + square: { + dimensions: { + width: 3200, + height: 3200, + }, + alt: 'A collage combining photos and illustration featuring a woman in a blue hairnet.', + copyright: + 'The personal cost of mental illness | Tanya Cooper for Wellcome Collection | | | CC-BY-NC-ND | |', + url: florenceWinterfloodImageUrl('3200x3200'), + id: 'Z1BdtpbqstJ98BwR', + edit: { + x: 775, + y: 0, + zoom: 1, + background: 'transparent', + }, + }, +}; diff --git a/content/webapp/components/FeaturedCard/index.tsx b/content/webapp/components/FeaturedCard/index.tsx index 953fd8de09..9e4feb9054 100644 --- a/content/webapp/components/FeaturedCard/index.tsx +++ b/content/webapp/components/FeaturedCard/index.tsx @@ -95,9 +95,12 @@ const FeaturedCardBasic = props => { ); }; -export const FeaturedCardArticle: FunctionComponent< - FeaturedCardArticleProps -> = ({ article, background, textColor }) => { +const FeaturedCardArticle: FunctionComponent = ({ + article, + background, + textColor, + ...rest +}) => { const promoImage = article.image?.['16:9'] || article.image; const image = promoImage && { ...transformImage(promoImage), @@ -111,6 +114,7 @@ export const FeaturedCardArticle: FunctionComponent< return ( = ({ exhibition, background, textColor }) => { +> = ({ exhibition, background, textColor, ...rest }) => { const props = convertItemToFeaturedCardProps(exhibition); return ( - +

{exhibition.title}

{!exhibition.statusOverride && exhibition.start && exhibition.end && ( @@ -161,23 +170,11 @@ const FeaturedCard: FunctionComponent< | (FeaturedCardExhibitionProps & { type: 'exhibition' }) > = props => { if (props.type === 'article') { - return ( - - ); + return ; } if (props.type === 'exhibition') { - return ( - - ); + return ; } return ; diff --git a/content/webapp/services/wellcome/content/types/api.ts b/content/webapp/services/wellcome/content/types/api.ts index a7b9f8c6b3..47cfd50dd8 100644 --- a/content/webapp/services/wellcome/content/types/api.ts +++ b/content/webapp/services/wellcome/content/types/api.ts @@ -23,7 +23,7 @@ export type ContentApiProps = { aggregations?: string[]; }; -type ContentApiImage = Image & { type: 'PrismicImage' }; +export type ContentApiImage = Image & { type: 'PrismicImage' }; export type Series = { id: string; From 1ae810b2955e3d84b520f8ff9ed5d442fba76333 Mon Sep 17 00:00:00 2001 From: Raphaelle Cantin Date: Thu, 12 Dec 2024 13:49:00 +0000 Subject: [PATCH 9/9] Remove trailing log --- .../components/Cards/FeaturedCard/FeaturedCard.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx index 0fb4276cad..add7842135 100644 --- a/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx +++ b/cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.stories.tsx @@ -59,7 +59,6 @@ type Story = StoryObj; export const Basic: Story = { name: 'FeaturedCard', render: args => { - console.log(args); return (