SearchGuide: New Component + VR Implementation (#3772)

docs/docs-components/data/components.tsx

@@ -58,6 +58,7 @@ import Pulsar from '../../graphics/general/Pulsar.svg';
 import RadioGroup from '../../graphics/general/RadioGroup.svg';
 import SearchField from '../../graphics/general/SearchField.svg';
 import SearchGuide from '../../graphics/general/SearchGuide.svg';
+import SearchGuideLink from '../../graphics/general/SearchGuideLink.svg';
 import SegmentedControl from '../../graphics/general/SegmentedControl.svg';
 import SelectList from '../../graphics/general/SelectList.svg';
 import SheetMobile from '../../graphics/general/SheetMobile.svg';
@@ -2020,6 +2021,28 @@ const componentData: ReadonlyArray<ComponentData> = [
   {
     id: 'SearchGuide',
     platform: {
+      web: {
+        name: 'SearchGuide',
+        visual: {
+          svg: <SearchGuide />,
+        },
+        alias: ['Search filters', 'Pivots', 'Vanilla guides'],
+        description: 'SearchGuide appends and refines a search query.',
+        category: ['Actions'],
+        status: {
+          accessible: {
+            summary: 'ready',
+            a11yVisual: 'ready',
+            a11yScreenreader: 'ready',
+            a11yNavigation: 'ready',
+            a11yComprehension: 'ready',
+          },
+          documentation: 'ready',
+          figmaStatus: 'partial',
+          responsive: 'ready',
+          status: 'ready',
+        },
+      },
       android: {
         name: 'SearchGuide',
         visual: {
@@ -2050,6 +2073,33 @@ const componentData: ReadonlyArray<ComponentData> = [
       },
     },
   },
+  {
+    id: 'SearchGuideLink',
+    platform: {
+      web: {
+        name: 'SearchGuideLink',
+        visual: {
+          svg: <SearchGuideLink />,
+        },
+        description:
+          'SearchGuideLink is mainly used as a navigational element to direct users to a new page or location, in the context of a search query.',
+        category: ['Actions'],
+        status: {
+          accessible: {
+            summary: 'ready',
+            a11yVisual: 'ready',
+            a11yScreenreader: 'ready',
+            a11yNavigation: 'ready',
+            a11yComprehension: 'ready',
+          },
+          documentation: 'ready',
+          figmaStatus: 'partial',
+          responsive: 'ready',
+          status: 'ready',
+        },
+      },
+    },
+  },
   {
     id: 'SegmentedControl',
     platform: {

docs/docs-components/siteIndex.ts

@@ -169,6 +169,8 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
       'RadioButton',
       'RadioGroup',
       'SearchField',
+      'SearchGuide',
+      'SearchGuideLink',
       'SegmentedControl',
       'SelectList',
       'SheetMobile',

docs/examples/searchguide/avatarExample.tsx

@@ -0,0 +1,72 @@
+import { Avatar, AvatarGroup, Flex, Icon, Image, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignItems="center"
+      direction="column"
+      gap={4}
+      height="100%"
+      justifyContent="center"
+      width="100%"
+    >
+      <SearchGuide
+        accessibilityLabel="Image"
+        color="01"
+        text="Image"
+        thumbnail={{
+          image: (
+            <Image
+              alt="Image"
+              naturalHeight={1}
+              naturalWidth={1}
+              src="https://i.ibb.co/bBXC23j/fashion.jpg"
+            />
+          ),
+        }}
+      />
+      <SearchGuide
+        accessibilityLabel="Icon"
+        color="02"
+        text="Icon"
+        thumbnail={{
+          icon: <Icon accessibilityLabel="" icon="sparkle" />,
+        }}
+      />
+      <SearchGuide
+        accessibilityLabel="Avatar"
+        color="03"
+        text="Avatar"
+        thumbnail={{
+          avatar: <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />,
+        }}
+      />
+      <SearchGuide
+        accessibilityLabel="AvatarGroup"
+        color="04"
+        text="AvatarGroup"
+        thumbnail={{
+          avatarGroup: (
+            <AvatarGroup
+              accessibilityLabel="Collaborators: Keerthi, Alberto, Enio."
+              collaborators={[
+                {
+                  name: 'Keerthi',
+                  src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
+                },
+                {
+                  name: 'Alberto',
+                  src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
+                },
+                {
+                  name: 'Enio',
+                },
+              ]}
+              size="md"
+            />
+          ),
+        }}
+      />
+    </Flex>
+  );
+}

docs/examples/searchguide/colors.tsx

@@ -0,0 +1,43 @@
+import { Box, Flex, SearchGuide, Text } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Box padding={4}>
+      <Flex gap={6} height="100%" width="100%" wrap>
+        {['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'].map((color) => {
+          const colorCopy = color as
+            | '01'
+            | '02'
+            | '03'
+            | '04'
+            | '05'
+            | '06'
+            | '07'
+            | '08'
+            | '09'
+            | '10'
+            | '11';
+          return (
+            <Flex key={colorCopy} direction="column" gap={2}>
+              <Box
+                alignItems="center"
+                borderStyle="sm"
+                color="default"
+                display="flex"
+                height={200}
+                justifyContent="center"
+                rounding={4}
+                width={200}
+              >
+                <SearchGuide color={colorCopy} text={`Color ${color}`} />
+              </Box>
+              <Text size="200" weight="bold">
+                color=&quot;{colorCopy}&quot;
+              </Text>
+            </Flex>
+          );
+        })}
+      </Flex>
+    </Box>
+  );
+}

docs/examples/searchguide/expandableExample.tsx

@@ -0,0 +1,41 @@
+import { Fragment, useRef, useState } from 'react';
+import { Box, Flex, Popover, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  const [showOutfits, setShowOutfits] = useState(false);
+  const anchorRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <Fragment>
+      <Flex alignContent="stretch" alignItems="center" gap={2} justifyContent="center" width="100%">
+        <SearchGuide color="01" text="Designs" />
+        <SearchGuide
+          // @ts-expect-error - TS2322 - Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLButtonElement> | undefined'.
+          ref={anchorRef}
+          color="02"
+          expandable
+          onClick={() => setShowOutfits((showing) => !showing)}
+          selected={showOutfits}
+          text="Outfits"
+        />
+        <SearchGuide color="03" text="Vintage" />
+      </Flex>
+      {showOutfits && (
+        <Popover
+          anchor={anchorRef.current}
+          idealDirection="down"
+          onDismiss={() => setShowOutfits(false)}
+          size="flexible"
+        >
+          <Box height={120} overflow="scrollX" padding={4}>
+            <Flex direction="row" gap={2} wrap>
+              <SearchGuide color="01" text="Casual" />
+              <SearchGuide color="02" text="Formal" />
+              <SearchGuide color="03" text="Athletic" />
+            </Flex>
+          </Box>
+        </Popover>
+      )}
+    </Fragment>
+  );
+}

docs/examples/searchguide/hideLowQualityDo.tsx

@@ -0,0 +1,19 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignContent="stretch"
+      alignItems="center"
+      gap={2}
+      height="100%"
+      justifyContent="center"
+      overflow="scroll"
+      width="100%"
+    >
+      <SearchGuide color="02" text="Good Search" />
+      <SearchGuide color="03" text="Nice Search" />
+      <SearchGuide color="04" text="Relevant Search" />
+    </Flex>
+  );
+}

docs/examples/searchguide/main.tsx

@@ -0,0 +1,9 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
+      <SearchGuide text="Save" />
+    </Flex>
+  );
+}

docs/examples/searchguide/noScrollDo.tsx

@@ -0,0 +1,20 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignContent="stretch"
+      alignItems="center"
+      gap={2}
+      height="100%"
+      justifyContent="center"
+      overflow="scroll"
+      width="100%"
+    >
+      <SearchGuide color="06" text="Makeover" />
+      <SearchGuide color="07" text="Inspiration" />
+      <SearchGuide color="08" text="Ideas" />
+      <SearchGuide color="09" text="Dreams" />
+    </Flex>
+  );
+}

docs/examples/searchguide/selectedStateExample.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { Flex, Image, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  const [selected, setSelected] = useState('outfit');
+
+  return (
+    <Flex alignItems="center" gap={2} height="100%" justifyContent="center" width="100%">
+      <SearchGuide
+        accessibilityLabel="Designs"
+        color="03"
+        onClick={() => setSelected((value) => (value === 'design' ? '' : 'design'))}
+        selected={selected === 'design'}
+        text="Designs"
+      />
+      <SearchGuide
+        accessibilityLabel="Outfit"
+        color="04"
+        onClick={() => setSelected((value) => (value === 'outfit' ? '' : 'outfit'))}
+        selected={selected === 'outfit'}
+        text="Outfit"
+        thumbnail={{
+          image: (
+            <Image
+              alt="Image"
+              naturalHeight={1}
+              naturalWidth={1}
+              src="https://i.ibb.co/bBXC23j/fashion.jpg"
+            />
+          ),
+        }}
+      />
+      <SearchGuide
+        accessibilityLabel="Vintage"
+        color="05"
+        onClick={() => setSelected((value) => (value === 'vintage' ? '' : 'vintage'))}
+        selected={selected === 'vintage'}
+        text="Vintage"
+      />
+    </Flex>
+  );
+}

docs/examples/searchguide/serialDo.tsx

@@ -0,0 +1,19 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignContent="stretch"
+      alignItems="center"
+      gap={2}
+      height="100%"
+      justifyContent="center"
+      width="100%"
+    >
+      <SearchGuide color="01" text="Designs" />
+      <SearchGuide color="02" text="Outfits" />
+      <SearchGuide color="03" text="Vintage" />
+      <SearchGuide color="11" text="Gray" />
+    </Flex>
+  );
+}

docs/examples/searchguide/showLowQualityDont.tsx

@@ -0,0 +1,18 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignContent="stretch"
+      alignItems="center"
+      gap={2}
+      height="100%"
+      justifyContent="center"
+      overflow="scroll"
+      width="100%"
+    >
+      <SearchGuide color="01" text="Search with one result" />
+      <SearchGuide color="11" text="Search with unrelated results" />
+    </Flex>
+  );
+}

docs/examples/searchguide/singleDont.tsx

@@ -0,0 +1,16 @@
+import { Flex, SearchGuide } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex
+      alignContent="stretch"
+      alignItems="center"
+      gap={2}
+      height="100%"
+      justifyContent="center"
+      width="100%"
+    >
+      <SearchGuide text="Results" />
+    </Flex>
+  );
+}