@navikt/ds-react 6.11.0 → 6.12.0

package/src/layout/sidemal-test/Filter.tsx

@@ -1,46 +0,0 @@
-import React, { useState } from "react";
-import { InformationSquareIcon } from "@navikt/aksel-icons";
-import { Checkbox, CheckboxGroup } from "../../form/checkbox";
-import { BodyLong, Detail, Heading } from "../../typography";
-import { Box } from "../box";
-import { HStack, VStack } from "../stack";
-
-export function FilterCard() {
-  const [filter, setFilter] = useState<any[]>([]);
-
-  return (
-    <Box
-      background="bg-default"
-      padding={{ xs: "4", md: "5" }}
-      borderWidth="5"
-      borderColor="border-alt-3"
-      borderRadius="medium"
-    >
-      <VStack gap="6">
-        <Heading size="large">Fortell oss om situasjonen din</Heading>
-        <BodyLong>
-          Fortell oss litt om situasjonen din, så viser vi bare den
-          informasjonen som er relevant for deg.
-        </BodyLong>
-        <div>
-          <CheckboxGroup
-            legend="Hva er situasjonen din?"
-            size="small"
-            onChange={setFilter}
-          >
-            <Checkbox value="box1">Jeg er arbeidsledig</Checkbox>
-            <Checkbox value="box2">Jeg er permittert</Checkbox>
-          </CheckboxGroup>
-          {!filter.length && (
-            <Box paddingBlock="2 0">
-              <HStack gap="2" align="center">
-                <InformationSquareIcon aria-hidden />
-                <Detail>Ingen filtre er valgt, så alt innhold vises.</Detail>
-              </HStack>
-            </Box>
-          )}
-        </div>
-      </VStack>
-    </Box>
-  );
-}

package/src/layout/sidemal-test/Header.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import { BodyShort, Detail, Heading } from "../../typography";
-import { Box } from "../box";
-import { Hide, Show } from "../responsive";
-import { HStack, VStack } from "../stack";
-import { ContentBox } from "./content-box";
-
-export function Header() {
-  return (
-    <Box
-      as="header"
-      borderWidth="0 0 4 0"
-      borderColor="border-success"
-      paddingBlock="12 0"
-    >
-      <ContentBox maxWidth="lg">
-        <Box background="surface-default" paddingInline="4" paddingBlock="0 6">
-          <HStack align="start" gap="8">
-            <Hide below="md">
-              <Pictogram />
-            </Hide>
-
-            <VStack gap={{ xs: "4", md: "5" }}>
-              <Heading level="1" size="xlarge">
-                Dagpenger
-              </Heading>
-
-              <Hide below="md">
-                <HStack gap="4" align="center">
-                  <BodyShort size="small">PENGESTØTTE</BodyShort>
-                  <span aria-hidden="true">|</span>
-                  <Detail>Oppdatert 5. juli 2023</Detail>
-                </HStack>
-              </Hide>
-              <Show below="md">
-                <VStack gap="2">
-                  <BodyShort size="small">PENGESTØTTE</BodyShort>
-                  <Detail>Oppdatert 24. august 2023</Detail>
-                </VStack>
-              </Show>
-            </VStack>
-          </HStack>
-        </Box>
-      </ContentBox>
-    </Box>
-  );
-}
-
-function Pictogram() {
-  return (
-    <svg
-      aria-hidden
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      width="80"
-      height="80"
-      viewBox="0 0 96.45 96.44"
-    >
-      <g clipPath="url(#clip0_4486_7567)">
-        <path
-          d="M37.6276 55.6806L12.707 30.76L31.2599 12.2071L56.1805 37.1277L66.7031 26.6052L75.0165 74.5166L27.1051 66.2031L37.6276 55.6806Z"
-          fill="#CCF1D6"
-        />
-        <path d="M41 11V33H2L2 9H27.5072" stroke="#262626" strokeWidth="3" />
-        <circle cx="22" cy="16" r="6.5" stroke="#262626" strokeWidth="3" />
-        <circle cx="35" cy="9" r="6.5" stroke="#262626" strokeWidth="3" />
-        <circle cx="62" cy="63" r="22.5" stroke="#262626" strokeWidth="3" />
-        <path
-          d="M77.8105 77.7964L94.9534 94.9392"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M47.6311 59.1036L72.7452 52.3743C73.0119 52.3028 73.2861 52.4611 73.3576 52.7279L75.1693 59.4894C75.3837 60.2896 74.9088 61.1121 74.1086 61.3265L50.9264 67.5381C50.1262 67.7525 49.3037 67.2777 49.0893 66.4775L47.2776 59.716C47.2061 59.4493 47.3644 59.1751 47.6311 59.1036Z"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M52.3847 74.912L50.4436 67.6676L74.5917 61.1971L76.5329 68.4416C76.7473 69.2418 76.2724 70.0643 75.4722 70.2787L54.2218 75.9727C53.4216 76.1871 52.5991 75.7122 52.3847 74.912Z"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-        <path
-          d="M64.1814 55.1864L63.6638 53.2546C63.092 51.1207 60.8987 49.8544 58.7648 50.4261V50.4261C56.631 50.9979 55.3646 53.1913 55.9364 55.3251L56.454 57.257"
-          stroke="#262626"
-          strokeWidth="3"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_4486_7567">
-          <rect width="96" height="96" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}

package/src/layout/sidemal-test/Intro.tsx

@@ -1,91 +0,0 @@
-import React from "react";
-import { LinkIcon } from "@navikt/aksel-icons";
-import { CopyButton } from "../../copybutton";
-import { BodyLong, Detail, Heading, Label } from "../../typography";
-import { Box } from "../box";
-import { HStack, VStack } from "../stack";
-
-export function IntroCard() {
-  return (
-    <Box
-      background="bg-default"
-      padding={{ xs: "4", md: "10" }}
-      borderRadius="medium"
-    >
-      <VStack gap="6">
-        <VStack gap="3" align="start">
-          <Heading size="large">Kort om dagpenger</Heading>
-          <CopyButton
-            copyText="#"
-            text="Kopier lenke"
-            activeText="Lenken er kopiert"
-            size="small"
-            icon={<LinkIcon aria-hidden />}
-          />
-        </VStack>
-        <BodyLong>
-          Dagpenger er en pengestøtte du kan få hvis du er arbeidsledig eller
-          permittert.
-        </BodyLong>
-        <div>
-          <Label as="p" spacing>
-            Dagpenger er aktuelt for deg som
-          </Label>
-          <HStack wrap gap="4">
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Er arbeidsledig eller permitert</Detail>
-              </HStack>
-            </Box>
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Søker jobb</Detail>
-              </HStack>
-            </Box>
-            <Box
-              borderRadius="full"
-              shadow="small"
-              borderWidth="1"
-              borderColor="border-subtle"
-              paddingBlock="1"
-              paddingInline="2"
-            >
-              <HStack gap="2" align="center">
-                <Box
-                  borderRadius="full"
-                  background="surface-warning"
-                  padding="1"
-                />
-                <Detail as="span">Trenger hjelp til å komme i jobb</Detail>
-              </HStack>
-            </Box>
-          </HStack>
-        </div>
-      </VStack>
-    </Box>
-  );
-}

package/src/layout/sidemal-test/Sidebar.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { Link } from "../../link";
-import { Heading, Label } from "../../typography";
-import { Box } from "../box";
-import { VStack } from "../stack";
-
-const LinkElement = ({ children }) => {
-  return (
-    <Label as="li" className="sidebarlink">
-      {children}
-    </Label>
-  );
-};
-
-export function Sidebar() {
-  return (
-    <VStack gap="4" className="sidebar">
-      <ContentPanel />
-      <NewsPanel />
-    </VStack>
-  );
-}
-
-export function ContentPanel() {
-  return (
-    <Box
-      as="nav"
-      aria-label="innhold"
-      paddingInline="2"
-      paddingBlock="8 4"
-      background="surface-default"
-      borderRadius="medium"
-    >
-      <Box paddingBlock="0 4" paddingInline="2 0">
-        <Heading size="medium">Innhold</Heading>
-      </Box>
-      <ul className="reset-list">
-        <LinkElement>Kort om dagpenger</LinkElement>
-        <LinkElement>Hvem kan få?</LinkElement>
-        <LinkElement>Hvor mye kan du få?</LinkElement>
-        <LinkElement>Når utbetales pengene?</LinkElement>
-        <LinkElement>Hvor lenge kan du få?</LinkElement>
-        <LinkElement>Slik søker du</LinkElement>
-        <LinkElement>Hva må du gjøre for å få dagpenger?</LinkElement>
-        <LinkElement>Gi beskjed om endringer</LinkElement>
-        <LinkElement>Jobb i kombinasjon med dagpenger</LinkElement>
-        <LinkElement>Utdanning og opplæring</LinkElement>
-        <LinkElement>Ferie og utenlandsopphold</LinkElement>
-        <LinkElement>Slik klager du</LinkElement>
-      </ul>
-    </Box>
-  );
-}
-
-export function NewsPanel() {
-  return (
-    <Box
-      paddingBlock="4"
-      paddingInline="2"
-      background="surface-default"
-      aria-label="Nyttig å vite"
-      as="section"
-      borderRadius="medium"
-    >
-      <Box paddingBlock="0 3" paddingInline="2">
-        <Heading size="small">Nyttig å vite</Heading>
-      </Box>
-      <nav aria-label="innhold">
-        <ul className="reset-list">
-          <Box paddingBlock="2" paddingInline="2">
-            <Link>Hva sier loven?</Link>
-          </Box>
-        </ul>
-      </nav>
-    </Box>
-  );
-}

package/src/layout/sidemal-test/content-box/ContentBox.tsx

@@ -1,46 +0,0 @@
-import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../../../util";
-
-export interface ContentBoxProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  maxWidth?: "3xl" | "2xl" | "xl" | "lg";
-}
-
-export const ContentBox: OverridableComponent<ContentBoxProps, HTMLDivElement> =
-  forwardRef(
-    ({ as: Component = "div", className, maxWidth = "xl", ...rest }, ref) => {
-      const getMaxWidth = () => {
-        return maxWidth === "3xl"
-          ? "1920px"
-          : maxWidth === "2xl"
-            ? "1440px"
-            : maxWidth === "xl"
-              ? "1280px"
-              : "1024px";
-      };
-
-      return (
-        <>
-          <Component
-            {...rest}
-            ref={ref}
-            style={{ "--__ac-contentbox--max-width": getMaxWidth() }}
-            className={cl("navds-contentbox", className)}
-          />
-          <style>
-            {`
-              .navds-contentbox {
-                --__ac-contentbox--max-width: initial;
-
-                margin: 0 auto;
-                max-width: var(--__ac-contentbox--max-width);
-              }
-            `}
-          </style>
-        </>
-      );
-    },
-  );
-
-export default ContentBox;

package/src/layout/sidemal-test/content-box/index.ts

@@ -1 +0,0 @@
-export { default as ContentBox, type ContentBoxProps } from "./ContentBox";

package/src/layout/sidemal-test/styling.css

@@ -1,43 +0,0 @@
-.reset-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Sidebars */
-.sidebar {
-  position: sticky;
-  top: 1rem;
-  bottom: 1rem;
-  max-height: calc(100vh - 2rem);
-  overflow: auto;
-}
-
-.sidebarlink {
-  color: var(--a-text-action);
-  cursor: pointer;
-  padding: var(--a-spacing-3) var(--a-spacing-2);
-}
-
-.sidebarlink:hover {
-  text-decoration: underline;
-  background-color: var(--a-surface-action-subtle);
-  color: var(--a-text-default);
-}
-
-/* Cards */
-.avatar-card {
-  --avatar-size: 4rem;
-
-  position: relative;
-  margin-top: calc(var(--avatar-size) / 2);
-}
-
-.avatar {
-  position: absolute;
-  top: calc((var(--avatar-size) / 2) * -1);
-  height: var(--avatar-size);
-  width: var(--avatar-size);
-  display: grid;
-  place-content: center;
-}