From afde48ba9ac6d6aa61273b4f704f869a10e3dd91 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Tue, 19 Feb 2019 16:39:25 -0600 Subject: [PATCH 01/12] Add a more realistic search bar story; begin styling integrated search bar components. --- src/Components/Search/SearchBar.tsx | 62 ++++++++++++++---- src/Components/__stories__/Search.story.tsx | 69 +++++++++++++++++++-- 2 files changed, 114 insertions(+), 17 deletions(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index 0cd35f3c10..f942c698f2 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -49,6 +49,43 @@ interface State { focused: boolean } +const AutosuggestWrapper = styled(Box)` + background: red; + position: relative; +` + +const SuggestionListWrapper = styled(Box)` + background-color: green; + position: absolute; + left: 0; + right: 0; +` + +const PreviewListWrapper = styled(Box)` + background-color: blue; + position: absolute; + left: 100%; +` + +const SuggestionContainer = ({ + children, + containerProps, + focused, + query, + preview, +}) => { + return ( + + + {children} + + + {preview} + + + ) +} + export class SearchBar extends Component { public input: HTMLInputElement @@ -146,20 +183,19 @@ export class SearchBar extends Component { ) } + + const props = { + children, + containerProps, + focused, + query, + preview: this.renderPreview(), + } + return ( - - - - - {emptyState} - {children} - - - - {this.renderPreview()} - - - + + {emptyState || children} + ) } diff --git a/src/Components/__stories__/Search.story.tsx b/src/Components/__stories__/Search.story.tsx index a9b9d75d9d..e2750e1d80 100644 --- a/src/Components/__stories__/Search.story.tsx +++ b/src/Components/__stories__/Search.story.tsx @@ -1,4 +1,4 @@ -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" @@ -7,9 +7,70 @@ import React from "react" import { storiesOf } from "storybook/storiesOf" storiesOf("Components/Search/SearchBar", module).add("Input", () => ( - - - + <> + + Artsy Logo + + + + + + Nav Item + Nav Item + Nav Item + +

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+ )) storiesOf("Components/Search/Suggestions", module).add("Term: Andy", () => ( From e4762eb7f0e1f4502983ca4c1e5ff8317b544b2f Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Tue, 19 Feb 2019 16:51:04 -0600 Subject: [PATCH 02/12] Constrain widths of suggestion & preview panes --- src/Components/Search/SearchBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index f942c698f2..356d721481 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -76,10 +76,10 @@ const SuggestionContainer = ({ }) => { return ( - + {children} - + {preview} From 212f2dd441485222d2f54cc01634b12771b1410b Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Tue, 19 Feb 2019 20:25:48 -0600 Subject: [PATCH 03/12] Style autosuggest results --- src/Components/Search/SearchBar.tsx | 47 ++++++++++----------- src/Components/__stories__/Search.story.tsx | 15 ++++++- 2 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index 356d721481..a2a6fdc449 100644 --- 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" @@ -50,38 +51,34 @@ interface State { } const AutosuggestWrapper = styled(Box)` - background: red; position: relative; ` -const SuggestionListWrapper = styled(Box)` - background-color: green; +const ResultsWrapper = styled(Box)` + width: calc(100% + 450px); + background-color: ${colors.white}; + display: flex; + box-shadow: 1px 1px 6px ${colors.black30}; position: absolute; - left: 0; - right: 0; ` -const PreviewListWrapper = styled(Box)` - background-color: blue; - position: absolute; - left: 100%; -` - -const SuggestionContainer = ({ - children, - containerProps, - focused, - query, - preview, -}) => { +const SuggestionContainer = ({ children, containerProps, preview }) => { return ( - - - {children} - - - {preview} - + + + + + {children} + + + + {preview} + + ) } diff --git a/src/Components/__stories__/Search.story.tsx b/src/Components/__stories__/Search.story.tsx index e2750e1d80..47db87a387 100644 --- a/src/Components/__stories__/Search.story.tsx +++ b/src/Components/__stories__/Search.story.tsx @@ -5,16 +5,27 @@ import { SearchBarQueryRenderer as SearchBar } from "Components/Search/SearchBar import { SearchSuggestionsQueryRenderer as SearchSuggestions } from "Components/Search/Suggestions" 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", () => ( <> Artsy Logo - + - + + Nav Item + Nav Item + Nav Item + Nav Item + Nav Item + Nav Item Nav Item Nav Item Nav Item From cf76901170f75b5d9c808c0e4726d4a48f01c8c8 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Tue, 19 Feb 2019 20:29:43 -0600 Subject: [PATCH 04/12] Add gray separator --- src/Components/Search/SearchBar.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index a2a6fdc449..629567111f 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -62,6 +62,10 @@ const ResultsWrapper = styled(Box)` position: absolute; ` +const SuggestionsWrapper = styled(Box)` + border-right: 1px solid ${colors.grayRegular}; +` + const SuggestionContainer = ({ children, containerProps, preview }) => { return ( { {...containerProps} > - + {children} - + {preview} From f711ccfd79220e3838e62ea05dbe01cc7b1d6879 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 10:05:04 -0600 Subject: [PATCH 05/12] Update suggestion/preview results counts to match comps --- .../Grids/ArtistSearch/RelatedArtworks.tsx | 2 +- .../Previews/Grids/ArtistSearch/index.tsx | 2 +- .../Previews/Grids/MerchandisableArtworks.tsx | 2 +- src/Components/Search/SearchBar.tsx | 2 +- src/Components/Search/Suggestions/index.tsx | 2 +- .../ArtistSearchPreviewQuery.graphql.ts | 21 ++++++++++++------- .../ArtistSearchPreview_viewer.graphql.ts | 13 +++++++++--- ...chandisableArtworksPreviewQuery.graphql.ts | 8 +++---- .../MerchandisableArtworks_viewer.graphql.ts | 6 +++--- .../RelatedArtworksPreview_viewer.graphql.ts | 6 +++--- .../SearchBarRefetchQuery.graphql.ts | 6 +++--- .../SearchBarSuggestQuery.graphql.ts | 6 +++--- .../SearchBarTestQuery.graphql.ts | 6 +++--- src/__generated__/SearchBar_viewer.graphql.ts | 4 ++-- .../SuggestionsSearchQuery.graphql.ts | 6 +++--- .../SuggestionsSearch_viewer.graphql.ts | 4 ++-- src/__generated__/TestsQuery.graphql.ts | 21 ++++++++++++------- 17 files changed, 69 insertions(+), 48 deletions(-) diff --git a/src/Components/Search/Previews/Grids/ArtistSearch/RelatedArtworks.tsx b/src/Components/Search/Previews/Grids/ArtistSearch/RelatedArtworks.tsx index 058dd86323..28efe67c7f 100644 --- 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 index 4441ee9c99..29a289e828 100644 --- 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 index 10305631a7..a840a78194 100644 --- 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/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index 629567111f..b13caf058c 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -287,7 +287,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/index.tsx b/src/Components/Search/Suggestions/index.tsx index 870f43cf8e..a848e8452f 100644 --- 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/__generated__/ArtistSearchPreviewQuery.graphql.ts b/src/__generated__/ArtistSearchPreviewQuery.graphql.ts index b9fbe289e5..1282f874fc 100644 --- a/src/__generated__/ArtistSearchPreviewQuery.graphql.ts +++ b/src/__generated__/ArtistSearchPreviewQuery.graphql.ts @@ -29,7 +29,7 @@ query ArtistSearchPreviewQuery( fragment ArtistSearchPreview_viewer_1IQPhv on Viewer { artist(id: $entityID) { id - marketingCollections { + marketingCollections(size: 6) { title ...MarketingCollectionsPreview_marketingCollections __id: id @@ -49,7 +49,7 @@ fragment MarketingCollectionsPreview_marketingCollections on MarketingCollection fragment RelatedArtworksPreview_viewer_1IQPhv on Viewer { filter_artworks(aggregations: [TOTAL], sort: "-decayed_merch", artist_id: $entityID) { __id - artworks_connection(first: 8) { + artworks_connection(first: 10) { edges { node { ...PreviewGridItem_artwork @@ -102,7 +102,7 @@ return { "operationKind": "query", "name": "ArtistSearchPreviewQuery", "id": null, - "text": "query ArtistSearchPreviewQuery(\n $entityID: String!\n) {\n viewer {\n ...ArtistSearchPreview_viewer_1IQPhv\n }\n}\n\nfragment ArtistSearchPreview_viewer_1IQPhv on Viewer {\n artist(id: $entityID) {\n id\n marketingCollections {\n title\n ...MarketingCollectionsPreview_marketingCollections\n __id: id\n }\n __id\n }\n ...RelatedArtworksPreview_viewer_1IQPhv\n}\n\nfragment MarketingCollectionsPreview_marketingCollections on MarketingCollection {\n title\n slug\n headerImage\n __id: id\n}\n\nfragment RelatedArtworksPreview_viewer_1IQPhv on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\", artist_id: $entityID) {\n __id\n artworks_connection(first: 8) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", + "text": "query ArtistSearchPreviewQuery(\n $entityID: String!\n) {\n viewer {\n ...ArtistSearchPreview_viewer_1IQPhv\n }\n}\n\nfragment ArtistSearchPreview_viewer_1IQPhv on Viewer {\n artist(id: $entityID) {\n id\n marketingCollections(size: 6) {\n title\n ...MarketingCollectionsPreview_marketingCollections\n __id: id\n }\n __id\n }\n ...RelatedArtworksPreview_viewer_1IQPhv\n}\n\nfragment MarketingCollectionsPreview_marketingCollections on MarketingCollection {\n title\n slug\n headerImage\n __id: id\n}\n\nfragment RelatedArtworksPreview_viewer_1IQPhv on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\", artist_id: $entityID) {\n __id\n artworks_connection(first: 10) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -177,8 +177,15 @@ return { "kind": "LinkedField", "alias": null, "name": "marketingCollections", - "storageKey": null, - "args": null, + "storageKey": "marketingCollections(size:6)", + "args": [ + { + "kind": "Literal", + "name": "size", + "value": 6, + "type": "Int" + } + ], "concreteType": "MarketingCollection", "plural": true, "selections": [ @@ -244,12 +251,12 @@ return { "kind": "LinkedField", "alias": null, "name": "artworks_connection", - "storageKey": "artworks_connection(first:8)", + "storageKey": "artworks_connection(first:10)", "args": [ { "kind": "Literal", "name": "first", - "value": 8, + "value": 10, "type": "Int" } ], diff --git a/src/__generated__/ArtistSearchPreview_viewer.graphql.ts b/src/__generated__/ArtistSearchPreview_viewer.graphql.ts index 57fcf98a9d..7ef6ee0228 100644 --- a/src/__generated__/ArtistSearchPreview_viewer.graphql.ts +++ b/src/__generated__/ArtistSearchPreview_viewer.graphql.ts @@ -60,8 +60,15 @@ const node: ConcreteFragment = { "kind": "LinkedField", "alias": null, "name": "marketingCollections", - "storageKey": null, - "args": null, + "storageKey": "marketingCollections(size:6)", + "args": [ + { + "kind": "Literal", + "name": "size", + "value": 6, + "type": "Int" + } + ], "concreteType": "MarketingCollection", "plural": true, "selections": [ @@ -109,5 +116,5 @@ const node: ConcreteFragment = { } ] }; -(node as any).hash = '2fd6cd7a9f843faec6dd4fe0c43ac857'; +(node as any).hash = '75fa320234ceaf45c234aa38bdf9385d'; export default node; diff --git a/src/__generated__/MerchandisableArtworksPreviewQuery.graphql.ts b/src/__generated__/MerchandisableArtworksPreviewQuery.graphql.ts index de43aa175e..f8f412b818 100644 --- a/src/__generated__/MerchandisableArtworksPreviewQuery.graphql.ts +++ b/src/__generated__/MerchandisableArtworksPreviewQuery.graphql.ts @@ -25,7 +25,7 @@ query MerchandisableArtworksPreviewQuery { 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 @@ -63,7 +63,7 @@ return { "operationKind": "query", "name": "MerchandisableArtworksPreviewQuery", "id": null, - "text": "query MerchandisableArtworksPreviewQuery {\n viewer {\n ...MerchandisableArtworks_viewer\n }\n}\n\nfragment MerchandisableArtworks_viewer on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\") {\n __id\n artworks_connection(first: 8) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", + "text": "query MerchandisableArtworksPreviewQuery {\n viewer {\n ...MerchandisableArtworks_viewer\n }\n}\n\nfragment MerchandisableArtworks_viewer on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\") {\n __id\n artworks_connection(first: 10) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -133,12 +133,12 @@ return { "kind": "LinkedField", "alias": null, "name": "artworks_connection", - "storageKey": "artworks_connection(first:8)", + "storageKey": "artworks_connection(first:10)", "args": [ { "kind": "Literal", "name": "first", - "value": 8, + "value": 10, "type": "Int" } ], diff --git a/src/__generated__/MerchandisableArtworks_viewer.graphql.ts b/src/__generated__/MerchandisableArtworks_viewer.graphql.ts index 6c85aef4d5..48b947ca99 100644 --- a/src/__generated__/MerchandisableArtworks_viewer.graphql.ts +++ b/src/__generated__/MerchandisableArtworks_viewer.graphql.ts @@ -64,12 +64,12 @@ return { "kind": "LinkedField", "alias": null, "name": "artworks_connection", - "storageKey": "artworks_connection(first:8)", + "storageKey": "artworks_connection(first:10)", "args": [ { "kind": "Literal", "name": "first", - "value": 8, + "value": 10, "type": "Int" } ], @@ -111,5 +111,5 @@ return { ] }; })(); -(node as any).hash = 'f1f4bf6587c8e5724373d845ef754f55'; +(node as any).hash = '79905c4eb172da9b968160702df1e1a8'; export default node; diff --git a/src/__generated__/RelatedArtworksPreview_viewer.graphql.ts b/src/__generated__/RelatedArtworksPreview_viewer.graphql.ts index c3a5dcab35..a04131a80d 100644 --- a/src/__generated__/RelatedArtworksPreview_viewer.graphql.ts +++ b/src/__generated__/RelatedArtworksPreview_viewer.graphql.ts @@ -77,12 +77,12 @@ return { "kind": "LinkedField", "alias": null, "name": "artworks_connection", - "storageKey": "artworks_connection(first:8)", + "storageKey": "artworks_connection(first:10)", "args": [ { "kind": "Literal", "name": "first", - "value": 8, + "value": 10, "type": "Int" } ], @@ -124,5 +124,5 @@ return { ] }; })(); -(node as any).hash = '43f99049d331104fc425d84e94ef612f'; +(node as any).hash = '11cb0e787561ef8b4422c184212a35f7'; export default node; diff --git a/src/__generated__/SearchBarRefetchQuery.graphql.ts b/src/__generated__/SearchBarRefetchQuery.graphql.ts index c97e6ba0f4..5b20fa735e 100644 --- a/src/__generated__/SearchBarRefetchQuery.graphql.ts +++ b/src/__generated__/SearchBarRefetchQuery.graphql.ts @@ -29,7 +29,7 @@ query SearchBarRefetchQuery( } fragment SearchBar_viewer_2Mejjw on Viewer { - search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) { + search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) { edges { node { __typename @@ -68,7 +68,7 @@ return { "operationKind": "query", "name": "SearchBarRefetchQuery", "id": null, - "text": "query SearchBarRefetchQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", + "text": "query SearchBarRefetchQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -136,7 +136,7 @@ return { { "kind": "Literal", "name": "first", - "value": 7, + "value": 5, "type": "Int" }, { diff --git a/src/__generated__/SearchBarSuggestQuery.graphql.ts b/src/__generated__/SearchBarSuggestQuery.graphql.ts index 52199fa317..13e9dbf825 100644 --- a/src/__generated__/SearchBarSuggestQuery.graphql.ts +++ b/src/__generated__/SearchBarSuggestQuery.graphql.ts @@ -29,7 +29,7 @@ query SearchBarSuggestQuery( } fragment SearchBar_viewer_2Mejjw on Viewer { - search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) { + search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) { edges { node { __typename @@ -68,7 +68,7 @@ return { "operationKind": "query", "name": "SearchBarSuggestQuery", "id": null, - "text": "query SearchBarSuggestQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", + "text": "query SearchBarSuggestQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -136,7 +136,7 @@ return { { "kind": "Literal", "name": "first", - "value": 7, + "value": 5, "type": "Int" }, { diff --git a/src/__generated__/SearchBarTestQuery.graphql.ts b/src/__generated__/SearchBarTestQuery.graphql.ts index 5a1d015a05..e31562472f 100644 --- a/src/__generated__/SearchBarTestQuery.graphql.ts +++ b/src/__generated__/SearchBarTestQuery.graphql.ts @@ -29,7 +29,7 @@ query SearchBarTestQuery( } fragment SearchBar_viewer_2Mejjw on Viewer { - search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) { + search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) { edges { node { __typename @@ -68,7 +68,7 @@ return { "operationKind": "query", "name": "SearchBarTestQuery", "id": null, - "text": "query SearchBarTestQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 7) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", + "text": "query SearchBarTestQuery(\n $term: String!\n $hasTerm: Boolean!\n) {\n viewer {\n ...SearchBar_viewer_2Mejjw\n }\n}\n\nfragment SearchBar_viewer_2Mejjw on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 5) @include(if: $hasTerm) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n id\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -136,7 +136,7 @@ return { { "kind": "Literal", "name": "first", - "value": 7, + "value": 5, "type": "Int" }, { diff --git a/src/__generated__/SearchBar_viewer.graphql.ts b/src/__generated__/SearchBar_viewer.graphql.ts index a20b62b93e..e5fc42163e 100644 --- a/src/__generated__/SearchBar_viewer.graphql.ts +++ b/src/__generated__/SearchBar_viewer.graphql.ts @@ -53,7 +53,7 @@ const node: ConcreteFragment = { { "kind": "Literal", "name": "first", - "value": 7, + "value": 5, "type": "Int" }, { @@ -141,5 +141,5 @@ const node: ConcreteFragment = { } ] }; -(node as any).hash = 'd5c878b4c5fc01c702d6fe74e63075b9'; +(node as any).hash = 'e649d07e62973aefbb0d83d8c32d5031'; export default node; diff --git a/src/__generated__/SuggestionsSearchQuery.graphql.ts b/src/__generated__/SuggestionsSearchQuery.graphql.ts index dd620e2862..3e6ecf98a0 100644 --- a/src/__generated__/SuggestionsSearchQuery.graphql.ts +++ b/src/__generated__/SuggestionsSearchQuery.graphql.ts @@ -27,7 +27,7 @@ query SuggestionsSearchQuery( } fragment SuggestionsSearch_viewer_4hh6ED on Viewer { - search(query: $term, mode: AUTOSUGGEST, first: 10) { + search(query: $term, mode: AUTOSUGGEST, first: 5) { edges { node { __typename @@ -59,7 +59,7 @@ return { "operationKind": "query", "name": "SuggestionsSearchQuery", "id": null, - "text": "query SuggestionsSearchQuery(\n $term: String!\n) {\n viewer {\n ...SuggestionsSearch_viewer_4hh6ED\n }\n}\n\nfragment SuggestionsSearch_viewer_4hh6ED on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 10) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", + "text": "query SuggestionsSearchQuery(\n $term: String!\n) {\n viewer {\n ...SuggestionsSearch_viewer_4hh6ED\n }\n}\n\nfragment SuggestionsSearch_viewer_4hh6ED on Viewer {\n search(query: $term, mode: AUTOSUGGEST, first: 5) {\n edges {\n node {\n __typename\n displayLabel\n href\n ... on SearchableItem {\n searchableType\n }\n ... on Node {\n __id\n }\n }\n }\n }\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -116,7 +116,7 @@ return { { "kind": "Literal", "name": "first", - "value": 10, + "value": 5, "type": "Int" }, { diff --git a/src/__generated__/SuggestionsSearch_viewer.graphql.ts b/src/__generated__/SuggestionsSearch_viewer.graphql.ts index f383f6173b..bffca79c23 100644 --- a/src/__generated__/SuggestionsSearch_viewer.graphql.ts +++ b/src/__generated__/SuggestionsSearch_viewer.graphql.ts @@ -41,7 +41,7 @@ const node: ConcreteFragment = { { "kind": "Literal", "name": "first", - "value": 10, + "value": 5, "type": "Int" }, { @@ -120,5 +120,5 @@ const node: ConcreteFragment = { } ] }; -(node as any).hash = 'b2d4eb6ae95ade92e1a3ade95a81c702'; +(node as any).hash = '6a778e464a7027583659259597cce94e'; export default node; diff --git a/src/__generated__/TestsQuery.graphql.ts b/src/__generated__/TestsQuery.graphql.ts index 0350541fbc..b8814416a6 100644 --- a/src/__generated__/TestsQuery.graphql.ts +++ b/src/__generated__/TestsQuery.graphql.ts @@ -29,7 +29,7 @@ query TestsQuery( fragment ArtistSearchPreview_viewer_1IQPhv on Viewer { artist(id: $entityID) { id - marketingCollections { + marketingCollections(size: 6) { title ...MarketingCollectionsPreview_marketingCollections __id: id @@ -49,7 +49,7 @@ fragment MarketingCollectionsPreview_marketingCollections on MarketingCollection fragment RelatedArtworksPreview_viewer_1IQPhv on Viewer { filter_artworks(aggregations: [TOTAL], sort: "-decayed_merch", artist_id: $entityID) { __id - artworks_connection(first: 8) { + artworks_connection(first: 10) { edges { node { ...PreviewGridItem_artwork @@ -102,7 +102,7 @@ return { "operationKind": "query", "name": "TestsQuery", "id": null, - "text": "query TestsQuery(\n $entityID: String!\n) {\n viewer {\n ...ArtistSearchPreview_viewer_1IQPhv\n }\n}\n\nfragment ArtistSearchPreview_viewer_1IQPhv on Viewer {\n artist(id: $entityID) {\n id\n marketingCollections {\n title\n ...MarketingCollectionsPreview_marketingCollections\n __id: id\n }\n __id\n }\n ...RelatedArtworksPreview_viewer_1IQPhv\n}\n\nfragment MarketingCollectionsPreview_marketingCollections on MarketingCollection {\n title\n slug\n headerImage\n __id: id\n}\n\nfragment RelatedArtworksPreview_viewer_1IQPhv on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\", artist_id: $entityID) {\n __id\n artworks_connection(first: 8) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", + "text": "query TestsQuery(\n $entityID: String!\n) {\n viewer {\n ...ArtistSearchPreview_viewer_1IQPhv\n }\n}\n\nfragment ArtistSearchPreview_viewer_1IQPhv on Viewer {\n artist(id: $entityID) {\n id\n marketingCollections(size: 6) {\n title\n ...MarketingCollectionsPreview_marketingCollections\n __id: id\n }\n __id\n }\n ...RelatedArtworksPreview_viewer_1IQPhv\n}\n\nfragment MarketingCollectionsPreview_marketingCollections on MarketingCollection {\n title\n slug\n headerImage\n __id: id\n}\n\nfragment RelatedArtworksPreview_viewer_1IQPhv on Viewer {\n filter_artworks(aggregations: [TOTAL], sort: \"-decayed_merch\", artist_id: $entityID) {\n __id\n artworks_connection(first: 10) {\n edges {\n node {\n ...PreviewGridItem_artwork\n __id\n }\n }\n }\n }\n}\n\nfragment PreviewGridItem_artwork on Artwork {\n href\n title\n artist_names\n image {\n cropped(width: 40, height: 40) {\n url\n }\n }\n date\n __id\n}\n", "metadata": {}, "fragment": { "kind": "Fragment", @@ -177,8 +177,15 @@ return { "kind": "LinkedField", "alias": null, "name": "marketingCollections", - "storageKey": null, - "args": null, + "storageKey": "marketingCollections(size:6)", + "args": [ + { + "kind": "Literal", + "name": "size", + "value": 6, + "type": "Int" + } + ], "concreteType": "MarketingCollection", "plural": true, "selections": [ @@ -244,12 +251,12 @@ return { "kind": "LinkedField", "alias": null, "name": "artworks_connection", - "storageKey": "artworks_connection(first:8)", + "storageKey": "artworks_connection(first:10)", "args": [ { "kind": "Literal", "name": "first", - "value": 8, + "value": 10, "type": "Int" } ], From a2a52cc85aed7cefee37932648013ba9d453cf9f Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 16:19:30 -0600 Subject: [PATCH 06/12] Small visual changes to search-bar, in prep for integration with force --- src/Components/Search/SearchBar.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index b13caf058c..4ac7e30437 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -58,7 +58,7 @@ const ResultsWrapper = styled(Box)` width: calc(100% + 450px); background-color: ${colors.white}; display: flex; - box-shadow: 1px 1px 6px ${colors.black30}; + border: 1px solid ${colors.grayRegular}; position: absolute; ` @@ -73,7 +73,7 @@ const SuggestionContainer = ({ children, containerProps, preview }) => { flexDirection={["column", "row"]} {...containerProps} > - + {children} @@ -175,6 +175,9 @@ export class SearchBar extends Component { { xs } ) => { const { focused } = this.state + if (!focused) { + return null + } let emptyState = null if (!xs && !query && focused) { From 848d7bc5b76956179f3f76a1455c99d6eaeb7231 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 16:31:44 -0600 Subject: [PATCH 07/12] Padding for preview pane --- src/Components/Search/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index 4ac7e30437..1784c7c6b6 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -79,7 +79,7 @@ const SuggestionContainer = ({ children, containerProps, preview }) => { {children} - + {preview} From 2c85cb86a3257b636e5f218539e455ddabbd0d2b Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 17:22:48 -0600 Subject: [PATCH 08/12] Style suggestion items --- src/Components/Search/SearchBar.tsx | 5 ++-- .../Search/Suggestions/SuggestionItem.tsx | 16 ++++++------- .../Suggestions/SuggestionItemContainer.tsx | 12 ++++++++++ src/Components/__stories__/Search.story.tsx | 24 +++++++++++++++++++ 4 files changed, 45 insertions(+), 12 deletions(-) create mode 100644 src/Components/Search/Suggestions/SuggestionItemContainer.tsx diff --git a/src/Components/Search/SearchBar.tsx b/src/Components/Search/SearchBar.tsx index 1784c7c6b6..19e80b9242 100644 --- a/src/Components/Search/SearchBar.tsx +++ b/src/Components/Search/SearchBar.tsx @@ -19,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") @@ -182,9 +183,7 @@ export class SearchBar extends Component { let emptyState = null if (!xs && !query && focused) { emptyState = ( - - {PLACEHOLDER} - + {PLACEHOLDER} ) } diff --git a/src/Components/Search/Suggestions/SuggestionItem.tsx b/src/Components/Search/Suggestions/SuggestionItem.tsx index ec43f1f056..e04f6d599b 100644 --- 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 @@ -13,9 +14,7 @@ export const SuggestionItem: SFC = ({ href, display, label, query }) => { if (label === "FirstItem") { return ( - - Search "{query}" - + Search "{query}" ) } @@ -23,19 +22,18 @@ export const SuggestionItem: SFC = ({ href, display, label, query }) => { const matches = match(display, query) const parts = parse(display, matches) - // TODO: Center text vertically return ( - - + + {parts.map(({ highlight, text }, index) => { return highlight ? {text} : text })} - + {label} - + ) } diff --git a/src/Components/Search/Suggestions/SuggestionItemContainer.tsx b/src/Components/Search/Suggestions/SuggestionItemContainer.tsx new file mode 100644 index 0000000000..6631d1b778 --- /dev/null +++ b/src/Components/Search/Suggestions/SuggestionItemContainer.tsx @@ -0,0 +1,12 @@ +import { Flex } from "@artsy/palette" +import React, { SFC } from "react" + +interface Props { + children: JSX.Element[] | string[] | string +} + +export const SuggestionItemContainer: SFC = ({ children }) => ( + + {children} + +) diff --git a/src/Components/__stories__/Search.story.tsx b/src/Components/__stories__/Search.story.tsx index 47db87a387..cebad8e82d 100644 --- a/src/Components/__stories__/Search.story.tsx +++ b/src/Components/__stories__/Search.story.tsx @@ -3,6 +3,7 @@ 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" @@ -90,6 +91,29 @@ storiesOf("Components/Search/Suggestions", module).add("Term: Andy", () => ( )) +storiesOf("Components/Search/SuggestionItems", module).add("Some items", () => ( + + + + + +)) + storiesOf("Components/Search/Previews/Artist", module) .add("An artist with collections", () => ( From e5ac6856f94b42ab945d9cba7c4fc1b6a3ad49d9 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 19:45:58 -0600 Subject: [PATCH 09/12] set text-overflow:ellipsis on artist names in preview items --- .../Search/Previews/Grids/PreviewGridItem.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Components/Search/Previews/Grids/PreviewGridItem.tsx b/src/Components/Search/Previews/Grids/PreviewGridItem.tsx index 67d133dc47..4b3dca7c2e 100644 --- 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; @@ -42,12 +42,15 @@ export const PreviewGridItem: React.SFC = ({ - + <OverflowEllipsis size="2" italic> {artwork.title}, {artwork.date} - - + + {artwork.artist_names} - + From ff5225f4b585a3724a680fef8a0c311c1340ff5d Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Wed, 20 Feb 2019 19:55:48 -0600 Subject: [PATCH 10/12] Specify color on suggestion item links, so that they aren't ever underlined. --- src/Components/Search/Suggestions/SuggestionItem.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Components/Search/Suggestions/SuggestionItem.tsx b/src/Components/Search/Suggestions/SuggestionItem.tsx index e04f6d599b..429bfc5137 100644 --- a/src/Components/Search/Suggestions/SuggestionItem.tsx +++ b/src/Components/Search/Suggestions/SuggestionItem.tsx @@ -12,8 +12,11 @@ interface Props { export const SuggestionItem: SFC = ({ 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 ( - + Search "{query}" ) @@ -23,7 +26,10 @@ export const SuggestionItem: SFC = ({ href, display, label, query }) => { const parts = parse(display, matches) return ( - + // `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. + {parts.map(({ highlight, text }, index) => { From b1794b746c7a6f0d9dc15aebdc0abca030352c7a Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Thu, 21 Feb 2019 09:21:55 -0600 Subject: [PATCH 11/12] Use React.ReactNode as a type for {children} --- src/Components/Search/Suggestions/SuggestionItemContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Search/Suggestions/SuggestionItemContainer.tsx b/src/Components/Search/Suggestions/SuggestionItemContainer.tsx index 6631d1b778..477926e837 100644 --- a/src/Components/Search/Suggestions/SuggestionItemContainer.tsx +++ b/src/Components/Search/Suggestions/SuggestionItemContainer.tsx @@ -2,7 +2,7 @@ import { Flex } from "@artsy/palette" import React, { SFC } from "react" interface Props { - children: JSX.Element[] | string[] | string + children: React.ReactNode } export const SuggestionItemContainer: SFC = ({ children }) => ( From 84b9595e2757513d2e3afc95d9ef5e1cda9dad53 Mon Sep 17 00:00:00 2001 From: Steven Hicks Date: Thu, 21 Feb 2019 10:35:35 -0600 Subject: [PATCH 12/12] Wrap preview images in a with static width/height to keep things from dancing while loading --- .../Search/Previews/Grids/PreviewGridItem.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/Components/Search/Previews/Grids/PreviewGridItem.tsx b/src/Components/Search/Previews/Grids/PreviewGridItem.tsx index 4b3dca7c2e..2c6e47ddf7 100644 --- a/src/Components/Search/Previews/Grids/PreviewGridItem.tsx +++ b/src/Components/Search/Previews/Grids/PreviewGridItem.tsx @@ -28,17 +28,15 @@ export const PreviewGridItem: React.SFC = ({ return ( - {imageUrl ? ( - {`${artwork.title} - ) : ( - -   - - )} + + {imageUrl && ( + {`${artwork.title} + )} +