Merge branch 'feature/api-docs' into apiDocs-modal-tabbing

Author: katieklein

src/components/ApiDocs/FunctionReturn.tsx

@@ -3,6 +3,7 @@ import { MDXHeading } from '../MDXComponents';
 import { Promise } from './display/Promise';
 import { ApiComment } from './ApiComment';
 import references from '@/directory/apiReferences.json';
+import { ParameterType } from './display';
 
 export const FunctionReturn = ({ functionReturn, sigName }) => {
   const name = functionReturn.name;
@@ -15,7 +16,7 @@ export const FunctionReturn = ({ functionReturn, sigName }) => {
     }
   } else {
     const returnType = references[functionReturn.target];
-    display = name;
+    display = <ParameterType typeData={functionReturn} />;
     if (returnType?.comment?.summary) {
       description = <ApiComment apiComment={returnType.comment.summary} />;
     }

src/components/ApiDocs/display/ApiModal.tsx

@@ -90,6 +90,13 @@ export const ApiModal = ({
     setTimeout(() => {
       ref?.current?.focus();
     }, 0);
+    
+  if (typeof window != 'undefined') {
+    window.onclick = function (event) {
+      if (event.target.className.includes('api-modal-container--open')) {
+        closeModal();
+      }
+    };
   }
 
   return (
@@ -128,7 +135,7 @@ export const ApiModal = ({
            * viewports.
            */}
           <dd
-            className="api-modal__api-value"
+            className="api-modal__api-value api-modal__content__value"
             tabIndex={data.type?.type === 'reference' ? -1 : 0}
           >
             <View as="code" className="parameter">
@@ -138,7 +145,7 @@ export const ApiModal = ({
           {description ? (
             <>
               <dt>Description:</dt>
-              <dd>
+              <dd className="api-modal__content__description">
                 <ApiComment apiComment={description} />
               </dd>
             </>

src/components/ApiDocs/display/Promise.tsx

@@ -8,7 +8,7 @@ export const Promise = ({ typeObject }) => {
   }, []);
   return (
     <>
-      <View>Promise&lt;{promiseTypes}&gt;</View>
+      <View className="api-promise">Promise&lt;{promiseTypes}&gt;</View>
     </>
   );
 };

src/styles/reference.scss

@@ -67,6 +67,9 @@
     font-weight: bold;
     align-items: baseline;
   }
+  &__description, &__value {
+    color: var(--amplify-colors-neutral-90);
+  }
 }
 
 .api-modal__api-name {
@@ -97,6 +100,12 @@
   margin-inline-start: var(--amplify-space-medium);
 }
 
+.api-promise {
+  .type-link {
+    margin: 0;
+  }
+}
+
 .type-link {
   cursor: pointer;
   margin: 4px;