diff --git a/packages/core/src/components/EmptyState/EmptyState.stories.tsx b/packages/core/src/components/EmptyState/EmptyState.stories.tsx
index e3902fbd17..f3e40bd31c 100644
--- a/packages/core/src/components/EmptyState/EmptyState.stories.tsx
+++ b/packages/core/src/components/EmptyState/EmptyState.stories.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@material-ui/core';
/*
* Copyright 2020 Spotify AB
*
@@ -17,6 +16,7 @@ import { Button } from '@material-ui/core';
import React from 'react';
import { EmptyState } from './EmptyState';
+import { Button } from '@material-ui/core';
export default {
title: 'EmptyState',
@@ -28,9 +28,9 @@ const containerStyle = { width: '100%', height: '100vh' };
export const MissingAnnotation = () => (
);
@@ -38,9 +38,9 @@ export const MissingAnnotation = () => (
export const NoInformation = () => (
);
@@ -48,9 +48,9 @@ export const NoInformation = () => (
export const CreateComponent = () => (
);
@@ -58,9 +58,9 @@ export const CreateComponent = () => (
export const NoBuild = () => (
);
@@ -68,7 +68,7 @@ export const NoBuild = () => (
export const WithAction = () => (
', () => {
const rendered = await renderWithEffects(
wrapInTestApp(
DOCS}
/>,
diff --git a/packages/core/src/components/EmptyState/EmptyState.tsx b/packages/core/src/components/EmptyState/EmptyState.tsx
index f28c8521b0..88becc7c90 100644
--- a/packages/core/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core/src/components/EmptyState/EmptyState.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
action: {
marginTop: theme.spacing(2),
},
- imgPlacholder: {
+ imageContainer: {
position: 'relative',
},
backgroundImage: {
@@ -39,11 +39,11 @@ const useStyles = makeStyles(theme => ({
type Props = {
title: string;
description?: string;
- type: 'missingAnnotation' | 'noInformation' | 'createComponent' | 'noBuild';
+ missing: 'field' | 'info' | 'content' | 'data';
action?: JSX.Element;
};
-export const EmptyState = ({ title, description, type, action }: Props) => {
+export const EmptyState = ({ title, description, missing, action }: Props) => {
const classes = useStyles();
return (
{
{action}
-
+
-
+
);
diff --git a/packages/core/src/components/EmptyState/EmptyStateImage.tsx b/packages/core/src/components/EmptyState/EmptyStateImage.tsx
index 082ea8c581..49598ae6db 100644
--- a/packages/core/src/components/EmptyState/EmptyStateImage.tsx
+++ b/packages/core/src/components/EmptyState/EmptyStateImage.tsx
@@ -22,7 +22,7 @@ import noBuild from './assets/noBuild.svg';
import { makeStyles } from '@material-ui/core';
type Props = {
- type: 'missingAnnotation' | 'noInformation' | 'createComponent' | 'noBuild';
+ missing: 'field' | 'info' | 'content' | 'data';
};
const useStyles = makeStyles({
@@ -36,10 +36,10 @@ const useStyles = makeStyles({
},
});
-export const EmptyStateImage = ({ type }: Props) => {
+export const EmptyStateImage = ({ missing }: Props) => {
const classes = useStyles();
- switch (type) {
- case 'missingAnnotation':
+ switch (missing) {
+ case 'field':
return (
{
data-testid="missingAnnotation"
/>
);
- case 'noInformation':
+ case 'info':
return (
{
className={classes.generalImg}
/>
);
- case 'createComponent':
+ case 'content':
return (
{
className={classes.generalImg}
/>
);
- case 'noBuild':
+ case 'data':
return (
);