From 69474774c29513a5f064a91f4f5d36e034d33695 Mon Sep 17 00:00:00 2001 From: nastassia Date: Wed, 19 May 2021 16:33:43 +0300 Subject: [PATCH 1/8] draft: Added A-Z letters to artists nav bar on hover --- .../Artists/Components/ArtistsLetterNav.tsx | 8 +++-- .../Menus/DropDownMenu/DropDownMenu.tsx | 36 +++++++++++++++---- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx index c84e8d25692..12baa95bea9 100644 --- a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx +++ b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx @@ -6,13 +6,17 @@ import { RouterLink, RouterLinkProps } from "v2/Artsy/Router/RouterLink" export const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("") -interface ArtistsLetterNavProps extends BoxProps {} +interface ArtistsLetterNavProps extends BoxProps { + inDropDown?: boolean +} export const ArtistsLetterNav: React.FC = ({ + inDropDown = false, ...rest }) => { + const justifyContent = inDropDown ? "flex-start" : ["flex-start", "flex-end"] return ( - + {LETTERS.map((letter, i) => { return ( diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx index 1568698c593..b0c19519b68 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx +++ b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx @@ -1,4 +1,4 @@ -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" @@ -6,6 +6,7 @@ import styled from "styled-components" import { DropDownSection } from "./DropDownSection" import { Menu, MenuItem } from "v2/Components/Menu" import { MenuData } from "../../menuData" +import { ArtistsLetterNav } from "v2/Apps/Artists/Components/ArtistsLetterNav" interface DropDownNavMenuProps { width?: string @@ -38,6 +39,10 @@ export const DropDownNavMenu: React.FC = ({ onClick() } } + + const isArtistsDropdown = + contextModule === AnalyticsSchema.ContextModule.HeaderArtistsDropdown + return ( = ({ - {menu.links.map(subMenu => { - if ("menu" in subMenu) { - return - } - })} + {isArtistsDropdown && ( + + + {menu.links.map(subMenu => { + if ("menu" in subMenu) { + return ( + + ) + } + })} + + + Browse by name + + + + )} @@ -112,3 +129,10 @@ ViewAllMenuItem.displayName = "ViewAllMenuItem" const Links = styled(Box)` border-right: 1px solid ${color("black10")}; ` + +const LettersWrap = styled(Box).attrs({ + px: 1, + py: 0.5, +})`` + +LettersWrap.displayName = "LettersWrap" From aceb801c9066cb50ba6fcf94f2a8e61a507afbe2 Mon Sep 17 00:00:00 2001 From: nastassia Date: Tue, 25 May 2021 11:52:04 +0300 Subject: [PATCH 2/8] refactor: ArtistsLetterNav props --- src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx | 8 ++------ .../Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx index 12baa95bea9..a90f6a9ad84 100644 --- a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx +++ b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx @@ -6,17 +6,13 @@ import { RouterLink, RouterLinkProps } from "v2/Artsy/Router/RouterLink" export const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("") -interface ArtistsLetterNavProps extends BoxProps { - inDropDown?: boolean -} +interface ArtistsLetterNavProps extends BoxProps {} export const ArtistsLetterNav: React.FC = ({ - inDropDown = false, ...rest }) => { - const justifyContent = inDropDown ? "flex-start" : ["flex-start", "flex-end"] return ( - + {LETTERS.map((letter, i) => { return ( diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx index b0c19519b68..2b89d1fcbcf 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx +++ b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx @@ -93,7 +93,7 @@ export const DropDownNavMenu: React.FC = ({ Browse by name - + )} From 80f8df8abdc67c7e9499643127e2d30455dd2b6d Mon Sep 17 00:00:00 2001 From: nastassia Date: Tue, 25 May 2021 15:18:37 +0300 Subject: [PATCH 3/8] Aligned 'View all artists' and 'Browse by name' lines. Widened letters --- .../Menus/DropDownMenu/DropDownMenu.tsx | 79 ++++++++++++------- .../Menus/DropDownMenu/DropDownSection.tsx | 2 +- 2 files changed, 51 insertions(+), 30 deletions(-) diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx index 2b89d1fcbcf..398d0867b60 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx +++ b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx @@ -5,7 +5,7 @@ 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 { @@ -43,6 +43,9 @@ export const DropDownNavMenu: React.FC = ({ const isArtistsDropdown = contextModule === AnalyticsSchema.ContextModule.HeaderArtistsDropdown + const lastMenuLinkIndex = menu.links.length - 1 + const lastMenuItem = menu.links[lastMenuLinkIndex] as SimpleLinkData + return ( = ({ ]} > - + {menu.links.map((menuItem, i) => { if (!("menu" in menuItem)) { - const isLast = menu.links.length - 1 === i - - return isLast ? ( - - {menuItem.text} - - ) : ( - - {menuItem.text} - + const isLast = lastMenuLinkIndex === i + + return ( + !isLast && ( + + {menuItem.text} + + ) ) } })} + + + {lastMenuItem.text} + + - {isArtistsDropdown && ( - - - {menu.links.map(subMenu => { - if ("menu" in subMenu) { - return ( - - ) - } - })} - + + + {menu.links.map(subMenu => { + if ("menu" in subMenu) { + return ( + + ) + } + })} + + {isArtistsDropdown && ( Browse by name - + - - )} + )} + @@ -126,13 +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, - py: 0.5, + height: "85px", })`` LettersWrap.displayName = "LettersWrap" + +const Letters = styled(ArtistsLetterNav).attrs({ + justifyContent: "flex-start", +})` + margin-left: -6px; + > div { + width: 32px; + } +` + +Letters.displayName = "Letters" diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownSection.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownSection.tsx index 28796ba3d43..64be393d6d0 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownSection.tsx +++ b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownSection.tsx @@ -14,7 +14,7 @@ export const DropDownSection: React.FC = ({ return ( <> - + {section.text} From 8d9ab79abb870b4fd6d171a7ed7fdbdfcad5a8e2 Mon Sep 17 00:00:00 2001 From: nastassia Date: Tue, 25 May 2021 17:28:48 +0300 Subject: [PATCH 4/8] feat: Added A-Z letters to mobile --- .../Artists/Components/ArtistsLetterNav.tsx | 1 + .../Menus/MobileNavMenu/MobileNavMenu.tsx | 22 +++++++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx index a90f6a9ad84..ffed0f0c516 100644 --- a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx +++ b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx @@ -42,6 +42,7 @@ const Letter = styled(RouterLink)` text-align: center; text-decoration: none; transition: color 250ms; + color: ${themeGet("colors.black60")}; &:hover { text-decoration: underline; diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx index 7c96995c328..bf471c44450 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx +++ b/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,13 @@ export const AnimatingMenuWrapper = styled.div<{ z-index: 0; transform: translate3d(100%, 0, 0); `} +` - ul { - margin-bottom: 100px; +const Letters = styled(ArtistsLetterNav)` + max-width: 385px; + > div { + width: 55px; + height: 50px; } ` @@ -160,6 +165,8 @@ const Menu: React.FC = ({ links, showBacknav = true, }) => { + const isArtistsMenu = title === "Artists" + const lastLinkIndex = links.length - 1 return ( @@ -168,7 +175,13 @@ const Menu: React.FC = ({ {title} -
    {[...links].map(link => NavLink({ link }))}
+
    + {[...links].map((link, i) => { + const isLast = lastLinkIndex === i + return NavLink({ link, isLast, isArtistsMenu }) + })} +
+ {isArtistsMenu && } ) } @@ -225,7 +238,7 @@ const useTrackingContextModule = () => { return contextModule } -const NavLink: React.FC = ({ link }) => { +const NavLink: React.FC = ({ link, isLast, isArtistsMenu }) => { const isSubMenu = !!link.menu const contextModule = useTrackingContextModule() @@ -245,6 +258,7 @@ const NavLink: React.FC = ({ link }) => { onClick={link.onClick} > {link.text} + {isArtistsMenu && isLast && <> A – Z} {link.dividerBelow && } From b1795c2579167db9b76a7237eb60ac2765fb9c21 Mon Sep 17 00:00:00 2001 From: nastassia Date: Thu, 27 May 2021 10:41:41 +0300 Subject: [PATCH 5/8] refactor: Renamed styled component and changed usage of NavLink component to JSX instead of calling like a function --- .../NavBar/Menus/DropDownMenu/DropDownMenu.tsx | 6 +++--- .../NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx | 12 +++++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx index 398d0867b60..4d4efce37a8 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx +++ b/src/v2/Components/NavBar/Menus/DropDownMenu/DropDownMenu.tsx @@ -99,7 +99,7 @@ export const DropDownNavMenu: React.FC = ({ {isArtistsDropdown && ( Browse by name - + )} @@ -147,7 +147,7 @@ const LettersWrap = styled(Box).attrs({ LettersWrap.displayName = "LettersWrap" -const Letters = styled(ArtistsLetterNav).attrs({ +const StyledArtistsLetterNav = styled(ArtistsLetterNav).attrs({ justifyContent: "flex-start", })` margin-left: -6px; @@ -156,4 +156,4 @@ const Letters = styled(ArtistsLetterNav).attrs({ } ` -Letters.displayName = "Letters" +StyledArtistsLetterNav.displayName = "StyledArtistsLetterNav" diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx index bf471c44450..fbb674f2bef 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx +++ b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx @@ -144,7 +144,7 @@ export const AnimatingMenuWrapper = styled.div<{ `} ` -const Letters = styled(ArtistsLetterNav)` +const StyledArtistsLetterNav = styled(ArtistsLetterNav)` max-width: 385px; > div { width: 55px; @@ -178,10 +178,16 @@ const Menu: React.FC = ({
    {[...links].map((link, i) => { const isLast = lastLinkIndex === i - return NavLink({ link, isLast, isArtistsMenu }) + return ( + + ) })}
- {isArtistsMenu && } + {isArtistsMenu && } ) } From 3033d05c885a41eee29633f5e3430ae467c0e51c Mon Sep 17 00:00:00 2001 From: nastassia Date: Thu, 27 May 2021 10:46:19 +0300 Subject: [PATCH 6/8] Added extra 10px of space above letters section on mobile --- src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx index fbb674f2bef..c5530a52c7d 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx +++ b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx @@ -146,6 +146,7 @@ export const AnimatingMenuWrapper = styled.div<{ const StyledArtistsLetterNav = styled(ArtistsLetterNav)` max-width: 385px; + margin-top: 10px; > div { width: 55px; height: 50px; From 6f631e100f5df0752ab06e644e2ff3bcea20877e Mon Sep 17 00:00:00 2001 From: nastassia Date: Thu, 27 May 2021 10:55:49 +0300 Subject: [PATCH 7/8] Added key prop to NavLink components --- src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx index c5530a52c7d..c43a536f359 100644 --- a/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx +++ b/src/v2/Components/NavBar/Menus/MobileNavMenu/MobileNavMenu.tsx @@ -181,6 +181,7 @@ const Menu: React.FC = ({ const isLast = lastLinkIndex === i return ( Date: Thu, 27 May 2021 11:48:03 +0300 Subject: [PATCH 8/8] Updated tests --- .../DropDownMenu/__tests__/DropDownMenu.jest.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/v2/Components/NavBar/Menus/DropDownMenu/__tests__/DropDownMenu.jest.tsx b/src/v2/Components/NavBar/Menus/DropDownMenu/__tests__/DropDownMenu.jest.tsx index 5ea647c636e..c911f35cc72 100644 --- a/src/v2/Components/NavBar/Menus/DropDownMenu/__tests__/DropDownMenu.jest.tsx +++ b/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()