FIX 1084, 1085: Update docs + Add NoSearchResults illustration (#1086)

Co-authored-by: Danni <[email protected]>

Author: Eduardo Vargas Torres

packages/@react-spectrum/illustratedmessage/docs/IllustratedMessage.mdx

@@ -29,9 +29,7 @@ keywords: [illustrated message]
 
 <p>{docs.exports.IllustratedMessage.description}</p>
 
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['IllustratedMessage']} />
+<HeaderInfo packageData={packageData} componentNames={['IllustratedMessage']} />
 
 ## Example
 
@@ -40,7 +38,7 @@ import NotFound from '@spectrum-icons/illustrations/NotFound';
 
 <IllustratedMessage>
   <NotFound />
-  <Heading>No Results</Heading>
+  <Heading>No results</Heading>
   <Content>Try another search</Content>
 </IllustratedMessage>
 ```
@@ -56,7 +54,7 @@ import Upload from '@spectrum-icons/illustrations/Upload';
 
 <IllustratedMessage>
   <Upload />
-  <Heading>Drag and Drop Your File</Heading>
+  <Heading>Drag and Drop your file</Heading>
   <Content>Select a File from your computer<br /> or Search Adobe Stock</Content>
 </IllustratedMessage>
 ```
@@ -83,10 +81,22 @@ If you pass an SVG in yourself, you'll need to ensure that the `role` prop is se
 
 <PropTable component={docs.exports.IllustratedMessage} links={docs.links} />
 
-## Example Illustrations
+## Example illustrations
 
 The below examples make use of illustrations included in the [@spectrum-icons/illustrations](http://npmjs.com/@spectrum-icons/illustrations) package.
 
+### No search results
+
+```tsx example
+import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
+
+<IllustratedMessage>
+  <NoSearchResults />
+  <Heading>No matching results</Heading>
+  <Content>Try another search.</Content>
+</IllustratedMessage>
+```
+
 ### 403 Forbidden
 
 ```tsx example
@@ -99,7 +109,7 @@ import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';
 </IllustratedMessage>
 ```
 
-### 404 Not Found
+### 404 Not found
 
 ```tsx example
 <IllustratedMessage>
@@ -109,7 +119,7 @@ import Unauthorized from '@spectrum-icons/illustrations/Unauthorized';
 </IllustratedMessage>
 ```
 
-### 500 Internal Server Error
+### 500 Internal server error
 
 ```tsx example
 import Error from '@spectrum-icons/illustrations/Error';
@@ -121,26 +131,26 @@ import Error from '@spectrum-icons/illustrations/Error';
 </IllustratedMessage>
 ```
 
-### 503 Service Unavailable
+### 503 Service unavailable
 
 ```tsx example
 import Unavailable from '@spectrum-icons/illustrations/Unavailable';
 
 <IllustratedMessage>
   <Unavailable />
-  <Heading>Error 503: Service Unavailable</Heading>
+  <Heading>Error 503: Service unavailable</Heading>
   <Content>This page isn't working. Try a different page or try again later.</Content>
 </IllustratedMessage>
 ```
 
-### 504 Gateway Timeout
+### 504 Gateway timeout
 
 ```tsx example
 import Timeout from '@spectrum-icons/illustrations/Timeout';
 
 <IllustratedMessage>
   <Timeout />
-  <Heading>Error 504: Server Timeout</Heading>
+  <Heading>Error 504: Server timeout</Heading>
   <Content>The server took too long. Please try again later.</Content>
 </IllustratedMessage>
 ```

packages/@react-spectrum/illustratedmessage/stories/IllustratedMessage.stories.tsx

@@ -15,6 +15,7 @@ import Error from '@spectrum-icons/illustrations/src/Error';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '../';
 import {Link} from '@react-spectrum/link';
+import NoSearchResults from '@spectrum-icons/illustrations/src/NoSearchResults';
 import NotFound from '@spectrum-icons/illustrations/src/NotFound';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
@@ -27,11 +28,19 @@ storiesOf('IllustratedMessage', module)
   .add(
     'Not found',
     () => render({
-      heading: 'Error 404: Page not found.',
+      heading: 'Error 404: Page not found',
       description: 'This page isn’t available. Try checking the URL or visit a different page.',
       illustration: <NotFound />
     })
   )
+  .add(
+    'No search results',
+    () => render({
+      heading: 'No matching results',
+      description: 'Try another search.',
+      illustration: <NoSearchResults />
+    })
+  )
   .add(
     'Unauthorized',
     () => render({
@@ -78,12 +87,8 @@ storiesOf('IllustratedMessage', module)
   );
 
 function render(props: any = {}) {
-  let {
-    illustration,
-    heading,
-    description,
-    ...otherProps
-  } = props;
+  let {illustration, heading, description, ...otherProps} = props;
+
   return (
     <IllustratedMessage {...otherProps}>
       {description && <Content>{description}</Content>}

packages/@spectrum-icons/illustrations/src/NoSearchResults.tsx

@@ -0,0 +1,32 @@
+import { getIllustrationProps, IllustrationProps } from "./utils";
+import React from "react";
+
+export default function NoSearchResults(props: IllustrationProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="99.039"
+      height="94.342"
+      {...getIllustrationProps(props)}
+    >
+      <g
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M93.113 88.415a5.38 5.38 0 0 1-7.61 0L58.862 61.773a1.018 1.018 0 0 1 0-1.44l6.17-6.169a1.018 1.018 0 0 1 1.439 0l26.643 26.643a5.38 5.38 0 0 1 0 7.608z"
+          stroke-width="2.99955"
+        ></path>
+        <path
+          stroke-width="2"
+          d="M59.969 59.838l-3.246-3.246M61.381 51.934l3.246 3.246M64.609 61.619l13.327 13.327"
+        ></path>
+        <path
+          d="M13.311 47.447A28.87 28.87 0 1 0 36.589 1.5c-10.318 0-20.141 5.083-24.7 13.46M2.121 38.734l15.536-15.536M17.657 38.734L2.121 23.198"
+          stroke-width="3"
+        ></path>
+      </g>
+    </svg>
+  );
+}