Improvements

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

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

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

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

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

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

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

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

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

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

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

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

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>
             )}

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>
             )}

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>
             )}

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>
             )}

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',

src/components/HeroSection/index.js

@@ -222,10 +222,15 @@ 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>
             )}
+            {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}

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;
         }
     }
-};
+};

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>
             )}

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>
             )}

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.'
 };

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 {