Merge pull request #7589 from artsy/anastasiapyzhik/add-a-z-links-to-…

…artists-nav-bar

Added A-Z letters to artists nav bar on hover

src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx

@@ -12,7 +12,7 @@ export const ArtistsLetterNav: React.FC<ArtistsLetterNavProps> = ({
   ...rest
 }) => {
   return (
-    <Flex flexWrap="wrap" justifyContent={["flex-start", "flex-end"]}>
+    <Flex flexWrap="wrap" justifyContent={["flex-start", "flex-end"]} {...rest}>
       {LETTERS.map((letter, i) => {
         return (
           <Text key={letter} variant="md" color="black60">
@@ -42,6 +42,7 @@ const Letter = styled(RouterLink)<RouterLinkProps>`
   text-align: center;
   text-decoration: none;
   transition: color 250ms;
+  color: ${themeGet("colors.black60")};
 
   &:hover {
     text-decoration: underline;

src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx

@@ -1,11 +1,12 @@
-import { Box, Flex, color, breakpoints } from "@artsy/palette"
+import { Box, Flex, color, breakpoints, Text } from "@artsy/palette"
 import { AnalyticsSchema, ContextModule } from "v2/Artsy"
 import { useTracking } from "v2/Artsy/Analytics/useTracking"
 import React from "react"
 import styled from "styled-components"
 import { DropDownSection } from "./DropDownSection"
 import { Menu, MenuItem } from "v2/Components/Menu"
-import { MenuData } from "../../menuData"
+import { MenuData, SimpleLinkData } from "../../menuData"
+import { ArtistsLetterNav } from "v2/Apps/Artists/Components/ArtistsLetterNav"
 
 interface DropDownNavMenuProps {
   width?: string
@@ -38,6 +39,13 @@ export const DropDownNavMenu: React.FC<DropDownNavMenuProps> = ({
       onClick()
     }
   }
+
+  const isArtistsDropdown =
+    contextModule === AnalyticsSchema.ContextModule.HeaderArtistsDropdown
+
+  const lastMenuLinkIndex = menu.links.length - 1
+  const lastMenuItem = menu.links[lastMenuLinkIndex] as SimpleLinkData
+
   return (
     <Menu onClick={handleClick} width={width} py={0}>
       <Flex
@@ -49,37 +57,52 @@ export const DropDownNavMenu: React.FC<DropDownNavMenuProps> = ({
         ]}
       >
         <Flex width={breakpoints.xl} px={3}>
-          <Links py={3} mr={[3, 3, 5, 5]}>
+          <Links>
             <Box
+              flexGrow={1}
               display="flex"
               flexDirection="column"
-              height="100%"
               mr={[1, 1, 2, 2]}
               width={[110, 135, 135, 170, 170]}
             >
               {menu.links.map((menuItem, i) => {
                 if (!("menu" in menuItem)) {
-                  const isLast = menu.links.length - 1 === i
-
-                  return isLast ? (
-                    <ViewAllMenuItem key={menuItem.text} href={menuItem.href}>
-                      {menuItem.text}
-                    </ViewAllMenuItem>
-                  ) : (
-                    <LinkMenuItem key={menuItem.text} href={menuItem.href}>
-                      {menuItem.text}
-                    </LinkMenuItem>
+                  const isLast = lastMenuLinkIndex === i
+
+                  return (
+                    !isLast && (
+                      <LinkMenuItem key={menuItem.text} href={menuItem.href}>
+                        {menuItem.text}
+                      </LinkMenuItem>
+                    )
                   )
                 }
               })}
             </Box>
+            <Box height={isArtistsDropdown ? "90px" : "auto"}>
+              <ViewAllMenuItem key={lastMenuItem.text} href={lastMenuItem.href}>
+                {lastMenuItem.text}
+              </ViewAllMenuItem>
+            </Box>
           </Links>
 
-          {menu.links.map(subMenu => {
-            if ("menu" in subMenu) {
-              return <DropDownSection key={subMenu.text} section={subMenu} />
-            }
-          })}
+          <Flex flexDirection="column" pb={3}>
+            <Flex>
+              {menu.links.map(subMenu => {
+                if ("menu" in subMenu) {
+                  return (
+                    <DropDownSection key={subMenu.text} section={subMenu} />
+                  )
+                }
+              })}
+            </Flex>
+            {isArtistsDropdown && (
+              <LettersWrap>
+                <Text variant="small">Browse by name</Text>
+                <StyledArtistsLetterNav />
+              </LettersWrap>
+            )}
+          </Flex>
         </Flex>
       </Flex>
     </Menu>
@@ -109,6 +132,28 @@ const ViewAllMenuItem = styled(MenuItem).attrs({
 
 ViewAllMenuItem.displayName = "ViewAllMenuItem"
 
-const Links = styled(Box)`
+const Links = styled(Flex).attrs({
+  flexDirection: "column",
+  py: 3,
+  mr: [3, 3, 5, 5],
+})`
   border-right: 1px solid ${color("black10")};
 `
+
+const LettersWrap = styled(Box).attrs({
+  px: 1,
+  height: "85px",
+})``
+
+LettersWrap.displayName = "LettersWrap"
+
+const StyledArtistsLetterNav = styled(ArtistsLetterNav).attrs({
+  justifyContent: "flex-start",
+})`
+  margin-left: -6px;
+  > div {
+    width: 32px;
+  }
+`
+
+StyledArtistsLetterNav.displayName = "StyledArtistsLetterNav"

src/v2/Components/NavBar/Menus/DropDownMenu/DropDownSection.tsx

@@ -14,7 +14,7 @@ export const DropDownSection: React.FC<DropDownSectionProps> = ({
 
   return (
     <>
-      <Box width="100%" py={4} mr={[1, 1, 2, 2]}>
+      <Box width="100%" pt={4} pb={3} mr={[1, 1, 2, 2]}>
         <Text variant="small" mb={1} px={1}>
           {section.text}
         </Text>

src/v2/Components/NavBar/Menus/DropDownMenu/__tests__/DropDownMenu.jest.tsx

@@ -67,6 +67,22 @@ describe("DropDownMenu", () => {
     expect(dropDownSection.length).toBe(4)
   })
 
+  it("doesn't render ArtistsLetterNav inside artworks dropdown", () => {
+    const wrapper = getWrapper()
+    const artistsLetterNav = wrapper.find("StyledArtistsLetterNav")
+
+    expect(artistsLetterNav.exists()).toBeFalsy()
+  })
+
+  it("renders ArtistsLetterNav inside artists dropdown", () => {
+    const wrapper = getWrapper({
+      contextModule: ContextModule.HeaderArtistsDropdown,
+    })
+    const artistsLetterNav = wrapper.find("StyledArtistsLetterNav")
+
+    expect(artistsLetterNav.exists()).toBeTruthy()
+  })
+
   it("tracks analytics click events correctly", () => {
     const wrapper = getWrapper()
     const menuItem = wrapper.find(MenuItem).first()

src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx

@@ -33,6 +33,7 @@ import {
   useNavigation,
 } from "./NavigatorContextProvider"
 import { NAV_BAR_BORDER_OFFSET, MOBILE_NAV_HEIGHT } from "v2/Components/NavBar"
+import { ArtistsLetterNav } from "v2/Apps/Artists/Components/ArtistsLetterNav"
 
 const Close = styled(Clickable)`
   position: absolute;
@@ -141,9 +142,14 @@ export const AnimatingMenuWrapper = styled.div<{
     z-index: 0;
     transform: translate3d(100%, 0, 0);
   `}
+`
 
-  ul {
-    margin-bottom: 100px;
+const StyledArtistsLetterNav = styled(ArtistsLetterNav)`
+  max-width: 385px;
+  margin-top: 10px;
+  > div {
+    width: 55px;
+    height: 50px;
   }
 `
 
@@ -160,6 +166,8 @@ const Menu: React.FC<MenuProps> = ({
   links,
   showBacknav = true,
 }) => {
+  const isArtistsMenu = title === "Artists"
+  const lastLinkIndex = links.length - 1
   return (
     <AnimatingMenuWrapper isOpen={isOpen}>
       <Flex position="relative">
@@ -168,7 +176,20 @@ const Menu: React.FC<MenuProps> = ({
           {title}
         </Sans>
       </Flex>
-      <ul>{[...links].map(link => NavLink({ link }))}</ul>
+      <ul>
+        {[...links].map((link, i) => {
+          const isLast = lastLinkIndex === i
+          return (
+            <NavLink
+              key={i}
+              link={link}
+              isLast={isLast}
+              isArtistsMenu={isArtistsMenu}
+            />
+          )
+        })}
+      </ul>
+      {isArtistsMenu && <StyledArtistsLetterNav />}
     </AnimatingMenuWrapper>
   )
 }
@@ -225,7 +246,7 @@ const useTrackingContextModule = () => {
   return contextModule
 }
 
-const NavLink: React.FC<any> = ({ link }) => {
+const NavLink: React.FC<any> = ({ link, isLast, isArtistsMenu }) => {
   const isSubMenu = !!link.menu
   const contextModule = useTrackingContextModule()
 
@@ -245,6 +266,7 @@ const NavLink: React.FC<any> = ({ link }) => {
           onClick={link.onClick}
         >
           {link.text}
+          {isArtistsMenu && isLast && <> A &#8211; Z</>}
         </MobileLink>
         {link.dividerBelow && <Separator my={1} color={color("black10")} />}
       </React.Fragment>