Skip to content

Commit

Permalink
♻️ Fjernet Modal variant av tema hero.
Browse files Browse the repository at this point in the history
Bruker samme dialog på mobil og desktop
  • Loading branch information
KenAJoh committed Apr 4, 2024
1 parent 7e07290 commit c0ce066
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 200 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cl from "clsx";

type CubeProps = {
variant?: "light" | "dark" | "muted";
variant?: "light" | "dark";
};

function Cube({ variant = "light" }: CubeProps) {
Expand All @@ -12,7 +12,6 @@ function Cube({ variant = "light" }: CubeProps) {
{
"text-teal-300": variant === "light",
"text-teal-400": variant === "dark",
"text-teal-50": variant === "muted",
},
)}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,136 @@
import { useMedia } from "@/hooks/useMedia";
import cl from "clsx";
import { CSSProperties, useCallback, useState } from "react";
import { Box } from "@navikt/ds-react";
import { useEscapeKeydown } from "@/hooks/useEscapeKeydown";
import Cube from "@/layout/god-praksis-page/hero/HeroCube";
import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCardList";
import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
import { TemaHeroModal } from "./TemaHeroModal";
import { TemaHeroStatic } from "./TemaHeroStatic";
import styles from "../Hero.module.css";

type GpHeroProps = { tema: GpTemaT | null } & HeroNavT;
type GpTemaHeroProps = { tema: GpTemaT | null } & HeroNavT;

function TemaHero(props: GpHeroProps) {
const hideModal = useMedia("screen and (min-width: 768px)");
function TemaHero({ tema, heroNav }: GpTemaHeroProps) {
const [open, setOpen] = useState(false);

return hideModal ? (
<TemaHeroStatic {...props} />
) : (
<TemaHeroModal {...props} />
const [boxHeight, setBoxHeight] = useState(0);
const [wrapperHeight, setWrapperHeight] = useState(0);
const [animationRef, setAnimationRef] = useState({ x: 0, y: 0 });

const [openDialogButton, setOpenDialogButton] = useState<HTMLElement | null>(
null,
);
const [closeDialogButton, setCloseDialogButton] =
useState<HTMLElement | null>(null);

const inlineStyles: CSSProperties = {
"--aksel-website-hero-selector-x": animationRef.x + "px",
"--aksel-website-hero-selector-y": animationRef.y + "px",
};

const handleOpen = (
e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>,
) => {
closeDialogButton?.focus();
const rect = e.currentTarget.getBoundingClientRect();

setAnimationRef({
x: e.currentTarget.offsetLeft + rect.width / 2,
y: e.currentTarget.offsetTop + rect.height / 2,
});
setOpen(true);
};

const handleClose = useCallback(() => {
setOpen(false);
openDialogButton?.focus();
}, [openDialogButton]);

useEscapeKeydown(handleClose, [handleClose]);

/**
* Tries to equal height for both wrapper and absolute-element
* by increasing the margin-bottom of the wrapper
*/
const getMargin = () => {
if (!open) return 0;
const height = boxHeight ? boxHeight - wrapperHeight : 0;
if (height > 0) return height;
return 0;
};

return (
<Box
background="surface-alt-3-subtle"
borderRadius="large"
paddingInline={{ xs: "4", lg: "10" }}
paddingBlock="10 6"
className={cl(
"relative ring-1 ring-teal-400 transition-[margin] duration-500",
styles.heroGradient,
)}
style={{
marginBottom: getMargin(),
transitionTimingFunction: open
? "cubic-bezier(0.3, 0, 0.15, 1)"
: "cubic-bezier(0, 0.3, 0.15, 1)",
}}
ref={(el) => {
setWrapperHeight(el?.getBoundingClientRect().height || 0);
}}
>
<Cube />
<HeroSelectButton
onClick={handleOpen}
expanded={open}
ref={setOpenDialogButton}
hidden={open}
/>
<HeroIntro
title={tema?.title}
description={tema?.description}
hidden={open}
image={tema?.image}
/>

<Box
borderRadius="large"
paddingInline={{ xs: "4", lg: "10" }}
paddingBlock="10 6"
className={cl(
"absolute inset-0 z-20 overflow-clip ring-1 ring-teal-500",
styles.heroSelector,
styles.heroGradientOpen,
{
hidden: !open,
},
)}
shadow="medium"
style={inlineStyles}
role="dialog"
aria-labelledby="tema-selector-title"
aria-modal="false"
ref={(el) => {
setBoxHeight(el?.getBoundingClientRect().height || 0);
}}
>
<Cube variant="dark" />

<HeroSelectButton
onClick={handleClose}
expanded={true}
hidden={false}
ref={setCloseDialogButton}
/>

<HeroList
currentSlug={tema?.slug}
heroNav={heroNav}
setOpen={setOpen}
/>
</Box>
</Box>
);
}

Expand Down

This file was deleted.

This file was deleted.

0 comments on commit c0ce066

Please sign in to comment.