IllustratedMessage component (#542)

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

@@ -0,0 +1,63 @@
+---
+title: IllustratedMessage
+description: An illustrated message display an image and a message, usually for an empty state or an error page.
+category: "content"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/IllustratedMessage/src/IllustratedMessage.tsx
+---
+
+<Example src="IllustratedMessage/docs/default" isOpen />
+
+## Anatomy
+
+### Composed Components
+
+A `IllustratedMessage` uses the following components.
+
+<ComposedComponents components={["Image", "Heading", "Content", "ButtonGroup", "Button"]}/>
+
+## Usage
+
+### Sizes
+
+An illustrated message can use different sizes.
+
+<Example src="IllustratedMessage/docs/size" />
+
+### Image
+
+An illustrated message can handle images (jpg, png).
+
+<Example src="IllustratedMessage/docs/image" />
+
+### Buttons
+
+An illustrated message can handle either a button
+
+<Example src="IllustratedMessage/docs/button" />
+
+or a group of buttons
+
+<Example src="IllustratedMessage/docs/buttonGroup" />
+
+### SVG
+
+An illustrated message can handle svgs.
+
+<Example src="IllustratedMessage/docs/svg" />
+
+## Props
+
+<PropTable component="IllustratedMessage" />
+
+## Migration Notes
+
+<MigrateGuide src="IllustratedMessage/docs/migration-notes" />
+
+### Layout Samples
+
+To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in [Orbiter](https://wl-orbiter-website.netlify.app/?path=/docs/illustrated-message--docs).
+
+#### Horizontal
+
+<Example src="IllustratedMessage/docs/migration/horizontal" />

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

@@ -0,0 +1,67 @@
+---
+title: Image
+description: An image component that can be used to display images.
+category: "content"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Image/src/Image.tsx
+---
+
+<Example src="Image/docs/image" isOpen />
+
+## Usage
+
+### Shapes
+
+An image can use a different shape.
+
+<Example src="Image/docs/shape" />
+
+### Sizes
+
+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.
+
+It is highly recommended to serve a 1x image as well as a 2x image, twice the intended size. This assures the user has the best looking image possible.
+
+Avoid serving images that are unecessary big, images should be resized to the intended final image display size. This assures we don't waste bandwith for the user.
+
+<Example src="Image/docs/retina" />
+
+## SvgImage
+
+For some use cases, like dark mode support, an SVG image is a better fit than a standard PNG or JPG image.
+
+<Example src="Image/docs/svg" />
+
+### Size
+
+An SVG image size can be specified with the `width` and `height` props.
+
+<Example src="Image/docs/svgSize" />
+
+### Color
+
+An SVG image `stroke` and `fill` color can vary.
+
+<Example src="Image/docs/svgColor" />
+
+## Props
+
+### Image
+
+<PropTable component="Image" />
+
+### SvgImage
+
+<PropTable component="SvgImage" />

apps/docs/examples/Preview.ts

@@ -353,6 +353,51 @@ export const Previews: Record<string, Preview> = {
     "typography/Heading/docs/advancedCustomization": {
         component: lazy(() => import("@/../../packages/components/src/typography/Heading/docs/advancedCustomization.tsx"))
     },
+    "IllustratedMessage/docs/default": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/default.tsx"))
+    },
+    "IllustratedMessage/docs/size": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/size.tsx"))
+    },
+    "IllustratedMessage/docs/image": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/image.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"))
+    },
+    "IllustratedMessage/docs/migration/horizontal": {
+        component: lazy(() => import("@/../../packages/components/src/IllustratedMessage/docs/migration/horizontal.tsx"))
+    },
+    "Image/docs/image": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/image.tsx"))
+    },
+    "Image/docs/shape": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/shape.tsx"))
+    },
+    "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"))
+    },
+    "Image/docs/svg": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/svg.tsx"))
+    },
+    "Image/docs/svgSize": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/svgSize.tsx"))
+    },
+    "Image/docs/svgColor": {
+        component: lazy(() => import("@/../../packages/components/src/Image/docs/svgColor.tsx"))
+    },
     "typography/Label/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/typography/Label/docs/preview.tsx"))
     },

packages/components/src/IllustratedMessage/assets/NoResults.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import { Ref, SVGProps, forwardRef } from "react";
+const InnerNoResultsIcon = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={361} height={163} fill="none" viewBox="0 0 361 163" ref={ref} {...props}><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.67816} d="M232.254 19.5795C236.185 22.1832 240.142 24.8126 244.073 27.4163C241.367 25.655 237.87 25.1444 234.755 26.0634C231.641 26.9824 228.986 29.3054 227.659 32.2665C233.173 29.5862 236.389 23.8425 239.299 18.4563C236.874 22.9746 237.436 28.9735 234.474 33.4153C234.015 28.7438 233.607 24.1233 232.254 19.5795Z" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M91.5981 71.8083C91.4449 70.2511 91.3173 68.694 91.1641 67.1368C92.5426 67.9026 93.9466 68.694 95.3251 69.4598C93.1042 69.4853 90.9089 69.5364 88.688 69.5619C90.143 70.1746 91.981 68.6174 91.5981 67.0858C91.2662 69.2556 90.9344 71.4254 90.6025 73.5952C90.9854 72.8549 91.3683 72.1402 91.7513 71.3999" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M264.265 69.0003C264.75 67.0858 265.261 65.1457 265.746 63.2311C266.409 64.3033 267.048 65.3754 267.711 66.4221C266.588 66.2689 265.465 66.1413 264.316 65.9881C266.665 65.937 268.988 64.9925 270.672 63.3332C268.911 64.7117 267.15 66.0902 265.414 67.4942" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M1.97192 131.695C2.45694 129.781 2.96749 127.841 3.45251 125.926C4.11622 126.998 4.7544 128.07 5.41811 129.117C4.29491 128.964 3.17171 128.836 2.02298 128.683C4.37149 128.632 6.69447 127.688 8.37928 126.028C6.64342 127.432 4.88204 128.811 3.12065 130.189" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M107.374 161.205C106.864 159.29 106.353 157.376 105.843 155.461C108.115 154.695 110.795 155.461 112.327 157.299C108.855 157.07 105.383 156.84 101.911 156.636C103.851 156.355 105.638 155.206 106.685 153.572C106.583 155.793 106.481 158.014 106.379 160.26" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M210.147 132.282C211.653 130.393 212.649 128.07 212.98 125.671C214.231 126.922 215.048 128.581 215.329 130.317C213.185 129.679 211.04 129.015 208.922 128.377C211.679 127.254 214.461 126.105 217.218 124.982C214.512 126.028 212.087 127.815 210.275 130.113" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M26.4017 67.8771C26.6315 64.6607 28.546 61.6229 31.303 59.9892C32.4517 62.7716 33.6259 65.5541 34.7747 68.3111C30.9711 67.0092 27.2952 65.2988 23.8745 63.2056C28.5205 61.8527 33.3451 61.1634 38.1953 61.1889C33.9323 62.8993 29.899 65.2223 26.2996 68.0558C26.9633 68.7961 27.9334 69.2556 28.9289 69.2556" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M297.986 136.903C298.956 135.754 299.926 134.605 300.896 133.457C301.152 134.605 301.79 135.652 302.709 136.392C301.484 134.095 298.956 132.538 296.353 132.512C299.773 131.925 303.194 131.312 306.615 130.725C303.041 132.538 299.646 134.733 296.531 137.26C297.45 137.209 298.369 137.184 299.288 137.133" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M153.17 5.66709C153.528 4.54388 153.962 3.3441 154.983 2.7825C156.004 2.2209 157.663 2.96119 157.459 4.08439C156.131 3.67596 154.829 3.29305 153.502 2.88461C155.672 2.34854 157.816 1.81246 159.986 1.25086C156.897 2.06774 154.064 3.77807 151.894 6.10105" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={2.55273} d="M180.05 77.2456C174.97 79.0325 169.508 80.8705 164.274 79.5431C159.041 78.2157 154.625 72.3444 156.897 67.4687C158.352 64.3288 161.875 62.7716 165.219 61.8527C172.877 59.7849 181.122 59.9126 188.704 62.1845C195.75 64.3033 203.102 69.8427 202.489 77.169C202.131 81.3555 199.119 84.9549 195.494 87.0226C191.844 89.0903 187.632 89.8561 183.471 90.3922C171.601 91.8728 159.195 91.5664 148.243 86.7673C141.632 83.8827 134.101 77.2967 136.705 70.5575C143.623 52.5862 174.741 47.8126 193.81 50.7483C207.62 52.867 225.463 62.644 223.83 76.3266C222.911 83.9082 212.317 93.4299 205.373 96.6208C186.79 105.172 169.839 107.419 149.494 105.479C143.802 104.943 138.083 103.666 133.157 100.782C128.23 97.8972 124.12 93.2768 122.767 87.7373C120.291 77.5264 127.285 67.6729 133.871 59.4786" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M326.22 42.6561C327.547 42.7838 328.696 41.6861 329.998 41.3798C331.887 40.9203 333.725 42.1456 335.614 42.6306C337.682 43.1667 339.877 42.8348 341.996 43.1156C346.233 43.6517 349.884 46.5618 352.283 50.0846C354.683 53.6074 356.036 57.7428 357.363 61.8016C358.921 66.6007 360.401 72.1657 357.67 76.4288C356.853 77.7051 355.704 78.7517 355.066 80.1047C353.713 82.9382 354.734 86.6141 352.871 89.1413C350.573 92.2557 345.799 91.3878 342.021 92.2302C337.503 93.2257 333.827 97.0038 329.232 97.3611C323.693 97.7951 319.098 93.2512 313.788 91.7196C312.41 91.3112 310.878 91.0814 309.857 90.0859C308.913 89.1669 308.581 87.7884 308.07 86.5631C306.896 83.7551 304.573 81.4321 304.088 78.4454C303.271 73.4165 306.743 67.9537 307.789 63.1546C308.555 59.6828 308.198 56.2111 308.657 52.7394C309.091 49.6761 310.112 47.634 312.767 45.8981C313.865 45.1323 326.22 39.8992 326.22 42.6561Z" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M343.834 50.3399C343.553 52.7139 346.157 54.9092 348.454 54.2711C348.275 53.7605 347.612 53.5052 347.127 53.735" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M324.127 50.0335C326.628 49.5996 329.309 51.1057 330.228 53.4797C329.972 53.301 329.717 53.1479 329.462 52.9692" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M336.125 60.2955C337.018 61.1124 338.218 61.6229 339.443 61.674" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M324.995 78.1901C326.118 81.4066 326.169 85.0059 325.148 88.2479C324.816 88.2479 324.484 87.9416 324.484 87.6097" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M310.853 75.0503C311.567 76.8117 314.069 77.552 315.626 76.4543C316.469 75.8416 317.005 74.6929 316.596 73.7229C316.188 72.7528 314.707 72.3699 314.069 73.1868" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M336.814 73.6463C336.278 73.7994 336.252 74.6418 336.661 74.9992C337.069 75.3821 337.682 75.4077 338.243 75.3821C338.779 75.3566 339.392 75.28 339.698 74.8461C340.03 74.4121 339.698 73.5952 339.162 73.7484" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M350.726 74.4632C349.399 74.7695 348.378 76.0969 348.429 77.4498C349.68 77.6796 351.033 77.8838 352.105 77.2456C353.202 76.6074 353.56 74.744 352.437 74.1568" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M60.174 10.7725C58.9998 11.3341 57.7489 11.9468 57.0852 13.07C56.6768 13.7592 56.5236 14.5761 56.3704 15.3674C56.0131 17.282 55.6557 19.1965 55.2983 21.0856C55.0175 22.5151 54.7622 24.0212 55.1707 25.4252C55.6302 27.0079 56.8555 28.2332 58.0297 29.4075C59.8677 31.1944 61.7057 32.9813 63.5436 34.7682C65.2795 36.453 67.2961 38.2654 69.7467 38.2399C71.2784 38.2144 72.7079 37.4486 74.0609 36.7083C76.1286 35.5595 78.2218 34.3598 79.7534 32.5728C81.2851 30.7859 82.153 28.2077 81.3106 25.9868C83.4549 25.6039 85.1652 23.9191 86.1353 21.979C87.1053 20.0389 87.4372 17.8436 87.7435 15.6993C88.0243 13.8869 88.2796 11.9468 87.5903 10.2365C87.1819 9.21537 86.4927 8.34744 85.7268 7.58162C77.0731 -1.14872 68.7257 6.71369 60.174 10.7725Z" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M69.1597 13.5295C70.2318 15.4696 73.2951 15.8525 74.8012 14.2442C75.0309 13.989 75.2352 13.5805 75.031 13.3253C74.8012 13.07 74.3162 13.6061 74.648 13.6826" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M60.7865 21.2643C59.9952 21.494 60.0207 22.7448 60.6844 23.2299C61.3481 23.7149 62.2671 23.6128 63.0585 23.4085C63.0585 22.4896 63.0585 21.5961 63.0585 20.6771C62.2926 20.4219 61.3737 20.575 60.7355 21.0856" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M69.5682 30.0967C69.2618 28.6416 70.1042 27.059 71.4827 26.4974C71.8401 26.3442 72.2485 26.2421 72.4017 25.8847C72.5549 25.5528 72.0954 25.0423 71.8401 25.3486" /><path strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} strokeWidth={1.77491} d="M81.3107 14.4229C80.2385 14.5761 79.9577 16.2354 80.7746 16.9501C81.5915 17.6649 82.9189 17.4096 83.7358 16.6949C83.2252 16.4396 82.7147 16.1588 82.2297 15.9035" /></svg>;
+const ForwardRef = forwardRef(InnerNoResultsIcon);
+export { ForwardRef as ReactComponent };
+/* eslint-enable */

packages/components/src/IllustratedMessage/assets/index.ts

@@ -0,0 +1,4 @@
+import Frog from "./frog.jpg";
+import { ReactComponent as NoResults } from "./NoResults.tsx";
+
+export { Frog, NoResults };

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/IllustratedMessage/docs/default.tsx

@@ -0,0 +1,13 @@
+import { 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>
+        </IllustratedMessage>
+    );
+}

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

@@ -0,0 +1,11 @@
+import { Content, Heading, IllustratedMessage, Image } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <IllustratedMessage>
+            <Image src="/frog.jpg" alt="No Results" />
+            <Heading>No results found</Heading>
+            <Content>It seems like there’s nothing here for now. Hop on and add something new!</Content>
+        </IllustratedMessage>
+    );
+}

packages/components/src/IllustratedMessage/docs/migration-notes.md

@@ -0,0 +1,4 @@
+Coming from Orbiter, you should be aware of the following changes:
+
+- `orientation` has been removed. Refer to this [sample](#horizontal) to see an implementation example for a horizontal orientation.
+- `width` and `height` prop will now affect the whole wrapper instead of just the image.

packages/components/src/IllustratedMessage/docs/migration/horizontal.tsx

@@ -0,0 +1,15 @@
+import { Content, Heading, Inline, Stack, SvgImage } from "@hopper-ui/components";
+
+import { NoResults } from "../../assets/index.ts";
+
+export default function Example() {
+    return (
+        <Inline alignY="center" gap="stack-lg">
+            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
+            <Stack gap="stack-sm">
+                <Heading>No results found</Heading>
+                <Content color="neutral-weak">Please try another search term.</Content>
+            </Stack>
+        </Inline>
+    );
+}

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

@@ -0,0 +1,24 @@
+import { Content, Heading, IllustratedMessage, Image, Stack } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Stack gap="core_480" alignX="center">
+            <IllustratedMessage size="sm">
+                <Image src="/frog.jpg" alt="Frog" />
+                <Heading>No results found</Heading>
+                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
+            </IllustratedMessage>
+            <IllustratedMessage size="md">
+                <Image src="/frog.jpg" alt="Frog" />
+                <Heading>No results found</Heading>
+                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
+            </IllustratedMessage>
+            <IllustratedMessage size="lg">
+                <Image src="/frog.jpg" alt="Frog" />
+                <Heading>No results found</Heading>
+                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
+            </IllustratedMessage>
+        </Stack>
+
+    );
+}

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

@@ -0,0 +1,13 @@
+import { 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>
+        </IllustratedMessage>
+    );
+}

packages/components/src/IllustratedMessage/index.ts

@@ -0,0 +1 @@
+export * from "./src/index.ts";