stackbit · TomasBankauskas · Nov 23, 2021 · Nov 23, 2021
diff --git a/src/components/Action/index.tsx b/src/components/Action/index.tsx
@@ -26,7 +26,7 @@ export default function Action(props) {
     const icon = props.icon || 'arrowLeft';
     const iconPosition = props.iconPosition || 'right';
     const IconComponent = iconMap[icon];
-    const annotationPrefix = props.annotationPrefix || '';
+    const annotationPrefix = props['data-sb-field-path'] || '';
     const annotations = [
         `${annotationPrefix}`,
         `${annotationPrefix}.url#@href`,

diff --git a/src/components/CheckboxFormControl/index.tsx b/src/components/CheckboxFormControl/index.tsx
@@ -17,7 +17,7 @@ export default function CheckboxFormControl(props) {
             className={classNames('sb-form-control', 'flex', 'items-center', 'px-2', 'w-full', {
                 'sm:w-1/2': width === '1/2'
             })}
-            data-sb-field-path={props.annotationPrefix}
+            data-sb-field-path={props['data-sb-field-path']}
         >
             <input
                 id={props.name}

diff --git a/src/components/CtaSection/index.tsx b/src/components/CtaSection/index.tsx
@@ -116,7 +116,7 @@ function ctaActions(props) {
                 data-sb-field-path=".actions"
             >
                 {actions.map((action, index) => (
-                    <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                    <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
                 ))}
             </div>
         </div>

diff --git a/src/components/EmailFormControl/index.tsx b/src/components/EmailFormControl/index.tsx
@@ -16,7 +16,7 @@ export default function EmailFormControl(props) {
             className={classNames('sb-form-control', 'px-2', 'w-full', {
                 'sm:w-1/2': width === '1/2'
             })}
-            data-sb-field-path={props.annotationPrefix}
+            data-sb-field-path={props['data-sb-field-path']}
         >
             {props.label && (
                 <label id={labelId} className="sb-label" htmlFor={props.name} data-sb-field-path=".label .name#@for">

diff --git a/src/components/FeaturedItemsSection/featured-items-section.stories.tsx b/src/components/FeaturedItemsSection/featured-items-section.stories.tsx
@@ -165,17 +165,117 @@ const args = {
             borderColor: 'border-neutral'
         },
         title: {
-            textAlign: 'left'
+            textAlign: 'center'
         },
         subtitle: {
-            textAlign: 'left'
+            textAlign: 'center'
         },
         actions: {
-            justifyContent: 'flex-start'
+            justifyContent: 'center'
         }
     }
 };
 
 export const Primary = Template.bind({});
 Primary.storyName = 'Featured items, four columns';
 Primary.args = args;
+
+export const FeaturedItemsTwoCol = Template.bind({});
+FeaturedItemsTwoCol.storyName = 'Featured items, two columns';
+FeaturedItemsTwoCol.args = {
+    ...args,
+    actions: null,
+    columns: 2,
+    items: [
+        {
+            type: 'ItemBlock',
+            title: 'Item Title',
+            subtitle: 'This is the subtitle',
+            text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.',
+            featuredImage: {
+                type: 'ImageBlock',
+                url: 'https://assets.stackbit.com/components/images/default/post-1.jpeg',
+                altText: 'Post Image'
+            },
+            actions: [
+                {
+                    type: 'Button',
+                    url: '#',
+                    label: 'Learn more',
+                    style: 'primary'
+                }
+            ],
+            styles: {
+                title: {
+                    textAlign: 'left'
+                },
+                subtitle: {
+                    textAlign: 'left'
+                },
+                text: {
+                    textAlign: 'left'
+                },
+                actions: {
+                    justifyContent: 'flex-start'
+                }
+            }
+        },
+        {
+            type: 'ItemBlock',
+            title: 'Item Title',
+            subtitle: 'This is the subtitle',
+            text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.',
+            actions: [
+                {
+                    type: 'Button',
+                    url: '#',
+                    label: 'Learn more',
+                    style: 'primary'
+                }
+            ],
+            featuredImage: {
+                type: 'ImageBlock',
+                url: 'https://assets.stackbit.com/components/images/default/post-1.jpeg',
+                altText: 'Post Image'
+            },
+            styles: {
+                title: {
+                    textAlign: 'left'
+                },
+                subtitle: {
+                    textAlign: 'left'
+                },
+                text: {
+                    textAlign: 'left'
+                },
+                actions: {
+                    justifyContent: 'flex-start'
+                }
+            }
+        }
+    ],
+    styles: {
+        self: {
+            height: 'auto',
+            width: 'wide',
+            margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+            padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            borderRadius: 'none',
+            borderWidth: 0,
+            borderStyle: 'none',
+            borderColor: 'border-neutral'
+        },
+        title: {
+            textAlign: 'left'
+        },
+        subtitle: {
+            textAlign: 'left'
+        },
+        actions: {
+            justifyContent: 'flex-start'
+        }
+    }
+};
diff --git a/src/components/FeaturedItemsSection/index.tsx b/src/components/FeaturedItemsSection/index.tsx
@@ -81,7 +81,7 @@ function featuredItemActions(props) {
             data-sb-field-path=".actions"
         >
             {actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/FeaturedPeopleSection/index.tsx b/src/components/FeaturedPeopleSection/index.tsx
@@ -83,7 +83,7 @@ function featuredPeopleActions(props) {
             data-sb-field-path=".actions"
         >
             {props.actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/FeaturedPostsSection/index.tsx b/src/components/FeaturedPostsSection/index.tsx
@@ -84,7 +84,7 @@ function featuredPostsActions(props) {
             data-sb-field-path=".actions"
         >
             {props.actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -45,8 +45,8 @@ export default function Footer(props) {
                             <div className="mb-6">
                                 <ul className="flex flex-col items-start mb-6 space-y-6 text-lg" data-sb-field-path=".primaryLinks">
                                     {primaryLinks.map((link, index) => (
-                                        <li key={index} data-sb-field-path={`.${index}`}>
-                                            <Action {...link} />
+                                        <li key={index}>
+                                            <Action {...link} data-sb-field-path={`.${index}`} />
                                         </li>
                                     ))}
                                 </ul>
@@ -57,8 +57,8 @@ export default function Footer(props) {
                                 {socialLinks.length > 0 && (
                                     <ul className="flex items-center mb-6 space-x-10" data-sb-field-path=".socialLinks">
                                         {socialLinks.map((link, index) => (
-                                            <li key={index} data-sb-field-path={`.${index}`}>
-                                                <Social {...link} />
+                                            <li key={index}>
+                                                <Social {...link} data-sb-field-path={`.${index}`} />
                                             </li>
                                         ))}
                                     </ul>
@@ -74,8 +74,8 @@ export default function Footer(props) {
                     {legalLinks.length > 0 && (
                         <ul className="flex flex-col mb-6 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row" data-sb-field-path=".legalLinks">
                             {legalLinks.map((link, index) => (
-                                <li key={index} data-sb-field-path={`.${index}`}>
-                                    <Action {...link} />
+                                <li key={index}>
+                                    <Action {...link} data-sb-field-path={`.${index}`} />
                                 </li>
                             ))}
                         </ul>

diff --git a/src/components/FormBlock/index.tsx b/src/components/FormBlock/index.tsx
@@ -84,7 +84,7 @@ export default class FormBlock extends React.Component<any> {
                         if (!FormControl) {
                             throw new Error(`no component matching the form field type: ${fieldType}`);
                         }
-                        return <FormControl key={index} {...field} annotationPrefix={`.${index}`} />;
+                        return <FormControl key={index} {...field} data-sb-field-path={`.${index}`} />;
                     })}
                 </div>
                 <div className={classNames('mt-4', styles.submitLabel?.textAlign ? mapStyles({ textAlign: styles.submitLabel?.textAlign }) : null)}>

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -217,8 +217,8 @@ function listOfLinks(links, inMobileMenu = false) {
         const defaultStyle = link.type === 'Link' ? 'link' : 'secondary';
         const style = link.style || defaultStyle;
         return (
-            <li key={index} data-sb-field-path={`.${index}`}>
-                <Action {...link} className={classNames(inMobileMenu && style !== 'link' ? 'w-full' : '')} />
+            <li key={index}>
+                <Action {...link} className={classNames(inMobileMenu && style !== 'link' ? 'w-full' : '')} data-sb-field-path={`.${index}`} />
             </li>
         );
     });

diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx
@@ -141,7 +141,7 @@ function heroActions(props) {
             data-sb-field-path=".actions"
         >
             {actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/ItemBlock/index.tsx b/src/components/ItemBlock/index.tsx
@@ -8,7 +8,7 @@ import { ImageBlock } from '..';
 export default function ItemBlock(props) {
     const cssId = props.elementId || null;
     return (
-        <article id={cssId} className="sb-component sb-component-block sb-component-item" data-sb-field-path={props.annotationPrefix}>
+        <article id={cssId} className="sb-component sb-component-block sb-component-item">
             {props.featuredImage && (
                 <div className="mb-4" data-sb-field-path=".featuredImage">
                     <ImageBlock {...props.featuredImage} className="mx-auto" />
@@ -66,7 +66,7 @@ function itemActions(props) {
             data-sb-field-path=".actions"
         >
             {actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/PostFeedSection/index.tsx b/src/components/PostFeedSection/index.tsx
@@ -82,7 +82,7 @@ function postFeedActions(props) {
             data-sb-field-path=".actions"
         >
             {props.actions.map((action, index) => (
-                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" annotationPrefix={`.${index}`} />
+                <Action key={index} {...action} className="mb-3 mx-2 lg:whitespace-nowrap" data-sb-field-path={`.${index}`} />
             ))}
         </div>
     );

diff --git a/src/components/SelectFormControl/index.tsx b/src/components/SelectFormControl/index.tsx
@@ -17,7 +17,7 @@ export default function SelectFormControl(props) {
             className={classNames('sb-form-control', 'px-2', 'w-full', {
                 'sm:w-1/2': width === '1/2'
             })}
-            data-sb-field-path={props.annotationPrefix}
+            data-sb-field-path={props['data-sb-field-path']}
         >
             {props.label && (
                 <label id={labelId} className="sb-label" htmlFor={props.name} data-sb-field-path=".label .name#@for">

diff --git a/src/components/Social/index.tsx b/src/components/Social/index.tsx
@@ -19,7 +19,7 @@ export default function Social(props) {
     const { label, altText, url, showIcon } = props;
     const icon = props.icon || 'facebook';
     const IconComponent = iconMap[icon];
-    const annotationPrefix = props.annotationPrefix || '';
+    const annotationPrefix = props['data-sb-field-path'] || '';
     const annotations = [
         `${annotationPrefix}`,
         `${annotationPrefix}.url#@href`,

diff --git a/src/components/TextFormControl/index.tsx b/src/components/TextFormControl/index.tsx
@@ -16,7 +16,7 @@ export default function TextFormControl(props) {
             className={classNames('sb-form-control', 'px-2', 'w-full', {
                 'sm:w-1/2': width === '1/2'
             })}
-            data-sb-field-path={props.annotationPrefix}
+            data-sb-field-path={props['data-sb-field-path']}
         >
             {props.label && (
                 <label id={labelId} className="sb-label" htmlFor={props.name} data-sb-field-path=".label .name#@for">

diff --git a/src/components/TextareaFormControl/index.tsx b/src/components/TextareaFormControl/index.tsx
@@ -16,7 +16,7 @@ export default function TextareaFormControl(props) {
             className={classNames('sb-form-control', 'px-2', 'w-full', {
                 'sm:w-1/2': width === '1/2'
             })}
-            data-sb-field-path={props.annotationPrefix}
+            data-sb-field-path={props['data-sb-field-path']}
         >
             {props.label && (
                 <label id={labelId} className="sb-label" htmlFor={props.name} data-sb-field-path=".label .name#@for">