From a81ad0952c3b230fb8e2cb3fc8812b49b40fb49d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Wed, 6 Jul 2022 18:07:22 +0200
Subject: [PATCH] Add Blog callout CMS blocks

---
 src/lib/cms/fragments/blog-post.gql |  8 +++
 src/lib/cms/generated.ts            | 82 ++++++++++++++++++++++++++++-
 src/lib/cms/graphql.schema.json     | 28 +++++-----
 src/lib/renderer/blog.module.scss   | 34 ++++++++++++
 src/lib/renderer/index.js           | 14 ++++-
 5 files changed, 149 insertions(+), 17 deletions(-)

diff --git a/src/lib/cms/fragments/blog-post.gql b/src/lib/cms/fragments/blog-post.gql
index 1e41084..46ed7a1 100644
--- a/src/lib/cms/fragments/blog-post.gql
+++ b/src/lib/cms/fragments/blog-post.gql
@@ -30,6 +30,14 @@ fragment BlogPost on BlogPostRecord {
         label
         url
       }
+      ... on Callout01Record {
+        id
+        text
+      }
+      ... on Callout02Record {
+        id
+        text
+      }
     }
   }
   image {
diff --git a/src/lib/cms/generated.ts b/src/lib/cms/generated.ts
index 3f3dedf..13d71c4 100644
--- a/src/lib/cms/generated.ts
+++ b/src/lib/cms/generated.ts
@@ -104,7 +104,11 @@ export type AuthorRecord_SeoMetaTagsArgs = {
   locale?: InputMaybe<SiteLocale>
 }
 
-export type BlogPostModelContentBlocksField = CtaRecord | ImageRecord
+export type BlogPostModelContentBlocksField =
+  | CtaRecord
+  | ImageRecord
+  | Callout01Record
+  | Callout02Record
 
 export type BlogPostModelContentField = {
   __typename?: 'BlogPostModelContentField'
@@ -343,6 +347,44 @@ export type CtaRecord = {
   url?: Maybe<Scalars['String']>
 }
 
+export type Callout01Record = {
+  __typename?: 'Callout01Record'
+  _createdAt: Scalars['DateTime']
+  _firstPublishedAt?: Maybe<Scalars['DateTime']>
+  _isValid: Scalars['BooleanType']
+  _modelApiKey: Scalars['String']
+  _publicationScheduledAt?: Maybe<Scalars['DateTime']>
+  _publishedAt?: Maybe<Scalars['DateTime']>
+  /** SEO meta tags */
+  _seoMetaTags: Array<Tag>
+  _status: ItemStatus
+  _unpublishingScheduledAt?: Maybe<Scalars['DateTime']>
+  _updatedAt: Scalars['DateTime']
+  createdAt: Scalars['DateTime']
+  id: Scalars['ItemId']
+  text?: Maybe<Scalars['String']>
+  updatedAt: Scalars['DateTime']
+}
+
+export type Callout02Record = {
+  __typename?: 'Callout01Record'
+  _createdAt: Scalars['DateTime']
+  _firstPublishedAt?: Maybe<Scalars['DateTime']>
+  _isValid: Scalars['BooleanType']
+  _modelApiKey: Scalars['String']
+  _publicationScheduledAt?: Maybe<Scalars['DateTime']>
+  _publishedAt?: Maybe<Scalars['DateTime']>
+  /** SEO meta tags */
+  _seoMetaTags: Array<Tag>
+  _status: ItemStatus
+  _unpublishingScheduledAt?: Maybe<Scalars['DateTime']>
+  _updatedAt: Scalars['DateTime']
+  createdAt: Scalars['DateTime']
+  id: Scalars['ItemId']
+  text?: Maybe<Scalars['String']>
+  updatedAt: Scalars['DateTime']
+}
+
 /** Record of type Cta (cta) */
 export type CtaRecord_SeoMetaTagsArgs = {
   locale?: InputMaybe<SiteLocale>
@@ -2586,6 +2628,16 @@ export type BlogPostFragment = {
             height?: any | null
           } | null
         }
+      | {
+          __typename: 'Callout01Record'
+          id: any
+          text?: string | null
+        }
+      | {
+          __typename: 'Callout02Record'
+          id: any
+          text?: string | null
+        }
     >
   } | null
   image?: {
@@ -2691,6 +2743,16 @@ export type GetBlogPostsQuery = {
               height?: any | null
             } | null
           }
+        | {
+            __typename: 'Callout01Record'
+            id: any
+            text?: string | null
+          }
+        | {
+            __typename: 'Callout02Record'
+            id: any
+            text?: string | null
+          }
       >
     } | null
     image?: {
@@ -2759,6 +2821,16 @@ export type SingleBlogPostQuery = {
               height?: any | null
             } | null
           }
+        | {
+            __typename: 'Callout01Record'
+            id: any
+            text?: string | null
+          }
+        | {
+            __typename: 'Callout02Record'
+            id: any
+            text?: string | null
+          }
       >
     } | null
     image?: {
@@ -2826,6 +2898,14 @@ export const BlogPostFragmentDoc = gql`
           label
           url
         }
+        ... on Callout01Record {
+          id
+          text
+        }
+        ... on Callout02Record {
+          id
+          text
+        }
       }
     }
     image {
diff --git a/src/lib/cms/graphql.schema.json b/src/lib/cms/graphql.schema.json
index 6bd4919..d968a5e 100644
--- a/src/lib/cms/graphql.schema.json
+++ b/src/lib/cms/graphql.schema.json
@@ -586,6 +586,16 @@
             "kind": "OBJECT",
             "name": "ImageRecord",
             "ofType": null
+          },
+          {
+            "kind": "OBJECT",
+            "name": "Callout01Record",
+            "ofType": null
+          },
+          {
+            "kind": "OBJECT",
+            "name": "Callout02Record",
+            "ofType": null
           }
         ]
       },
@@ -11793,11 +11803,7 @@
         "name": "include",
         "description": "Directs the executor to include this field or fragment only when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -11821,11 +11827,7 @@
         "name": "skip",
         "description": "Directs the executor to skip this field or fragment when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -11849,9 +11851,7 @@
         "name": "specifiedBy",
         "description": "Exposes a URL that specifies the behavior of this scalar.",
         "isRepeatable": false,
-        "locations": [
-          "SCALAR"
-        ],
+        "locations": ["SCALAR"],
         "args": [
           {
             "name": "url",
@@ -11873,4 +11873,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/renderer/blog.module.scss b/src/lib/renderer/blog.module.scss
index 7200c51..6ad9f28 100644
--- a/src/lib/renderer/blog.module.scss
+++ b/src/lib/renderer/blog.module.scss
@@ -106,6 +106,40 @@
   }
 }
 
+.callout {
+  &__01 {
+    @include respond-to('mobile') {
+      padding: tovw(20px, 'default', 20px);
+    }
+
+    padding: tovw(40px, 'default', 25px);
+    margin-bottom: tovw(44px, 'default', 35px);
+    border: 1px solid var(--color-accent);
+    background-color: rgb(0 0 244 / 0.3);
+    border-radius: 8px;
+
+    p {
+      margin: tovw(10px, 'default', 6px) 0;
+    }
+  }
+
+  &__02 {
+    @include respond-to('mobile') {
+      padding: tovw(20px, 'default', 20px);
+    }
+
+    padding: tovw(40px, 'default', 25px);
+    margin-bottom: tovw(44px, 'default', 35px);
+    border: 1px solid var(--color-grey-light);
+    background-color: transparent;
+    border-radius: 8px;
+
+    p {
+      margin: tovw(10px, 'default', 6px) 0;
+    }
+  }
+}
+
 .img {
   margin: tovw(136px, 'default', 72px) auto;
 
diff --git a/src/lib/renderer/index.js b/src/lib/renderer/index.js
index fb65140..c0ea181 100644
--- a/src/lib/renderer/index.js
+++ b/src/lib/renderer/index.js
@@ -8,8 +8,18 @@ import s from './blog.module.scss'
 
 export const renderBlock = ({ record }) => {
   switch (record.__typename) {
-    case 'CalloutRecord':
-      return <Marked>{record.content ?? ''}</Marked>
+    case 'Callout01Record':
+      return (
+        <div className={s.callout__01}>
+          <Marked>{record.text ?? ''}</Marked>
+        </div>
+      )
+    case 'Callout02Record':
+      return (
+        <div className={s.callout__02}>
+          <Marked>{record.text ?? ''}</Marked>
+        </div>
+      )
     case 'ImageRecord':
       return (
         <div className={s.img}>