Add overrides for the Chef card

app/model/editions/EditionsCard.scala

@@ -26,6 +26,13 @@ object CoverCardImages {
  implicit val format: OFormat[CoverCardImages] = Json.format[CoverCardImages]
 }
 
+
+case class Palette(paletteId: String, foregroundHex: String, backgroundHex: String)
+
+object Palette {
+ implicit val format: OFormat[Palette] = Json.format[Palette]
+}
+
 case class CardMetadata(
  headline: Option[String],
  customKicker: Option[String],
@@ -43,7 +50,9 @@ case class CardMetadata(
  overrideArticleMainMedia: Option[Boolean],
  coverCardImages: Option[CoverCardImages],
  promotionMetric: Option[Double],
- bio: Option[String] = None
+ bio: Option[String] = None, // Chef,
+ palette: Option[Palette] = None, // Chef
+ chefImageOverride: Option[Image] = None, // Chef
 )
 
 object CardMetadata {

app/model/editions/client/ClientCardMetadata.scala

@@ -3,6 +3,7 @@ package model.editions.client
 import ai.x.play.json.Jsonx
 import model.editions.{CardMetadata, CoverCardImages, Image, MediaType}
 import play.api.libs.json.OFormat
+import model.editions.Palette
 
 // This is a subset of the shared model here - https://github.com/guardian/facia-scala-client/blob/master/facia-json/src/main/scala/com/gu/facia/client/models/Collection.scala#L18
 // Why not reuse that model? We only want to surface the fields necessary for editions
@@ -37,7 +38,9 @@ case class ClientCardMetadata(
  coverCardMobileImage: Option[Image],
  coverCardTabletImage: Option[Image],
  promotionMetric: Option[Double],
- bio: Option[String]
+ bio: Option[String], // Chef
+ palette: Option[Palette], // Chef
+ chefImageOverride: Option[Image] // Chef
 ) {
  def toCardMetadata: CardMetadata = {
  val cutoutImage: Option[Image] = (imageCutoutSrcHeight, imageCutoutSrcWidth, imageCutoutSrc, imageCutoutSrcOrigin) match {
@@ -79,7 +82,9 @@ case class ClientCardMetadata(
  overrideArticleMainMedia,
  coverCardImages,
  promotionMetric,
- bio
+ bio,
+ palette,
+ chefImageOverride
  )
  }
 }
@@ -121,7 +126,9 @@ object ClientCardMetadata {
  cardMetadata.coverCardImages.flatMap(_.mobile),
  cardMetadata.coverCardImages.flatMap(_.tablet),
  cardMetadata.promotionMetric,
- cardMetadata.bio
+ cardMetadata.bio,
+ cardMetadata.palette,
+ cardMetadata.chefImageOverride
  )
  }
 }

fronts-client/src/actions/OptionsModal.ts

@@ -1,12 +1,13 @@
 import type { StartOptionsModal } from 'types/Action';
 import type { OptionsModalChoices } from 'types/Modals';
 import { ReactNode } from 'react';
+import noop from 'lodash/noop';
 
 const startOptionsModal = (
  title: string,
  description: string | ReactNode,
- options: OptionsModalChoices[],
- onCancel: () => void,
+ options: OptionsModalChoices[] = [],
+ onCancel: () => void = noop,
  showCancelButton: boolean = true
 ): StartOptionsModal => ({
  type: 'MODAL/START_OPTIONS_MODAL',

fronts-client/src/components/App.tsx

@@ -38,7 +38,7 @@ import {
 import ManageView from './Editions/ManageView';
 import FeaturesView from './Features/FeaturesView';
 import { PlaceholderAnimation } from 'components/BasePlaceholder';
-import OptionsModal from './OptionsModal';
+import OptionsModal from './modals/OptionsModal';
 import BannerNotification from './notifications/BannerNotification';
 
 // tslint:disable:no-unused-expression

fronts-client/src/components/card/chef/ChefCard.tsx

@@ -85,7 +85,9 @@ export const ChefCard = ({
  </CardHeadingContainer>
  </CardContent>
  <ImageAndGraphWrapper size={size}>
- <ThumbnailSmall url={chef?.bylineLargeImageUrl} />
+ <ThumbnailSmall
+ url={chef?.chefImageOverride?.src ?? chef?.bylineLargeImageUrl}
+ />
  </ImageAndGraphWrapper>
  <HoverActionsAreaOverlay data-testid="hover-overlay">
  <HoverActionsButtonWrapper

fronts-client/src/components/form/ArticleMetaForm.tsx

@@ -18,7 +18,7 @@ import {
 } from 'selectors/shared';
 import { createSelectFormFieldsForCard } from 'selectors/formSelectors';
 import { defaultObject } from 'util/selectorUtils';
-import { CardMeta, ArticleTag, CardSizes } from 'types/Collection';
+import { CardMeta, ArticleTag, CardSizes, ImageData } from 'types/Collection';
 import InputText from 'components/inputs/InputText';
 import InputTextArea from 'components/inputs/InputTextArea';
 import InputCheckboxToggleInline from 'components/inputs/InputCheckboxToggleInline';
@@ -32,7 +32,6 @@ import ConditionalField from 'components/inputs/ConditionalField';
 import ConditionalComponent from 'components/layout/ConditionalComponent';
 import {
  CardFormData,
- ImageData,
  getCardMetaFromFormValues,
  getInitialValuesForCardForm,
  getCapiValuesForArticleFields,
@@ -68,7 +67,10 @@ import { TextOptionsInputGroup } from 'components/form/TextOptionsInputGroup';
 import { FormButtonContainer } from 'components/form/FormButtonContainer';
 import { selectCollectionType } from 'selectors/frontsSelectors';
 import { Criteria } from 'types/Grid';
-
+import { ImageOptionsInputGroup } from './ImageOptionsInputGroup';
+import { RowContainer } from './RowContainer';
+import { ImageRowContainer } from './ImageRowContainer';
+import { ImageCol } from './ImageCol';
 
 interface ComponentProps extends ContainerProps {
  articleExists: boolean;
@@ -100,21 +102,6 @@ type RenderSlideshowProps = WrappedFieldArrayProps<ImageData> & {
  criteria: Criteria;
 };
 
-const RowContainer = styled.div`
- overflow: hidden;
-`;
-
-const ImageOptionsContainer = styled.div`
- display: flex;
- height: fit-content;
- flex-wrap: wrap;
- flex: 1;
- flex-direction: column;
- min-width: 300px;
- margin-top: ${(props: { size?: string }) =>
- props.size !== 'wide' ? 0 : '6px'};
-`;
-
 const SlideshowRowContainer = styled(RowContainer)`
  flex: 1 1 auto;
  overflow: visible;
@@ -123,12 +110,6 @@ const SlideshowRowContainer = styled(RowContainer)`
  props.size !== 'wide' ? 0 : '10px'};
 `;
 
-const ImageRowContainer = styled(RowContainer)`
- flex: 1 1 auto;
- margin-left: ${(props: { size?: string }) =>
- props.size !== 'wide' ? 0 : '10px'};
-`;
-
 const slideshowGutter = 5;
 const slidesPerRow = 5;
 
@@ -154,13 +135,6 @@ const SlideshowLabel = styled.div`
  margin-bottom: 12px;
 `;
 
-const ImageCol = styled(Col)`
- flex: initial;
- flex-shrink: 0;
- transition: opacity 0.15s;
- opacity: ${(props: { faded: boolean }) => (props.faded ? 0.6 : 1)};
-`;
-
 const CollectionEditedError = styled.div`
  background-color: yellow;
  margin-bottom: 1em;
@@ -671,7 +645,7 @@ class FormComponent extends React.Component<Props, FormComponentState> {
  originalValue={''}
  />
  </TextOptionsInputGroup>
- <ImageOptionsContainer size={this.props.size}>
+ <ImageOptionsInputGroup size={this.props.size}>
  <ImageRowContainer size={this.props.size}>
  <Row>
  <ImageCol faded={imageHide || !!coverCardImageReplace}>
@@ -806,7 +780,7 @@ class FormComponent extends React.Component<Props, FormComponentState> {
  />
  </SlideshowRowContainer>
  )}
- </ImageOptionsContainer>
+ </ImageOptionsInputGroup>
  {isEditionsMode && coverCardImageReplace && (
  <RowContainer>
  <Row>