stackbit · TomasBankauskas · Oct 10, 2021 · Oct 10, 2021 · Oct 10, 2021
diff --git a/models/ContactSection.yaml b/models/ContactSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: ContactSection
 label: Contact section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/models/CtaSection.yaml b/models/CtaSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: CtaSection
 label: CTA section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/models/FeaturedPeopleSection.yaml b/models/FeaturedPeopleSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPeopleSection
 label: Featured people section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/models/FeaturedPostsSection.yaml b/models/FeaturedPostsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPostsSection
 label: Featured posts section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: HeroSection
 label: Hero section
-variantField: variant
 extends:
   - Section
 groups:
@@ -94,4 +93,24 @@ fields:
     label: Background image
     models:
       - ImageBlock
-
+  - type: style
+    name: styles
+    styles:
+      badge:
+        fontSize: ['x-small', 'small', 'medium', 'large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      title:
+        fontSize: ['xx-large', 'xxx-large', 'xxxx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      subtitle:
+        fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      text:
+        fontSize: ['small', 'medium', 'large', 'x-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      actions:
+        justifyContent: ['start', 'center', 'end']
diff --git a/models/TestimonialsSection.yaml b/models/TestimonialsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: TestimonialsSection
 label: Testimonials section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/public/models/ContactSection.yaml b/public/models/ContactSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: ContactSection
 label: Contact section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/public/models/CtaSection.yaml b/public/models/CtaSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: CtaSection
 label: CTA section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPeopleSection
 label: Featured people section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPostsSection
 label: Featured posts section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: HeroSection
 label: Hero section
-variantField: variant
 extends:
   - Section
 groups:
@@ -94,4 +93,24 @@ fields:
     label: Background image
     models:
       - ImageBlock
-
+  - type: style
+    name: styles
+    styles:
+      badge:
+        fontSize: ['x-small', 'small', 'medium', 'large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      title:
+        fontSize: ['xx-large', 'xxx-large', 'xxxx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      subtitle:
+        fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      text:
+        fontSize: ['small', 'medium', 'large', 'x-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      actions:
+        justifyContent: ['start', 'center', 'end']
diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: TestimonialsSection
 label: Testimonials section
-variantField: variant
 extends:
   - Section
 groups:

diff --git a/src/components/HeroSection/hero-section.stories.js b/src/components/HeroSection/hero-section.stories.js
@@ -140,6 +140,31 @@ const args = {
         url: '/images/hero.png',
         altText: 'Image alt text',
         caption: 'Image caption'
+    },
+    styles: {
+        badge: {
+            fontSize: 'x-small',
+            fontWeight: '400',
+            textAlign: 'left'
+        },
+        title: {
+            fontSize: 'xxxx-large',
+            fontWeight: '500',
+            textAlign: 'left'
+        },
+        subtitle: {
+            fontSize: 'xx-large',
+            fontWeight: '300',
+            textAlign: 'left'
+        },
+        text: {
+            fontSize: 'large',
+            fontWeight: '400',
+            textAlign: 'left'
+        },
+        actions: {
+            justifyContent: 'start'
+        }
     }
 };
 

diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Markdown from 'markdown-to-jsx';
 import classNames from 'classnames';
 import { getDynamicComponent } from '../../components-registry';
+import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
 import Badge from '../Badge';
 import Action from '../Action';
 
@@ -98,7 +99,6 @@ function heroVariants(props) {
 
 function heroFeatureRight(props) {
     const contentAlignVert = props.contentAlignVert || 'middle';
-    const textAlign = props.textAlign || 'left';
     return (
         <div
             className={classNames('grid gap-8', {
@@ -111,14 +111,13 @@ function heroFeatureRight(props) {
                 {heroBody(props)}
                 {heroActions(props)}
             </div>
-            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature, textAlign)}</div>}
+            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature)}</div>}
         </div>
     );
 }
 
 function heroFeatureLeft(props) {
     const contentAlignVert = props.contentAlignVert || 'middle';
-    const textAlign = props.textAlign || 'left';
     return (
         <div
             className={classNames('grid gap-8', {
@@ -127,7 +126,7 @@ function heroFeatureLeft(props) {
                 'lg:items-end': contentAlignVert === 'bottom'
             })}
         >
-            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature, textAlign)}</div>}
+            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature)}</div>}
             <div>
                 {heroBody(props)}
                 {heroActions(props)}
@@ -137,12 +136,11 @@ function heroFeatureLeft(props) {
 }
 
 function heroFeatureTop(props) {
-    const textAlign = props.textAlign || 'left';
     return (
         <>
             {props.feature && (
                 <div className="mb-8 lg:mb-12" data-sb-field-path=".feature">
-                    {heroFeature(props.feature, textAlign)}
+                    {heroFeature(props.feature)}
                 </div>
             )}
             <div>
@@ -154,7 +152,6 @@ function heroFeatureTop(props) {
 }
 
 function heroFeatureBottom(props) {
-    const textAlign = props.textAlign || 'left';
     return (
         <>
             <div>
@@ -163,14 +160,14 @@ function heroFeatureBottom(props) {
             </div>
             {props.feature && (
                 <div className="mt-8 lg:mt-12" data-sb-field-path=".feature">
-                    {heroFeature(props.feature, textAlign)}
+                    {heroFeature(props.feature)}
                 </div>
             )}
         </>
     );
 }
 
-function heroFeature(feature, align) {
+function heroFeature(feature) {
     const featureType = feature.type;
     if (!featureType) {
         throw new Error(`hero section feature does not have the 'type' property`);
@@ -180,13 +177,7 @@ function heroFeature(feature, align) {
         throw new Error(`no component matching the hero section feature type: ${featureType}`);
     }
     return (
-        <Feature
-            {...feature}
-            className={classNames({
-                'ml-auto': align === 'right',
-                'mx-auto': align === 'center'
-            })}
-        />
+        <Feature {...feature} />
     );
 }
 
@@ -211,27 +202,55 @@ function heroBackgroundImage(image) {
 }
 
 function heroBody(props) {
-    const textAlign = props.textAlign || 'left';
+
     return (
-        <div
-            className={classNames({
-                'text-center': textAlign === 'center',
-                'text-right': textAlign === 'right'
-            })}
-        >
-            {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
+        <div>
+            {props.badge && (
+                <div
+                    className={classNames(
+                        'component-section-badge',
+                        'mb-4',
+                        mapStyles(props.styles.badge))
+                    }
+                    data-sb-field-path=".badge"
+                >
+                    <Badge {...props.badge} className="inline-block" annotationPrefix=".badge" />
+                </div>
+            )}
             {props.title && (
-                <h2 className="component-section-title text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
+                <h2
+                    className={classNames(
+                        'component-section-title',
+                        'mb-6',
+                        mapStyles(props.styles.title))
+                    }
+                    data-sb-field-path=".title"
+                >
                     {props.title}
                 </h2>
             )}
             {props.subtitle && (
-                <p className="text-2xl mb-3" data-sb-field-path=".subtitle">
+                <p
+                    className={classNames(
+                        'component-section-subtitle',
+                        'mb-3',
+                        mapStyles(props.styles.subtitle))
+                    }
+                    data-sb-field-path=".subtitle"
+                >
                     {props.subtitle}
                 </p>
             )}
             {props.text && (
-                <Markdown options={{ forceBlock: true }} className="md:text-lg" data-sb-field-path=".text">
+                <Markdown
+                    options={{ forceBlock: true }}
+                    className={classNames(
+                        'component-section-text',
+                        'mb-3',
+                        mapStyles(props.styles.text))
+                    }
+                    data-sb-field-path=".text"
+                >
                     {props.text}
                 </Markdown>
             )}
@@ -240,18 +259,20 @@ function heroBody(props) {
 }
 
 function heroActions(props) {
-    const textAlign = props.textAlign || 'left';
     const actions = props.actions || [];
     if (actions.length === 0) {
         return null;
     }
     return (
         <div
-            className={classNames('flex flex-wrap items-center -mx-2', {
-                'mt-8': props.badge || props.title || props.text,
-                'justify-center': textAlign === 'center',
-                'justify-end': textAlign === 'right'
-            })}
+            className={classNames(
+                'flex',
+                'flex-wrap',
+                'items-center',
+                'mt-8',
+                '-mx-2',
+                mapStyles(props.styles.actions)
+            )}
             data-sb-field-path=".actions"
         >
             {actions.map((action, index) => (