diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index fdb5555d..c1e9a10d 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -269,6 +269,7 @@ function ContentSingle(props = {}) {
flexDirection="row"
justifyContent="space-between"
alignItems="center"
+ mb="base"
>
{title ?
{title} : null}
{/* Button moves below on mobile views */}
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
index f3688603..e6f7e62b 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
@@ -1,10 +1,10 @@
import React from 'react';
import { getURLFromType } from '../../../utils';
-import { systemPropTypes, ResourceCard, Box } from '../../../ui-kit';
+import { systemPropTypes, ResourceCard, Box, H5 } from '../../../ui-kit';
import Styled from './ActionListFeature.styles';
import { useNavigate } from 'react-router-dom';
-function ActionListFeature(props = {}) {
+function ActionListFeature({ feature, emptyPlaceholderText }) {
const navigate = useNavigate();
const handleActionPress = (item) => {
@@ -14,17 +14,24 @@ function ActionListFeature(props = {}) {
});
};
- if (props?.feature?.actions?.length === 0 || !props?.feature?.actions) {
+ if (feature?.actions?.length === 0 || !feature?.actions) {
+ if (emptyPlaceholderText) {
+ return (
+
+ {emptyPlaceholderText}
+
+ );
+ }
return null;
}
return (
- {props.feature.title || props.feature.subtitle}
+ {feature.title || feature.subtitle}
- {props.feature?.actions?.map((item, index) => {
+ {feature?.actions?.map((item, index) => {
return (
{
+const Feed = ({ loading, data, emptyPlaceholderText }) => {
const transformLink = useLink();
// Clunky, silly workaround for an Apollo query `loading` prop problem.
// We don't want cache updates or background refetch calls to trigger
@@ -41,7 +41,7 @@ const Feed = ({ loading, data }) => {
);
}
- const features = data.features?.map(feature => (feature.cards === null ? undefined : feature));
+ const features = data.features?.map((feature) => (feature.cards === null ? undefined : feature));
const renderedFeatures = compact(features);
if (!renderedFeatures?.length) {
@@ -65,7 +65,7 @@ const Feed = ({ loading, data }) => {
return null;
}
- const handleTransformLink = url => {
+ const handleTransformLink = (url) => {
// just bulletproofing
if (!isFunction(transformLink)) return url;
return transformLink(url);
@@ -76,6 +76,7 @@ const Feed = ({ loading, data }) => {
key={`${feature.id}_${i}`}
feature={feature}
transformLink={handleTransformLink}
+ emptyPlaceholderText={emptyPlaceholderText}
/>
);
});
diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
index 89a21fa1..7935e88b 100644
--- a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
+++ b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
@@ -13,7 +13,7 @@ import {
import { open as openModal, set as setModal, useModal } from '../../providers/ModalProvider';
-function FeatureFeedListGrid(props = {}) {
+function FeatureFeedListGrid({ loading, data, emptyPlaceholderText }) {
const [searchParams, setSearchParams] = useSearchParams();
const [state, dispatch] = useModal();
const dispatchBreadcrumb = useBreadcrumbDispatch();
@@ -35,6 +35,14 @@ function FeatureFeedListGrid(props = {}) {
}
};
+ if (!loading && data?.features[0]?.cards?.length === 0 && emptyPlaceholderText) {
+ return (
+
+ {emptyPlaceholderText}
+
+ );
+ }
+
return (
- {props.data?.features[0]?.cards?.map((item, index) => (
+ {data?.features[0]?.cards?.map((item, index) => (
+
);
}
default: {
return (
-
+
);
@@ -84,6 +70,7 @@ const Main = () => {
searchFeed={widget.dataset.searchFeed}
featureFeed={widget.dataset.featureFeed}
modal={widget.dataset.modal}
+ emptyPlaceholderText={widget.dataset.emptyPlaceholderText}
/>,
widget
);
diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
index efdc4631..12792e21 100644
--- a/web-embeds/public/index.html
+++ b/web-embeds/public/index.html
@@ -56,8 +56,12 @@
> -->
+ data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48" data-placeholder="What are you looking for?"
+ data-modal="true" class="apollos-widget">
+
+