DOP-3690: Initial implementation of Search Facets UI (#925)

Co-authored-by: Seung Park <[email protected]>
mongodb · Oct 6, 2023 · 1289447 · 1289447
1 parent 5c82c18
commit 1289447
Show file tree

Hide file tree

Showing 15 changed files with 1,411 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
     "@leafygreen-ui/button": "^21.0.5",
     "@leafygreen-ui/callout": "^5.0.0",
     "@leafygreen-ui/card": "^6.0.1",
-    "@leafygreen-ui/checkbox": "^6.0.3",
+    "@leafygreen-ui/checkbox": "^12.0.8",
     "@leafygreen-ui/code": "^11.0.0",
     "@leafygreen-ui/combobox": "^6.0.0",
     "@leafygreen-ui/emotion": "^4.0.0",

diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js
@@ -9,6 +9,9 @@ import { TabProvider } from './Tabs/tab-context';
 import { ContentsProvider } from './Contents/contents-context';
 import { SearchContextProvider } from './SearchResults/SearchContext';
 
+// Check for feature flag here to make it easier to pass down for testing purposes
+const SHOW_FACETS = process.env.GATSBY_FEATURE_FACETED_SEARCH === 'true';
+
 const RootProvider = ({
   children,
   headingNodes,
@@ -32,7 +35,7 @@ const RootProvider = ({
           >
             <TocContextProvider remoteMetadata={remoteMetadata}>
               <SidenavContextProvider>
-                <SearchContextProvider>{children}</SearchContextProvider>
+                <SearchContextProvider showFacets={SHOW_FACETS}>{children}</SearchContextProvider>
               </SidenavContextProvider>
             </TocContextProvider>
           </VersionContextProvider>

diff --git a/src/components/SearchResults/Facets/FacetGroup.js b/src/components/SearchResults/Facets/FacetGroup.js
@@ -0,0 +1,77 @@
+import React, { useCallback, useState } from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Body } from '@leafygreen-ui/typography';
+import { palette } from '@leafygreen-ui/palette';
+import Icon from '@leafygreen-ui/icon';
+import FacetValue from './FacetValue';
+
+// Facet options with the following ids will truncate the initial number of items shown
+const TRUNCATE_OPTIONS = ['programming_language', 'sub_product'];
+const TRUNCATE_AMOUNT = 5;
+
+const optionStyle = (isNested) => css`
+  ${isNested
+    ? `
+    margin-left: 22px;
+  `
+    : `
+    margin-bottom: 36px;
+  `}
+`;
+
+const optionNameStyle = css`
+  margin-bottom: 8px;
+  font-weight: 600;
+`;
+
+const showMoreStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 0 8px;
+  font-size: 13px;
+  line-height: 20px;
+  color: ${palette.gray.dark4};
+  margin-bottom: 16px;
+  cursor: pointer;
+`;
+
+const showMoreGlyphStyle = css`
+  color: ${palette.gray.dark2};
+`;
+
+// Representative of a "facet-option" from search server response
+const FacetGroup = ({ facetOption: { name, id, options }, isNested = false }) => {
+  const shouldTruncate = options.length >= TRUNCATE_AMOUNT && TRUNCATE_OPTIONS.includes(id);
+  const [truncated, setTruncated] = useState(shouldTruncate);
+  const displayedOptions = truncated ? options.slice(0, TRUNCATE_AMOUNT) : options;
+  const truncatedState = truncated
+    ? {
+        glyph: 'ChevronDown',
+        text: 'Show more',
+      }
+    : {
+        glyph: 'ChevronUp',
+        text: 'Show less',
+      };
+
+  const handleExpansionClick = useCallback(() => {
+    setTruncated((prev) => !prev);
+  }, []);
+
+  return (
+    <div className={cx(optionStyle(isNested))}>
+      {!isNested && <Body className={cx(optionNameStyle)}>{name}</Body>}
+      {displayedOptions.map((facet) => {
+        return <FacetValue key={facet.id} facetValue={facet} isNested={isNested} />;
+      })}
+      {shouldTruncate && (
+        <div className={cx(showMoreStyle)} onClick={handleExpansionClick}>
+          <Icon className={cx(showMoreGlyphStyle)} glyph={truncatedState.glyph} />
+          {truncatedState.text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FacetGroup;