PR

apps/docs/content/components/content/IllustratedMessage.mdx

@@ -32,9 +32,13 @@ An illustrated message can handle images (jpg, png).
 
 ### Buttons
 
-An illustrated message can handle either a button or a group of buttons
+An illustrated message can handle either a button
 
-<Example src="IllustratedMessage/docs/buttons" />
+<Example src="IllustratedMessage/docs/button" />
+
+or a group of buttons
+
+<Example src="IllustratedMessage/docs/buttonGroup" />
 
 ### SVG
 

apps/docs/content/components/content/Image.mdx

@@ -22,6 +22,12 @@ An image can vary in size.
 
 <Example src="Image/docs/size" />
 
+## Object fit
+
+An image can have different object fits
+
+<Example src="Image/docs/objectFit" />
+
 ### Retina
 
 You can let the browser decide which image is best to serve according to the user device screen pixel density.

apps/docs/examples/Preview.ts

@@ -362,8 +362,11 @@ export const Previews: Record<string, Preview> = {
     "IllustratedMessage/docs/image": {
         component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/image.tsx"))
     },
-    "IllustratedMessage/docs/buttons": {
-        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/buttons.tsx"))
+    "IllustratedMessage/docs/button": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/button.tsx"))
+    },
+    "IllustratedMessage/docs/buttonGroup": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/buttonGroup.tsx"))
     },
     "IllustratedMessage/docs/svg": {
         component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/svg.tsx"))
@@ -380,6 +383,9 @@ export const Previews: Record<string, Preview> = {
     "Image/docs/size": {
         component: lazy(() => import("@/../../packages/components/src/Image/docs/size.tsx"))
     },
+    "Image/docs/objectFit": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/objectFit.tsx"))
+    },
     "Image/docs/retina": {
         component: lazy(() => import("@/../../packages/components/src/Image/docs/retina.tsx"))
     },

packages/components/src/IllustratedMessage/docs/button.tsx

@@ -0,0 +1,14 @@
+import { Button, Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";
+
+import { NoResults } from "../assets/index.ts";
+
+export default function Example() {
+    return (
+        <IllustratedMessage>
+            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
+            <Heading>No results found</Heading>
+            <Content>Try searching for something else.</Content>
+            <Button>Try again</Button>
+        </IllustratedMessage>
+    );
+}

packages/components/src/IllustratedMessage/docs/buttonGroup.tsx

@@ -0,0 +1,17 @@
+import { Button, ButtonGroup, Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";
+
+import { NoResults } from "../assets/index.ts";
+
+export default function Example() {
+    return (
+        <IllustratedMessage>
+            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
+            <Heading>No results found</Heading>
+            <Content>Try searching for something else.</Content>
+            <ButtonGroup>
+                <Button variant="secondary">Back</Button>
+                <Button>Try again</Button>
+            </ButtonGroup>
+        </IllustratedMessage>
+    );
+}

packages/components/src/Image/docs/objectFit.tsx

@@ -0,0 +1,9 @@
+import { Div, Image } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div UNSAFE_width="200px" UNSAFE_height="200px">
+            <Image objectFit="cover" src="/frog.jpg" alt="Frog" />
+        </Div>
+    );
+}