From 36257a0c57121bb04d9bad9166f1d3d94f8e340e Mon Sep 17 00:00:00 2001
From: vladimir-cucu <vladimir.cucu@canonical.com>
Date: Fri, 26 Apr 2024 13:03:02 +0300
Subject: [PATCH 1/4] fix: make EmptyState implementation consistent with
 Vanilla Framework

---
 src/components/EmptyState/EmptyState.stories.mdx |  4 ++--
 src/components/EmptyState/EmptyState.test.tsx    |  5 ++---
 src/components/EmptyState/EmptyState.tsx         | 13 +++++++++----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/EmptyState/EmptyState.stories.mdx b/src/components/EmptyState/EmptyState.stories.mdx
index bbbc13e98..0897c1baa 100644
--- a/src/components/EmptyState/EmptyState.stories.mdx
+++ b/src/components/EmptyState/EmptyState.stories.mdx
@@ -54,8 +54,8 @@ export const doNothing = () => {};
             name="containers"
             style={{
               opacity: 0.25,
-              height: "2.5rem",
-              width: "2.5rem",
+              height: "10rem",
+              width: "10rem",
               marginBottom: "1rem",
             }}
           />
diff --git a/src/components/EmptyState/EmptyState.test.tsx b/src/components/EmptyState/EmptyState.test.tsx
index 3348b440e..28cf5fae1 100644
--- a/src/components/EmptyState/EmptyState.test.tsx
+++ b/src/components/EmptyState/EmptyState.test.tsx
@@ -6,9 +6,8 @@ import EmptyState from "./EmptyState";
 describe("EmptyState ", () => {
   it("renders the title", () => {
     render(<EmptyState title="Test title" image={<img alt="" src="" />} />);
-    expect(
-      screen.getByRole("heading", { name: "Test title" })
-    ).toBeInTheDocument();
+    const title = screen.getByText("Test title");
+    expect(title).toHaveClass("p-heading--4");
   });
 
   it("renders the image", () => {
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index 84a90c660..d1da06a2a 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React, { ReactNode, HTMLProps, ReactElement } from "react";
 import { PropsWithSpread } from "types";
 
@@ -31,10 +32,14 @@ export const EmptyState = ({
   ...props
 }: Props): ReactElement => {
   return (
-    <div className={className} {...props}>
-      {image}
-      <h2 className="p-heading--4">{title}</h2>
-      {children}
+    <div className={classNames(["row", className])} {...props}>
+      <div className="u-align--right col-4 col-medium-2 col-small-1">
+        {image}
+      </div>
+      <div className="u-align--left col-8 col-medium-4 col-small-3">
+        <p className="p-heading--4 u-no-margin--bottom">{title}</p>
+        {children}
+      </div>
     </div>
   );
 };

From a412239580a22fa11a24e00d5801711b65b35ff9 Mon Sep 17 00:00:00 2001
From: vladimir-cucu <vladimir.cucu@canonical.com>
Date: Fri, 26 Apr 2024 17:48:04 +0300
Subject: [PATCH 2/4] fix: use image from assets in EmptyState storybook

---
 .../EmptyState/EmptyState.stories.mdx         | 39 ++++++-------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/components/EmptyState/EmptyState.stories.mdx b/src/components/EmptyState/EmptyState.stories.mdx
index 0897c1baa..fcd82d83b 100644
--- a/src/components/EmptyState/EmptyState.stories.mdx
+++ b/src/components/EmptyState/EmptyState.stories.mdx
@@ -6,6 +6,17 @@ import Button from "../Button";
 
 <Meta title="EmptyState" component={EmptyState} />
 
+export const boxImage = (
+  <img
+    src="https://assets.ubuntu.com/v1/c17e0d92-container.svg"
+    style={{
+      maxWidth: "10rem",
+      maxHeight: "10rem",
+    }}
+    alt="empty state"
+  />
+);
+
 ### EmptyState
 
 This is a [React](https://reactjs.org/) component to represent an empty state.
@@ -16,22 +27,6 @@ This is a [React](https://reactjs.org/) component to represent an empty state.
 
 ### Default
 
-export const boxImage = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="154" height="160">
-    <g fill="none" fill-rule="evenodd">
-      <path
-        fill="#666"
-        fill-rule="nonzero"
-        d="M68.513 3.582l21.105 12.15-1.572.911-19.913-11.46-31.936 18.375 31.943 18.37 13.864-7.974L82 35.758l-12.275 7.084 32.303 18.625c.243.141.393.4.395.682v37.204l31.127-17.906-6.74-3.894 1.545-.93 7.187 4.14c.244.14.394.4.396.68v38.59c-.002.282-.152.541-.396.682l-33.514 19.295-33.436 19.295c-.14.094-.308.134-.475.11-.134.003-.267-.035-.38-.11L34.224 140.01l-33.5-19.295c-.248-.136-.4-.398-.396-.681v-77.18c.001-.278.153-.533.396-.666l33.499-19.31L67.738 3.581c.239-.142.536-.142.775 0zm32.327 98.584l-31.933 18.367v36.716l31.934-18.427v-36.656zm-65.432-.063l.001 36.719 31.917 18.426v-36.77l-31.918-18.375zM134.34 82.82l-31.917 18.36v36.785l31.918-18.328V82.82zM1.91 82.808l.001 36.766 31.917 18.329v-36.711L1.91 82.808zm98.931-19.315L68.877 81.84v36.838l31.964-18.399V63.493zm-65.463-.044v36.83l31.95 18.38V81.904L35.378 63.45zM1.91 44.219l.001 36.765 31.885 18.31v-36.71L1.91 44.22zm66.208-.447L36.172 62.151l31.914 18.326 31.943-18.336-31.912-18.369zm-33.42-19.231L2.711 42.854l31.9 18.372 31.98-18.38-31.894-18.305z"
-      />
-      <g stroke="#DD4814" stroke-dasharray="0 3" stroke-linecap="round">
-        <path d="M83.248 48.885l-.243-27.299c-.003-.362.19-.697.504-.877l33.995-19.425c.307-.176.685-.176.992 0l34 19.428c.312.178.504.51.504.868v38.84c0 .359-.192.69-.504.868l-34.004 19.43c-.305.175-.68.176-.986.004L102 72h0" />
-        <path d="M85 23l32.508 17.732c.306.166.676.162.978-.012L151 22h0m-33 20v37" />
-      </g>
-    </g>
-  </svg>
-);
-
 <Canvas>
   <Story name="Default">
     <EmptyState
@@ -49,17 +44,7 @@ export const doNothing = () => {};
   <Story name="With content">
     {() => (
       <EmptyState
-        image={
-          <Icon
-            name="containers"
-            style={{
-              opacity: 0.25,
-              height: "10rem",
-              width: "10rem",
-              marginBottom: "1rem",
-            }}
-          />
-        }
+        image={boxImage}
         title="No instances found"
       >
         <p>

From 1668ab563c706e68f5a9b8436d398827fb243f53 Mon Sep 17 00:00:00 2001
From: vladimir-cucu <vladimir.cucu@canonical.com>
Date: Fri, 26 Apr 2024 23:32:09 +0300
Subject: [PATCH 3/4] ci: test percy

---
 src/components/EmptyState/EmptyState.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index d1da06a2a..e8b28e61c 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -24,6 +24,7 @@ export type Props = PropsWithSpread<
   HTMLProps<HTMLDivElement>
 >;
 
+// test percy
 export const EmptyState = ({
   children,
   className,

From d2b2401d3d21bf700ace9fa71bee9a0501f9d514 Mon Sep 17 00:00:00 2001
From: vladimir-cucu <vladimir.cucu@canonical.com>
Date: Fri, 26 Apr 2024 23:39:32 +0300
Subject: [PATCH 4/4] ci: test percy

---
 src/components/EmptyState/EmptyState.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index e8b28e61c..d1da06a2a 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -24,7 +24,6 @@ export type Props = PropsWithSpread<
   HTMLProps<HTMLDivElement>
 >;
 
-// test percy
 export const EmptyState = ({
   children,
   className,