resolve comments

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 = () => (
   <div style={containerStyle}>
     <EmptyState
-      type="missingAnnotation"
+      missing="field"
       title="Your plugin is missing an annotation"
-      description="Add a descripton here."
+      description="Add a description here."
     />
   </div>
 );
@@ -38,9 +38,9 @@ export const MissingAnnotation = () => (
 export const NoInformation = () => (
   <div style={containerStyle}>
     <EmptyState
-      type="noInformation"
+      missing="info"
       title="No information to display"
-      description="Add a descripton here."
+      description="Add a description here."
     />
   </div>
 );
@@ -48,9 +48,9 @@ export const NoInformation = () => (
 export const CreateComponent = () => (
   <div style={containerStyle}>
     <EmptyState
-      type="createComponent"
+      missing="content"
       title="Create a component"
-      description="Add a descripton here."
+      description="Add a description here."
     />
   </div>
 );
@@ -58,9 +58,9 @@ export const CreateComponent = () => (
 export const NoBuild = () => (
   <div style={containerStyle}>
     <EmptyState
-      type="noBuild"
+      missing="data"
       title="No builds to show"
-      description="Add a descripton here."
+      description="Add a description here."
     />
   </div>
 );
@@ -68,7 +68,7 @@ export const NoBuild = () => (
 export const WithAction = () => (
   <div style={containerStyle}>
     <EmptyState
-      type="missingAnnotation"
+      missing="field"
       title="Your plugin is missing an annotation"
       description="Click the docs to learn more."
       action={

packages/core/src/components/EmptyState/EmptyState.test.tsx

@@ -24,7 +24,7 @@ describe('<EmptyState />', () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
         <EmptyState
-          type="missingAnnotation"
+          missing="field"
           title="Your plugin is missing an annotation"
           action={<Button aria-label="button">DOCS</Button>}
         />,

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 (
     <Grid
@@ -65,13 +65,13 @@ export const EmptyState = ({ title, description, type, action }: Props) => {
           {action}
         </Grid>
       </Grid>
-      <Grid item xs={12} md={6} className={classes.imgPlacholder}>
+      <Grid item xs={12} md={6} className={classes.imageContainer}>
         <img
           src={Background}
           className={classes.backgroundImage}
           alt="background"
         />
-        <EmptyStateImage type={type} />
+        <EmptyStateImage missing={missing} />
       </Grid>
     </Grid>
   );

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 (
         <img
           src={missingAnnotation}
@@ -48,7 +48,7 @@ export const EmptyStateImage = ({ type }: Props) => {
           data-testid="missingAnnotation"
         />
       );
-    case 'noInformation':
+    case 'info':
       return (
         <img
           src={noInformation}
@@ -56,7 +56,7 @@ export const EmptyStateImage = ({ type }: Props) => {
           className={classes.generalImg}
         />
       );
-    case 'createComponent':
+    case 'content':
       return (
         <img
           src={createComponent}
@@ -64,7 +64,7 @@ export const EmptyStateImage = ({ type }: Props) => {
           className={classes.generalImg}
         />
       );
-    case 'noBuild':
+    case 'data':
       return (
         <img src={noBuild} alt="no Build" className={classes.generalImg} />
       );