chore: migrate vui-source changes to v2.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "homepage": "https://vectara.github.io/vectara-ui/",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

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 />

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 />

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,15 +63,15 @@ export const categories: Category[] = [
   },
   {
     name: "Application",
-    pages: [app, accountMenu, drawer, modal, notifications]
+    pages: [app, drawer, modal, notifications]
   },
   {
     name: "Info",
     pages: [table, infoTable, statList, list]
   },
   {
     name: "Layout",
-    pages: [tabs, accordion, popover, flex, grid, spacer, card, horizontalRule]
+    pages: [tabs, accordion, popover, infoMenu, flex, grid, spacer, card, horizontalRule]
   },
   {
     name: "Content",

src/docs/pages/button/IconButton.tsx

@@ -21,7 +21,14 @@ 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}
+              onClick={() => console.log("click")}
+              onMouseOver={() => console.log("mouse over")}
+              onMouseOut={() => console.log("mouse out")}
+            />
           </VuiFlexItem>
         ))}
       </VuiFlexContainer>
@@ -31,7 +38,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>

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>
   );

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>

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 protected]
+        </VuiButtonSecondary>
+      }
+      info={[
+        { title: "Email", value: "[email protected]" },
+        { 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>
+  );
+};

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()
+    }
+  ]
+};

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>

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>
+    </>
   );
 };

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>
+  );
+};

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()
     }
   ]
 };

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"