styling pdf download

Author: talepre

xp-archive/client/content/Content.tsx

@@ -40,15 +40,12 @@ export const Content = () => {
             {selectedContentId ? (
                 <div className={style.content}>
                     <div className={style.top}>
-                        <div>
-                            <Heading size={'medium'}>{'Visning'}</Heading>
-                            <ViewSelector
-                                selectedView={selectedView}
-                                setSelectedView={setSelectedView}
-                                hasAttachment={hasAttachment}
-                                isWebpage={isWebpage}
-                            />
-                        </div>
+                        <ViewSelector
+                            selectedView={selectedView}
+                            setSelectedView={setSelectedView}
+                            hasAttachment={hasAttachment}
+                            isWebpage={isWebpage}
+                        />
                         <VersionSelector versions={data?.versions || []} />
                     </div>
                     <ContentView selectedView={selectedView} isLoading={isLoading} data={data} />

xp-archive/client/contentView/pdfExport/PdfExport.module.css

@@ -0,0 +1,15 @@
+.wrapper {
+    padding: 1rem;
+}
+
+.downloadBar {
+    position: fixed;
+    bottom: 0;
+    background-color: var(--a-surface-neutral);
+    width: 100%;
+}
+
+.button {
+    margin: 0.5rem;
+    background-color: var(--a-surface-default);
+}

xp-archive/client/contentView/pdfExport/PdfExport.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { DownloadIcon } from '@navikt/aksel-icons';
-import { Checkbox, CheckboxGroup, Link } from '@navikt/ds-react';
+import { Button, Checkbox, CheckboxGroup, Link } from '@navikt/ds-react';
 import { VersionReference } from 'shared/types';
 import { formatTimestamp } from '@common/shared/timestamp';
+import style from './PdfExport.module.css';
 
 type Props = {
     versions: VersionReference[];
@@ -18,22 +19,29 @@ export const PdfExport = ({ versions }: Props) => {
 
     return (
         <>
-            <CheckboxGroup legend="Versjoner" onChange={handleChange}>
-                {versions.map((v) => (
-                    <Checkbox key={v.versionId} value={`${v.nodeId};${v.versionId}`}>
-                        {v.displayName} {formatTimestamp(v.timestamp)}{' '}
-                    </Checkbox>
-                ))}
-            </CheckboxGroup>
-
-            <Link
-                href={`${PDF_API}?contentId=${versions[0].nodeId}&versionIds=${versionsSelected.join(',')}&locale=no`}
-                target={'_blank'}
-                download={true}
-            >
-                {'Last ned valgte versjoner '}
-                <DownloadIcon title="Last ned versjon(er)" />
-            </Link>
+            <div className={style.wrapper}>
+                <CheckboxGroup legend="Versjoner" onChange={handleChange}>
+                    {versions.map((v) => (
+                        <Checkbox key={v.versionId} value={`${v.nodeId};${v.versionId}`}>
+                            {v.displayName} {formatTimestamp(v.timestamp)}{' '}
+                        </Checkbox>
+                    ))}
+                </CheckboxGroup>
+            </div>
+            <div className={style.downloadBar}>
+                <Button
+                    variant="secondary-neutral"
+                    className={style.button}
+                    onClick={() =>
+                        window.open(
+                            `${PDF_API}?contentId=${versions[0].nodeId}&versionIds=${versionsSelected.join(',')}&locale=no`
+                        )
+                    }
+                    icon={<DownloadIcon title="Last ned versjon(er)" />}
+                >
+                    {'Last ned valgte versjoner '}
+                </Button>
+            </div>
         </>
     );
 };

xp-archive/client/viewSelector/ViewSelector.module.css

@@ -0,0 +1,7 @@
+.datatheme {
+    /* Has to be here for the data-theme to work */
+}
+
+[data-theme='viewSelector'] {
+    --ac-toggle-group-bg: var(--a-white);
+}

xp-archive/client/viewSelector/ViewSelector.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ToggleGroup } from '@navikt/ds-react';
+import style from './ViewSelector.module.css';
 
 export type ViewVariant = 'html' | 'pdf' | 'json' | 'filepreview';
 
@@ -38,7 +39,14 @@ export const ViewSelector = ({
           : ['json'];
 
     return (
-        <ToggleGroup size={'small'} value={selectedView} onChange={updateSelectedView}>
+        <ToggleGroup
+            className={style.datatheme}
+            data-theme="viewSelector"
+            label={'Visning'}
+            size={'small'}
+            value={selectedView}
+            onChange={updateSelectedView}
+        >
             {relevantViewVariants.map((view) => (
                 <ToggleGroup.Item key={view} value={view}>
                     {getDisplayname(view)}