From 513ff7f16aeb3f46c9970ced5ee39bef8ddc03f7 Mon Sep 17 00:00:00 2001
From: tomasbankauskas <tbdizainas@gmail.com>
Date: Tue, 5 Oct 2021 17:10:07 +0300
Subject: [PATCH 1/2] updated InlineMarkdown, added subtitle to hero, fixed
 validation errors

---
 models/ContactSection.yaml                         |  1 -
 models/CtaSection.yaml                             |  1 -
 models/FeaturedPeopleSection.yaml                  |  1 -
 models/FeaturedPostsSection.yaml                   |  3 +--
 models/HeroSection.yaml                            |  5 ++++-
 models/TestimonialsSection.yaml                    |  1 -
 public/models/ContactSection.yaml                  |  1 -
 public/models/CtaSection.yaml                      |  1 -
 public/models/FeaturedPeopleSection.yaml           |  1 -
 public/models/FeaturedPostsSection.yaml            |  3 +--
 public/models/HeroSection.yaml                     |  5 ++++-
 public/models/TestimonialsSection.yaml             |  1 -
 src/components/HeroSection/hero-section.stories.js | 13 ++-----------
 src/components/HeroSection/index.js                |  5 +++++
 src/components/InlineMarkdown/index.js             | 13 +++++++++----
 15 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/models/ContactSection.yaml b/models/ContactSection.yaml
index fde0329d..7e2915be 100644
--- a/models/ContactSection.yaml
+++ b/models/ContactSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Contact form with feature on the left
         value: variant-a
diff --git a/models/CtaSection.yaml b/models/CtaSection.yaml
index 4c1193eb..a4c74399 100644
--- a/models/CtaSection.yaml
+++ b/models/CtaSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: CTA with buttons at the bottom
         value: variant-a
diff --git a/models/FeaturedPeopleSection.yaml b/models/FeaturedPeopleSection.yaml
index d0e808a1..15da23a0 100644
--- a/models/FeaturedPeopleSection.yaml
+++ b/models/FeaturedPeopleSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Four columns, person info with image at the top
         value: variant-a
diff --git a/models/FeaturedPostsSection.yaml b/models/FeaturedPostsSection.yaml
index d4c39bfd..c39f3eb1 100644
--- a/models/FeaturedPostsSection.yaml
+++ b/models/FeaturedPostsSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Three columns, post thumbnail at the top
         value: variant-a
@@ -53,4 +52,4 @@ fields:
     default:
         - content/pages/blog/post-three.md
         - content/pages/blog/post-two.md
-        - content/pages/blog/post-one.md     
+        - content/pages/blog/post-one.md
diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml
index aac934e3..d0e35989 100644
--- a/models/HeroSection.yaml
+++ b/models/HeroSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Hero with feature on the right
         value: variant-a
@@ -48,6 +47,10 @@ fields:
     name: title
     label: Title
     default: This Is A Big Hero Headline
+  - type: string
+    name: subtitle
+    label: Subtitle
+    default: This Is Subtitle
   - type: markdown
     name: text
     label: Text
diff --git a/models/TestimonialsSection.yaml b/models/TestimonialsSection.yaml
index 50bcc583..c7eb3b02 100644
--- a/models/TestimonialsSection.yaml
+++ b/models/TestimonialsSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Testimonial with author image at the bottom
         value: variant-a
diff --git a/public/models/ContactSection.yaml b/public/models/ContactSection.yaml
index fde0329d..7e2915be 100644
--- a/public/models/ContactSection.yaml
+++ b/public/models/ContactSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Contact form with feature on the left
         value: variant-a
diff --git a/public/models/CtaSection.yaml b/public/models/CtaSection.yaml
index 4c1193eb..a4c74399 100644
--- a/public/models/CtaSection.yaml
+++ b/public/models/CtaSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: CTA with buttons at the bottom
         value: variant-a
diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml
index d0e808a1..15da23a0 100644
--- a/public/models/FeaturedPeopleSection.yaml
+++ b/public/models/FeaturedPeopleSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Four columns, person info with image at the top
         value: variant-a
diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml
index d4c39bfd..c39f3eb1 100644
--- a/public/models/FeaturedPostsSection.yaml
+++ b/public/models/FeaturedPostsSection.yaml
@@ -10,7 +10,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Three columns, post thumbnail at the top
         value: variant-a
@@ -53,4 +52,4 @@ fields:
     default:
         - content/pages/blog/post-three.md
         - content/pages/blog/post-two.md
-        - content/pages/blog/post-one.md     
+        - content/pages/blog/post-one.md
diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml
index aac934e3..d0e35989 100644
--- a/public/models/HeroSection.yaml
+++ b/public/models/HeroSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Hero with feature on the right
         value: variant-a
@@ -48,6 +47,10 @@ fields:
     name: title
     label: Title
     default: This Is A Big Hero Headline
+  - type: string
+    name: subtitle
+    label: Subtitle
+    default: This Is Subtitle
   - type: markdown
     name: text
     label: Text
diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml
index 50bcc583..c7eb3b02 100644
--- a/public/models/TestimonialsSection.yaml
+++ b/public/models/TestimonialsSection.yaml
@@ -28,7 +28,6 @@ fields:
   - type: enum
     name: variant
     label: Arrangement
-    controlType: thumbnails
     options:
       - label: Testimonial with author image at the bottom
         value: variant-a
diff --git a/src/components/HeroSection/hero-section.stories.js b/src/components/HeroSection/hero-section.stories.js
index 6c6889df..0335c808 100644
--- a/src/components/HeroSection/hero-section.stories.js
+++ b/src/components/HeroSection/hero-section.stories.js
@@ -114,6 +114,8 @@ const args = {
     contentAlignHoriz: 'center',
     contentAlignVert: 'middle',
     textAlign: 'left',
+    title: 'The quick, brown fox jumps over **a lazy dog**',
+    subtitle: 'Section subtitle',
     badge: {
         type: 'Badge',
         label: 'Brand new'
@@ -154,10 +156,6 @@ HeroLeftVideo.args = {
     colors: 'colors-c',
     width: 'full',
     height: 'tall',
-    badge: {
-        type: 'Badge',
-        label: 'Brand new'
-    },
     actions: [
         {
             type: 'Button',
@@ -186,11 +184,6 @@ HeroBottomImage.args = {
     width: 'full',
     contentWidth: 'small',
     textAlign: 'center',
-    badge: {
-        type: 'Badge',
-        label: 'Brand new'
-    },
-    title: 'The quick, brown fox jumps over **a lazy dog**',
     actions: [
         {
             type: 'Button',
@@ -219,7 +212,6 @@ HeroTextOnly.args = {
     contentAlignHoriz: 'left',
     contentAlignVert: 'bottom',
     badge: null,
-    title: 'The quick, brown fox jumps over **a lazy dog**',
     actions: [
         {
             type: 'Button',
@@ -256,7 +248,6 @@ HeroRightForm.args = {
     colors: 'colors-f',
     contentWidth: 'medium',
     badge: null,
-    title: 'The quick, brown fox jumps over **a lazy dog**',
     actions: [
         {
             type: 'Link',
diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js
index a0ccfff2..64c0e963 100644
--- a/src/components/HeroSection/index.js
+++ b/src/components/HeroSection/index.js
@@ -226,6 +226,11 @@ function heroBody(props) {
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
+            {props.subtitle && (
+                <p className="text-2xl mb-3" data-sb-field-path=".subtitle">
+                    {props.subtitle}
+                </p>
+            )}
             {props.text && (
                 <Markdown options={{ forceBlock: true }} className="md:text-lg" data-sb-field-path=".text">
                     {props.text}
diff --git a/src/components/InlineMarkdown/index.js b/src/components/InlineMarkdown/index.js
index f6259308..e081ed76 100644
--- a/src/components/InlineMarkdown/index.js
+++ b/src/components/InlineMarkdown/index.js
@@ -3,16 +3,21 @@ import Markdown from 'markdown-to-jsx';
 
 export default function InlineMarkdown(props) {
     return (
-        <Markdown options={{ forceInline: true, overrides }}>
+        <Markdown options={{ wrapper: React.Fragment, overrides }}>
             {props.children}
         </Markdown>
     );
 }
 
 const overrides = {
-    strong: {
+    div: {
         component: (props) => {
-            return <span className="sb-highlight">{props.children}</span>;
+            return props.children;
+        }
+    },
+    p: {
+        component: (props) => {
+            return props.children;
         }
     }
-};
+};
\ No newline at end of file

From e4c862a265d1aa0e5ce3358402323adc7190c0af Mon Sep 17 00:00:00 2001
From: tomasbankauskas <tbdizainas@gmail.com>
Date: Tue, 5 Oct 2021 17:22:38 +0300
Subject: [PATCH 2/2] updated style.css

---
 src/components/ContactSection/index.js             | 2 +-
 src/components/CtaSection/index.js                 | 2 +-
 src/components/FeaturedPeopleSection/index.js      | 2 +-
 src/components/FeaturedPostsSection/index.js       | 2 +-
 src/components/HeroSection/index.js                | 2 +-
 src/components/TestimonialsSection/index.js        | 2 +-
 src/components/TextSection/index.js                | 2 +-
 src/components/TextSection/text-section.stories.js | 2 +-
 styles/default/style.css                           | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ContactSection/index.js b/src/components/ContactSection/index.js
index 70dab4e0..f7824cd5 100644
--- a/src/components/ContactSection/index.js
+++ b/src/components/ContactSection/index.js
@@ -170,7 +170,7 @@ function contactContent(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
+                <h2 className="component-section-title text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/CtaSection/index.js b/src/components/CtaSection/index.js
index bb9e0f0b..242ef2c8 100644
--- a/src/components/CtaSection/index.js
+++ b/src/components/CtaSection/index.js
@@ -175,7 +175,7 @@ function ctaContent(props) {
         <>
             {props.badge && <Badge {...props.badge} className="inline-block inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-3xl tracking-tight sm:text-4xl mb-6" data-sb-field-path=".title">
+                <h2 className="component-section-title text-3xl tracking-tight sm:text-4xl mb-6" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/FeaturedPeopleSection/index.js b/src/components/FeaturedPeopleSection/index.js
index da6bd234..0c2cb840 100644
--- a/src/components/FeaturedPeopleSection/index.js
+++ b/src/components/FeaturedPeopleSection/index.js
@@ -96,7 +96,7 @@ function featuredPeopleHeader(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
+                <h2 className="component-section-title text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/FeaturedPostsSection/index.js b/src/components/FeaturedPostsSection/index.js
index 4152030d..4a924d8b 100644
--- a/src/components/FeaturedPostsSection/index.js
+++ b/src/components/FeaturedPostsSection/index.js
@@ -98,7 +98,7 @@ function featuredPostsHeader(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
+                <h2 className="component-section-title text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js
index 64c0e963..67954bb3 100644
--- a/src/components/HeroSection/index.js
+++ b/src/components/HeroSection/index.js
@@ -222,7 +222,7 @@ function heroBody(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
+                <h2 className="component-section-title text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/TestimonialsSection/index.js b/src/components/TestimonialsSection/index.js
index b6515a01..31e70c0b 100644
--- a/src/components/TestimonialsSection/index.js
+++ b/src/components/TestimonialsSection/index.js
@@ -94,7 +94,7 @@ function testimonialsHeader(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
+                <h2 className="component-section-title text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/TextSection/index.js b/src/components/TextSection/index.js
index 2c9a3fd2..1e738ad6 100644
--- a/src/components/TextSection/index.js
+++ b/src/components/TextSection/index.js
@@ -86,7 +86,7 @@ function textSectionBody(props) {
         >
             {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
             {props.title && (
-                <h2 className="text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
+                <h2 className="component-section-title text-3xl tracking-tight sm:text-4xl" data-sb-field-path=".title">
                     <InlineMarkdown>{props.title}</InlineMarkdown>
                 </h2>
             )}
diff --git a/src/components/TextSection/text-section.stories.js b/src/components/TextSection/text-section.stories.js
index 07df6df6..49b01bce 100644
--- a/src/components/TextSection/text-section.stories.js
+++ b/src/components/TextSection/text-section.stories.js
@@ -75,7 +75,7 @@ const args = {
         type: 'Badge',
         label: 'Small text'
     },
-    title: 'The Section Title',
+    title: 'The Section **Title**',
     subtitle: 'The section subtitle',
     text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.'
 };
diff --git a/styles/default/style.css b/styles/default/style.css
index cf3be28f..557dd419 100644
--- a/styles/default/style.css
+++ b/styles/default/style.css
@@ -43,7 +43,7 @@
     .sb-divider {
         @apply flex items-center h-4 before:flex-grow before:h-px;
     }
-    .sb-highlight {
+    .component-section-title strong {
         @apply text-info;
     }
     .sb-form-control {