From 7b3f50e8b31b8f00ea806ad14399fb427c65d1a7 Mon Sep 17 00:00:00 2001 From: Sven van Steenis Date: Wed, 14 Dec 2022 11:32:38 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20move=20'useCarousel'=20to=20main?= =?UTF-8?q?=20promotion=20component=20(#1373)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../objects/promotion/promoteMagazine.tsx | 9 ----- .../schemas/objects/promotion/promoteNews.tsx | 9 ----- .../objects/promotion/promoteTopic.tsx | 9 ----- .../schemas/objects/promotion/promotion.tsx | 10 +++++ web/lib/queries/common/pageContentFields.ts | 2 +- web/pageComponents/topicPages/Promotion.tsx | 4 +- .../promotions/MultiplePromotions.tsx | 40 +++++++++---------- web/types/types.ts | 2 +- 8 files changed, 34 insertions(+), 51 deletions(-) diff --git a/studio/schemas/objects/promotion/promoteMagazine.tsx b/studio/schemas/objects/promotion/promoteMagazine.tsx index b64f3481f..3f33b5625 100644 --- a/studio/schemas/objects/promotion/promoteMagazine.tsx +++ b/studio/schemas/objects/promotion/promoteMagazine.tsx @@ -70,15 +70,6 @@ export default { options: { sortable: false }, hidden: ({ parent }: { parent: MagazinePromotion }) => parent?.manuallySelectArticles === true, }, - { - name: 'useCarousel', - title: 'Use carousel', - description: 'Display the cards in a horizontal carousel', - type: 'boolean', - initialValue: false, - readOnly: !Flags.IS_DEV, - hidden: !Flags.IS_DEV, - }, ], preview: { select: { diff --git a/studio/schemas/objects/promotion/promoteNews.tsx b/studio/schemas/objects/promotion/promoteNews.tsx index 5d756e6f9..70da215eb 100644 --- a/studio/schemas/objects/promotion/promoteNews.tsx +++ b/studio/schemas/objects/promotion/promoteNews.tsx @@ -64,15 +64,6 @@ export default { validation: (Rule: Rule) => Rule.unique(), options: { sortable: false }, }, - { - name: 'useCarousel', - title: 'Use carousel', - description: 'Display the cards in a horizontal carousel', - type: 'boolean', - initialValue: false, - readOnly: !Flags.IS_DEV, - hidden: !Flags.IS_DEV, - }, ].filter((e) => e), preview: { select: { diff --git a/studio/schemas/objects/promotion/promoteTopic.tsx b/studio/schemas/objects/promotion/promoteTopic.tsx index 98ee5a468..fbe03c623 100644 --- a/studio/schemas/objects/promotion/promoteTopic.tsx +++ b/studio/schemas/objects/promotion/promoteTopic.tsx @@ -87,15 +87,6 @@ export default { ], validation: (Rule: Rule) => Rule.unique().min(3).max(3), }, - { - name: 'useCarousel', - title: 'Use carousel', - description: 'Display the cards in a horizontal carousel', - type: 'boolean', - initialValue: false, - readOnly: !Flags.IS_DEV, - hidden: !Flags.IS_DEV, - }, ], preview: { select: { diff --git a/studio/schemas/objects/promotion/promotion.tsx b/studio/schemas/objects/promotion/promotion.tsx index 8db0b0a21..6c7db4056 100644 --- a/studio/schemas/objects/promotion/promotion.tsx +++ b/studio/schemas/objects/promotion/promotion.tsx @@ -78,6 +78,16 @@ export default { options: { sortable: false }, validation: (Rule: Rule) => Rule.required().min(1).max(1), }, + { + name: 'useCarousel', + title: 'Use carousel', + description: + 'When this is enabled, the promotion will automatically be displayed in a horizontal carousel if the amount of content is more than the screen size allows', + type: 'boolean', + initialValue: false, + readOnly: !Flags.IS_DEV, + hidden: !Flags.IS_DEV, + }, { title: 'Background', description: 'Pick a colour for the background. Default is white.', diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 26c4528ba..f9b9878ac 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -200,10 +200,10 @@ const pageContentFields = /* groq */ ` ..., ${markDefs}, }, + "useCarousel": useCarousel, "content": promotion[0]{ "id": _key, "type": _type, - "useCarousel": useCarousel, _type == "promoteNews" => { "tags": tags[]->{ "id": _id, diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx index d6c0a2a14..d2d83d29d 100644 --- a/web/pageComponents/topicPages/Promotion.tsx +++ b/web/pageComponents/topicPages/Promotion.tsx @@ -27,7 +27,7 @@ const StyledHeading = styled(TitleText)` ` const Promotion = ({ data, anchor, ...rest }: { data: PromotionData; anchor?: string }) => { - const { title, ingress, content, designOptions } = data + const { title, ingress, content, useCarousel, designOptions } = data // const { articles = [], pages = [] } = data.promotion const promotions = content?.promotions || [] const variant = data.content?.type @@ -52,7 +52,7 @@ const Promotion = ({ data, anchor, ...rest }: { data: PromotionData; anchor?: st variant={variant} hasSectionTitle={!!title} eventPromotionSettings={content?.eventPromotionSettings} - useCarousel={content?.useCarousel} + useCarousel={useCarousel} /> )} diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx index 5d9be1610..8660f42f7 100644 --- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx +++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx @@ -108,6 +108,19 @@ const MultiplePromotions = ({ ) } + if (Flags.IS_DEV && useCarousel) { + return ( + + {data.map((item) => { + const card = getCard(item) + if (card) { + return {card} + } + })} + + ) + } + if (variant === 'promotePeople') { return ( @@ -121,26 +134,13 @@ const MultiplePromotions = ({ } return ( - <> - {Flags.IS_DEV && useCarousel ? ( - - {data.map((item) => { - const card = getCard(item) - if (card) { - return {card} - } - })} - - ) : ( - - <> - {data.map((item) => { - return getCard(item) - })} - - - )} - + + <> + {data.map((item) => { + return getCard(item) + })} + + ) } diff --git a/web/types/types.ts b/web/types/types.ts index 9bb919910..bc5ae96ae 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -488,8 +488,8 @@ export type PromotionData = { promotions: CardData[] | PeopleCardData[] | EventCardData[] type: PromotionType eventPromotionSettings?: EventPromotionSettings - useCarousel?: boolean | undefined } + useCarousel?: boolean | undefined designOptions?: DesignOptions }