Update element icons (#378)

This PR updates element icons to the ones that product requested. This
PR also consolidates the logic we used to decide what icon to render.
SVGs sourced from https://fontawesome.com.

<img width="370" alt="image"
src="https://github.com/yext/studio/assets/59857107/bada0757-4267-4452-9869-714207e45101">

J-SLAP=2940
TEST=manual

packages/studio-ui/src/components/AddElementMenu/AddElementList.tsx

@@ -1,9 +1,8 @@
 import { FileMetadataKind, ComponentMetadata } from "@yext/studio-plugin";
 import useStudioStore from "../../store/useStudioStore";
-import { ElementType } from "./AddElementMenu";
 import AddElementOption from "./AddElementOption";
 import path from "path-browserify";
-import renderIconForType from "../common/renderIconForType";
+import { ElementType, getElementType } from "../common/ElementIcon";
 import { useMemo } from "react";
 
 interface AddElementListProps {
@@ -31,9 +30,7 @@ export default function AddElementList({
   return (
     <div className="flex flex-col items-start py-1">
       {options.map((props) => {
-        return (
-          <AddElementOption {...props} icon={renderIconForType(activeType)} />
-        );
+        return <AddElementOption {...props} elementType={activeType} />;
       })}
     </div>
   );
@@ -69,12 +66,7 @@ function useOptions(activeType: ElementType, afterSelect?: () => void) {
         if (metadata.kind !== FileMetadataKind.Component) {
           return false;
         }
-        if (activeType === ElementType.Components) {
-          return !metadata.acceptsChildren;
-        } else if (activeType === ElementType.Containers) {
-          return !!metadata.acceptsChildren;
-        }
-        return false;
+        return activeType === getElementType(metadata);
       })
       .map((componentMetadata) => {
         return {

packages/studio-ui/src/components/AddElementMenu/AddElementMenu.tsx

@@ -1,12 +1,7 @@
 import { useState, useCallback } from "react";
 import AddElementList from "./AddElementList";
-import renderIconForType from "../common/renderIconForType";
+import ElementIcon, { ElementType } from "../common/ElementIcon";
 
-export enum ElementType {
-  Components = "Components",
-  Containers = "Containers",
-  Layouts = "Layouts",
-}
 /**
  * A menu for adding elements to the page.
  */
@@ -61,7 +56,9 @@ function ElementTypeButton(props: {
       onClick={onClick}
       disabled={isActiveType}
     >
-      <span className="mr-2 pt-0.5">{renderIconForType(elementType)}</span>
+      <span className="mr-2 pt-0.5">
+        <ElementIcon elementType={elementType} />
+      </span>
       <span>{elementType}</span>
     </button>
   );

packages/studio-ui/src/components/AddElementMenu/AddElementOption.tsx

@@ -1,19 +1,21 @@
+import ElementIcon, { ElementType } from "../common/ElementIcon";
+
 export default function AddElementOption({
   displayName,
   handleSelect,
-  icon,
+  elementType,
 }: {
   displayName: string;
   handleSelect?: () => void;
-  icon: JSX.Element | null;
+  elementType: ElementType;
 }) {
   return (
     <button
       className="flex items-center gap-x-2 px-6 py-2 cursor-pointer hover:bg-gray-100 w-full text-left"
       onClick={handleSelect}
       aria-label={`Add ${displayName} Element`}
     >
-      {icon}
+      <ElementIcon elementType={elementType} />
       {displayName}
     </button>
   );

packages/studio-ui/src/components/ComponentNode.tsx

@@ -1,12 +1,12 @@
 import { ComponentState, ComponentStateKind } from "@yext/studio-plugin";
 import { ReactComponent as Vector } from "../icons/vector.svg";
 import classNames from "classnames";
-import ComponentKindIcon from "./ComponentKindIcon";
 import { useCallback, useMemo, KeyboardEvent } from "react";
 import useStudioStore from "../store/useStudioStore";
 import RemoveElementButton from "./RemoveElementButton";
 import { getComponentDisplayName } from "../hooks/useActiveComponentName";
 import { Tooltip } from "react-tooltip";
+import ElementIcon, { ElementType, getElementType } from "./common/ElementIcon";
 
 interface ComponentNodeProps {
   /** The ComponentState this node represents in a ComponentTree. */
@@ -26,14 +26,14 @@ interface ComponentNodeProps {
  */
 export default function ComponentNode(props: ComponentNodeProps): JSX.Element {
   const { componentState, depth, isOpen, onToggle, hasChild } = props;
-  const [activeComponentUUID, setActiveComponentUUID] = useStudioStore(
-    (store) => {
+  const [activeComponentUUID, setActiveComponentUUID, getComponentMetadata] =
+    useStudioStore((store) => {
       return [
         store.pages.activeComponentUUID,
         store.pages.setActiveComponentUUID,
+        store.actions.getComponentMetadata,
       ];
-    }
-  );
+    });
 
   const isActiveComponent = activeComponentUUID === componentState.uuid;
 
@@ -61,6 +61,10 @@ export default function ComponentNode(props: ComponentNodeProps): JSX.Element {
     }
   );
   const anchorId = `ComponentNode-${componentState.uuid}`;
+  const componentMetadata = getComponentMetadata(componentState);
+  const elementType = componentMetadata
+    ? getElementType(componentMetadata)
+    : ElementType.Components;
 
   const handleToggle = useCallback(() => {
     onToggle(componentState.uuid, !isOpen);
@@ -82,7 +86,7 @@ export default function ComponentNode(props: ComponentNodeProps): JSX.Element {
       >
         <Vector className={vectorClassName} onClick={handleToggle} />
         <div className="pl-2">
-          <ComponentKindIcon componentState={componentState} />
+          <ElementIcon elementType={elementType} />
         </div>
         <span className="pl-1.5">
           {getComponentDisplayName(componentState)}

packages/studio-ui/src/components/common/ElementIcon.tsx

@@ -0,0 +1,38 @@
+import { ReactComponent as Component } from "../../icons/square-solid.svg";
+import { ReactComponent as Container } from "../../icons/square-empty.svg";
+import { ReactComponent as Layout } from "../../icons/mosaic.svg";
+import { ComponentMetadata } from "@yext/studio-plugin";
+
+export enum ElementType {
+  Components = "Components",
+  Containers = "Containers",
+  Layouts = "Layouts",
+}
+
+interface ElementIconProps {
+  elementType: ElementType;
+}
+
+/**
+ * Returns the Icon that represents the provided Element Type.
+ */
+export default function ElementIcon(props: ElementIconProps) {
+  switch (props.elementType) {
+    case ElementType.Components:
+      return <Component />;
+    case ElementType.Containers:
+      return <Container />;
+    case ElementType.Layouts:
+      return <Layout />;
+    default:
+      console.error(`Could not find Icon for type ${props.elementType}`);
+      return null;
+  }
+}
+
+export function getElementType(metadata: ComponentMetadata): ElementType {
+  if (metadata.acceptsChildren) {
+    return ElementType.Containers;
+  }
+  return ElementType.Components;
+}