Merge branch 'dataproduktsidev2' of https://github.com/navikt/nada-fr…

…ontend into dataproduktsidev2
navikt · Aug 22, 2022 · 875a7ff · 875a7ff
2 parents 7366b4f + 5c4442a
commit 875a7ff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/components/dataproducts/metadataTable.tsx → ...nents/dataproducts/dataproductSidebar.tsx b/components/dataproducts/metadataTable.tsx → ...nents/dataproducts/dataproductSidebar.tsx
@@ -26,10 +26,10 @@ export const DataproductSidebar = ({ product, isOwner, menuItems, currentPage }:
     }
 
     return <div className="flex flex-initial flex-col h-[80vh] justify-between pt-8 w-64">
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2">
             {menuItems.map(({ title, slug }, idx) => currentPage == idx
-                ? <p className="font-semibold mx-1" key={idx}>{title}</p>
-                : <Link className="font-semibold no-underline mx-1 hover:underline hover:cursor-pointer" href="#" key={idx} onClick={e => handleChange(e, slug)}>{title}</Link>
+                ? <p className="border-l-[6px] border-l-link px-1 font-semibold py-1" key={idx}>{title}</p>
+                : <a className="border-l-[6px] border-l-transparent font-semibold no-underline mx-1 hover:underline hover:cursor-pointer py-1" href="#" key={idx} onClick={e => handleChange(e, slug)}>{title}</a>
             )}
         </div>
         <div className="h-fit w-64 text-base leading-4 pr-4 pb-0 fixed bottom-0">
@@ -55,22 +55,6 @@ export const DataproductSidebar = ({ product, isOwner, menuItems, currentPage }:
             <Subject>
                 {humanizeDate(product.lastModified)}
             </Subject>
-            {!!product.keywords.length && <>
-                <SubjectHeader>Nøkkelord</SubjectHeader>
-                <KeywordBox>
-                    {!!product.keywords.length && (<>{product.keywords.map((k, i) => (
-                        <Link key={i} href={`/search?keywords=${k}`}>
-                            <a>
-                                <KeywordPill key={k} keyword={k}>
-                                    {k}
-                                </KeywordPill>
-                            </a>
-                        </Link>
-                    ))}</>
-                    )}
-                </KeywordBox>
-            </>
-            }
         </div>
     </div>
 }
diff --git a/components/lib/detailTypography.tsx b/components/lib/detailTypography.tsx
@@ -2,6 +2,9 @@ import styled from 'styled-components'
 import ReactMarkdown from 'react-markdown'
 import * as React from 'react'
 import remarkGfm from 'remark-gfm'
+import { SubjectHeader } from '../subject'
+import KeywordPill, { KeywordBox } from './keywordList'
+import { Link } from '@navikt/ds-react'
 
 export const Name = styled.h1`
   margin: 0;
@@ -14,10 +17,21 @@ export const StyledDescription = styled.div`
   margin-top: 2rem;
 `
 
-export const Description = ({ markdown }: { markdown?: string | null }) => (
+export const Description = ({ keywords, markdown }: { keywords: string[], markdown?: string | null }) => (
   <StyledDescription>
     <ReactMarkdown remarkPlugins={[remarkGfm]}>
       {markdown || '*ingen beskrivelse*'}
     </ReactMarkdown>
+    {!!keywords.length && <div className="flex flex-row gap-1 flex-wrap my-2">
+        <>{keywords.map((k, i) => (
+            <Link key={i} href={`/search?keywords=${k}`}>
+                <a>
+                    <KeywordPill key={k} keyword={k}>
+                        {k}
+                    </KeywordPill>
+                </a>
+            </Link>
+        ))}</>
+    </div>}
   </StyledDescription>
 )
diff --git a/pages/dataproduct/[id]/[slug]/[[...page]].tsx b/pages/dataproduct/[id]/[slug]/[[...page]].tsx
@@ -14,7 +14,7 @@ import amplitudeLog from '../../../../lib/amplitude'
 import Head from 'next/head'
 import TopBar, { TopBarActions } from '../../../../components/lib/topBar'
 import { Description } from '../../../../components/lib/detailTypography'
-import { DataproductSidebar } from '../../../../components/dataproducts/metadataTable'
+import { DataproductSidebar } from '../../../../components/dataproducts/dataproductSidebar'
 import styled from 'styled-components'
 import { useRouter } from 'next/router'
 import TabPanel, { TabPanelType } from '../../../../components/lib/tabPanel'
@@ -96,7 +96,7 @@ const Dataproduct = (props: DataproductProps) => {
                 title: 'Beskrivelse',
                 slug: 'info',
                 component: (
-                    <Description markdown={product.description} />
+                    <Description keywords={product.keywords} markdown={product.description} />
                 ),
             },
         ];