Merge pull request #2042 from pepopowitz/search-bar-visuals

Update SearchBar to better match comps
artsy · Feb 21, 2019 · 8642e35 · 8642e35
2 parents bb89fcc + 84b9595
commit 8642e35
Show file tree

Hide file tree

Showing 21 changed files with 268 additions and 95 deletions.
diff --git a/src/Components/Search/Previews/Grids/ArtistSearch/RelatedArtworks.tsx b/src/Components/Search/Previews/Grids/ArtistSearch/RelatedArtworks.tsx
@@ -47,7 +47,7 @@ export const RelatedArtworksPreviewFragmentContainer = createFragmentContainer(
         artist_id: $entityID
       ) {
         __id
-        artworks_connection(first: 8) {
+        artworks_connection(first: 10) {
           edges {
             node {
               ...PreviewGridItem_artwork

diff --git a/src/Components/Search/Previews/Grids/ArtistSearch/index.tsx b/src/Components/Search/Previews/Grids/ArtistSearch/index.tsx
@@ -35,7 +35,7 @@ export const ArtistSearchPreviewFragmentContainer = createFragmentContainer(
       @argumentDefinitions(entityID: { type: "String!" }) {
       artist(id: $entityID) {
         id
-        marketingCollections {
+        marketingCollections(size: 6) {
           title
           ...MarketingCollectionsPreview_marketingCollections
         }

diff --git a/src/Components/Search/Previews/Grids/MerchandisableArtworks.tsx b/src/Components/Search/Previews/Grids/MerchandisableArtworks.tsx
@@ -47,7 +47,7 @@ export const MerchandisableArtworksPreviewFragmentContainer = createFragmentCont
     fragment MerchandisableArtworks_viewer on Viewer {
       filter_artworks(aggregations: [TOTAL], sort: "-decayed_merch") {
         __id
-        artworks_connection(first: 8) {
+        artworks_connection(first: 10) {
           edges {
             node {
               ...PreviewGridItem_artwork

diff --git a/src/Components/Search/Previews/Grids/PreviewGridItem.tsx b/src/Components/Search/Previews/Grids/PreviewGridItem.tsx
@@ -12,7 +12,7 @@ interface PreviewGridItemProps {
   emphasizeArtist?: boolean
 }
 
-const Title = styled(Serif).attrs({ italic: true })`
+const OverflowEllipsis = styled(Serif)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -28,26 +28,27 @@ export const PreviewGridItem: React.SFC<PreviewGridItemProps> = ({
   return (
     <Flex mr={2} mb={2}>
       <Link href={artwork.href} noUnderline>
-        {imageUrl ? (
-          <Image
-            mr={2}
-            src={imageUrl}
-            alt={`${artwork.title} by ${artwork.artist_names}`}
-          />
-        ) : (
-          <Box width="40px" height="40px" mr={2}>
-            &nbsp;
-          </Box>
-        )}
+        <Box width="40px" height="40px" mr={2}>
+          {imageUrl && (
+            <Image
+              mr={2}
+              src={imageUrl}
+              alt={`${artwork.title} by ${artwork.artist_names}`}
+            />
+          )}
+        </Box>
       </Link>
       <Link href={artwork.href} noUnderline>
         <Box>
-          <Title size="2">
+          <OverflowEllipsis size="2" italic>
             {artwork.title}, {artwork.date}
-          </Title>
-          <Serif size="2" weight={emphasizeArtist ? "semibold" : "regular"}>
+          </OverflowEllipsis>
+          <OverflowEllipsis
+            size="2"
+            weight={emphasizeArtist ? "semibold" : "regular"}
+          >
             {artwork.artist_names}
-          </Serif>
+          </OverflowEllipsis>
         </Box>
       </Link>
     </Flex>

diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx
@@ -2,6 +2,7 @@ import { Box, Flex } from "@artsy/palette"
 import { SearchBar_viewer } from "__generated__/SearchBar_viewer.graphql"
 import { SearchBarSuggestQuery } from "__generated__/SearchBarSuggestQuery.graphql"
 import { ContextConsumer, ContextProps } from "Artsy"
+import colors from "Assets/Colors"
 import Input from "Components/Input"
 import { SearchPreview } from "Components/Search/Previews"
 import { SuggestionItem } from "Components/Search/Suggestions/SuggestionItem"
@@ -18,6 +19,7 @@ import styled from "styled-components"
 import { get } from "Utils/get"
 import createLogger from "Utils/logger"
 import { Media } from "Utils/Responsive"
+import { SuggestionItemContainer } from "./Suggestions/SuggestionItemContainer"
 
 const logger = createLogger("Components/Search/SearchBar")
 
@@ -49,6 +51,43 @@ interface State {
   focused: boolean
 }
 
+const AutosuggestWrapper = styled(Box)`
+  position: relative;
+`
+
+const ResultsWrapper = styled(Box)`
+  width: calc(100% + 450px);
+  background-color: ${colors.white};
+  display: flex;
+  border: 1px solid ${colors.grayRegular};
+  position: absolute;
+`
+
+const SuggestionsWrapper = styled(Box)`
+  border-right: 1px solid ${colors.grayRegular};
+`
+
+const SuggestionContainer = ({ children, containerProps, preview }) => {
+  return (
+    <AutosuggestWrapper
+      width="100%"
+      flexDirection={["column", "row"]}
+      {...containerProps}
+    >
+      <ResultsWrapper mt={0.5}>
+        <SuggestionsWrapper width="calc(100% - 450px)">
+          <Flex flexDirection="column" width="100%">
+            {children}
+          </Flex>
+        </SuggestionsWrapper>
+        <Box width="450px" pl={3} py={2}>
+          {preview}
+        </Box>
+      </ResultsWrapper>
+    </AutosuggestWrapper>
+  )
+}
+
 export class SearchBar extends Component<Props, State> {
   public input: HTMLInputElement
 
@@ -137,29 +176,29 @@ export class SearchBar extends Component<Props, State> {
     { xs }
   ) => {
     const { focused } = this.state
+    if (!focused) {
+      return null
+    }
 
     let emptyState = null
     if (!xs && !query && focused) {
       emptyState = (
-        <Box pb={3} pl={3}>
-          {PLACEHOLDER}
-        </Box>
+        <SuggestionItemContainer>{PLACEHOLDER}</SuggestionItemContainer>
       )
     }
+
+    const props = {
+      children,
+      containerProps,
+      focused,
+      query,
+      preview: this.renderPreview(),
+    }
+
     return (
-      <Box {...containerProps}>
-        <Flex flexDirection={["column", "row"]}>
-          <Box width={["100%", "50%"]}>
-            <Flex flexDirection="column">
-              {emptyState}
-              {children}
-            </Flex>
-          </Box>
-          <Box width={["100%", "50%"]} pl={3}>
-            {this.renderPreview()}
-          </Box>
-        </Flex>
-      </Box>
+      <SuggestionContainer {...props}>
+        {emptyState || children}
+      </SuggestionContainer>
     )
   }
 
@@ -250,7 +289,7 @@ export const SearchBarRefetchContainer = createRefetchContainer(
           term: { type: "String!", defaultValue: "" }
           hasTerm: { type: "Boolean!", defaultValue: false }
         ) {
-        search(query: $term, mode: AUTOSUGGEST, first: 7)
+        search(query: $term, mode: AUTOSUGGEST, first: 5)
           @include(if: $hasTerm) {
           edges {
             node {

diff --git a/src/Components/Search/Suggestions/SuggestionItem.tsx b/src/Components/Search/Suggestions/SuggestionItem.tsx
@@ -1,7 +1,8 @@
-import { Box, color, Flex, Link, Sans, Serif } from "@artsy/palette"
+import { color, Link, Sans, Serif } from "@artsy/palette"
 import match from "autosuggest-highlight/match"
 import parse from "autosuggest-highlight/parse"
 import React, { SFC } from "react"
+import { SuggestionItemContainer } from "./SuggestionItemContainer"
 interface Props {
   display: string
   label: string
@@ -11,31 +12,34 @@ interface Props {
 
 export const SuggestionItem: SFC<Props> = ({ href, display, label, query }) => {
   if (label === "FirstItem") {
+    // `color="black100"` is misleading.
+    //  The actual color doesn't really matter - the child element controls the displayed color.
+    //  We specify color only because it makes the text not underlined on hover.
     return (
-      <Link noUnderline href={href}>
-        <Box pl={3} pb={3}>
-          Search "{query}"
-        </Box>
+      <Link noUnderline href={href} color="black100">
+        <SuggestionItemContainer>Search "{query}"</SuggestionItemContainer>
       </Link>
     )
   }
 
   const matches = match(display, query)
   const parts = parse(display, matches)
 
-  // TODO: Center text vertically
   return (
-    <Link noUnderline href={href}>
-      <Flex pl={3} pb={3} justifyContent="center" flexDirection="column">
-        <Serif size="2">
+    // `color="black100"` is misleading.
+    //  The actual color doesn't really matter - the child elements control the displayed color.
+    //  We specify color only because it makes the text not underlined on hover.
+    <Link noUnderline href={href} color="black100">
+      <SuggestionItemContainer>
+        <Serif size="3">
           {parts.map(({ highlight, text }, index) => {
             return highlight ? <strong key={index}>{text}</strong> : text
           })}
         </Serif>
-        <Sans color={color("black30")} size="2">
+        <Sans color={color("black60")} size="2">
           {label}
         </Sans>
-      </Flex>
+      </SuggestionItemContainer>
     </Link>
   )
 }
diff --git a/src/Components/Search/Suggestions/SuggestionItemContainer.tsx b/src/Components/Search/Suggestions/SuggestionItemContainer.tsx
@@ -0,0 +1,12 @@
+import { Flex } from "@artsy/palette"
+import React, { SFC } from "react"
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const SuggestionItemContainer: SFC<Props> = ({ children }) => (
+  <Flex flexDirection="column" justifyContent="center" height="62px" pl={3}>
+    {children}
+  </Flex>
+)
diff --git a/src/Components/Search/Suggestions/index.tsx b/src/Components/Search/Suggestions/index.tsx
@@ -73,7 +73,7 @@ export const SearchSuggestionsFragmentContainer = createFragmentContainer(
   graphql`
     fragment SuggestionsSearch_viewer on Viewer
       @argumentDefinitions(term: { type: "String!", defaultValue: "" }) {
-      search(query: $term, mode: AUTOSUGGEST, first: 10) {
+      search(query: $term, mode: AUTOSUGGEST, first: 5) {
         edges {
           node {
             displayLabel

diff --git a/src/Components/__stories__/Search.story.tsx b/src/Components/__stories__/Search.story.tsx
@@ -1,15 +1,88 @@
-import { Box } from "@artsy/palette"
+import { Box, Flex } from "@artsy/palette"
 import { ContextProvider } from "Artsy/SystemContext"
 import { SearchPreview } from "Components/Search/Previews"
 import { SearchBarQueryRenderer as SearchBar } from "Components/Search/SearchBar"
 import { SearchSuggestionsQueryRenderer as SearchSuggestions } from "Components/Search/Suggestions"
+import { SuggestionItem } from "Components/Search/Suggestions/SuggestionItem"
 import React from "react"
 import { storiesOf } from "storybook/storiesOf"
+import styled from "styled-components"
+
+const SearchBarContainer = styled(Box)`
+  flex-grow: 1;
+`
 
 storiesOf("Components/Search/SearchBar", module).add("Input", () => (
-  <ContextProvider>
-    <SearchBar />
-  </ContextProvider>
+  <>
+    <Flex>
+      <Box>Artsy Logo</Box>
+      <SearchBarContainer>
+        <ContextProvider>
+          <SearchBar />
+        </ContextProvider>
+      </SearchBarContainer>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+      <Box>Nav Item</Box>
+    </Flex>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nibh
+      quis ex imperdiet tristique eu non nisl. Nullam dignissim ex vel malesuada
+      tristique. Nullam leo urna, eleifend eu porttitor ut, fringilla non nibh.
+      Etiam id suscipit felis, vitae lacinia orci. Sed sagittis scelerisque
+      imperdiet. Sed tempus nulla in nunc malesuada, feugiat hendrerit dui
+      ornare. Sed pharetra erat orci, ac molestie turpis tincidunt non. Ut sit
+      amet lorem at lectus molestie hendrerit. Maecenas a risus vel nibh
+      lobortis bibendum. Fusce facilisis mauris a ex suscipit, in pretium leo
+      aliquam. Donec vitae malesuada metus. Pellentesque odio lacus, imperdiet
+      vel tincidunt dignissim, porttitor vel dui. Proin lacus mauris, tincidunt
+      ac risus ac, consectetur tincidunt lorem.
+    </p>
+    <p>
+      Nulla facilisi. Maecenas bibendum libero et massa euismod suscipit ut ac
+      justo. Vestibulum et ex vel neque ultrices porttitor ultricies id lacus.
+      Integer eget nisl consequat, auctor urna vitae, blandit ante. Sed
+      tincidunt pulvinar enim, non elementum nunc vehicula in. Fusce fermentum
+      mattis nunc pulvinar venenatis. Quisque imperdiet ex ac tellus
+      pellentesque, sed faucibus elit vestibulum. Curabitur et nisl ac massa
+      convallis blandit. Maecenas vitae feugiat ex. Morbi at arcu at arcu congue
+      varius eget in nisi. Aliquam tempor varius dui ut luctus.
+    </p>
+    <p>
+      Donec at lacus finibus tortor facilisis vestibulum vitae quis enim. Proin
+      blandit interdum aliquam. Ut tempus orci ut magna dictum, vitae vulputate
+      sem varius. Praesent at porttitor leo. Aliquam efficitur tincidunt
+      tincidunt. In auctor purus porta suscipit mattis. Aliquam ante tellus,
+      cursus quis augue at, commodo pulvinar ipsum. Aliquam erat volutpat.
+      Praesent nec laoreet tortor, ut congue metus. Nam vitae velit nec erat
+      egestas imperdiet. Vestibulum quam dolor, tempus a neque id, fermentum
+      ultricies tortor.
+    </p>
+    <p>
+      Maecenas aliquam massa non porttitor venenatis. Mauris a ante dictum lorem
+      eleifend pharetra. Integer maximus non nisi sit amet aliquet. Sed
+      consequat lacinia blandit. Aliquam ut maximus diam. Vivamus id eleifend
+      orci, at feugiat libero. Aenean volutpat, ex vel semper tincidunt, magna
+      est lobortis neque, quis cursus est velit sit amet diam. Curabitur in
+      elementum nisi. Etiam quis dui magna. Integer ornare elementum nunc sit
+      amet rutrum. Maecenas nisi mauris, gravida sit amet ipsum nec, rutrum
+      laoreet neque. Praesent nec pellentesque tortor. Cras pharetra ante
+      ullamcorper aliquet vehicula. Donec gravida in ante rutrum pellentesque.
+    </p>
+    <p>
+      Mauris viverra finibus neque. Etiam ac est massa. Pellentesque blandit id
+      ligula quis consectetur. Nunc posuere tempor velit, non semper turpis
+      cursus id. Donec sed vulputate mi, eu gravida nisi. Aenean sit amet
+      malesuada quam. Nulla et est laoreet, malesuada justo in, lacinia tellus.
+      In mattis euismod mattis.
+    </p>
+  </>
 ))
 
 storiesOf("Components/Search/Suggestions", module).add("Term: Andy", () => (
@@ -18,6 +91,29 @@ storiesOf("Components/Search/Suggestions", module).add("Term: Andy", () => (
   </ContextProvider>
 ))
 
+storiesOf("Components/Search/SuggestionItems", module).add("Some items", () => (
+  <ContextProvider>
+    <SuggestionItem
+      display="display one"
+      label="FirstItem"
+      query="a query"
+      href="/"
+    />
+    <SuggestionItem
+      display="display two"
+      label="label two"
+      query="a query"
+      href="/"
+    />
+    <SuggestionItem
+      display="display three"
+      label="label three"
+      query="a query"
+      href="/"
+    />
+  </ContextProvider>
+))
+
 storiesOf("Components/Search/Previews/Artist", module)
   .add("An artist with collections", () => (
     <Box width="450px" p={2}>