+
{actions.map((action, index) => (
-
+
))}
@@ -140,7 +150,7 @@ function mapMaxWidthStyles(width) {
function mapFlexDirectionStyles(flexDirection) {
switch (flexDirection) {
case 'row':
- return ['flex-col', 'lg:flex-row lg:justify-between'];
+ return ['flex-col', 'lg:flex-row', 'lg:justify-between'];
case 'col':
return ['flex-col'];
}
diff --git a/src/components/EmailFormControl/index.tsx b/src/components/EmailFormControl/index.tsx
index 2825663c..e8462994 100644
--- a/src/components/EmailFormControl/index.tsx
+++ b/src/components/EmailFormControl/index.tsx
@@ -13,10 +13,10 @@ export default function EmailFormControl(props) {
}
return (
{props.label && (
);
diff --git a/src/components/FaqSection/faq-section.stories.tsx b/src/components/FaqSection/faq-section.stories.tsx
new file mode 100644
index 00000000..db739eda
--- /dev/null
+++ b/src/components/FaqSection/faq-section.stories.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import FaqSection from './index';
+
+export default {
+ title: 'Components/FaqSection',
+ component: FaqSection,
+ argTypes: {
+ type: { table: { disable: true } },
+ elementId: {
+ defaultValue: ''
+ },
+ colors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e', 'colors-f', 'colors-g', 'colors-h', 'colors-i'],
+ defaultValue: 'colors-a',
+ control: { type: 'select' }
+ }
+ }
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'FaqSection',
+ elementId: '',
+ title: 'FAQ',
+ subtitle: 'This is the subtitle',
+ items: [
+ {
+ question: 'How it this different from what we have today?',
+ answer: 'At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation.',
+ styles: {
+ question: {
+ textAlign: 'left'
+ },
+ answer: {
+ textAlign: 'left'
+ }
+ }
+ },
+ {
+ question: 'How it this different from what we have today?',
+ answer: 'At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation.',
+ styles: {
+ question: {
+ textAlign: 'left'
+ },
+ answer: {
+ textAlign: 'left'
+ }
+ }
+ },
+ {
+ question: 'How it this different from what we have today?',
+ answer: 'At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation. At the office, working together is often a distruction, on remote, it could be motivation.',
+ styles: {
+ question: {
+ textAlign: 'left'
+ },
+ answer: {
+ textAlign: 'left'
+ }
+ }
+ }
+ ],
+ styles: {
+ self: {
+ height: 'auto',
+ width: 'narrow',
+ margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+ padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
+ },
+ title: {
+ textAlign: 'center'
+ },
+ subtitle: {
+ textAlign: 'center'
+ }
+ }
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'FAQ';
+Primary.args = args;
diff --git a/src/components/FaqSection/index.tsx b/src/components/FaqSection/index.tsx
new file mode 100755
index 00000000..aa319a56
--- /dev/null
+++ b/src/components/FaqSection/index.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Markdown from 'markdown-to-jsx';
+import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
+import { getDataAttrs } from '../../utils/get-data-attrs';
+
+export default function FaqSection(props) {
+ const cssId = props.elementId || null;
+ const colors = props.colors || 'colors-a';
+ const sectionStyles = props.styles?.self || {};
+ const sectionBorderWidth = sectionStyles.borderWidth ? sectionStyles.borderWidth : 0;
+ return (
+
+
+
+ {props.title && (
+
+ {props.title}
+
+ )}
+ {props.subtitle && (
+
+ {props.subtitle}
+
+ )}
+ {props.items && (
+
+ {props.items.map((item, index) => (
+
+ ))}
+
+ )}
+
+
+
+ );
+}
+
+function FaqItem(props) {
+ return (
+
+ {props.question && (
+
+ {props.question}
+
+ )}
+ {props.answer && (
+
+ {props.answer}
+
+ )}
+
+ );
+}
+
+function mapMinHeightStyles(height) {
+ switch (height) {
+ case 'auto':
+ return 'min-h-0';
+ case 'screen':
+ return 'min-h-screen';
+ }
+ return null;
+}
+
+function mapMaxWidthStyles(width) {
+ switch (width) {
+ case 'narrow':
+ return 'max-w-screen-md';
+ case 'wide':
+ return 'max-w-screen-xl';
+ case 'full':
+ return 'max-w-full';
+ }
+ return null;
+}
diff --git a/src/components/FeaturedItem/featured-item.stories.tsx b/src/components/FeaturedItem/featured-item.stories.tsx
new file mode 100644
index 00000000..e943b734
--- /dev/null
+++ b/src/components/FeaturedItem/featured-item.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import FeaturedItem from './index';
+
+export default {
+ title: 'Blocks/FeaturedItem',
+ component: FeaturedItem,
+ argTypes: {
+ type: { table: { disable: true } },
+ elementId: {
+ defaultValue: ''
+ },
+ rating: {
+ options: [1, 2, 3, 4, 5],
+ defaultValue: 1,
+ control: { type: 'select' }
+ }
+ }
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'FeaturedItem',
+ elementId: '',
+ title: 'Item Title',
+ subtitle: 'Item subtitle',
+ author: 'Ernest Hemingway',
+ text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.',
+ rating: 5,
+ isRatingVisible: true,
+ image: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/post-1.jpeg',
+ altText: 'Item image'
+ },
+ actions: [
+ {
+ type: 'Button',
+ url: '#',
+ label: 'Apply Now',
+ style: 'primary'
+ },
+ {
+ type: 'Button',
+ url: '#',
+ label: 'Learn more',
+ style: 'secondary'
+ }
+ ],
+ styles: {
+ title: {
+ textAlign: 'left'
+ },
+ subtitle: {
+ textAlign: 'left'
+ },
+ text: {
+ textAlign: 'left'
+ },
+ actions: {
+ justifyContent: 'flex-start'
+ }
+ }
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Item with content';
+Primary.args = args;
diff --git a/src/components/FeaturedItem/index.tsx b/src/components/FeaturedItem/index.tsx
new file mode 100644
index 00000000..60a3f8c5
--- /dev/null
+++ b/src/components/FeaturedItem/index.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Markdown from 'markdown-to-jsx';
+import { getComponent } from '../../components-registry';
+import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
+import { ImageBlock } from '..';
+
+export default function FeaturedItem(props) {
+ const cssId = props.elementId || null;
+ return (
+
+ {props.featuredImage && (
+
+
+
+ )}
+ {props.title && (
+
+ {props.title}
+
+ )}
+ {props.subtitle && (
+
+ {props.subtitle}
+
+ )}
+ {props.text && (
+
+ {props.text}
+
+ )}
+ {props.author && (
+
+ {props.author}
+
+ )}
+ {props.isRatingVisible && props.rating && (
+
+ {props.rating}
+
+ )}
+ {itemActions(props)}
+
+ );
+}
+
+function itemActions(props) {
+ const actions = props.actions || [];
+ if (actions.length === 0) {
+ return null;
+ }
+ const styles = props.styles || {};
+ const Action = getComponent('Action');
+ return (
+
+ {actions.map((action, index) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/FeaturedItemsSection/featured-items-section.stories.tsx b/src/components/FeaturedItemsSection/featured-items-section.stories.tsx
new file mode 100644
index 00000000..0d6dd785
--- /dev/null
+++ b/src/components/FeaturedItemsSection/featured-items-section.stories.tsx
@@ -0,0 +1,279 @@
+import React from 'react';
+import FeaturedItemsSection from './index';
+
+export default {
+ title: 'Components/FeaturedItemsSection',
+ component: FeaturedItemsSection,
+ argTypes: {
+ type: { table: { disable: true } },
+ elementId: {
+ defaultValue: ''
+ },
+ colors: {
+ options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e', 'colors-f', 'colors-g', 'colors-h', 'colors-i'],
+ defaultValue: 'colors-a',
+ control: { type: 'select' }
+ },
+ columns: {
+ options: [1, 2, 3, 4],
+ defaultValue: 4,
+ control: { type: 'select' }
+ }
+ }
+};
+
+const Template = (args) =>
;
+
+const args = {
+ type: 'FeaturedItemsSection',
+ elementId: '',
+ title: 'Featured Items',
+ subtitle: 'This is the subtitle',
+ actions: [
+ {
+ type: 'Button',
+ url: '#',
+ label: 'Apply Now',
+ style: 'primary'
+ },
+ {
+ type: 'Button',
+ url: '#',
+ label: 'Learn more',
+ style: 'secondary'
+ }
+ ],
+ columns: 4,
+ items: [
+ {
+ type: 'FeaturedItem',
+ title: 'Item Title',
+ subtitle: 'This is the subtitle',
+ author: 'Item author',
+ 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'
+ },
+ styles: {
+ title: {
+ textAlign: 'left'
+ },
+ subtitle: {
+ textAlign: 'left'
+ },
+ text: {
+ textAlign: 'left'
+ },
+ actions: {
+ justifyContent: 'flex-start'
+ }
+ }
+ },
+ {
+ type: 'FeaturedItem',
+ title: 'Item Title',
+ subtitle: 'This is the subtitle',
+ author: 'Item author',
+ 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'
+ },
+ styles: {
+ title: {
+ textAlign: 'left'
+ },
+ subtitle: {
+ textAlign: 'left'
+ },
+ text: {
+ textAlign: 'left'
+ },
+ actions: {
+ justifyContent: 'flex-start'
+ }
+ }
+ },
+ {
+ type: 'FeaturedItem',
+ title: 'Item Title',
+ subtitle: 'This is the subtitle',
+ author: 'Item author',
+ 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'
+ },
+ styles: {
+ title: {
+ textAlign: 'left'
+ },
+ subtitle: {
+ textAlign: 'left'
+ },
+ text: {
+ textAlign: 'left'
+ },
+ actions: {
+ justifyContent: 'flex-start'
+ }
+ }
+ },
+ {
+ type: 'FeaturedItem',
+ title: 'Item Title',
+ subtitle: 'This is the subtitle',
+ author: 'Item author',
+ 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'
+ },
+ 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'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
+ },
+ title: {
+ textAlign: 'center'
+ },
+ subtitle: {
+ textAlign: 'center'
+ },
+ actions: {
+ 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: 'FeaturedItem',
+ 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: 'FeaturedItem',
+ 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
new file mode 100644
index 00000000..e43f1e6e
--- /dev/null
+++ b/src/components/FeaturedItemsSection/index.tsx
@@ -0,0 +1,124 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { getComponent } from '../../components-registry';
+import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
+import { getDataAttrs } from '../../utils/get-data-attrs';
+import FeaturedItem from '../FeaturedItem';
+
+export default function FeaturedItemsSection(props) {
+ const cssId = props.elementId || null;
+ const colors = props.colors || 'colors-a';
+ const sectionStyles = props.styles?.self || {};
+ const sectionBorderWidth = sectionStyles.borderWidth ? sectionStyles.borderWidth : 0;
+ return (
+
+
+
+ {props.title && (
+
+ {props.title}
+
+ )}
+ {props.subtitle && (
+
+ {props.subtitle}
+
+ )}
+ {props?.items && (
+
+ {props.items.map((item, index) => (
+
+
+
+ ))}
+
+ )}
+ {featuredItemActions(props)}
+
+
+
+ );
+}
+
+function featuredItemActions(props) {
+ const actions = props.actions || [];
+ if (actions.length === 0) {
+ return null;
+ }
+ const styles = props.styles || {};
+ const Action = getComponent('Action');
+ return (
+
+ {actions.map((action, index) => (
+
+ ))}
+
+ );
+}
+
+function mapColStyles(columns) {
+ switch (columns) {
+ case 4:
+ return 'md:grid-cols-4';
+ case 3:
+ return 'md:grid-cols-3';
+ case 2:
+ return 'md:grid-cols-2';
+ }
+ return null;
+}
+
+function mapMinHeightStyles(height) {
+ switch (height) {
+ case 'auto':
+ return 'min-h-0';
+ case 'screen':
+ return 'min-h-screen';
+ }
+ return null;
+}
+
+function mapMaxWidthStyles(width) {
+ switch (width) {
+ case 'narrow':
+ return 'max-w-screen-md';
+ case 'wide':
+ return 'max-w-screen-xl';
+ case 'full':
+ return 'max-w-full';
+ }
+ return null;
+}
diff --git a/src/components/FeaturedPeopleSection/featured-people-section.stories.tsx b/src/components/FeaturedPeopleSection/featured-people-section.stories.tsx
index 38ade1af..03e8392f 100644
--- a/src/components/FeaturedPeopleSection/featured-people-section.stories.tsx
+++ b/src/components/FeaturedPeopleSection/featured-people-section.stories.tsx
@@ -18,11 +18,6 @@ export default {
options: ['colors-a', 'colors-b', 'colors-c', 'colors-d', 'colors-e', 'colors-f', 'colors-g', 'colors-h', 'colors-i'],
defaultValue: 'colors-a',
control: { type: 'select' }
- },
- backgroundWidth: {
- options: ['full', 'inset'],
- defaultValue: 'full',
- control: { type: 'select' }
}
}
};
@@ -34,8 +29,6 @@ const args = {
elementId: '',
variant: 'variant-a',
colors: 'colors-h',
- width: 'wide',
- backgroundWidth: 'full',
title: 'The Team',
subtitle: 'This is Subtitle',
actions: [
@@ -54,7 +47,7 @@ const args = {
bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
image: {
type: 'ImageBlock',
- url: '/images/desmond-eagle.jpg',
+ url: 'https://assets.stackbit.com/components/images/default/desmond-eagle.jpg',
altText: 'Photo of Desmond Eagle'
}
},
@@ -65,7 +58,7 @@ const args = {
bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
image: {
type: 'ImageBlock',
- url: '/images/dianne-ameter.jpg',
+ url: 'https://assets.stackbit.com/components/images/default/dianne-ameter.jpg',
altText: 'Photo of Dianne Ameter'
}
},
@@ -76,7 +69,7 @@ const args = {
bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
image: {
type: 'ImageBlock',
- url: '/images/hilary-ouse.jpg',
+ url: 'https://assets.stackbit.com/components/images/default/hilary-ouse.jpg',
altText: 'Photo of Hilary Ouse'
}
},
@@ -87,7 +80,7 @@ const args = {
bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
image: {
type: 'ImageBlock',
- url: '/images/hugh-saturation.jpg',
+ url: 'https://assets.stackbit.com/components/images/default/hugh-saturation.jpg',
altText: 'Photo of Hugh Saturation'
}
}
@@ -96,19 +89,18 @@ const args = {
self: {
height: 'auto',
width: 'wide',
- margin: ['mt-0', 'mb-0'],
- padding: ['pt-12', 'pb-12'],
- alignItems: 'center',
- justifyContent: 'center'
+ margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+ padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
},
title: {
- fontWeight: 700,
- fontStyle: 'normal',
textAlign: 'center'
},
subtitle: {
- fontWeight: 400,
- fontStyle: 'normal',
textAlign: 'center'
},
actions: {
@@ -130,19 +122,18 @@ FeaturedPeopleTwoCol.args = {
self: {
height: 'auto',
width: 'wide',
- margin: ['mt-0', 'mb-0'],
- padding: ['pt-12', 'pb-12'],
- alignItems: 'center',
- justifyContent: 'center'
+ margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+ padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
},
title: {
- fontWeight: 700,
- fontStyle: 'normal',
textAlign: 'left'
},
subtitle: {
- fontWeight: 400,
- fontStyle: 'normal',
textAlign: 'left'
},
actions: {
@@ -160,19 +151,18 @@ FeaturedPeopleTwoColAlt.args = {
self: {
height: 'auto',
width: 'narrow',
- margin: ['mt-0', 'mb-0'],
- padding: ['pt-12', 'pb-12'],
- alignItems: 'center',
- justifyContent: 'center'
+ margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+ padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
},
title: {
- fontWeight: 700,
- fontStyle: 'normal',
textAlign: 'center'
},
subtitle: {
- fontWeight: 400,
- fontStyle: 'normal',
textAlign: 'center'
},
actions: {
diff --git a/src/components/FeaturedPeopleSection/index.tsx b/src/components/FeaturedPeopleSection/index.tsx
index 41fe2a79..52e44f51 100644
--- a/src/components/FeaturedPeopleSection/index.tsx
+++ b/src/components/FeaturedPeopleSection/index.tsx
@@ -3,39 +3,39 @@ import classNames from 'classnames';
import Markdown from 'markdown-to-jsx';
import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
import { getComponent } from '../../components-registry';
+import { getDataAttrs } from '../../utils/get-data-attrs';
import ImageBlock from '../ImageBlock';
export default function FeaturedPeopleSection(props) {
+ const cssId = props.elementId || null;
const colors = props.colors || 'colors-a';
- const backgroundWidth = props.backgroundWidth || 'full';
const sectionStyles = props.styles?.self || {};
+ const sectionBorderWidth = sectionStyles.borderWidth ? sectionStyles.borderWidth : 0;
return (
-
+
{featuredPeopleHeader(props)}
{featuredPeopleVariants(props)}
@@ -54,12 +54,17 @@ function featuredPeopleHeader(props) {
return (
{props.title && (
-
+
{props.title}
)}
{props.subtitle && (
-
+
{props.subtitle}
)}
@@ -76,11 +81,11 @@ function featuredPeopleActions(props) {
const Action = getComponent('Action');
return (
{props.actions.map((action, index) => (
-
+
))}
);
@@ -106,9 +111,7 @@ function peopleVariantA(props) {
}
return (
{people.map((person, index) => (
@@ -124,10 +127,10 @@ function peopleVariantA(props) {
})}
>
{(person.firstName || person.lastName) && (
-
+
{person.firstName && {person.firstName}}{' '}
{person.lastName && {person.lastName}}
-
+
)}
{person.role &&
{person.role}
}
@@ -143,12 +146,7 @@ function peopleVariantB(props) {
return null;
}
return (
-
+
{people.map((person, index) => (
{person.image && (
@@ -164,10 +162,10 @@ function peopleVariantB(props) {
})}
>
{(person.firstName || person.lastName) && (
-
+
{person.firstName && {person.firstName}}{' '}
{person.lastName && {person.lastName}}
-
+
)}
{person.role && {person.role}
}
{person.bio && (
@@ -195,14 +193,9 @@ function peopleVariantC(props) {
}
const middleIndex = Math.floor(people.length / 2);
const peopleLeft = people.slice(0, middleIndex);
- const peopleRight = people.slice(-middleIndex);
+ const peopleRight = people.slice(middleIndex, people.length);
return (
-
+
{peopleLeft.length > 0 &&
{peopleListVariantC(peopleLeft)}
}
{peopleRight.length > 0 &&
{peopleListVariantC(peopleRight, middleIndex)}
}
@@ -217,22 +210,14 @@ function peopleListVariantC(people, annotIndexStart = 0) {
+
{(person.firstName || person.lastName || person.role) && (
-
+
{person.firstName && {person.firstName}}{' '}
{person.lastName && {person.lastName}}{' '}
{(person.firstName || person.lastName) && person.role && |}{' '}
{person.role && {person.role}}
-
+
)}
{person.bio && (
diff --git a/src/components/FeaturedPostsSection/featured-posts-section.stories.tsx b/src/components/FeaturedPostsSection/featured-posts-section.stories.tsx
index e6bd9e19..a9b24889 100644
--- a/src/components/FeaturedPostsSection/featured-posts-section.stories.tsx
+++ b/src/components/FeaturedPostsSection/featured-posts-section.stories.tsx
@@ -10,7 +10,7 @@ export default {
defaultValue: ''
},
variant: {
- options: ['variant-a', 'variant-b', 'variant-c'],
+ options: ['variant-a', 'variant-b', 'variant-c', 'variant-d'],
defaultValue: 'variant-a',
control: { type: 'select' }
},
@@ -19,10 +19,13 @@ export default {
defaultValue: 'colors-a',
control: { type: 'select' }
},
- backgroundWidth: {
- options: ['full', 'inset'],
- defaultValue: 'full',
- control: { type: 'select' }
+ showDate: {
+ defaultValue: false,
+ control: { type: 'boolean' }
+ },
+ showAuthor: {
+ defaultValue: false,
+ control: { type: 'boolean' }
}
}
};
@@ -34,9 +37,10 @@ const args = {
elementId: '',
variant: 'variant-a',
colors: 'colors-f',
- backgroundWidth: 'full',
- title: 'Latest from the Blog',
- subtitle: 'This is Subtitle',
+ showDate: true,
+ showAuthor: true,
+ title: 'Featured Posts',
+ subtitle: 'This is the Subtitle',
actions: [
{
type: 'Button',
@@ -48,12 +52,23 @@ const args = {
posts: [
{
__metadata: {},
- title: 'Post Title Three',
- date: '2021-07-03',
- excerpt: 'Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam.',
+ title: 'Post Title One',
+ date: '2021-06-28',
+ author: {
+ firstName: 'Desmond',
+ lastName: 'Eagle',
+ role: 'Product Manager',
+ bio: 'Nullam rhoncus tellus nec felis ullamcorper mattis. Cras convallis, velit in tincidunt posuere, nulla ipsum consequat metus, convallis lacinia ex eros eget leo.',
+ image: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/desmond-eagle.jpg',
+ altText: 'Photo of Desmond Eagle'
+ }
+ },
+ excerpt: 'Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis.',
featuredImage: {
type: 'ImageBlock',
- url: '/images/post-3.jpeg',
+ url: 'https://assets.stackbit.com/components/images/default/post-1.jpeg',
altText: 'Post Image'
},
markdown_content:
@@ -63,10 +78,21 @@ const args = {
__metadata: {},
title: 'Post Title Two',
date: '2021-07-01',
+ author: {
+ firstName: 'Hilary',
+ lastName: 'Ouse',
+ role: 'Product Manager',
+ bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
+ image: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/hilary-ouse.jpg',
+ altText: 'Photo of Hilary Ouse'
+ }
+ },
excerpt: 'otius inflammat, ut coercendi magis quam dedocendi esse videantur.',
featuredImage: {
type: 'ImageBlock',
- url: '/images/post-2.jpeg',
+ url: 'https://assets.stackbit.com/components/images/default/post-2.jpeg',
altText: 'Post Image'
},
markdown_content:
@@ -74,12 +100,47 @@ const args = {
},
{
__metadata: {},
- title: 'Post Title One',
- date: '2021-06-28',
- excerpt: 'Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis.',
+ title: 'Post Title Three',
+ date: '2021-07-03',
+ author: {
+ firstName: 'Hugh',
+ lastName: 'Saturation',
+ role: 'Product Manager',
+ bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
+ image: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/hugh-saturation.jpg',
+ altText: 'Photo of Hugh Saturation'
+ }
+ },
+ excerpt: 'Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam.',
featuredImage: {
type: 'ImageBlock',
- url: '/images/post-1.jpeg',
+ url: 'https://assets.stackbit.com/components/images/default/post-3.jpeg',
+ altText: 'Post Image'
+ },
+ markdown_content:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ea mala virtuti magnitudine obruebantur. Duo Reges: constructio interrete. An hoc usque quaque, aliter in vita? Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illud non continuo, ut aeque incontentae. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.\n\n## Sed Ille, UT Dixi, Vitiose\n\nUtrum igitur tibi litteram videor an totas paginas commovere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ne in odium veniam, si amicum destitero tueri. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quis istud, quaeso, nesciebat? Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam aut expetendam. Et ille ridens: Video, inquit, quid agas; In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.\n\n'
+ },
+ {
+ __metadata: {},
+ title: 'Post Title Four',
+ date: '2021-11-03',
+ author: {
+ firstName: 'Hilary',
+ lastName: 'Ouse',
+ role: 'Product Manager',
+ bio: 'Vincent Van Gogh’s most popular painting, The Starry Night.',
+ image: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/hilary-ouse.jpg',
+ altText: 'Photo of Hilary Ouse'
+ }
+ },
+ excerpt: 'Primum divisit ineleganter; Hoc unum Aristo tenuit: praeter vitia atque virtutes negavit rem esse ullam aut fugiendam.',
+ featuredImage: {
+ type: 'ImageBlock',
+ url: 'https://assets.stackbit.com/components/images/default/post-4.jpeg',
altText: 'Post Image'
},
markdown_content:
@@ -90,19 +151,18 @@ const args = {
self: {
height: 'auto',
width: 'wide',
- margin: ['mt-0', 'mb-0'],
- padding: ['pt-12', 'pb-12'],
- alignItems: 'center',
- justifyContent: 'center'
+ margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0'],
+ padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4'],
+ justifyContent: 'center',
+ borderRadius: 'none',
+ borderWidth: 0,
+ borderStyle: 'none',
+ borderColor: 'border-dark'
},
title: {
- fontWeight: 700,
- fontStyle: 'normal',
textAlign: 'center'
},
subtitle: {
- fontWeight: 400,
- fontStyle: 'normal',
textAlign: 'center'
},
actions: {
@@ -112,42 +172,30 @@ const args = {
};
export const Primary = Template.bind({});
-Primary.storyName = 'Featured Posts, Three Column Grid';
-Primary.args = args;
+Primary.storyName = 'Featured Posts, Three Columns Grid';
+Primary.args = {
+ ...args,
+ showDate: false,
+ showAuthor: false
+};
export const FeaturedPostsTwoCol = Template.bind({});
-FeaturedPostsTwoCol.storyName = 'Featured Posts, Two Column Grid';
+FeaturedPostsTwoCol.storyName = 'Featured Posts, Two Columns Grid';
FeaturedPostsTwoCol.args = {
...args,
- variant: 'variant-b',
- styles: {
- self: {
- height: 'auto',
- width: 'wide',
- margin: ['mt-0', 'mb-0'],
- padding: ['pt-12', 'pb-12'],
- alignItems: 'center',
- justifyContent: 'center'
- },
- title: {
- fontWeight: 700,
- fontStyle: 'normal',
- textAlign: 'left'
- },
- subtitle: {
- fontWeight: 400,
- fontStyle: 'normal',
- textAlign: 'left'
- },
- actions: {
- justifyContent: 'flex-start'
- }
- }
+ variant: 'variant-b'
+};
+
+export const FeaturedPostsMixed = Template.bind({});
+FeaturedPostsMixed.storyName = 'Featured Posts, Mixed Grid';
+FeaturedPostsMixed.args = {
+ ...args,
+ variant: 'variant-c'
};
export const FeaturedPostsList = Template.bind({});
-FeaturedPostsList.storyName = 'Featured Posts List';
+FeaturedPostsList.storyName = 'Featured Posts, List';
FeaturedPostsList.args = {
...args,
- variant: 'variant-c'
+ variant: 'variant-d'
};
diff --git a/src/components/FeaturedPostsSection/index.tsx b/src/components/FeaturedPostsSection/index.tsx
index a6119975..4b5e4f7a 100644
--- a/src/components/FeaturedPostsSection/index.tsx
+++ b/src/components/FeaturedPostsSection/index.tsx
@@ -1,278 +1,2 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import dayjs from 'dayjs';
-
-import { getComponent } from '../../components-registry';
-import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
-import getPageUrlPath from '../../utils/get-page-url-path';
-import ImageBlock from '../ImageBlock';
-import Link from '../../utils/link';
-
-export default function FeaturedPostsSection(props) {
- const colors = props.colors || 'colors-a';
- const backgroundWidth = props.backgroundWidth || 'full';
- const sectionStyles = props.styles?.self || {};
-
- return (
-
-
-
- {featuredPostsHeader(props)}
- {featuredPostsVariants(props)}
- {featuredPostsActions(props)}
-
-
-
- {props.title && (
-
- {props.title}
-
- )}
- {props.subtitle && (
-
- {props.subtitle}
-
- )}
-
- {props.actions.map((action, index) => (
-
- ))}
-
- {posts.map((post, index) => {
- const dateTimeAttr = dayjs(post.date).format('YYYY-MM-DD HH:mm:ss');
- const formattedDate = dayjs(post.date).format('MMMM D, YYYY');
- return (
-
-
- {post.featuredImage && (
-
-
-
- )}
-
- {props.title ? (
-
- {post.title}
-
- ) : (
-
- {post.title}
-
- )}
-
-
-
- {post.excerpt &&
{post.excerpt}
}
-
-
- );
- })}
-
- {posts.map((post, index) => {
- const dateTimeAttr = dayjs(post.date).format('YYYY-MM-DD HH:mm:ss');
- const formattedDate = dayjs(post.date).format('MMMM D, YYYY');
- return (
-
-
- {post.featuredImage && (
-
-
-
- )}
-
- {props.title ? (
-
- {post.title}
-
- ) : (
-
- {post.title}
-
- )}
-
-
-
- {post.excerpt &&
{post.excerpt}
}
-
-
- );
- })}
-
- {posts.map((post, index) => {
- const dateTimeAttr = dayjs(post.date).format('YYYY-MM-DD HH:mm:ss');
- const formattedDate = dayjs(post.date).format('MMMM D, YYYY');
- return (
-
- {post.featuredImage && (
-
-
-
-
-
- )}
-
- {props.title ? (
-
-
- {post.title}
-
-
- ) : (
-
-
- {post.title}
-
-
- )}
-
-
-
- {post.excerpt &&
{post.excerpt}
}
-
- );
- })}
-