Skip to content

Commit

Permalink
b - fikser CSS-issue på hovedmeny på ekte
Browse files Browse the repository at this point in the history
  • Loading branch information
toresbe committed Nov 20, 2024
1 parent 6b4dd65 commit d510dd9
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 8 deletions.
4 changes: 2 additions & 2 deletions src/sider/hovedmeny/paneler/EttersendDokuPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {Attachment} from "@navikt/ds-icons";
import {BodyShort, ExpansionCard, Heading} from "@navikt/ds-react";
import React, {ReactNode} from "react";
import digisosConfig from "../../../lib/config";
import {HovedmenyCardHeader} from "./HovedmenyCardHeader.tsx";
import {EXPANSION_CARD_BORDER_STYLE_HACK, HovedmenyCardHeader} from "./HovedmenyCardHeader.tsx";
import {useTranslations} from "next-intl";

export const EttersendDokuPanel = () => {
Expand All @@ -13,7 +13,7 @@ export const EttersendDokuPanel = () => {
const lenke = (chunks: ReactNode) => <a href={digisosConfig.innsynURL}>{chunks}</a>;

return (
<ExpansionCard aria-labelledby={"ettersend-heading"}>
<ExpansionCard style={EXPANSION_CARD_BORDER_STYLE_HACK} aria-labelledby={"ettersend-heading"}>
<HovedmenyCardHeader icon={<Attachment className={"w-6 h-6"} />}>
<Heading level={"2"} size={"small"} id={"ettersend-heading"}>
{t("title")}
Expand Down
10 changes: 9 additions & 1 deletion src/sider/hovedmeny/paneler/HovedmenyCardHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import * as React from "react";
import {ExpansionCard} from "@navikt/ds-react";

/**
* react-ds puts a border around expansion cards by default,
* but we're slightly abusing ExpansionCard so we unset it like this.
*/
export const EXPANSION_CARD_BORDER_STYLE_HACK = {
"--__ac-expansioncard-border-color": "transparent",
} as React.CSSProperties;

export const HovedmenyCardHeader = ({children, icon}: {children: React.ReactNode; icon: React.ReactNode}) => (
<ExpansionCard.Header className={"!border-0 [&>button]:my-auto !ring-0"}>
<ExpansionCard.Header className={"[&>button]:my-auto"}>
<div className={"flex items-center h-full"} role={"none"}>
<HovedmenyCardIcon>{icon}</HovedmenyCardIcon>
<div role={"none"}>{children}</div>
Expand Down
8 changes: 6 additions & 2 deletions src/sider/hovedmeny/paneler/NySoknadPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import {ExpansionCard, Heading} from "@navikt/ds-react";
import {HovedmenyCardHeader} from "./HovedmenyCardHeader";
import {EXPANSION_CARD_BORDER_STYLE_HACK, HovedmenyCardHeader} from "./HovedmenyCardHeader";
import {FillForms} from "@navikt/ds-icons";
import {useTranslations} from "next-intl";
import {NySoknadInfo} from "./NySoknadInfo.tsx";

export const NySoknadPanel = ({defaultOpen}: {defaultOpen?: boolean}) => (
<ExpansionCard aria-labelledby={"nysoknad-heading"} defaultOpen={defaultOpen}>
<ExpansionCard
style={EXPANSION_CARD_BORDER_STYLE_HACK}
aria-labelledby={"nysoknad-heading"}
defaultOpen={defaultOpen}
>
<HovedmenyCardHeader icon={<FillForms className={"w-6 h-6"} />}>
<Heading id="nysoknad-heading" level={"2"} size={"small"}>
{useTranslations("NySoknadPanel")("title")}
Expand Down
6 changes: 3 additions & 3 deletions src/sider/hovedmeny/paneler/PabegynteSoknader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {BodyShort, ExpansionCard} from "@navikt/ds-react";
import React from "react";
import {useTranslations} from "next-intl";
import {PabegyntSoknadView} from "./PabegyntSoknadView.tsx";
import {HovedmenyCardHeader} from "./HovedmenyCardHeader.tsx";
import {EXPANSION_CARD_BORDER_STYLE_HACK, HovedmenyCardHeader} from "./HovedmenyCardHeader.tsx";
import {useContextSessionInfo} from "../../../lib/providers/useContextSessionInfo.ts";

export const DAYS_BEFORE_DELETION = 14;
Expand All @@ -18,12 +18,12 @@ export const PabegynteSoknaderPanel = () => {
if (!count) return null;

return (
<ExpansionCard aria-labelledby={"pabegyntesoknader-title"}>
<ExpansionCard style={EXPANSION_CARD_BORDER_STYLE_HACK} aria-labelledby={"pabegyntesoknader-title"}>
<HovedmenyCardHeader icon={<FileContent className={"w-6 h-6"} />}>
<ExpansionCard.Title id={"pabegyntesoknader-title"} as={"h2"} className={"!m-0"} size={"small"}>
{t("title")}
</ExpansionCard.Title>
<ExpansionCard.Description className={"opacity-70"}>
<ExpansionCard.Description className={"opacity-70 !m-0"}>
{t("pabegynte", {count})}
</ExpansionCard.Description>
</HovedmenyCardHeader>
Expand Down

0 comments on commit d510dd9

Please sign in to comment.