1322 add bookmark UI

app/components/search/SearchResults/SearchResults.module.scss

@@ -182,6 +182,7 @@
 }
 
 .sideLinks {
+  display: grid;
   font-weight: bold;
   font-size: 18px;
   color: $color-brand;
@@ -216,6 +217,19 @@
   overflow: auto;
 }
 
+.bookmarkButton {
+  align-self: end;
+  justify-self: left;
+  white-space: nowrap;
+  @media screen and (min-width: $break-desktop) and (max-width: $break-desktop-l) {
+    // Positioning for small sliver of screensizes where the button can overflow
+    // its grid boundaries. This allows the button to overflow yet without abutting
+    // against content in the grid column next to it
+    position: relative;
+    right: 2px;
+  }
+}
+
 @media print {
   // This below styles are for printing out the results on our service/search results page.
 

app/components/search/SearchResults/SearchResults.tsx

@@ -5,7 +5,7 @@ import {
   connectStateResults,
   SearchResults as SearchResultsProps,
 } from "react-instantsearch/connectors";
-import { whiteLabel } from "utils";
+import { useAppContext, whiteLabel } from "utils";
 import { CATEGORIES } from "pages/ServiceDiscoveryForm/constants";
 import { SearchMap } from "components/search/SearchMap/SearchMap";
 import ResultsPagination from "components/search/Pagination/ResultsPagination";
@@ -14,6 +14,7 @@ import { Texting } from "components/Texting";
 import { ClinicianActions } from "components/ucsf/ClinicianActions/ClinicianActions";
 import { ClientHandouts } from "components/ui/ClientHandoutsModal/ClientHandouts";
 import { TextListing } from "components/Texting/Texting";
+import { BookmarkModal } from "components/ui/BookmarkModal/BookmarkModal";
 import { Button } from "components/ui/inline/Button/Button";
 import { SearchHit, transformHits } from "../../../models/SearchHits";
 import { icon } from "../../../assets";
@@ -183,9 +184,11 @@ const SearchResult = ({
   expanded: boolean;
   onToggle: () => void;
 }) => {
+  const { authState } = useAppContext();
   const [textingIsOpen, setTextingIsOpen] = useState(false);
   const [clinicianActionsIsOpen, setClinicianActionsIsOpen] = useState(false);
   const [handoutModalIsOpen, setHandoutModalIsOpen] = useState(false);
+  const [bookmarkModalIsOpen, setBookmarkModalIsOpen] = useState(false);
 
   type HandoutLanguage = "es" | "tl" | "zh-TW" | "vi" | "ru" | "ar";
   const handoutUrl = (hitId: number, language: HandoutLanguage | null) => {
@@ -215,6 +218,10 @@ const SearchResult = ({
   }
 
   const toggleTextingModal = () => setTextingIsOpen(!textingIsOpen);
+  // TODO: this bookmarkAdded boolean should be set in accordance with the value of the bookmark model
+  // returned by the API. Fetching the model from the API will need to be done in such a way that it does not
+  // block the rendering of the search results and yet does not cause the button to flash in a distracting manner
+  const bookmarkAdded = false;
 
   const texting = (
     <div
@@ -236,6 +243,7 @@ const SearchResult = ({
   const toggleClinicianActionsModal = () => {
     setClinicianActionsIsOpen(!clinicianActionsIsOpen);
   };
+
   const toggleHandoutModal = () => {
     setHandoutModalIsOpen(!handoutModalIsOpen);
   };
@@ -419,62 +427,77 @@ const SearchResult = ({
           )}
         </div>
 
-        <div className={styles.sideLinks}>
-          {expanded && (
-            <>
-              <div
-                className={
-                  showDischargeSidelinks ? "" : styles.hideDischargeSidelinks
-                }
-              >
-                {hit.type === "service" &&
-                  !!hit.instructions?.length &&
-                  clinicianActionsLink}
-                {handoutsLink}
-              </div>
-              <div
-                className={
-                  showDischargeSidelinks ? styles.deemphasizeSideLinks : ""
-                }
-              >
-                {phoneNumber && (
-                  <div
-                    className={`${styles.sideLink} ${styles.showInPrintView}`}
+        {expanded && (
+          <div className={styles.sideLinks}>
+            <div
+              className={
+                showDischargeSidelinks ? "" : styles.hideDischargeSidelinks
+              }
+            >
+              {hit.type === "service" &&
+                !!hit.instructions?.length &&
+                clinicianActionsLink}
+              {handoutsLink}
+            </div>
+            <div
+              className={
+                showDischargeSidelinks ? styles.deemphasizeSideLinks : ""
+              }
+            >
+              {phoneNumber && (
+                <div className={`${styles.sideLink} ${styles.showInPrintView}`}>
+                  <img
+                    src={icon("phone-blue")}
+                    alt="phone"
+                    className={styles.sideLinkIcon}
+                  />
+                  <a
+                    href={`tel:${phoneNumber}`}
+                    className={styles.sideLinkText}
+                  >{`Call ${formatPhoneNumber(phoneNumber)}`}</a>
+                </div>
+              )}
+              <div />
+              {url && (
+                <div className={styles.sideLink}>
+                  <img
+                    src={icon("popout-blue")}
+                    alt="website"
+                    className={styles.sideLinkIcon}
+                  />
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={url}
+                    className={styles.sideLinkText}
                   >
-                    <img
-                      src={icon("phone-blue")}
-                      alt="phone"
-                      className={styles.sideLinkIcon}
-                    />
-                    <a
-                      href={`tel:${phoneNumber}`}
-                      className={styles.sideLinkText}
-                    >{`Call ${formatPhoneNumber(phoneNumber)}`}</a>
-                  </div>
-                )}
-                <div />
-                {url && (
-                  <div className={styles.sideLink}>
-                    <img
-                      src={icon("popout-blue")}
-                      alt="website"
-                      className={styles.sideLinkIcon}
-                    />
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href={url}
-                      className={styles.sideLinkText}
-                    >
-                      Go to website
-                    </a>
-                  </div>
-                )}
-                {texting}
-              </div>
-            </>
-          )}
-        </div>
+                    Go to website
+                  </a>
+                </div>
+              )}
+              {texting}
+            </div>
+
+            {authState && (
+              <>
+                <Button
+                  onClick={() => {
+                    setBookmarkModalIsOpen(true);
+                  }}
+                  addClass={styles.bookmarkButton}
+                  styleType={bookmarkAdded ? "default" : "transparent"}
+                >
+                  {bookmarkAdded ? "Bookmark Added" : "Add Bookmark"}
+                </Button>
+                <BookmarkModal
+                  isOpen={bookmarkModalIsOpen}
+                  setIsOpen={setBookmarkModalIsOpen}
+                  hit={hit}
+                />
+              </>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

app/components/ui/BookmarkModal/BookmarkModal.module.scss

@@ -0,0 +1,190 @@
+@import "~styles/utils/_helpers.scss";
+
+.bookmarkModal {
+  width: 600px;
+  padding: 33px;
+  @media screen and (max-width: $break-tablet-s) {
+    max-width: 600px;
+    width: 100vw;
+    padding: 20px 0 0;
+  }
+}
+
+.title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  color: #000;
+  margin-bottom: 20px;
+  @media screen and (max-width: $break-tablet-s) {
+    font-size: 28px;
+  }
+}
+
+.modalContent {
+  display: grid;
+  gap: 35px;
+  padding: 35px;
+  background-color: #f5f5f5;
+  @media screen and (max-width: $break-tablet-s) {
+    padding: 20px 0;
+  }
+}
+
+.bookmarkDescription {
+  border-radius: 8px;
+  background-color: #fff;
+  display: grid;
+  grid-template-areas:
+    "icon name"
+    "icon url";
+  grid-template-columns: 60px auto;
+  column-gap: 20px;
+  padding: 15px;
+  .bookmarkIcon {
+    // Nested style to override default material-icons styles
+    grid-area: icon;
+    width: 60px;
+    height: auto;
+    font-size: 60px;
+    color: $color-brand;
+    align-self: center;
+  }
+}
+
+.clearBookmarkButton {
+  background-color: transparent;
+  padding: 0;
+  height: auto;
+  align-self: start;
+  &:hover,
+  &:focus {
+    box-shadow: none;
+    border: 0;
+    opacity: 0.7;
+  }
+}
+
+.clearBookmarkText {
+  cursor: pointer;
+  color: #636363;
+}
+
+.bookmarkNameContainer {
+  grid-area: name;
+  display: flex;
+  gap: 10px;
+}
+
+.bookmarkName {
+  background-color: #fff;
+  height: 35px;
+  border: none;
+  padding: 3px 3px 10px;
+  font-size: 16px;
+  &:hover,
+  &:focus {
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.25);
+  }
+}
+
+.bookmarkUrl {
+  border-top: solid 1px #f5f5f5;
+  grid-area: url;
+  height: 35px;
+  padding-top: 10px;
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+
+.selectFolderContainer {
+  border-radius: 8px;
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+}
+
+.selectFolder {
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  padding: 13px 18px 8px;
+}
+
+.placeholder {
+  color: #aaa;
+}
+
+.bookmarkFoldersList {
+  display: flex;
+  flex-direction: column;
+  max-height: 110px;
+  overflow-y: scroll;
+  position: absolute;
+  right: 0;
+  left: 0;
+  background: #fff;
+}
+
+.folderListItem {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 5px 8px;
+  .folderIcon {
+    color: #d1d1d1;
+  }
+  &:hover {
+    background-color: #edf5fed9;
+  }
+}
+
+.addFolderItem {
+  padding: 0 10px;
+  border-top: solid 1px #f5f5f5;
+  cursor: default;
+  gap: 5px;
+  &:hover {
+    background-color: inherit;
+  }
+}
+
+.addFolderLabel {
+  width: 21px;
+  height: 21px;
+  border-radius: 4px;
+  background-color: #d1d1d1;
+  color: #fff;
+  font-weight: 500;
+  text-align: center;
+}
+
+.addFolderInput {
+  padding: 6px 14px;
+  background-color: #fff;
+  border: none;
+  font-size: 16px;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.25);
+  }
+}
+
+.label {
+  color: $color-grey5;
+  text-transform: uppercase;
+  margin: 30px 3px 5px;
+}
+
+.buttonBar {
+  display: flex;
+  justify-content: center;
+}
+
+.addBookmarkBtn {
+  width: 200px;
+}