Improved and fixed NonIdealState JSDocs (#2307)

packages/itwinui-react/src/core/NonIdealState/NonIdealState.tsx

@@ -9,7 +9,7 @@ import cx from 'classnames';
 
 type NonIdealStateProps = {
   /**
-   * An svg component, preferably from @itwin/itwinui-illustrations-react.
+   * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
    *
    * @example
    * import { Svg404 } from '@itwin/itwinui-illustrations-react';
@@ -18,14 +18,18 @@ type NonIdealStateProps = {
   svg: React.ReactNode;
 
   /**
-   * Primary heading for the error page
+   * Primary heading for the `NonIdealState`
    */
   heading?: React.ReactNode;
 
   /**
    * Secondary text to explain the error
    * Can include html in order to provide a hyperlink
-   * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+   *
+   * @example
+   * <>
+   *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
+   * </>
    */
   description?: React.ReactNode;
 
@@ -34,13 +38,13 @@ type NonIdealStateProps = {
    * Typically should be a primary and secondary button.
    *
    * @example
-   * <ErrorPage
-   *  actions={
-   *   <>
-   *    <Button styleType={'high-visibility'}>Retry</Button>
-   *    <Button>Contact us</Button>
-   *   </>
-   *  }
+   * <NonIdealState
+   *   actions={
+   *     <>
+   *       <Button styleType={'high-visibility'}>Retry</Button>
+   *       <Button>Contact us</Button>
+   *     </>
+   *   }
    * />
    */
   actions?: React.ReactNode;
@@ -64,7 +68,7 @@ type NonIdealStateProps = {
 
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from @itwin/itwinui-illustrations-react.
+ * Works well with svgs from `@itwin/itwinui-illustrations-react`.
  *
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />