diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 27c40a70..5512b6bf 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -16,6 +16,10 @@ module.exports = function({ config }) { 'sass-loader' ], include: path.resolve(__dirname, '../') + }, + { + test: /\\.(png|jp(e*)g|svg|gif)$/, + use: ['file-loader'], }); return config; diff --git a/package.json b/package.json index 68391db4..f5a58590 100644 --- a/package.json +++ b/package.json @@ -135,6 +135,7 @@ "eslint-plugin-react": "^7.18.3", "eslint-plugin-react-hooks": "^2.5.1", "eslint-utils": "^1.4.3", + "file-loader": "^6.2.0", "jest": "^27.4.6", "jest-css-modules-transform": "^4.3.0", "node-sass": "^8.0.0", diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index bee702cd..dd747722 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -6760,6 +6760,60 @@ exports[`Storyshots Components/EmptyState Full Width 1`] = ` `; +exports[`Storyshots Components/EmptyState Image 1`] = ` +
+
+
+ +
+

+ No participants to display +

+

+ Start recruiting from User Interviews' panel of 6M+ users and kick off your research! +

+
+
+ +
+
+
+
+`; + exports[`Storyshots Components/EmptyState Margin Top 1`] = `
= { @@ -30,6 +32,15 @@ export const PrimaryAction: Story = { }, }; +export const Image: Story = { + args: { + image: ProfileSearchImage, + primaryAction: , + subtitle: `Start recruiting from User Interviews' panel of 6M+ users and kick off your research!`, + title: 'No participants to display', + }, +}; + export const FullWidth: Story = { args: { fullWidth: true, diff --git a/src/EmptyState/EmptyState.tsx b/src/EmptyState/EmptyState.tsx index 818abd18..69e78052 100644 --- a/src/EmptyState/EmptyState.tsx +++ b/src/EmptyState/EmptyState.tsx @@ -10,6 +10,7 @@ import './EmptyState.scss'; export interface EmptyStateProps { className?: string; fullWidth?: boolean; + image?: string; marginTop?: 'sm' | 'md' | 'lg' | 'none'; primaryAction?: ReactNode; subtitle?: string | ReactNode; @@ -19,6 +20,7 @@ export interface EmptyStateProps { const EmptyState = ({ className, fullWidth = false, + image, marginTop = 'sm', primaryAction, subtitle, @@ -35,6 +37,11 @@ const EmptyState = ({ fullWidth && 'EmptyState--full-width', )} > + {image && ( +
+ +
+ )} {title && (