🚩 Magazine tags added to Filter (#1226)

equinor · Aug 22, 2022 · dd97b17 · dd97b17
1 parent d494d08
commit dd97b17
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 39 deletions.
diff --git a/studio/schemas/textSnippets.ts b/studio/schemas/textSnippets.ts
@@ -634,6 +634,11 @@ const snippets: textSnippet = {
     defaultValue: 'Stories',
     group: groups.magazine,
   },
+  magazine_tag_filter: {
+    title: 'Magazine filter heading',
+    defaultValue: 'Magazine Tag',
+    group: groups.magazine,
+  },
   stock_nyse_time_delay_message: {
     title: 'Stock API: NYSE time delay message',
     defaultValue: 'at least 20 minutes delayed',

diff --git a/web/pageComponents/newsRoom/Filters.tsx b/web/pageComponents/newsRoom/Filters.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Accordion, AccordionItem, AccordionPanel } from '@reach/accordion'
 import { useIntl } from 'react-intl'
 import styled from 'styled-components'
-import FilterHeader from '././FilterHeader'
+import FilterHeader from './FilterHeader'
 import { RefinementList } from './RefinementList'
 import UncontrolledSearchBox from './UncontrolledSearchBox'
 import { isGlobalDevelopment } from '../../common/helpers/datasetHelpers'
@@ -30,9 +30,10 @@ const StyledFilters = styled.div`
 type FiltersProps = {
   hasFilters: boolean
   hasSearch: boolean
+  header: string
 }
 
-const Filters = ({ hasFilters, hasSearch, ...rest }: FiltersProps) => {
+const Filters = ({ hasFilters, hasSearch, header, ...rest }: FiltersProps) => {
   const [indices, setIndices] = useState<number[]>([])
   const intl = useIntl()
 
@@ -52,40 +53,52 @@ const Filters = ({ hasFilters, hasSearch, ...rest }: FiltersProps) => {
         </SearchBoxContainer>
       )}
 
-      {hasFilters && (
-        <StyledAccordion id="filters" index={indices} onChange={toggleItem}>
-          <AccordionItem>
-            <FilterHeader label={intl.formatMessage({ id: 'newsroom_topic_filter', defaultMessage: 'Topics' })} />
-            <AccordionPanel>
-              <RefinementList /*  sortBy={['name:asc']} */ limit={50} attribute="topicTags" />
-            </AccordionPanel>
-          </AccordionItem>
-          <AccordionItem>
-            <FilterHeader label={intl.formatMessage({ id: 'newsroom_country_filter', defaultMessage: 'Country' })} />
-            <AccordionPanel>
-              <RefinementList /* sortBy={['name:asc']} */ attribute="countryTags" />
-            </AccordionPanel>
-          </AccordionItem>
-          {isGlobalDevelopment && (
+      {hasFilters &&
+        (isGlobalDevelopment && header === 'magazine' ? (
+          <StyledAccordion id="filters" index={indices} onChange={toggleItem}>
             <AccordionItem>
               <FilterHeader
-                label={intl.formatMessage({ id: 'newsroom_local_market_filter', defaultMessage: 'Local Market' })}
+                label={intl.formatMessage({ id: 'magazine_tag_filter', defaultMessage: 'Magazine Tags' })}
               />
               <AccordionPanel>
-                <RefinementList /* sortBy={['name:asc']} */ attribute="localNewsTag" />
+                <RefinementList /* sortBy={['name:asc']} */ attribute="magazineTags" />
               </AccordionPanel>
             </AccordionItem>
-          )}
-          <AccordionItem>
-            <FilterHeader
-              label={intl.formatMessage({ id: 'newsroom_year_filter', defaultMessage: 'Year' })}
-            ></FilterHeader>
-            <AccordionPanel>
-              <RefinementList sortBy={['name:desc']} attribute="year" limit={50} />
-            </AccordionPanel>
-          </AccordionItem>
-        </StyledAccordion>
-      )}
+          </StyledAccordion>
+        ) : (
+          <StyledAccordion id="filters" index={indices} onChange={toggleItem}>
+            <AccordionItem>
+              <FilterHeader label={intl.formatMessage({ id: 'newsroom_topic_filter', defaultMessage: 'Topics' })} />
+              <AccordionPanel>
+                <RefinementList /*  sortBy={['name:asc']} */ limit={50} attribute="topicTags" />
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+              <FilterHeader label={intl.formatMessage({ id: 'newsroom_country_filter', defaultMessage: 'Country' })} />
+              <AccordionPanel>
+                <RefinementList /* sortBy={['name:asc']} */ attribute="countryTags" />
+              </AccordionPanel>
+            </AccordionItem>
+            {isGlobalDevelopment && (
+              <AccordionItem>
+                <FilterHeader
+                  label={intl.formatMessage({ id: 'newsroom_local_market_filter', defaultMessage: 'Local Market' })}
+                />
+                <AccordionPanel>
+                  <RefinementList /* sortBy={['name:asc']} */ attribute="localNewsTag" />
+                </AccordionPanel>
+              </AccordionItem>
+            )}
+            <AccordionItem>
+              <FilterHeader
+                label={intl.formatMessage({ id: 'newsroom_year_filter', defaultMessage: 'Year' })}
+              ></FilterHeader>
+              <AccordionPanel>
+                <RefinementList sortBy={['name:desc']} attribute="year" limit={50} />
+              </AccordionPanel>
+            </AccordionItem>
+          </StyledAccordion>
+        ))}
     </StyledFilters>
   )
 }

diff --git a/web/pageComponents/newsRoom/NewsList.tsx → web/pageComponents/newsRoom/List.tsx b/web/pageComponents/newsRoom/NewsList.tsx → web/pageComponents/newsRoom/List.tsx
@@ -5,7 +5,7 @@ import { Heading } from '@components'
 import { Pagination } from '../shared/search/pagination/Pagination'
 import { FormattedMessage } from 'react-intl'
 
-const StyledNewsList = styled.div`
+const StyledList = styled.div`
   padding: 0 var(--space-large);
 
   @media (min-width: 800px) {
@@ -27,16 +27,16 @@ const HeaderText = ({ header }: { header: string }) => {
   return <FormattedMessage id="newsroom_newslist_header" defaultMessage="News" />
 }
 
-const NewsList = ({ header, ...rest }: { header: string }) => {
+const List = ({ header, ...rest }: { header: string }) => {
   return (
-    <StyledNewsList {...rest}>
+    <StyledList {...rest}>
       <Heading level="h2" size="lg">
         <HeaderText header={header} />
       </Heading>
       <Hits hitComponent={Hit} />
       <StyledPagination padding={1} hitsPerPage={20} />
-    </StyledNewsList>
+    </StyledList>
   )
 }
 
-export default NewsList
+export default List
diff --git a/web/pageComponents/newsRoom/MagazineContent.tsx b/web/pageComponents/newsRoom/MagazineContent.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+import List from './List'
+import Filters from './Filters'
+
+const MagazineContent = styled.div`
+  display: grid;
+  grid-template-areas:
+    'filter'
+    '.'
+    'list'
+    '.';
+
+  grid-template-rows: auto var(--space-xLarge) auto var(--space-xLarge);
+
+  @media (min-width: 800px) {
+    grid-template-columns: minmax(auto, var(--layout-maxContent-narrow)) minmax(var(--space-xLarge), 1fr) 30% var(
+        --space-medium
+      );
+    grid-template-areas: 'list . filter .';
+  }
+`
+
+const GridFilters = styled(Filters)`
+  grid-area: filter;
+`
+
+const GridList = styled(List)`
+  grid-area: list;
+`
+
+const MagazineStoryContent = ({ hasFilters = true, hasSearch = true, header = 'magazine' }) => {
+  return (
+    <MagazineContent>
+      {(hasFilters || hasSearch || header) && (
+        <GridFilters hasFilters={hasFilters} hasSearch={hasSearch} header={header}></GridFilters>
+      )}
+      <GridList header={header}></GridList>
+    </MagazineContent>
+  )
+}
+
+export default MagazineStoryContent
diff --git a/web/pageComponents/newsRoom/NewsContent.tsx b/web/pageComponents/newsRoom/NewsContent.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import NewsList from './NewsList'
+import NewsList from './List'
 import Filters from './Filters'
 
 const NewsRoomContent = styled.div`
@@ -31,7 +31,9 @@ const GridNewsList = styled(NewsList)`
 const NewsContent = ({ hasFilters = true, hasSearch = true, header = 'news' }) => {
   return (
     <NewsRoomContent>
-      {(hasFilters || hasSearch) && <GridFilters hasFilters={hasFilters} hasSearch={hasSearch}></GridFilters>}
+      {(hasFilters || hasSearch || header) && (
+        <GridFilters hasFilters={hasFilters} hasSearch={hasSearch} header={header}></GridFilters>
+      )}
       <GridNewsList header={header}></GridNewsList>
     </NewsRoomContent>
   )

diff --git a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
@@ -9,7 +9,7 @@ import isEmpty from '../shared/portableText/helpers/isEmpty'
 import getOpenGraphImages from '../../common/helpers/getOpenGraphImages'
 import { Heading } from '@components'
 import { searchClientServer, searchClient } from '../../lib/algolia'
-import MagazineContent from '../newsRoom/NewsContent'
+import MagazineContent from '../newsRoom/MagazineContent'
 import { getIsoFromLocale } from '../../lib/localization'
 import { metaTitleSuffix } from '../../languages'
 import { Wrapper, Intro, News as MagazineWapper, UnpaddedText } from './algoliaPages/components'
@@ -91,7 +91,7 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug }:
                 }} */
             >
               <Configure facetingAfterDistinct maxFacetHits={50} maxValuesPerFacet={100} />
-              <MagazineContent hasFilters={false} header="magazine" />
+              <MagazineContent />
             </InstantSearch>
           </MagazineWapper>
         </Wrapper>