From 12ec5c2247ff528f812ab079aa717d336abc4b5d Mon Sep 17 00:00:00 2001
From: Deryk DeGuzman <deryk@vectara.com>
Date: Mon, 1 Jul 2024 16:57:10 +0000
Subject: [PATCH] chore: migrate vui-source changes to v1.2.0

---
 package.json                                  |  2 +-
 src/docs/Docs.tsx                             |  1 +
 src/docs/Page.tsx                             |  3 +-
 src/docs/pages.tsx                            |  6 +-
 src/docs/pages/button/IconButton.tsx          |  4 +-
 src/docs/pages/button/Link.tsx                |  9 +-
 src/docs/pages/button/Sizes.tsx               | 10 ++-
 src/docs/pages/infoMenu/InfoMenu.tsx          | 62 +++++++++++++
 src/docs/pages/infoMenu/index.tsx             | 13 +++
 src/docs/pages/modal/PrimaryModal.tsx         |  3 +-
 src/docs/pages/popover/Popover.tsx            | 87 ++++++++++++-------
 src/docs/pages/searchSelect/SingleSelect.tsx  | 43 +++++++++
 src/docs/pages/searchSelect/index.tsx         |  9 ++
 .../components/app/appSideNav/AppSideNav.tsx  |  2 +-
 .../app/appSideNav/AppSideNavTree.tsx         |  1 +
 src/lib/components/button/BaseButton.tsx      |  8 ++
 src/lib/components/button/IconButton.tsx      |  1 +
 src/lib/components/callout/Callout.tsx        |  1 +
 src/lib/components/chat/Chat.tsx              |  9 ++
 src/lib/components/chat/ChatPanel.tsx         |  1 +
 src/lib/components/chat/ChatTurn.tsx          |  1 +
 src/lib/components/code/Code.tsx              | 84 +++++++++++++++---
 src/lib/components/code/_index.scss           | 22 ++++-
 src/lib/components/drawer/Drawer.tsx          |  1 +
 src/lib/components/drawer/_index.scss         | 12 +--
 src/lib/components/index.ts                   |  7 +-
 src/lib/components/infoMenu/InfoMenu.tsx      | 39 +++++++++
 src/lib/components/infoMenu/_index.scss       | 20 +++++
 src/lib/components/link/types.ts              |  2 +
 src/lib/components/modal/Modal.tsx            |  1 +
 src/lib/components/modal/_index.scss          | 12 +--
 .../components/notification/Notification.tsx  |  1 +
 src/lib/components/popover/Popover.tsx        | 31 ++++---
 .../components/searchSelect/SearchSelect.tsx  | 16 ++--
 src/lib/sassUtils/_depth.scss                 |  3 +-
 src/lib/styles/styles.scss                    |  2 +-
 36 files changed, 436 insertions(+), 93 deletions(-)
 create mode 100644 src/docs/pages/infoMenu/InfoMenu.tsx
 create mode 100644 src/docs/pages/infoMenu/index.tsx
 create mode 100644 src/docs/pages/searchSelect/SingleSelect.tsx
 create mode 100644 src/lib/components/infoMenu/InfoMenu.tsx
 create mode 100644 src/lib/components/infoMenu/_index.scss

diff --git a/package.json b/package.json
index 29f860e..595d5f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "homepage": "https://vectara.github.io/vectara-ui/",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
diff --git a/src/docs/Docs.tsx b/src/docs/Docs.tsx
index cf49daa..d78f738 100644
--- a/src/docs/Docs.tsx
+++ b/src/docs/Docs.tsx
@@ -81,6 +81,7 @@ const DocsContent = () => {
             target="_blank"
             color="neutral"
             size="m"
+            aria-label="Vectara UI GitHub repository"
             icon={
               <VuiIcon>
                 <BiLogoGithub />
diff --git a/src/docs/Page.tsx b/src/docs/Page.tsx
index 7f9f57a..10ee859 100644
--- a/src/docs/Page.tsx
+++ b/src/docs/Page.tsx
@@ -31,6 +31,7 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[]
           <VuiFlexContainer alignItems="center" spacing="xxs">
             <VuiFlexItem grow={false}>
               <VuiIconButton
+                aria-label="Go to previous example"
                 icon={
                   <VuiIcon>
                     <BiLeftArrowAlt />
@@ -42,8 +43,8 @@ export const Page = ({ name, examples }: { name: string; examples: ExampleType[]
             </VuiFlexItem>
 
             <VuiFlexItem>
-              {" "}
               <VuiIconButton
+                aria-label="Go to next example"
                 icon={
                   <VuiIcon>
                     <BiRightArrowAlt />
diff --git a/src/docs/pages.tsx b/src/docs/pages.tsx
index c0a0e6a..f844fc3 100644
--- a/src/docs/pages.tsx
+++ b/src/docs/pages.tsx
@@ -1,6 +1,6 @@
 // Components
 import { accordion } from "./pages/accordion";
-import { accountMenu } from "./pages/accountMenu";
+import { infoMenu } from "./pages/infoMenu";
 import { app } from "./pages/app";
 import { badge } from "./pages/badge";
 import { button } from "./pages/button";
@@ -63,7 +63,7 @@ export const categories: Category[] = [
   },
   {
     name: "Application",
-    pages: [app, accountMenu, drawer, modal, notifications]
+    pages: [app, drawer, modal, notifications]
   },
   {
     name: "Info",
@@ -71,7 +71,7 @@ export const categories: Category[] = [
   },
   {
     name: "Layout",
-    pages: [tabs, accordion, popover, flex, grid, spacer, card, horizontalRule]
+    pages: [tabs, accordion, popover, infoMenu, flex, grid, spacer, card, horizontalRule]
   },
   {
     name: "Content",
diff --git a/src/docs/pages/button/IconButton.tsx b/src/docs/pages/button/IconButton.tsx
index b3244a1..70cf30f 100644
--- a/src/docs/pages/button/IconButton.tsx
+++ b/src/docs/pages/button/IconButton.tsx
@@ -21,7 +21,7 @@ export const IconButton = () => {
       <VuiFlexContainer>
         {BUTTON_COLOR.map((color) => (
           <VuiFlexItem grow={false} key={color}>
-            <VuiIconButton icon={icon} color={color} />
+            <VuiIconButton aria-label="Example button" icon={icon} color={color} />
           </VuiFlexItem>
         ))}
       </VuiFlexContainer>
@@ -31,7 +31,7 @@ export const IconButton = () => {
       <VuiFlexContainer>
         {BUTTON_SIZE.map((size) => (
           <VuiFlexItem grow={false} key={size}>
-            <VuiIconButton icon={icon} color="primary" size={size} />
+            <VuiIconButton aria-label="Example button" icon={icon} color="primary" size={size} />
           </VuiFlexItem>
         ))}
       </VuiFlexContainer>
diff --git a/src/docs/pages/button/Link.tsx b/src/docs/pages/button/Link.tsx
index be1a815..07f0cfa 100644
--- a/src/docs/pages/button/Link.tsx
+++ b/src/docs/pages/button/Link.tsx
@@ -2,7 +2,14 @@ import { VuiButtonPrimary } from "../../../lib";
 
 export const Link = () => {
   return (
-    <VuiButtonPrimary color="accent" href="https://vectara.com" target="_blank">
+    <VuiButtonPrimary
+      color="accent"
+      href="https://vectara.com"
+      target="_blank"
+      onClick={() => console.log("click")}
+      onMouseOver={() => console.log("mouse over")}
+      onMouseOut={() => console.log("mouse out")}
+    >
       Visit Vectara.com
     </VuiButtonPrimary>
   );
diff --git a/src/docs/pages/button/Sizes.tsx b/src/docs/pages/button/Sizes.tsx
index 2f4ad8c..d6e820f 100644
--- a/src/docs/pages/button/Sizes.tsx
+++ b/src/docs/pages/button/Sizes.tsx
@@ -32,7 +32,15 @@ export const Sizes = () => {
         <VuiFlexContainer>
           {BUTTON_SIZE.map((size) => (
             <VuiFlexItem grow={false} key={size}>
-              <VuiButtonPrimary icon={icon} color="primary" size={size} isLoading={isLoading}>
+              <VuiButtonPrimary
+                icon={icon}
+                color="primary"
+                size={size}
+                isLoading={isLoading}
+                onClick={() => console.log("click")}
+                onMouseOver={() => console.log("mouse over")}
+                onMouseOut={() => console.log("mouse out")}
+              >
                 Size {size}
               </VuiButtonPrimary>
             </VuiFlexItem>
diff --git a/src/docs/pages/infoMenu/InfoMenu.tsx b/src/docs/pages/infoMenu/InfoMenu.tsx
new file mode 100644
index 0000000..733c3be
--- /dev/null
+++ b/src/docs/pages/infoMenu/InfoMenu.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { VuiInfoMenu, VuiButtonSecondary, VuiIcon, VuiOptionsList, VuiSpacer, VuiText } from "../../../lib";
+import { BiSolidUser } from "react-icons/bi";
+
+const options = [
+  { value: "edit", label: "Update profile" },
+  { value: "signOut", label: "Sign out" }
+];
+
+export const InfoMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VuiInfoMenu
+      data-testid="infoMenu"
+      anchorSide="left"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      button={
+        <VuiButtonSecondary
+          color="accent"
+          size="m"
+          icon={
+            <VuiIcon size="m">
+              <BiSolidUser />
+            </VuiIcon>
+          }
+        >
+          email@email.com
+        </VuiButtonSecondary>
+      }
+      info={[
+        { title: "Email", value: "email@email.com" },
+        { title: "Account number", value: "1234567890" },
+        {
+          title: "Account size",
+          value: (
+            <>
+              <VuiText>
+                <p>22 MB</p>
+              </VuiText>
+
+              <VuiSpacer size="xs" />
+
+              <VuiButtonSecondary size="xs" color="neutral">
+                Refresh
+              </VuiButtonSecondary>
+            </>
+          )
+        }
+      ]}
+    >
+      <VuiOptionsList
+        onSelectOption={(value: string) => {
+          alert(`Selected ${value}`);
+        }}
+        options={options}
+        size="l"
+      />
+    </VuiInfoMenu>
+  );
+};
diff --git a/src/docs/pages/infoMenu/index.tsx b/src/docs/pages/infoMenu/index.tsx
new file mode 100644
index 0000000..287eda2
--- /dev/null
+++ b/src/docs/pages/infoMenu/index.tsx
@@ -0,0 +1,13 @@
+import { InfoMenu } from "./InfoMenu";
+const InfoMenuSource = require("!!raw-loader!./InfoMenu");
+
+export const infoMenu = {
+  name: "Info Menu",
+  path: "/InfoMenu",
+  examples: [
+    {
+      component: <InfoMenu />,
+      source: InfoMenuSource.default.toString()
+    }
+  ]
+};
diff --git a/src/docs/pages/modal/PrimaryModal.tsx b/src/docs/pages/modal/PrimaryModal.tsx
index 5a8eb38..1e1a145 100644
--- a/src/docs/pages/modal/PrimaryModal.tsx
+++ b/src/docs/pages/modal/PrimaryModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { VuiButtonPrimary, VuiButtonSecondary, VuiModal, VuiSearchSelect, VuiSpacer, VuiText } from "../../../lib";
+import { BiInfoCircle } from "react-icons/bi";
 
 const options = [
   { value: "a", label: "Caffeine-free" },
@@ -27,7 +28,7 @@ export const PrimaryModal = () => {
         Open primary modal
       </VuiButtonPrimary>
 
-      <VuiModal color="primary" isOpen={isOpen} onClose={() => setIsOpen(false)} title="FYI">
+      <VuiModal color="primary" isOpen={isOpen} onClose={() => setIsOpen(false)} icon={<BiInfoCircle />} title="FYI">
         <VuiText>
           <p>I just thought you should know that your modal is showing.</p>
         </VuiText>
diff --git a/src/docs/pages/popover/Popover.tsx b/src/docs/pages/popover/Popover.tsx
index 12f161b..54fc603 100644
--- a/src/docs/pages/popover/Popover.tsx
+++ b/src/docs/pages/popover/Popover.tsx
@@ -1,5 +1,14 @@
 import { useState } from "react";
-import { VuiButtonSecondary, VuiIcon, VuiOptionsList, VuiPopover } from "../../../lib";
+import {
+  AnchorSide,
+  VuiButtonSecondary,
+  VuiFormGroup,
+  VuiIcon,
+  VuiOptionsList,
+  VuiPopover,
+  VuiSelect,
+  VuiSpacer
+} from "../../../lib";
 import { BiCaretDown } from "react-icons/bi";
 
 const options = [
@@ -11,36 +20,54 @@ const options = [
 export const Popover = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState("apples");
+  const [anchorSide, setAnchorSide] = useState<AnchorSide>("right");
 
   return (
-    <VuiPopover
-      isOpen={isOpen}
-      setIsOpen={() => setIsOpen(!isOpen)}
-      header="Tribes"
-      button={
-        <VuiButtonSecondary
-          color="neutral"
-          size="s"
-          icon={
-            <VuiIcon size="m">
-              <BiCaretDown />
-            </VuiIcon>
-          }
-        >
-          Tribe: {selectedOption}
-        </VuiButtonSecondary>
-      }
-    >
-      <VuiOptionsList
-        isSelectable
-        isScrollable
-        onSelectOption={(value: string) => {
-          setIsOpen(false);
-          setSelectedOption(value);
-        }}
-        selected={selectedOption}
-        options={options}
-      />
-    </VuiPopover>
+    <>
+      <VuiFormGroup labelFor="anchorSideSelect" label="Anchor side">
+        <VuiSelect
+          id="anchorSideSelect"
+          options={[
+            { text: "Left", value: "left" },
+            { text: "Right", value: "right" }
+          ]}
+          value={anchorSide}
+          onChange={(event) => setAnchorSide(event.target.value as AnchorSide)}
+        />
+      </VuiFormGroup>
+
+      <VuiSpacer size="m" />
+
+      <VuiPopover
+        anchorSide={anchorSide}
+        isOpen={isOpen}
+        setIsOpen={() => setIsOpen(!isOpen)}
+        header="Tribes"
+        button={
+          <VuiButtonSecondary
+            color="neutral"
+            size="s"
+            icon={
+              <VuiIcon size="m">
+                <BiCaretDown />
+              </VuiIcon>
+            }
+          >
+            Tribe: {selectedOption}
+          </VuiButtonSecondary>
+        }
+      >
+        <VuiOptionsList
+          isSelectable
+          isScrollable
+          onSelectOption={(value: string) => {
+            setIsOpen(false);
+            setSelectedOption(value);
+          }}
+          selected={selectedOption}
+          options={options}
+        />
+      </VuiPopover>
+    </>
   );
 };
diff --git a/src/docs/pages/searchSelect/SingleSelect.tsx b/src/docs/pages/searchSelect/SingleSelect.tsx
new file mode 100644
index 0000000..5032eac
--- /dev/null
+++ b/src/docs/pages/searchSelect/SingleSelect.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { VuiButtonSecondary, VuiSearchSelect } from "../../../lib";
+
+const options = [
+  { value: "a", label: "Caffeine-free" },
+  { value: "b", label: "Freeze dried" },
+  { value: "c", label: "Gluten-free" },
+  { value: "d", label: "Halal" },
+  { value: "e", label: "High fiber" },
+  { value: "f", label: "Kosher" },
+  { value: "g", label: "Lactose-free" },
+  { value: "h", label: "Low-carb" },
+  { value: "i", label: "No nuts" },
+  { value: "j", label: "Non-GMO" },
+  { value: "k", label: "Sugar-free" },
+  { value: "l", label: "Vegan" }
+];
+
+export const SingleSelect = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedOptions, setSelectedOptions] = useState(["a"]);
+
+  return (
+    <VuiSearchSelect
+      title="Choose one or none"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      searchValue={searchValue}
+      setSearchValue={setSearchValue}
+      onSelect={(value: string[]) => {
+        setSelectedOptions(value);
+      }}
+      selectedOptions={selectedOptions}
+      options={options}
+      isMultiSelect={false}
+    >
+      <VuiButtonSecondary color="neutral" size="s">
+        Meal preference
+      </VuiButtonSecondary>
+    </VuiSearchSelect>
+  );
+};
diff --git a/src/docs/pages/searchSelect/index.tsx b/src/docs/pages/searchSelect/index.tsx
index 3c2fab1..1e8f8af 100644
--- a/src/docs/pages/searchSelect/index.tsx
+++ b/src/docs/pages/searchSelect/index.tsx
@@ -1,20 +1,29 @@
 import { SearchSelect } from "./SearchSelect";
 import { Async } from "./Async";
+import { SingleSelect } from "./SingleSelect";
 
 const SearchSelectSource = require("!!raw-loader!./SearchSelect");
 const AsyncSource = require("!!raw-loader!./Async");
+const SingleSelectSource = require("!!raw-loader!./SingleSelect");
 
 export const searchSelect = {
   name: "Search Select",
   path: "/searchSelect",
   examples: [
     {
+      name: "Synchronous search",
       component: <SearchSelect />,
       source: SearchSelectSource.default.toString()
     },
     {
+      name: "Asynchronous search",
       component: <Async />,
       source: AsyncSource.default.toString()
+    },
+    {
+      name: "Single selection",
+      component: <SingleSelect />,
+      source: SingleSelectSource.default.toString()
     }
   ]
 };
diff --git a/src/lib/components/app/appSideNav/AppSideNav.tsx b/src/lib/components/app/appSideNav/AppSideNav.tsx
index 022a78a..19f5989 100644
--- a/src/lib/components/app/appSideNav/AppSideNav.tsx
+++ b/src/lib/components/app/appSideNav/AppSideNav.tsx
@@ -56,7 +56,7 @@ export const VuiAppSideNav = ({ items = [], content }: Props) => {
         {isCollapsed ? (
           <VuiIconButton
             ref={expandButtonRef}
-            aria-label="Expand nav"
+            aria-label="Show nav"
             onClick={() => setIsCollapsed(false)}
             className="vuiAppSideNavExpandButton"
             color="neutral"
diff --git a/src/lib/components/app/appSideNav/AppSideNavTree.tsx b/src/lib/components/app/appSideNav/AppSideNavTree.tsx
index 18c7643..e4d87df 100644
--- a/src/lib/components/app/appSideNav/AppSideNavTree.tsx
+++ b/src/lib/components/app/appSideNav/AppSideNavTree.tsx
@@ -70,6 +70,7 @@ const AppSideNavTreeSection = ({ name, path, children, iconBefore, iconAfter, is
       />
 
       <VuiIconButton
+        aria-label={isOpen ? "Hide section" : "Show section"}
         size="s"
         className="vuiAppSideNavTreeToggleButton"
         onClick={() => setIsOpen(!isOpen)}
diff --git a/src/lib/components/button/BaseButton.tsx b/src/lib/components/button/BaseButton.tsx
index 8d5b0d4..3d500cb 100644
--- a/src/lib/components/button/BaseButton.tsx
+++ b/src/lib/components/button/BaseButton.tsx
@@ -32,6 +32,8 @@ export type BaseButtonProps = {
   isInert?: boolean;
   isDisabled?: boolean;
   onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLAnchorElement, MouseEvent>) => void;
+  onMouseOver?: (e: React.MouseEvent<HTMLAnchorElement | HTMLAnchorElement, MouseEvent>) => void;
+  onMouseOut?: (e: React.MouseEvent<HTMLAnchorElement | HTMLAnchorElement, MouseEvent>) => void;
   href?: LinkProps["href"];
   target?: LinkProps["target"];
   track?: LinkProps["track"];
@@ -57,6 +59,8 @@ export const BaseButton = forwardRef<HTMLButtonElement | null, Props>(
       size = "m",
       fullWidth,
       onClick,
+      onMouseOver,
+      onMouseOut,
       tabIndex,
       isInert,
       isDisabled,
@@ -112,6 +116,8 @@ export const BaseButton = forwardRef<HTMLButtonElement | null, Props>(
         className: wrapperClasses,
         href,
         onClick,
+        onMouseOver,
+        onMouseOut,
         children: (
           //* Wrap a button otherwise the flex layout breaks */}
           <button className={classes} tabIndex={-1} ref={ref}>
@@ -128,6 +134,8 @@ export const BaseButton = forwardRef<HTMLButtonElement | null, Props>(
 
     const props = {
       onClick,
+      onMouseOver,
+      onMouseOut,
       tabIndex,
       ["type"]: isSubmit ? "submit" : "button",
       disabled: isDisabled,
diff --git a/src/lib/components/button/IconButton.tsx b/src/lib/components/button/IconButton.tsx
index 3b44d95..98d4a9c 100644
--- a/src/lib/components/button/IconButton.tsx
+++ b/src/lib/components/button/IconButton.tsx
@@ -9,6 +9,7 @@ import { useVuiContext } from "../context/Context";
 type Props = {
   className?: string;
   icon: ReactElement;
+  "aria-label": string;
   color?: ButtonColor;
   size?: (typeof BUTTON_SIZE)[number];
   onClick?: () => void;
diff --git a/src/lib/components/callout/Callout.tsx b/src/lib/components/callout/Callout.tsx
index 23d7cc8..123fdf3 100644
--- a/src/lib/components/callout/Callout.tsx
+++ b/src/lib/components/callout/Callout.tsx
@@ -54,6 +54,7 @@ export const VuiCallout = ({ children, title, headingElement, color, size = "m",
         {onDismiss && (
           <VuiFlexItem shrink={false} grow={false}>
             <VuiIconButton
+              aria-label="Hide information"
               className="vuiCallout__closeButton"
               data-testid="calloutCloseButton"
               color={color}
diff --git a/src/lib/components/chat/Chat.tsx b/src/lib/components/chat/Chat.tsx
index 0260b1e..b9b88da 100644
--- a/src/lib/components/chat/Chat.tsx
+++ b/src/lib/components/chat/Chat.tsx
@@ -35,6 +35,13 @@ const chatStyleToIconMap = {
   fullScreen: <BiX />
 } as const;
 
+const chatStyleToAriaLabelMap = {
+  closed: "Show chat",
+  condensed: "Expand height of chat",
+  tall: "Full-screen chat",
+  fullScreen: "Hide chat"
+} as const;
+
 export const VuiChat = ({
   openPrompt,
   chatStyle,
@@ -285,6 +292,7 @@ export const VuiChat = ({
 
             <VuiFlexItem shrink={false} grow={false}>
               <VuiIconButton
+                aria-label="Send message"
                 icon={
                   <VuiIcon>
                     <BiPaperPlane />
@@ -297,6 +305,7 @@ export const VuiChat = ({
 
             <VuiFlexItem shrink={false} grow={false}>
               <VuiIconButton
+                aria-label={chatStyleToAriaLabelMap[chatStyle]}
                 icon={<VuiIcon>{chatStyleToIconMap[chatStyle]}</VuiIcon>}
                 color="neutral"
                 onClick={cycleChatStyle}
diff --git a/src/lib/components/chat/ChatPanel.tsx b/src/lib/components/chat/ChatPanel.tsx
index 6dd3f3a..3743432 100644
--- a/src/lib/components/chat/ChatPanel.tsx
+++ b/src/lib/components/chat/ChatPanel.tsx
@@ -24,6 +24,7 @@ export const VuiChatPanel = ({ title, onClose, children }: Props) => {
 
         <VuiFlexItem shrink={false} grow={false}>
           <VuiIconButton
+            aria-label="Hide chat"
             icon={
               <VuiIcon>
                 <BiX />
diff --git a/src/lib/components/chat/ChatTurn.tsx b/src/lib/components/chat/ChatTurn.tsx
index ac355b3..9939687 100644
--- a/src/lib/components/chat/ChatTurn.tsx
+++ b/src/lib/components/chat/ChatTurn.tsx
@@ -35,6 +35,7 @@ export const VuiChatTurn = ({ turn, isInspectionEnabled, setInspectedTurn, onRet
         {isInspectionEnabled && (
           <VuiFlexItem grow={false} shrink={false}>
             <VuiIconButton
+              aria-label="Inspect turn"
               size="xs"
               className="vuiChat__inspectButton"
               color="neutral"
diff --git a/src/lib/components/code/Code.tsx b/src/lib/components/code/Code.tsx
index ffdf310..60e6d27 100644
--- a/src/lib/components/code/Code.tsx
+++ b/src/lib/components/code/Code.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
 import "prismjs/components/prism-json";
@@ -8,24 +8,36 @@ import "prismjs/components/prism-bash";
 import "prismjs/components/prism-jsx";
 import "prismjs/components/prism-tsx";
 import classNames from "classnames";
-import { BiClipboard } from "react-icons/bi";
+import { BiClipboard, BiFullscreen, BiX } from "react-icons/bi";
 import { VuiIconButton } from "../button/IconButton";
 import { VuiIcon } from "../icon/Icon";
 import { CodeLanguage } from "./types";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { FocusOn } from "react-focus-on";
 
 type Props = {
   language?: CodeLanguage;
   onCopy?: () => void;
+  isFullscreenEnabled?: boolean;
   children?: string;
   fullHeight?: boolean;
   "data-testid"?: string;
 };
 
 // PrismJS clears highlighting when language-none is set.
-export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "", ...rest }: Props) => {
+export const VuiCode = ({
+  onCopy,
+  isFullscreenEnabled = true,
+  language = "none",
+  fullHeight,
+  children = "",
+  ...rest
+}: Props) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
   useEffect(() => {
     Prism.highlightAll();
-  }, [children, language]);
+  }, [children, language, isFullscreen]);
 
   const containerClasses = classNames("vuiCodeContainer", {
     "vuiCodeContainer--fullHeight": fullHeight
@@ -37,26 +49,52 @@ export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "",
 
   const testId = rest["data-testid"];
 
-  return (
-    <div className={containerClasses} {...rest}>
-      <pre className="vuiCodePre">
-        <code className={classes}>{children}</code>
-      </pre>
+  const actions = (
+    <VuiFlexContainer className="vuiCodeActions" spacing="xxs">
+      {isFullscreenEnabled && (
+        <VuiIconButton
+          color="neutral"
+          size="xs"
+          icon={
+            <VuiIcon>
+              <BiFullscreen />
+            </VuiIcon>
+          }
+          aria-label="Full screen"
+          onClick={() => {
+            setIsFullscreen(!isFullscreen);
+          }}
+        />
+      )}
 
       <VuiIconButton
         color="neutral"
+        size="xs"
         icon={
           <VuiIcon>
-            <BiClipboard size={20} />
+            <BiClipboard />
           </VuiIcon>
         }
         aria-label="Copy to clipboard"
-        className="vuiCodeCopyButton"
         onClick={() => {
           navigator.clipboard.writeText(children);
           if (onCopy) onCopy();
         }}
       />
+    </VuiFlexContainer>
+  );
+
+  const code = (
+    <pre className="vuiCodePre">
+      <code className={classes}>{children}</code>
+    </pre>
+  );
+
+  return (
+    <div className={containerClasses} {...rest}>
+      {code}
+
+      {actions}
 
       {/* Expose this for tests to assert against. */}
       {testId && (
@@ -64,6 +102,30 @@ export const VuiCode = ({ onCopy, language = "none", fullHeight, children = "",
           {children}
         </div>
       )}
+
+      {isFullscreen && (
+        <FocusOn
+          onEscapeKey={() => {
+            setIsFullscreen(false);
+          }}
+        >
+          <div className="vuiCodeFullscreen">
+            <VuiIconButton
+              className="vuiCodeFullscreen__closeButton"
+              color="neutral"
+              size="m"
+              icon={
+                <VuiIcon>
+                  <BiX />
+                </VuiIcon>
+              }
+              aria-label="Exit fullscreen code"
+              onClick={() => setIsFullscreen(false)}
+            />
+            {code}
+          </div>
+        </FocusOn>
+      )}
     </div>
   );
 };
diff --git a/src/lib/components/code/_index.scss b/src/lib/components/code/_index.scss
index 5e96028..1d9fdc9 100644
--- a/src/lib/components/code/_index.scss
+++ b/src/lib/components/code/_index.scss
@@ -8,9 +8,9 @@
   max-height: 100%;
 }
 
-.vuiCodeCopyButton {
+.vuiCodeActions {
   position: absolute;
-  right: $sizeXxs;
+  right: $sizeS;
   top: $sizeXxs;
 }
 
@@ -31,3 +31,21 @@
   white-space: pre-wrap;
   font-size: $fontSizeSmall !important;
 }
+
+.vuiCodeFullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $fullscreenZIndex;
+  // PrismJS theme color.
+  background-color: #f5f2f0;
+  overflow: auto;
+}
+
+.vuiCodeFullscreen__closeButton {
+  position: absolute;
+  right: $sizeS;
+  top: $sizeXxs;
+}
diff --git a/src/lib/components/drawer/Drawer.tsx b/src/lib/components/drawer/Drawer.tsx
index c5a0ae3..17678ed 100644
--- a/src/lib/components/drawer/Drawer.tsx
+++ b/src/lib/components/drawer/Drawer.tsx
@@ -80,6 +80,7 @@ export const VuiDrawer = ({ className, color = "primary", title, icon, children,
                   {onClose && (
                     <VuiFlexItem>
                       <VuiIconButton
+                        aria-label="Close drawer"
                         data-testid="drawerCloseButton"
                         onClick={onCloseDelayed}
                         color="neutral"
diff --git a/src/lib/components/drawer/_index.scss b/src/lib/components/drawer/_index.scss
index b772227..c6eea9e 100644
--- a/src/lib/components/drawer/_index.scss
+++ b/src/lib/components/drawer/_index.scss
@@ -28,11 +28,12 @@ $drawerWidth: 680px;
 }
 
 .vuiDrawerHeader {
-  padding: $sizeL $sizeL;
+  padding: $sizeS $sizeL;
+  background-color: $colorLightShade;
 }
 
 .vuiDrawerHeader__title {
-  font-size: $fontSizeXLarge;
+  font-size: $fontSizeMedium;
   font-weight: $fontWeightBold;
   line-height: 1.2;
   color: $colorText;
@@ -50,11 +51,9 @@ $drawerWidth: 680px;
 // Color
 $color: (
   primary: (
-    "background-color": $colorPrimaryLightShade,
-    "color": $colorText
+    "color": $colorPrimary
   ),
   danger: (
-    "background-color": $colorDangerLightShade,
     "color": $colorDanger
   )
 );
@@ -62,9 +61,6 @@ $color: (
 @each $colorName, $colorValue in $color {
   .vuiDrawer--#{$colorName} {
     .vuiDrawerHeader {
-      background-color: #{map.get($colorValue, "background-color")};
-
-      .vuiDrawerHeader__title,
       .vuiIcon {
         color: #{map.get($colorValue, "color")};
       }
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 2239d84..a59bade 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,5 +1,5 @@
 import { VuiAccordion } from "./accordion/Accordion";
-import { VuiAccountMenu } from "./accountMenu/AccountMenu";
+import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiAppContent } from "./app/AppContent";
 import { VuiAppHeader } from "./app/AppHeader";
 import { VuiAppLayout } from "./app/AppLayout";
@@ -54,7 +54,7 @@ import { VuiOptionsButton } from "./optionsButton/OptionsButton";
 import { VuiOptionsList } from "./optionsList/OptionsList";
 import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
 import { OptionListItem } from "./optionsList/types";
-import { VuiPopover } from "./popover/Popover";
+import { VuiPopover, AnchorSide } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
 import { VuiPrompt } from "./prompt/Prompt";
@@ -84,6 +84,7 @@ import { VuiToggle } from "./toggle/Toggle";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 
 export type {
+  AnchorSide,
   AppContentPadding,
   ButtonColor,
   CalloutColor,
@@ -124,7 +125,7 @@ export {
   TEXT_SIZE,
   TITLE_SIZE,
   VuiAccordion,
-  VuiAccountMenu,
+  VuiInfoMenu,
   VuiAppContent,
   VuiAppHeader,
   VuiAppLayout,
diff --git a/src/lib/components/infoMenu/InfoMenu.tsx b/src/lib/components/infoMenu/InfoMenu.tsx
new file mode 100644
index 0000000..09f3477
--- /dev/null
+++ b/src/lib/components/infoMenu/InfoMenu.tsx
@@ -0,0 +1,39 @@
+import { Props as PopoverProps, VuiPopover } from "../popover/Popover";
+import { VuiSpacer } from "../spacer/Spacer";
+
+type InfoMenuInfo = Array<{
+  title: string;
+  value: React.ReactNode;
+}>;
+
+type Props = PopoverProps & {
+  info?: InfoMenuInfo;
+};
+
+export const VuiInfoMenu = ({ isOpen, setIsOpen, button, info, children, ...rest }: Props) => {
+  return (
+    <VuiPopover
+      className="vuiInfoMenu"
+      isOpen={isOpen}
+      setIsOpen={() => setIsOpen(!isOpen)}
+      button={button}
+      header={
+        info &&
+        info.length > 0 && (
+          <div className="vuiInfoMenuHeader">
+            {info.map((item, index) => (
+              <div key={index} className="vuiInfoMenuHeaderItem">
+                <div className="vuiInfoMenuHeaderItem__title">{item.title}</div>
+                <div className="vuiInfoMenuHeaderItem__value">{item.value}</div>
+                {index < info.length - 1 && <VuiSpacer size="m" />}
+              </div>
+            ))}
+          </div>
+        )
+      }
+      {...rest}
+    >
+      {children}
+    </VuiPopover>
+  );
+};
diff --git a/src/lib/components/infoMenu/_index.scss b/src/lib/components/infoMenu/_index.scss
new file mode 100644
index 0000000..854023e
--- /dev/null
+++ b/src/lib/components/infoMenu/_index.scss
@@ -0,0 +1,20 @@
+.vuiInfoMenu {
+  min-width: 260px;
+}
+
+.vuiInfoMenuHeader {
+  padding: $sizeM;
+  border-bottom: 1px solid $borderColor;
+}
+
+.vuiInfoMenuHeaderItem__title {
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  color: $colorDarkerShade;
+}
+
+.vuiInfoMenuHeaderItem__value {
+  font-size: $fontSizeStandard;
+  color: $colorDarkerShade;
+  margin-top: $sizeXxs;
+}
diff --git a/src/lib/components/link/types.ts b/src/lib/components/link/types.ts
index e7311b9..7dabece 100644
--- a/src/lib/components/link/types.ts
+++ b/src/lib/components/link/types.ts
@@ -6,6 +6,8 @@ export type LinkProps = {
   className?: string;
   target?: "_blank";
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  onMouseOut?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
   track?: boolean;
   // ...rest
   title?: string;
diff --git a/src/lib/components/modal/Modal.tsx b/src/lib/components/modal/Modal.tsx
index 79175ef..8e8cf1c 100644
--- a/src/lib/components/modal/Modal.tsx
+++ b/src/lib/components/modal/Modal.tsx
@@ -81,6 +81,7 @@ export const VuiModal = ({ className, color = "primary", title, icon, children,
                     {onClose && (
                       <VuiFlexItem>
                         <VuiIconButton
+                          aria-label="Close modal"
                           onClick={onCloseDelayed}
                           color="neutral"
                           icon={
diff --git a/src/lib/components/modal/_index.scss b/src/lib/components/modal/_index.scss
index ccea000..573caa1 100644
--- a/src/lib/components/modal/_index.scss
+++ b/src/lib/components/modal/_index.scss
@@ -40,11 +40,12 @@ $modalWidth: 500px;
 }
 
 .vuiModalHeader {
-  padding: $sizeM;
+  padding: $sizeS $sizeM;
+  background-color: $colorLightShade;
 }
 
 .vuiModalHeader__title {
-  font-size: $fontSizeXLarge;
+  font-size: $fontSizeMedium;
   font-weight: $fontWeightBold;
   line-height: 1.2;
   color: $colorText;
@@ -62,11 +63,9 @@ $modalWidth: 500px;
 // Color
 $color: (
   primary: (
-    "background-color": $colorPrimaryLightShade,
-    "color": $colorText
+    "color": $colorPrimary
   ),
   danger: (
-    "background-color": $colorDangerLightShade,
     "color": $colorDanger
   )
 );
@@ -74,9 +73,6 @@ $color: (
 @each $colorName, $colorValue in $color {
   .vuiModal--#{$colorName} {
     .vuiModalHeader {
-      background-color: #{map.get($colorValue, "background-color")};
-
-      .vuiModalHeader__title,
       .vuiIcon {
         color: #{map.get($colorValue, "color")};
       }
diff --git a/src/lib/components/notification/Notification.tsx b/src/lib/components/notification/Notification.tsx
index e8b3104..e965fb3 100644
--- a/src/lib/components/notification/Notification.tsx
+++ b/src/lib/components/notification/Notification.tsx
@@ -40,6 +40,7 @@ export const VuiNotification = ({ notification, onDismiss, notificationsCount, c
         <VuiFlexContainer alignItems="start" spacing="s">
           <VuiFlexItem grow={false}>
             <VuiIconButton
+              aria-label="Hide notification"
               size="xs"
               color="neutral"
               icon={
diff --git a/src/lib/components/popover/Popover.tsx b/src/lib/components/popover/Popover.tsx
index 75c4c16..b4bf0a3 100644
--- a/src/lib/components/popover/Popover.tsx
+++ b/src/lib/components/popover/Popover.tsx
@@ -3,6 +3,8 @@ import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
 
+export type AnchorSide = "left" | "right";
+
 export type Props = {
   button: React.ReactElement;
   children?: React.ReactNode;
@@ -11,20 +13,28 @@ export type Props = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   padding?: boolean;
+  anchorSide?: AnchorSide;
 };
 
 type Position = {
-  top: number;
-  right: number;
+  top: string;
+  left?: string;
+  right?: string;
 };
 
-const getPosition = (button: HTMLElement | null): Position | undefined => {
+const calculatePopoverPosition = (button: HTMLElement | null, anchorSide: AnchorSide): Position | undefined => {
   if (!button) return undefined;
-  const { bottom, right } = button.getBoundingClientRect();
-  return {
-    top: bottom + 2 + document.documentElement.scrollTop,
-    right: window.innerWidth - right
-  };
+
+  const buttonRect = button.getBoundingClientRect();
+  const top = buttonRect.bottom + 2 + document.documentElement.scrollTop;
+  const left = buttonRect.left;
+
+  if (anchorSide === "left") {
+    return { top: `${top}px`, left: `${left}px` };
+  }
+
+  const right = window.innerWidth - buttonRect.right;
+  return { top: `${top}px`, right: `${right}px` };
 };
 
 export const VuiPopover = ({
@@ -35,6 +45,7 @@ export const VuiPopover = ({
   isOpen,
   setIsOpen,
   padding,
+  anchorSide = "right",
   ...rest
 }: Props) => {
   const returnFocusElRef = useRef<HTMLElement | null>(null);
@@ -90,7 +101,7 @@ export const VuiPopover = ({
   // Always keep menu position up to date. If we tried to cache this inside
   // a useEffect based on isOpen then there'd be a flicker if the width
   // of the button changes.
-  const position = getPosition(buttonRef.current);
+  const position = calculatePopoverPosition(buttonRef.current, anchorSide);
 
   const classes = classNames("vuiPopover", className);
 
@@ -117,7 +128,7 @@ export const VuiPopover = ({
             // Enable scrolling of the page.
             preventScrollOnFocus={false}
           >
-            <div className={classes} style={{ top: `${position.top}px`, right: `${position.right}px` }} {...rest}>
+            <div className={classes} style={position} {...rest}>
               {header && typeof header === "string" ? <div className="vuiPopoverTitle">{header}</div> : header}
               {children && <div className={contentClasses}>{children}</div>}
             </div>
diff --git a/src/lib/components/searchSelect/SearchSelect.tsx b/src/lib/components/searchSelect/SearchSelect.tsx
index 0ba6f3c..321ed76 100644
--- a/src/lib/components/searchSelect/SearchSelect.tsx
+++ b/src/lib/components/searchSelect/SearchSelect.tsx
@@ -84,15 +84,15 @@ export const VuiSearchSelect = <T extends unknown = unknown>({
       }
 
       onSelect(updatedSelectedOptions);
-      return;
-    }
-
-    // If the user can only select one option at a time,
-    // close the search select as soon as they make a choice.
-    onSelect([value]);
+    } else {
+      if (selectedOptions[0] === value) {
+        // If the user clicks on the selected option, deselect it.
+        onSelect([]);
+        return;
+      }
 
-    // Signal the popover to be closed.
-    setIsOpen(false);
+      onSelect([value]);
+    }
   };
 
   // If onSearchChange is provided, we don't filter the options here because
diff --git a/src/lib/sassUtils/_depth.scss b/src/lib/sassUtils/_depth.scss
index c8c4cd6..642d7a8 100644
--- a/src/lib/sassUtils/_depth.scss
+++ b/src/lib/sassUtils/_depth.scss
@@ -3,6 +3,7 @@ $chatZIndex: 9;
 $screenBlockZIndex: 10;
 $drawerZIndex: 11;
 $modalZIndex: 12;
+$fullscreenZIndex: 13;
 // Enable popovers to be placed inside of modals and drawers.
-$popoverZIndex: 13;
+$popoverZIndex: 14;
 $notificationsZIndex: 1000;
diff --git a/src/lib/styles/styles.scss b/src/lib/styles/styles.scss
index e66b764..1830094 100644
--- a/src/lib/styles/styles.scss
+++ b/src/lib/styles/styles.scss
@@ -3,7 +3,6 @@
 @import "../sassUtils/";
 @import "../components/accordion/index";
 @import "../components/app/index";
-@import "../components/accountMenu/index";
 @import "../components/badge/index";
 @import "../components/button/index";
 @import "../components/callout/index";
@@ -16,6 +15,7 @@
 @import "../components/grid/index";
 @import "../components/horizontalRule/index";
 @import "../components/icon/index";
+@import "../components/infoMenu/index";
 @import "../components/infoTable/index";
 @import "../components/link/index";
 @import "../components/list/index";