fremtind · kristianulv23 · Sep 17, 2024 · Aug 16, 2024 · Aug 17, 2024 · Aug 19, 2024
diff --git a/packages/popover-react/README.md b/packages/popover-react/README.md
@@ -0,0 +1,22 @@
+# [`@fremtind/jkl-popover-react`](https://jokul.fremtind.no/komponenter/popover)
+
+Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/popover).
+
+## Installasjon
+
+**Tips:** [stilpakken](../popover/) blir automatisk installert som en avhengighet.
+
+1. `npm i @fremtind/jkl-popover-react`.
+2. Importér _både_ React-komponent og stilark i prosjektet ditt.
+
+```js
+import { Popover } from "@fremtind/jkl-popover-react";
+
+// Importer stilark via JavaScript med CSS-loader.
+import "@fremtind/jkl-popover/popover.min.css";
+```
+
+```scss
+// Eller importer stilark via SCSS.
+@use "@fremtind/jkl-popover/popover";
+```
diff --git a/packages/popover-react/documentation/DevClient.tsx b/packages/popover-react/documentation/DevClient.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+import { hydrateClient } from "../../../doc-utils/DevClient";
+import Example from "./Example";
+
+hydrateClient(<Example />);
diff --git a/packages/popover-react/documentation/DevServer.tsx b/packages/popover-react/documentation/DevServer.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+import { createServer } from "../../../doc-utils/DevServer";
+import Example from "./Example";
+
+createServer(<Example />);
diff --git a/packages/popover-react/documentation/Example.tsx b/packages/popover-react/documentation/Example.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { DevExample } from "../../../doc-utils";
+import {
+    PopoverControlledExample,
+    popoverControlledExampleCode,
+    popoverExampleKnobs,
+    PopoverUnControlledExample,
+    popoverUnControlledExampleCode,
+} from "./PopoverExample";
+import "../../popover/popover.scss";
+import "../../button/button.scss";
+import "../../tabs/tabs.scss";
+
+export default function Example() {
+    return (
+        <>
+            <DevExample
+                title="Controlled popover"
+                component={PopoverControlledExample}
+                codeExample={popoverControlledExampleCode}
+                knobs={popoverExampleKnobs}
+            />
+            <DevExample
+                title="Uncontrolled popover"
+                component={PopoverUnControlledExample}
+                codeExample={popoverUnControlledExampleCode}
+                knobs={popoverExampleKnobs}
+            />
+        </>
+    );
+}
diff --git a/packages/popover-react/documentation/Popover.mdx b/packages/popover-react/documentation/Popover.mdx
@@ -0,0 +1,55 @@
+---
+title: Popover
+react: popover-react
+scss: popover
+group: edit me!
+---
+
+import {
+    PopoverControlledExample,
+    PopoverUnControlledExample,
+    popoverControlledExampleCode,
+    popoverUnControlledExampleCode,
+    popoverExampleKnobs,
+} from "./PopoverExample";
+
+<Ingress>
+    En popover brukes til å vise innhold i et flytende vindu og legger seg over alle andre elementer i grensesnittet.
+    Man styrer selv hvordan den vises og interageres med, ofte ved å klikke på et element som en knapp.
+</Ingress>
+
+** Popover er en kontrollert komponent som viser innhold i en boks som dukker opp ved siden av en trigger. **
+
+<ComponentExample
+    component={PopoverControlledExample}
+    codeExample={popoverControlledExampleCode}
+    knobs={popoverExampleKnobs}
+/>
+<ComponentExample
+    component={PopoverUnControlledExample}
+    codeExample={popoverUnControlledExampleCode}
+    knobs={popoverExampleKnobs}
+/>
+
+Første eksempel må være synlig uten å scrolle og skal ha et kodeeksempel som oppdateres til å matche valgte parametere.
+
+Fyll på med mer utfyllende beskrivelse av komponenten her under eksempelet, for eksempel føringer for innhold. List opp de ulike variantene dersom komponenten har dem, sammen med beskrivelse av når den ene varianten bør brukes i stedet for en annen.
+
+Dokumentér riktig og feil bruk av varianter visuelt med `DoDontExample`. Se for eksempel [Tag](/komponenter/tag) for inspirasjon.
+
+## Tilgjengelighet
+
+Dokumenter spesielle hensyn for universell utforming. Eksempler kan være spesielle hensyn som må tas for brukere av skjermlesere, for fargeblinde, eller liknende.
+
+## Når bruker vi Popover?
+
+Før du bruker Popover er det greit å ha tatt stilling til noen spørsmål:
+
+-   Liste med kontrollspørsmål
+-   Se [Message box](/komponenter/messagebox#når-bruker-vi-en-melding-) for eksempler
+
+Dokumentér riktig og feil bruk av komponenten visuelt med `DoDontExample`. Se for eksempel [Alert message](/komponenter/alertmessage#når-bruker-vi-en-varselmelding-) for inspirasjon.
+
+Om det er relevant, lenk direkte til andre komponenter som er riktig å bruke dersom denne komponenten ikke bør brukes i en gitt situasjon.
+
+Kontroller at Gatsby klarer å generere React API-dokumentasjon riktig i bunnen. Om komponenten din ikke dukker opp riktig, sørg for at den har et `displayName`. Om du får flere komponenter enn du ønsker i tabellen kan du bruke [`displayTypes` i frontmatter](https://github.com/fremtind/jokul/blob/60edb292a922eea69e539875359524e2c13eda3e/packages/core/documentation/Link.mdx?plain=1#L6-L8).
diff --git a/packages/popover-react/documentation/PopoverExample.tsx b/packages/popover-react/documentation/PopoverExample.tsx
@@ -0,0 +1,216 @@
+import React, { type FC } from "react";
+import { ExampleComponentProps, ExampleKnobsProps, CodeExample } from "../../../doc-utils";
+import { Button } from "../../button-react/src";
+import { TabList, Tab, Tabs, TabPanel } from "../../tabs-react/src";
+import Popover from "../src/Popover";
+
+export const popoverExampleKnobs: ExampleKnobsProps = {};
+
+const ExampleWrapperComponent = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <section
+            style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "2em",
+                lineHeight: "2",
+                marginTop: "1em",
+            }}
+        >
+            {children}
+        </section>
+    );
+};
+
+const ExampleTabPanel = () => {
+    return (
+        <Tabs>
+            <TabList aria-label="tabs">
+                <Tab>Brev</Tab>
+                <Tab>SMS</Tab>
+                <Tab>Notat</Tab>
+                <Tab>Be om</Tab>
+                <Tab>Saksflyt</Tab>
+            </TabList>
+            <TabPanel>
+                <ExampleWrapperComponent>
+                    <div>
+                        <p>Melding om dødsfall</p>
+                        <p>Politi</p>
+                        <p>Bytte av forsikringstaker og betaler</p>
+                        <p>Avbrutt svangerskap</p>
+                        <p>Fritekstbrev med purring og mulighet for basis-/utvidede fullmakter</p>
+                        <p>Fritekstbrev uten purring (venter på svar)</p>
+                        <p>Statsforvalteren</p>
+                        <p>Lege</p>
+                        <p>Opplysninger fra tingrett/fullmakt fra etterlatte</p>
+                        <p>Samboer</p>
+                        <p>Testamente</p>
+                        <p>Utbetalingsopplysninger utland</p>
+                        <p>Varsel om svik</p>
+                        <p>Lege-TestAuto</p>
+                    </div>
+                    <div>
+                        <p>Utbetalingsbrev NSF barn</p>
+                        <p>Fritekstbrev (venter ikke på svar)</p>
+                        <p>Avslag samboervilkår/avbrutt svangerskap</p>
+                        <p>Info til statsforvalteren</p>
+                        <p>Innkreving</p>
+                        <p>Utbetaling gruppeliv</p>
+                        <p>Ingen dekninger</p>
+                        <p>Avslag svik</p>
+                        <p>Avslag annet</p>
+                    </div>
+                </ExampleWrapperComponent>
+            </TabPanel>
+            <TabPanel>
+                <ExampleWrapperComponent>
+                    <div>
+                        <p>SMS sendt om betaling</p>
+                        <p>Bekreftelse på mottatt dokumentasjon</p>
+                        <p>SMS om manglende dokumenter</p>
+                        <p>Påminnelse om innsendelse av erklæring</p>
+                        <p>Viktig informasjon om forsikringen din</p>
+                        <p>Oppfølging av tidligere henvendelse</p>
+                        <p>Statusoppdatering på saken din</p>
+                    </div>
+                    <div>
+                        <p>SMS om saksbehandling</p>
+                        <p>Bekreftelse på utbetaling</p>
+                        <p>Varsel om forsinkelse</p>
+                        <p>SMS om avslag på krav</p>
+                        <p>Påminnelse om manglende betaling</p>
+                        <p>SMS med saksnummer</p>
+                        <p>Oppdatering om klageprosess</p>
+                    </div>
+                </ExampleWrapperComponent>
+            </TabPanel>
+            <TabPanel>
+                <ExampleWrapperComponent>
+                    <div>
+                        <p>Intern notat om saksbehandling</p>
+                        <p>Vurdering av medisinsk rapport</p>
+                        <p>Oppdatering om videre fremdrift</p>
+                        <p>Gjennomgang av innsendte dokumenter</p>
+                        <p>Notat om kontakt med kunde</p>
+                        <p>Internt notat om mulig svik</p>
+                    </div>
+                    <div>
+                        <p>Vurdering av klage</p>
+                        <p>Notat om utbetaling</p>
+                        <p>Gjennomgang av policydokument</p>
+                        <p>Notat om interne møter</p>
+                        <p>Sammenfatning av saksopplysninger</p>
+                        <p>Intern kommunikasjon om sak</p>
+                    </div>
+                </ExampleWrapperComponent>
+            </TabPanel>
+            <TabPanel>
+                <ExampleWrapperComponent>
+                    <div>
+                        <p>Forespørsel om mer informasjon</p>
+                        <p>Be om ny medisinsk vurdering</p>
+                        <p>Etterspørsel etter manglende dokumentasjon</p>
+                        <p>Tilleggsinformasjon fra kunde</p>
+                        <p>Be om bekreftelse på dekning</p>
+                    </div>
+                    <div>
+                        <p>Oppfølging av tidligere forespørsel</p>
+                        <p>Be om spesifisering av skade</p>
+                        <p>Forespørsel om dokumentasjon på utgifter</p>
+                        <p>Avklaring av vilkår</p>
+                        <p>Etterspørsel etter legeerklæring</p>
+                    </div>
+                </ExampleWrapperComponent>
+            </TabPanel>
+            <TabPanel>
+                <ExampleWrapperComponent>
+                    <div>
+                        <p>Sak opprettet</p>
+                        <p>Sak under behandling</p>
+                        <p>Sak avsluttet</p>
+                        <p>Sak eskalert</p>
+                        <p>Venter på tilbakemelding</p>
+                        <p>Saksflyt oppdatert</p>
+                    </div>
+                    <div>
+                        <p>Sak på vent</p>
+                        <p>Sak gjenåpnet</p>
+                        <p>Sak avsluttet uten utbetaling</p>
+                        <p>Sak overført til juridisk</p>
+                        <p>Sak sendt til ekstern vurdering</p>
+                        <p>Intern saksvurdering pågår</p>
+                    </div>
+                </ExampleWrapperComponent>
+            </TabPanel>
+        </Tabs>
+    );
+};
+
+export const PopoverControlledExample: FC<ExampleComponentProps> = () => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <Popover
+            floatingOptions={{
+                open,
+                onOpenChange: setOpen,
+            }}
+            roleOptions={{
+                role: "menu",
+            }}
+        >
+            <Popover.Trigger onClick={() => setOpen?.(!open)} aria-expanded={open} asChild>
+                <Button variant="primary">Åpne popover</Button>
+            </Popover.Trigger>
+            <Popover.Content padding={24}>
+                <ExampleTabPanel />
+            </Popover.Content>
+        </Popover>
+    );
+};
+
+export const PopoverUnControlledExample: FC<ExampleComponentProps> = () => {
+    return (
+        <Popover
+            roleOptions={{
+                role: "menu",
+            }}
+        >
+            <Popover.Trigger>Åpne popover</Popover.Trigger>
+            <Popover.Content padding={24}>
+                <ExampleTabPanel />
+            </Popover.Content>
+        </Popover>
+    );
+};
+
+export const popoverControlledExampleCode: CodeExample = () => `
+    <Popover
+        open={open}
+        onOpenChange={setOpen}
+        roleProps={{
+            role: "menu",
+        }}
+    >
+        <Popover.Trigger onClick={() => setOpen?.(!open)} aria-expanded={open} asChild>
+            <Button variant="primary">Åpne popover</Button>
+        </Popover.Trigger>
+        <Popover.Content padding={24}>
+            <ExampleTabPanel />
+        </Popover.Content>
+    </Popover>
+`;
+
+export const popoverUnControlledExampleCode: CodeExample = () => `
+    <Popover
+        roleProps={{
+            role: "menu",
+        }}
+    >
+        <Popover.Trigger>Åpne popover</Popover.Trigger>
+        <Popover.Content padding={24}>
+            <ExampleTabPanel />
+        </Popover.Content>
+    </Popover>
+`;
diff --git a/packages/popover-react/esbuild.dev.mjs b/packages/popover-react/esbuild.dev.mjs
@@ -0,0 +1,13 @@
+import { build } from "../../esbuild.dev.mjs";
+
+await build([
+    {
+        entryPoints: ["documentation/DevServer.tsx"],
+        outfile: "dist/server.js",
+        platform: "node",
+    },
+    {
+        entryPoints: ["documentation/DevClient.tsx"],
+        outfile: "dist/client.js",
+    },
+]);
diff --git a/packages/popover-react/esbuild.mjs b/packages/popover-react/esbuild.mjs
@@ -0,0 +1,13 @@
+import { build } from "../../esbuild.mjs";
+
+await build([
+    {
+        entryPoints: ["documentation/DevServer.tsx"],
+        outfile: "dist/server.js",
+        platform: "node",
+    },
+    {
+        entryPoints: ["documentation/DevClient.tsx"],
+        outfile: "dist/client.js",
+    },
+]);
diff --git a/packages/popover-react/esbuild.prod.mjs b/packages/popover-react/esbuild.prod.mjs
@@ -0,0 +1,7 @@
+import glob from "tiny-glob";
+import { build } from "../../esbuild.prod.mjs";
+
+await build({
+    entryPoints: await glob("src/**/!(*.test).@(ts|tsx)"),
+    outdir: "build",
+});
diff --git a/packages/popover-react/integration/popover.spec.js b/packages/popover-react/integration/popover.spec.js
@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+/// <reference types="../../../cypress/support" />
+
+describe("Popover", () => {
+    beforeEach(() => {
+        cy.testComponent("popover");
+    });
+
+    it("renders correctly", () => {
+        cy.takeSnapshots({
+            setup: () => {
+                // Her kan du velge å klikke rundt for å gjøre klart eksempelet for snapshot
+            },
+            teardown: () => {
+                // Her kan du eventuelt resette ting du gjorde i setup, dersom snapshoten for dark mode blir feil.
+                // Om du har brukt f. eks. `cy.setMedFeil()` i setup må du
+                // kalle `cy.resetMedFeil()` her.
+            },
+            // Se for øvrig typedefinisjonen for propertyene `eq` og `variants`.
+        });
+    });
+});