feat: details page redesign

apps/data-norge/public/content/docs/metadata-quality/metadata-quality.nb.mdx

@@ -17,12 +17,12 @@ description: Om vurdering av metadatakvalitet på data.norge.no og hvofor vi gj
 
 Data.norge.no har fire ulike nivåer for metadatakvalitet:
 
-| Nivå                              | Begrunnelse                                                                                                                                                                            |
-| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Utmerket**                      | Dette er bra saker! 75 % eller flere av kvalitetskriteriene er innfridd. Beskrivelsen er informativ og gir stor nytteverdi for brukeren, noe som bør være målet for alle beskrivelser. |
-| **God**                           | 50-75 % av kvalitetskriteriene er innfridd.                                                                                                                                            |
-| **Tilstrekkelig** (bør forbedres) | Bare 25-50 % av kvalitetskriteriene er innfridd, og beskrivelsen bør absolutt forbedres.                                                                                               |
-| **Dårlig**                        | 25 % eller færre av kvalitetskriteriene er innfridd. Beskrivelsen er mangelfull og dekker sjelden.                                                                                     |
+| Nivå                                     | Begrunnelse                                                                                                                                                                            |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <Tag color="success">Utmerket</Tag>      | Dette er bra saker! 75 % eller flere av kvalitetskriteriene er innfridd. Beskrivelsen er informativ og gir stor nytteverdi for brukeren, noe som bør være målet for alle beskrivelser. |
+| <Tag color="success">God</Tag>           | 50-75 % av kvalitetskriteriene er innfridd.                                                                                                                                            |
+| <Tag color="warning">Tilstrekkelig</Tag> | Bare 25-50 % av kvalitetskriteriene er innfridd, og beskrivelsen bør absolutt forbedres.                                                                                               |
+| <Tag color="danger">Dårlig</Tag>         | 25 % eller færre av kvalitetskriteriene er innfridd. Beskrivelsen er mangelfull og dekker sjelden.                                                                                     |
 
 ## Hvorfor måler vi metadatakvalitet
 

apps/data-norge/src/app/[lang]/view/api/page.tsx

@@ -0,0 +1,24 @@
+import { i18n, getDictionary } from '@fdk-frontend/dictionaries';
+
+import DetailsPage from '../../../components/details/details-page/api';
+import { DetailsPageWrapperProps } from '../page';
+
+const APIPageWrapper = async (props: DetailsPageWrapperProps) => {
+    const params = await props.params;
+    const locale = params.lang ?? i18n.defaultLocale;
+    const commonDictionary = await getDictionary(locale, 'common');
+
+    return (
+        <DetailsPage
+            locale={locale}
+            commonDictionary={commonDictionary}
+        />
+    );
+};
+
+export const metadata = {
+    title: 'API: Inntektsmottakere API - data.norge.no',
+    description: 'POC for detaljvisning',
+};
+
+export default APIPageWrapper;

apps/data-norge/src/app/[lang]/view/begrep/page.tsx

@@ -0,0 +1,24 @@
+import { i18n, getDictionary } from '@fdk-frontend/dictionaries';
+
+import DetailsPage from '../../../components/details/details-page/begrep';
+import { DetailsPageWrapperProps } from '../page';
+
+const BegrepsPageWrapper = async (props: DetailsPageWrapperProps) => {
+    const params = await props.params;
+    const locale = params.lang ?? i18n.defaultLocale;
+    const commonDictionary = await getDictionary(locale, 'common');
+
+    return (
+        <DetailsPage
+            locale={locale}
+            commonDictionary={commonDictionary}
+        />
+    );
+};
+
+export const metadata = {
+    title: 'Begrep: egenandel på dagpenger - data.norge.no',
+    description: 'POC for detaljvisning',
+};
+
+export default BegrepsPageWrapper;

apps/data-norge/src/app/[lang]/view/datasett-worstcase/page.tsx

@@ -0,0 +1,24 @@
+import { i18n, getDictionary } from '@fdk-frontend/dictionaries';
+
+import DetailsPage from '../../../components/details/details-page/datasett-worstcase';
+import { DetailsPageWrapperProps } from '../page';
+
+const DatasettRichPageWrapper = async (props: DetailsPageWrapperProps) => {
+    const params = await props.params;
+    const locale = params.lang ?? i18n.defaultLocale;
+    const commonDictionary = await getDictionary(locale, 'common');
+
+    return (
+        <DetailsPage
+            locale={locale}
+            commonDictionary={commonDictionary}
+        />
+    );
+};
+
+export const metadata = {
+    title: 'Datasett: Energimålinger kommunale bygg - data.norge.no',
+    description: 'POC for detaljvisning',
+};
+
+export default DatasettRichPageWrapper;

apps/data-norge/src/app/[lang]/view/layout.tsx

@@ -0,0 +1,6 @@
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
+
+export const revalidate = 0;
+export const dynamic = 'force-dynamic';
+
+export default DocsLayout;

apps/data-norge/src/app/[lang]/view/page.tsx

@@ -0,0 +1,30 @@
+import { i18n, getDictionary, type LocaleCodes } from '@fdk-frontend/dictionaries';
+
+import DetailsPage from '../../components/details/details-page';
+
+export type DetailsPageWrapperProps = {
+    params: Promise<{
+        lang: LocaleCodes;
+        slug: string[];
+    }>;
+};
+
+const DetailsPageWrapper = async (props: DetailsPageWrapperProps) => {
+    const params = await props.params;
+    const locale = params.lang ?? i18n.defaultLocale;
+    const commonDictionary = await getDictionary(locale, 'common');
+
+    return (
+        <DetailsPage
+            locale={locale}
+            commonDictionary={commonDictionary}
+        />
+    );
+};
+
+export const metadata = {
+    title: 'Datasett: Energimålinger kommunale bygg - data.norge.no',
+    description: 'POC for detaljvisning',
+};
+
+export default DetailsPageWrapper;

apps/data-norge/src/app/components/details/community-tab/community-tab.module.scss

@@ -0,0 +1,64 @@
+.notice {
+	margin-top:2rem;
+
+    .toolbar {
+        @media (max-width: 500px) {
+            flex-direction:column;
+            align-items:flex-start;
+        }
+    }
+}
+
+.forumStats {
+    display:inline-flex;
+    flex-direction:column;
+    text-align:center;
+    padding:0.25rem;
+}
+
+.section {
+    :global(.table) {
+
+        .threadLink {
+            margin-bottom:0.5rem;
+            line-height:1.5rem;
+        }
+
+        :global(.fds-tag) {
+            white-space: nowrap;
+            font-size:0.9rem;
+
+            :global(.fds-link) {
+                text-decoration:none;
+                // color: var(--color-text);
+
+                &:hover {
+                    text-decoration:underline;
+                    text-decoration-thickness: max(0.12em);
+                }
+            }
+        }
+
+        tr:hover {
+            :global(.fds-tag) {
+                // background:white;
+            }
+        }
+    }
+}
+
+.tableScroller {
+    margin:1rem -2rem;
+
+    > div {
+        padding:0 2rem;
+    }
+
+    @media (max-width: 400px) {
+        margin:1rem -1.5rem;
+
+        > div {
+            padding:0 1.5rem;
+        }
+    }
+}

apps/data-norge/src/app/components/details/community-tab/index.tsx

@@ -0,0 +1,126 @@
+import { PropsWithChildren } from 'react';
+import NextLink from 'next/link';
+
+import { Heading, Button, Link, Paragraph, Alert, Tag } from '@digdir/designsystemet-react';
+import { ExternalLinkIcon, Chat2Icon } from '@navikt/aksel-icons';
+
+import Badge from '@fdk-frontend/ui/badge';
+import HStack from '@fdk-frontend/ui/hstack';
+import VStack from '@fdk-frontend/ui/vstack';
+import { Subtext } from '@fdk-frontend/ui/typography';
+import ScrollShadows from '@fdk-frontend/ui/scroll-shadows';
+import IconBadge from '@fdk-frontend/ui/icon-badge';
+
+import styles from './community-tab.module.scss';
+
+const CommunityTab = ({ children }: PropsWithChildren) => {
+	return (
+		<section className={styles.section}>
+			<Heading
+				level={4}
+				size='xxsmall'
+			>
+				{/*<Button
+					variant='tertiary'
+					size='sm'
+					style={{float:'right',position:'relative',top:'-0.75rem'}}
+				>
+					Gå til Datalandsbyen
+					<ExternalLinkIcon />
+				</Button>*/}
+				<HStack>
+					Diskusjoner på Datalandsbyen <Badge>2</Badge>
+				</HStack>
+			</Heading>
+			<ScrollShadows className={styles.tableScroller}>
+				<table className='table' style={{minWidth:600}}>
+					<tbody>
+						<tr>
+							<td width='1'>
+								<IconBadge fontSize='1.5rem'>
+									<Chat2Icon />
+								</IconBadge>
+							</td>
+							<td>
+								<Link href='#' className={styles.threadLink}>Vannverk - transportsystem <ExternalLinkIcon /></Link>
+								<HStack style={{gap:'0.5rem'}}>
+									<Tag size='sm' color='neutral'><Link href='#'>Kommentartråder</Link></Tag>
+									<Subtext>Postet av fdk-community-admin</Subtext>
+								</HStack>
+							</td>
+							<td align='right'>
+								<HStack style={{justifyContent:'flex-end'}}>
+									<div className={styles.forumStats}>
+										<span>7</span>
+										<Subtext>Stemmer</Subtext>
+									</div>
+									<div className={styles.forumStats}>
+										<span>12</span>
+										<Subtext>Innlegg</Subtext>
+									</div>
+									<div className={styles.forumStats}>
+										<span>16k</span>
+										<Subtext>Visninger</Subtext>
+									</div>
+								</HStack>
+							</td>
+						</tr>
+						<tr>
+							<td width='1'>
+								<IconBadge fontSize='1.5rem'>
+									<Chat2Icon />
+								</IconBadge>
+							</td>
+							<td>
+								<Link href='#' className={styles.threadLink}> Strømstøtten minutt for minutt - beregnet med åpne data  <ExternalLinkIcon /></Link>
+								<HStack style={{gap:'0.5rem'}}>
+									<Tag size='sm' color='neutral'><Link href='#'>Gode eksempler på bruk</Link></Tag>
+									<Subtext>Postet av fdk-community-admin</Subtext>
+								</HStack>
+							</td>
+							<td align='right'>
+								<HStack style={{justifyContent:'flex-end'}}>
+									<div className={styles.forumStats}>
+										<span>7</span>
+										<Subtext>Stemmer</Subtext>
+									</div>
+									<div className={styles.forumStats}>
+										<span>12</span>
+										<Subtext>Innlegg</Subtext>
+									</div>
+									<div className={styles.forumStats}>
+										<span>16k</span>
+										<Subtext>Visninger</Subtext>
+									</div>
+								</HStack>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</ScrollShadows>
+			<Alert className={styles.notice}>
+				<VStack>
+					<Heading
+						level={4}
+						size='xxsmall'
+					>
+						Hva er Datalandsbyen?
+					</Heading>
+					<Paragraph size='sm'>
+						Datalandsbyen er vårt nettforum hvor du kan etterspørre data, dele erfaringer og spørre om råd som gjelder datadeling og informasjonsforvaltning.
+					</Paragraph>
+					<HStack className={styles.toolbar}>
+						<Button variant='secondary' size='sm' asChild>
+							<NextLink href="https://datalandsbyen.norge.no/">Gå til Datalandsbyen <ExternalLinkIcon /></NextLink>
+						</Button>
+						<Button variant='secondary' size='sm' asChild>
+							<NextLink href="/docs/community">Mer informasjon</NextLink>
+						</Button>
+					</HStack>
+				</VStack>
+			</Alert>
+		</section>
+	);
+}
+
+export default CommunityTab;

apps/data-norge/src/app/components/details/dataset-description/index.tsx

@@ -0,0 +1,56 @@
+import { PropsWithChildren } from 'react';
+
+import { Link, type LinkProps } from '@digdir/designsystemet-react';
+
+import Markdown from '@fdk-frontend/ui/markdown';
+
+const allowedElements = [
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'pre',
+    'code',
+    'ul',
+    'ol',
+    'li',
+    'hr',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'a',
+    'strong',
+    'em',
+    'img',
+    'br',
+    'del',
+    'span',
+];
+
+type Props = PropsWithChildren & {
+    className?: string;
+};
+
+const DatasetDescription = ({ className, children }: Props) => {
+    return (
+        <article className={className}>
+            <Markdown
+                allowedElements={allowedElements}
+                components={{
+                    a: (props: LinkProps) => <Link {...props} />,
+                }}
+            >
+                {children}
+            </Markdown>
+        </article>
+    );
+};
+
+export default DatasetDescription;