Add difficulty level to card

fronts-client/src/bundles/fixtures/recipe1.json

@@ -8,6 +8,7 @@
   ],
   "cuisineIds": [],
   "description": "The words “crab” and “butterscotch” aren’t often put together, but trust me on this one. Mixed with egg or mayonnaise, this also makes a great tart or sandwich filling, incidentally.",
+  "difficultyLevel": "easy",
   "featuredImage": {
     "url": "https://i.guim.co.uk/img/media/67f51e74f91032bd893349aa3a8c66ad55659bdd/30_111_2949_3201/master/2949.jpg?width=1600&dpr=1&s=none",
     "mediaId": "67f51e74f91032bd893349aa3a8c66ad55659bdd",

fronts-client/src/components/card/recipe/RecipeCard.tsx

@@ -15,6 +15,8 @@ import CardBody from '../CardBody';
 import CardMetaContainer from '../CardMetaContainer';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
 import { ThumbnailSmall } from 'components/image/Thumbnail';
+import CardMetaContent from '../CardMetaContent';
+import { upperFirst } from 'lodash';
 
 interface ContainerProps {
   onDragStart?: (d: React.DragEvent<HTMLElement>) => void;
@@ -58,6 +60,9 @@ const RecipeCardComponent = ({
       <CardBody data-testid="snap" size={size} fade={fade}>
         <CardMetaContainer size={size}>
           <CardMetaHeading>Recipe</CardMetaHeading>
+          <CardMetaContent>
+            {upperFirst(recipe.difficultyLevel)}
+          </CardMetaContent>
         </CardMetaContainer>
         <CardContent textSize={textSize}>
           <CardSettingsDisplay

fronts-client/src/types/Recipe.ts

@@ -18,6 +18,7 @@ export interface Recipe {
   id: string;
   title: string;
   canonicalArticle: string;
+  difficultyLevel: string;
   featuredImage: RecipeImage; // the latter is an old image format that appears in our test fixtures
   previewImage?: RecipeImage;
 }