Tweaker download link css

Author: anders-nom

src/components/main-section/content-view/pdf-exporter/PdfExporter.module.css

@@ -44,5 +44,17 @@
 .multiSelectButtons {
     display: flex;
     gap: 0.5rem;
-    padding: 0.5rem 0.125rem;
+    padding: 0.5rem 0.25rem;
+
+    visibility: visible;
+    max-height: 5rem;
+    transition-property: visibility, max-height, padding;
+    transition-timing-function: ease-out;
+    transition-duration: 200ms;
+
+    &.hidden {
+        visibility: hidden;
+        max-height: 0;
+        padding: 0 0.25rem;
+    }
 }

src/components/main-section/content-view/pdf-exporter/PdfExporter.tsx

@@ -23,7 +23,7 @@ export const PdfExporter = ({ content, hidden }: Props) => {
 
     const { versionKey: currentVersionKey, versions } = content;
 
-    const versionsSelectedMapEmpty = useMemo(
+    const versionsSelectedMapNew = useMemo(
         () =>
             Object.values(content.versions).reduce<VersionsSelectedMap>((acc, version, index) => {
                 acc[index] = { selected: false, versionKey: version.key };
@@ -33,7 +33,7 @@ export const PdfExporter = ({ content, hidden }: Props) => {
     );
 
     const [versionsSelectedMap, setVersionsSelectedMap] =
-        useState<VersionsSelectedMap>(versionsSelectedMapEmpty);
+        useState<VersionsSelectedMap>(versionsSelectedMapNew);
     const [prevClickedIndex, setPrevClickedIndex] = useState(0);
     const [versionKeysSelected, setVersionKeysSelected] = useState<string[]>([]);
 
@@ -81,10 +81,10 @@ export const PdfExporter = ({ content, hidden }: Props) => {
     }, [versionsSelectedMap]);
 
     useEffect(() => {
-        setVersionsSelectedMap(versionsSelectedMapEmpty);
+        setVersionsSelectedMap(versionsSelectedMapNew);
         setVersionKeysSelected([]);
         setPrevClickedIndex(0);
-    }, [versionsSelectedMapEmpty]);
+    }, [versionsSelectedMapNew]);
 
     return (
         <div className={classNames(style.exporter, hidden && style.hidden)}>
@@ -95,6 +95,7 @@ export const PdfExporter = ({ content, hidden }: Props) => {
                 <DownloadLink
                     href={`${pdfApi}/single/${currentVersionKey}`}
                     icon={<ArrowDownRightIcon className={style.downloadCurrentIcon} />}
+                    small={true}
                 >
                     {'Last ned denne versjonen'}
                 </DownloadLink>
@@ -128,25 +129,25 @@ export const PdfExporter = ({ content, hidden }: Props) => {
                     );
                 })}
             </CheckboxGroup>
-            <div className={style.multiSelectButtons}>
+            <div
+                className={classNames(
+                    style.multiSelectButtons,
+                    versionKeysSelected.length === 0 && style.hidden
+                )}
+            >
                 <DownloadLink
                     href={`${pdfApi}/multi/${versionKeysSelected.join(',')}`}
-                    icon={versionKeysSelected.length > 0 && <DownloadIcon />}
-                    disabled={versionKeysSelected.length === 0}
+                    icon={<DownloadIcon />}
                 >
-                    {versionKeysSelected.length === 0
-                        ? 'Ingen versjoner valgt'
-                        : `Last ned ${versionKeysSelected.length} ${versionKeysSelected.length > 1 ? 'valgte versjoner' : 'valgt versjon'}`}
+                    {`Last ned ${versionKeysSelected.length} ${versionKeysSelected.length === 1 ? 'valgt versjon' : 'valgte versjoner'}`}
                 </DownloadLink>
-                {versionKeysSelected.length > 0 && (
-                    <Button
-                        variant={'tertiary-neutral'}
-                        size={'xsmall'}
-                        onClick={() => setVersionsSelectedMap(versionsSelectedMapEmpty)}
-                    >
-                        {'Nullstill valg'}
-                    </Button>
-                )}
+                <Button
+                    variant={'tertiary-neutral'}
+                    size={'xsmall'}
+                    onClick={() => setVersionsSelectedMap(versionsSelectedMapNew)}
+                >
+                    {'Nullstill valg'}
+                </Button>
             </div>
         </div>
     );

src/components/main-section/content-view/pdf-exporter/download-link/DownloadLink.module.css

@@ -4,40 +4,59 @@
     gap: 0.5rem;
     text-decoration: none;
     font-weight: bold;
-    /*border: solid 2px var(--a-border-action);*/
+    border: solid 2px var(--a-border-action);
     border-radius: var(--a-border-radius-medium);
-    padding: 0.5rem;
+    padding: 0.5rem 0.75rem;
     min-height: 3rem;
+    background-color: var(--a-surface-action);
+    color: var(--a-text-on-action);
 
     &:hover {
-        background-color: var(--a-surface-neutral-subtle-hover);
+        background-color: var(--a-surface-action-hover);
     }
 
     &:active {
         outline: none;
         box-shadow: none;
-        color: var(--a-text-action);
-        background-color: var(--a-surface-action-subtle);
+        background-color: var(--a-surface-action-active);
     }
-}
 
-.disabled {
-    color: var(--a-gray-400);
-    cursor: not-allowed;
-
-    &:hover {
+    &.small {
         background-color: unset;
+        color: var(--a-text-action);
+        border: none;
+        padding: 0.25rem 0.5rem;
+
+        &:hover {
+            background-color: var(--a-surface-action-subtle-hover);
+        }
+
+        &:active {
+            background-color: var(--a-surface-action-subtle);
+        }
     }
 
-    &:active {
-        color: unset;
-        background-color: unset;
+    &.disabled {
+        color: var(--a-gray-400);
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: unset;
+        }
+
+        &:active {
+            color: unset;
+            background-color: unset;
+        }
     }
 }
 
 .iconContainer {
+    display: flex;
+    align-items: center;
+
     > * {
-        width: 1.375rem;
-        height: 1.375rem;
+        width: 1.5rem;
+        height: 1.5rem;
     }
 }

src/components/main-section/content-view/pdf-exporter/download-link/DownloadLink.tsx

@@ -8,13 +8,14 @@ import style from './DownloadLink.module.css';
 
 type Props = {
     href: string;
+    small?: boolean;
     icon?: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    children: React.ReactNode | string;
+    children: React.ReactNode;
 };
 
-export const DownloadLink = ({ href, icon, disabled, className, children }: Props) => {
+export const DownloadLink = ({ href, small, icon, disabled, className, children }: Props) => {
     const [isWaiting, setIsWaiting] = useState(false);
 
     const onDownload = (e: React.MouseEvent) => {
@@ -45,7 +46,12 @@ export const DownloadLink = ({ href, icon, disabled, className, children }: Prop
         <Link
             href={href}
             download={true}
-            className={classNames(style.link, (isWaiting || disabled) && style.disabled, className)}
+            className={classNames(
+                style.link,
+                small && style.small,
+                (isWaiting || disabled) && style.disabled,
+                className
+            )}
             onClick={onDownload}
         >
             {children}