Merge 53ce2b3 into 3b21a6e

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";
+```

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 />);

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 />);

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}
+            />
+        </>
+    );
+}

packages/popover-react/documentation/Popover.mdx

@@ -0,0 +1,49 @@
+---
+title: Popover
+react: popover-react
+scss: popover
+group: edit me!
+---
+
+import {
+    PopoverControlledExample,
+    PopoverUnControlledExample,
+    popoverControlledExampleCode,
+    popoverUnControlledExampleCode,
+    popoverExampleKnobs,
+} from "./PopoverExample";
+
+<Ingress>
+    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>
+
+## Kontrollert vs Ukontrollert
+
+En kontrollert Popover-komponent gir deg full kontroll over åpning og lukking ved å tillate ekstern håndtering av tilstandene.
+
+<ComponentExample
+    title="Kontrollert Popover"
+    component={PopoverControlledExample}
+    codeExample={popoverControlledExampleCode}
+    knobs={popoverExampleKnobs}
+/>
+
+En ukontrollert Popover-komponent håndterer tilstandene selv og åpner og lukker seg basert på interaksjon med trigger-elementet.
+
+<ComponentExample
+    title="Ukontrollert Popover"
+    component={PopoverUnControlledExample}
+    codeExample={popoverUnControlledExampleCode}
+    knobs={popoverExampleKnobs}
+/>
+
+## Tilgjengelighet
+
+Popover-komponenten tar i bruk useRole-hooken fra [Floating UI](https://floating-ui.com/docs/userole) som automatisk tildeler nødvendige ARIA-roller til trigger- og det flytende elementet.
+
+Som default er role satt til "dialog". Er innholdet i Popover foreksempel tiltenkt en meny, bør role-proppen i roleOptions settes til "menu".
+
+```tsx
+<Popover roleOptions={{ role: "menu" }}>{/* Popover innhold */}</Popover>
+```

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
+            open={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 = () => `
+const [open, setOpen] = React.useState(false);
+
+<Popover
+    open={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 popoverUnControlledExampleCode: CodeExample = () => `
+<Popover
+    roleOptions={{
+        role: "menu",
+    }}
+>
+    <Popover.Trigger>Åpne popover</Popover.Trigger>
+    <Popover.Content padding={24}>
+        <ExampleTabPanel />
+    </Popover.Content>
+</Popover>
+`;

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",
+    },
+]);

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",
+    },
+]);

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",
+});

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`.
+        });
+    });
+});