Merge release/2.4.4 into main branch (#1133)

* add image support for EmptyState (#1132)

.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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -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",

spec/__snapshots__/Storyshots.test.js.snap

@@ -6760,6 +6760,60 @@ exports[`Storyshots Components/EmptyState Full Width 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/EmptyState Image 1`] = `
+<div
+  className="EmptyState EmptyState--margin-top--sm"
+>
+  <div
+    className="EmptyState__content"
+  >
+    <div
+      className="EmptyState__image"
+    >
+      <img
+        alt=""
+        src={Object {}}
+      />
+    </div>
+    <h4
+      className="EmptyState__title Heading Heading--lg Heading--bold"
+      style={
+        Object {
+          "textAlign": "center",
+        }
+      }
+    >
+      No participants to display
+    </h4>
+    <p
+      className="EmptyState__subtitle Text Text--md Text--regular"
+      style={
+        Object {
+          "textAlign": "center",
+        }
+      }
+    >
+      Start recruiting from User Interviews' panel of 6M+ users and kick off your research!
+    </p>
+    <div
+      className="EmptyState__actions"
+    >
+      <div
+        className="EmptyState__actions__primary-action"
+      >
+        <button
+          className="Button btn btn-primary"
+          disabled={false}
+          type="button"
+        >
+          Start recruiting
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/EmptyState Margin Top 1`] = `
 <div
   className="EmptyState EmptyState--margin-top--sm"

src/EmptyState/EmptyState.scss

@@ -1,7 +1,6 @@
 @import '../../scss/theme';
 
 $empty-state-max-width: 400px;
-$empty-state-max-image-height: 160px;
 
 $empty-state-margin-top-sm: 64px;
 $empty-state-margin-top-md: 96px;
@@ -10,6 +9,8 @@ $empty-state-margin-top-lg: 200px;
 $empty-state-title-margin-bottom: $synth-spacing-4;
 $empty-state-subtitle-margin-bottom: $synth-spacing-4;
 
+$empty-state-image-max-height: 150px;
+
 .EmptyState {
   display: flex;
   flex-direction: row;
@@ -41,8 +42,12 @@ $empty-state-subtitle-margin-bottom: $synth-spacing-4;
     display: flex;
     justify-content: center;
 
-    margin-bottom: $synth-spacing-4;
-    max-height: $empty-state-max-image-height;
+    margin-bottom: $synth-spacing-8;
+
+    img {
+      max-height: $empty-state-image-max-height;
+      width: auto;
+    }
   }
 
   &__title {

src/EmptyState/EmptyState.stories.tsx

@@ -5,6 +5,8 @@ import { faPlus } from '@fortawesome/pro-regular-svg-icons';
 
 import Button from 'src/Button';
 
+import ProfileSearchImage from './profile_search.png';
+
 import EmptyState from './EmptyState';
 
 const meta: Meta<typeof EmptyState> = {
@@ -30,6 +32,15 @@ export const PrimaryAction: Story = {
   },
 };
 
+export const Image: Story = {
+  args: {
+    image: ProfileSearchImage,
+    primaryAction: <Button variant="primary">Start recruiting</Button>,
+    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,

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 && (
+        <div className="EmptyState__image">
+          <img alt="" src={image} />
+        </div>
+      )}
       {title && (
         <Heading
           className="EmptyState__title"

src/ts_module_shims.d.ts

@@ -1 +1,2 @@
 declare module '*.module.scss';
+declare module '*.png';

yarn.lock

@@ -6791,6 +6791,14 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-system-cache@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"