update api legend and link colors

Author: Jacob Logan

src/components/ApiDocs/ReferencePage.tsx

@@ -29,7 +29,7 @@ export const ReferencePage = ({ category }) => {
         </Flex>
         <Flex>
           <View as="span" className="api-legend union" />
-          Union/Intersection
+          Other
         </Flex>
       </Flex>
     </View>

src/components/ApiDocs/display/ApiModal.tsx

@@ -26,6 +26,7 @@ export const ApiModal = ({
   if (data.type === 'reference') {
     data = references[data.target];
   }
+  console.log(data);
   const description = data?.comment?.summary;
   const ref = useRef<HTMLDivElement>(null);
 

src/components/ApiDocs/display/TypeLink.tsx

@@ -1,12 +1,13 @@
 import { useContext } from 'react';
 import { TypeContext } from '@/components/ApiDocs/ApiModalProvider';
 import { View } from '@aws-amplify/ui-react';
+import references from '@/directory/apiReferences.json';
 
 export interface LinkDataType {
   name: string;
   kind: number;
   type: string | LinkDataType;
-  target: number;
+  target: number | LinkDataType;
   value: string;
   typeArguments: LinkDataType[];
   elementType: LinkDataType;
@@ -21,7 +22,6 @@ export const TypeLink = ({ linkData, breadCrumbs }: TypeLinkInterface) => {
   const { setModalData, modalOpen, addBreadCrumb, setBC } =
     useContext(TypeContext);
   const name = linkData.name;
-  const className = `type-link kind-${linkData.kind}`;
 
   const onClickHandler = () => {
     setModalData(linkData);
@@ -39,6 +39,11 @@ export const TypeLink = ({ linkData, breadCrumbs }: TypeLinkInterface) => {
     return <View as="span">{linkData.name}</View>;
   } else if (linkData.type === 'literal') {
     return <View as="span">{linkData.value}</View>;
+  } else if (
+    linkData.type === 'typeOperator' &&
+    typeof linkData.target !== 'number'
+  ) {
+    return <View as="span">{linkData.target.name}</View>;
   } else if (linkData.type === 'array') {
     return [
       <TypeLink
@@ -49,6 +54,21 @@ export const TypeLink = ({ linkData, breadCrumbs }: TypeLinkInterface) => {
       '[]'
     ];
   } else {
+    let type = 'unknown';
+    if (!linkData.type) {
+      type = 'interface';
+    } else if (typeof linkData.type === 'string') {
+      type = linkData.type;
+    } else if (linkData?.type?.type && typeof linkData.type.type === 'string') {
+      type = linkData.type.type;
+    }
+    if (type === 'reference' && typeof linkData.target === 'number') {
+      const referencedObject = references[linkData.target];
+      type = referencedObject.type?.type
+        ? referencedObject.type.type
+        : 'interface';
+    }
+    const className = `type-link type-${type}`;
     return (
       <button className={className} onClick={onClickHandler}>
         {name}

src/styles/reference.scss

@@ -133,17 +133,15 @@
     outline-offset: 2px;
   }
 
-  &.kind-2097152 {
+  color: var(--amplify-colors-blue-80);
+  
+  &.type-reference {
     color: var(--amplify-colors-red-80);
   }
 
-  &.kind-256 {
+  &.type-interface {
     color: var(--amplify-colors-green-80);
   }
-
-  &.kind-undefined {
-    color: var(--amplify-colors-blue-80);
-  }
 }
 
 .api-legend {