mirror of
https://github.com/navikt/aksel.git
synced 2026-10-15 02:02:02 +00:00
Compare commits
15
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
be4a951962 | ||
|
Ken
|
1276b4d7ef | ||
|
Ken
|
8880b0dfb5 | ||
|
github-actions[bot]andgithub-actions[bot]
|
bfe60a9a62 | ||
|
Ken
|
33aef230b0 | ||
|
Ken
|
88243f76de | ||
|
Ken
|
c00112e3e6 | ||
|
Ken
|
3c66b00c24 | ||
|
Ken
|
db8303af42 | ||
|
Ken
|
5fbd2e1814 | ||
|
Ken
|
85697be305 | ||
|
Ken
|
36fb35533d | ||
|
Ken
|
3709e432bb | ||
|
Ken
|
c6077a03fa | ||
|
Ken
|
c6d51a0190 |
No files matched your search
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Aksel codemods for NAVs designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -39,8 +39,8 @@
|
||||
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.7.8",
|
||||
"@navikt/ds-react": "^2.7.8",
|
||||
"@navikt/ds-icons": "^2.8.1",
|
||||
"@navikt/ds-react": "^2.8.1",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
|
||||
|
||||
## 2.7.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
.navds-expansioncard {
|
||||
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
|
||||
--__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
|
||||
--__ac-expansioncard-border-width: 1px;
|
||||
|
||||
border-radius: var(--__ac-expansioncard-border-radius);
|
||||
background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.navds-expansioncard--open {
|
||||
--__ac-expansioncard-border-color: var(
|
||||
--ac-expansioncard-border-open-color,
|
||||
var(--ac-expansioncard-border-color, var(--a-border-default))
|
||||
);
|
||||
}
|
||||
|
||||
.navds-expansioncard:hover {
|
||||
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
|
||||
}
|
||||
|
||||
:where(.navds-expansioncard.navds-expansioncard--open):hover {
|
||||
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Header *
|
||||
*************************/
|
||||
.navds-expansioncard__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: var(--a-spacing-4);
|
||||
padding: var(--a-spacing-4) var(--a-spacing-6);
|
||||
border-radius: var(--__ac-expansioncard-border-radius);
|
||||
background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
|
||||
position: relative;
|
||||
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navds-expansioncard--small > :where(.navds-expansioncard__header) {
|
||||
padding: var(--a-spacing-3) var(--a-spacing-4);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header:hover {
|
||||
background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
|
||||
box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
|
||||
}
|
||||
|
||||
.navds-expansioncard--open > :where(.navds-expansioncard__header) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
|
||||
background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
|
||||
box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
|
||||
0 -1px 0 0 var(--__ac-expansioncard-border-color);
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Header/Typography *
|
||||
*************************/
|
||||
|
||||
.navds-expansioncard__title--small {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.navds-expansioncard__title--medium {
|
||||
margin-top: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
.navds-expansioncard__title--large {
|
||||
margin-top: var(--a-spacing-1);
|
||||
}
|
||||
|
||||
.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
|
||||
margin-top: var(--a-spacing-05);
|
||||
}
|
||||
|
||||
.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Header/Button *
|
||||
*************************/
|
||||
.navds-expansioncard__header-button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
|
||||
min-height: 3rem;
|
||||
min-width: 3rem;
|
||||
font-size: 1.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
|
||||
min-height: 2rem;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
|
||||
background-color: var(--a-surface-hover);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-chevron {
|
||||
transition: transform 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
|
||||
transform: translateY(0) rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
|
||||
transform: translateY(-1px) rotate(180deg);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button::after {
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Content *
|
||||
*************************/
|
||||
.navds-expansioncard__content {
|
||||
border-end-end-radius: var(--__ac-expansioncard-border-radius);
|
||||
border-end-start-radius: var(--__ac-expansioncard-border-radius);
|
||||
padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
|
||||
border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.navds-expansioncard--small > :where(.navds-expansioncard__content) {
|
||||
padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
|
||||
}
|
||||
|
||||
.navds-expansioncard__content--closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
|
||||
box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
|
||||
0 1px 0 0 var(--__ac-expansioncard-border-color);
|
||||
}
|
||||
|
||||
.navds-expansioncard__content-inner {
|
||||
animation: fadeExpansionCard 250ms ease;
|
||||
}
|
||||
|
||||
.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes fadeExpansionCard {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@
|
||||
@import "content-container.css";
|
||||
@import "chat.css";
|
||||
@import "chips.css";
|
||||
@import "expansioncard.css";
|
||||
@import "guide-panel.css";
|
||||
@import "form/index.css";
|
||||
@import "help-text.css";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -20,7 +20,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.7.8",
|
||||
"@navikt/ds-tokens": "^2.8.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-cli": "^9.0.0",
|
||||
|
||||
@@ -106,6 +106,16 @@
|
||||
"--ac-date-input-error-border": "--a-border-danger",
|
||||
"--ac-date-input-button-text": "--a-text-default"
|
||||
},
|
||||
"expansioncard": {
|
||||
"--ac-expansioncard-bg": "--a-surface-default",
|
||||
"--ac-expansioncard-header-bg": "--a-surface-transparent",
|
||||
"--ac-expansioncard-header-bg-hover": "--a-surface-hover",
|
||||
"--ac-expansioncard-border-color": "--a-border-default",
|
||||
"--ac-expansioncard-border-open-color": "--a-border-default",
|
||||
"--ac-expansioncard-border-radius": "--a-border-radius-large",
|
||||
"--ac-expansioncard-button-border-radius": "--a-border-radius-medium",
|
||||
"--ac-expansioncard-border-hover-color": "--a-border-strong"
|
||||
},
|
||||
"guidepanel": {
|
||||
"--ac-guide-panel-bg": "--a-surface-default",
|
||||
"--ac-guide-panel-border": "--a-border-action",
|
||||
|
||||
@@ -1,5 +1,27 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 2.8.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Endret default title-size til medium for ExpansionCard
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@2.8.1
|
||||
- @navikt/ds-icons@2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@2.8.0
|
||||
- @navikt/ds-icons@2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.17.0",
|
||||
"@navikt/ds-icons": "^2.7.8",
|
||||
"@navikt/aksel-icons": "^2.8.1",
|
||||
"@navikt/ds-icons": "^2.8.1",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import cl from "clsx";
|
||||
import React, { createContext, forwardRef, useRef, useState } from "react";
|
||||
import ExpansionCardContent, {
|
||||
ExpansionCardContentType,
|
||||
} from "./ExpansionCardContent";
|
||||
import {
|
||||
ExpansionCardDescription,
|
||||
ExpansionCardDescriptionType,
|
||||
} from "./ExpansionCardDescription";
|
||||
import ExpansionCardHeader, {
|
||||
ExpansionCardHeaderType,
|
||||
} from "./ExpansionCardHeader";
|
||||
import {
|
||||
ExpansionCardTitle,
|
||||
ExpansionCardTitleType,
|
||||
} from "./ExpansionCardTitle";
|
||||
|
||||
interface ExpansionCardComponent
|
||||
extends React.ForwardRefExoticComponent<
|
||||
ExpansionCardProps & React.RefAttributes<HTMLDivElement>
|
||||
> {
|
||||
Header: ExpansionCardHeaderType;
|
||||
Title: ExpansionCardTitleType;
|
||||
Description: ExpansionCardDescriptionType;
|
||||
Content: ExpansionCardContentType;
|
||||
}
|
||||
|
||||
export interface ExpansionCardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Callback for when Card is toggled open/closed
|
||||
*/
|
||||
onToggle?: (open: boolean) => void;
|
||||
/**
|
||||
* Controlled open-state
|
||||
* Using this removes automatic control of open-state
|
||||
*/
|
||||
open?: boolean;
|
||||
/**
|
||||
* Defaults to open if not controlled
|
||||
* @default false
|
||||
*/
|
||||
defaultOpen?: boolean;
|
||||
/**
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Since ExpansionCard is a section-element, accessible name is required.
|
||||
*/
|
||||
["aria-label"]: string;
|
||||
}
|
||||
|
||||
export type ExpansionCardContextProps = {
|
||||
open: boolean;
|
||||
toggleOpen: () => void;
|
||||
};
|
||||
|
||||
export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
|
||||
open: false,
|
||||
toggleOpen: () => {},
|
||||
});
|
||||
|
||||
export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
onToggle,
|
||||
open,
|
||||
defaultOpen = false,
|
||||
size = "medium",
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [_open, _setOpen] = useState(defaultOpen);
|
||||
|
||||
const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
|
||||
|
||||
const handleOpen = () => {
|
||||
if (open === undefined) {
|
||||
const newOpen = !_open;
|
||||
_setOpen(newOpen);
|
||||
onToggle?.(newOpen);
|
||||
} else {
|
||||
onToggle?.(!open);
|
||||
}
|
||||
shouldFade.current = true;
|
||||
};
|
||||
|
||||
return (
|
||||
<ExpansionCardContext.Provider
|
||||
value={{ open: open ?? _open, toggleOpen: handleOpen }}
|
||||
>
|
||||
<section
|
||||
{...rest}
|
||||
className={cl(
|
||||
"navds-expansioncard",
|
||||
className,
|
||||
`navds-expansioncard--${size}`,
|
||||
{
|
||||
"navds-expansioncard--open": open ?? _open,
|
||||
"navds-expansioncard--no-fade": !shouldFade.current,
|
||||
}
|
||||
)}
|
||||
ref={ref}
|
||||
/>
|
||||
</ExpansionCardContext.Provider>
|
||||
);
|
||||
}
|
||||
) as ExpansionCardComponent;
|
||||
|
||||
ExpansionCard.Header = ExpansionCardHeader;
|
||||
ExpansionCard.Content = ExpansionCardContent;
|
||||
ExpansionCard.Title = ExpansionCardTitle;
|
||||
ExpansionCard.Description = ExpansionCardDescription;
|
||||
|
||||
export default ExpansionCard;
|
||||
@@ -0,0 +1,42 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { BodyLong } from "../typography/BodyLong";
|
||||
import { ExpansionCardContext } from "./ExpansionCard";
|
||||
|
||||
export interface ExpansionCardContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ExpansionCardContentType = React.ForwardRefExoticComponent<
|
||||
ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const ExpansionCardContent: ExpansionCardContentType = forwardRef(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
const panelContext = useContext(ExpansionCardContext);
|
||||
|
||||
if (panelContext === null) {
|
||||
console.error(
|
||||
"<ExpansionCard.Content> has to be used within an <ExpansionCard>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BodyLong
|
||||
{...rest}
|
||||
ref={ref}
|
||||
as="div"
|
||||
className={cl("navds-expansioncard__content", {
|
||||
"navds-expansioncard__content--closed": !panelContext.open,
|
||||
})}
|
||||
aria-hidden={!panelContext.open}
|
||||
>
|
||||
<div className="navds-expansioncard__content-inner">{children}</div>
|
||||
</BodyLong>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ExpansionCardContent;
|
||||
@@ -0,0 +1,22 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyLong } from "../typography/BodyLong";
|
||||
|
||||
interface ExpansionCardDescriptionProps
|
||||
extends React.HTMLAttributes<HTMLParagraphElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
|
||||
ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
|
||||
>;
|
||||
|
||||
export const ExpansionCardDescription: ExpansionCardDescriptionType =
|
||||
forwardRef(({ className, ...rest }, ref) => (
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="p"
|
||||
ref={ref}
|
||||
className={cl("navds-link-panel__description", className)}
|
||||
/>
|
||||
));
|
||||
@@ -0,0 +1,50 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import { ExpansionCardContext } from "./ExpansionCard";
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export interface ExpansionCardHeaderProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
|
||||
ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
|
||||
({ children, className, ...rest }, ref) => {
|
||||
const panelContext = useContext(ExpansionCardContext);
|
||||
|
||||
if (panelContext === null) {
|
||||
console.error(
|
||||
"<ExpansionCard.Header> has to be used within an <ExpansionCard>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...rest}
|
||||
className={cl("navds-expansioncard__header", className)}
|
||||
>
|
||||
<div className="navds-expansioncard__header-content">{children}</div>
|
||||
|
||||
<button
|
||||
className="navds-expansioncard__header-button"
|
||||
onClick={() => panelContext.toggleOpen()}
|
||||
type="button"
|
||||
aria-expanded={panelContext.open}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className="navds-expansioncard__header-chevron"
|
||||
title="Vis mer"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ExpansionCardHeader;
|
||||
@@ -0,0 +1,34 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import cl from "clsx";
|
||||
import { OverridableComponent } from "../util/OverridableComponent";
|
||||
|
||||
interface ExpansionCardTitleProps
|
||||
extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Changes text-sizing
|
||||
* @default medium
|
||||
*/
|
||||
size?: "large" | "medium" | "small";
|
||||
}
|
||||
|
||||
export type ExpansionCardTitleType = OverridableComponent<
|
||||
ExpansionCardTitleProps,
|
||||
HTMLHeadingElement
|
||||
>;
|
||||
|
||||
export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
|
||||
({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
|
||||
<Component
|
||||
{...rest}
|
||||
ref={ref}
|
||||
className={cl(
|
||||
"navds-expansioncard__title",
|
||||
`navds-expansioncard__title--${size}`,
|
||||
"navds-heading",
|
||||
`navds-heading--${size}`,
|
||||
className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@@ -0,0 +1,269 @@
|
||||
import { PlantIcon } from "@navikt/aksel-icons";
|
||||
import React, { useState } from "react";
|
||||
import { ExpansionCard } from ".";
|
||||
import { BodyLong } from "../typography";
|
||||
import ExpansionCardContent from "./ExpansionCardContent";
|
||||
import ExpansionCardHeader from "./ExpansionCardHeader";
|
||||
|
||||
export default {
|
||||
title: "ds-react/ExpansionCard",
|
||||
component: ExpansionCard,
|
||||
subcomponents: [ExpansionCardHeader, ExpansionCardContent],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
const Content = () => (
|
||||
<ExpansionCard.Content>
|
||||
<BodyLong spacing>
|
||||
På ditt faste arbeidssted vil du ha yrkesskadedekning også i hvilepauser,
|
||||
lunsjpauser, trimaktiviteter og lignende i arbeidstiden.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
Som hovedregel er du som arbeidstaker ikke yrkesskadedekket på veien til
|
||||
og fra arbeid eller første og siste oppdragssted. Du er heller ikke
|
||||
yrkesskadedekket på fritiden eller under private gjøremål i arbeidstiden.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
|
||||
voluptatum expedita earum id, aperiam deleniti molestiae eveniet
|
||||
doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
|
||||
aspernatur obcaecati dicta.
|
||||
</BodyLong>
|
||||
<BodyLong spacing>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
|
||||
voluptatum expedita earum id, aperiam deleniti molestiae eveniet
|
||||
doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
|
||||
aspernatur obcaecati dicta.
|
||||
</BodyLong>
|
||||
<BodyLong>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
|
||||
voluptatum expedita earum id, aperiam deleniti molestiae eveniet
|
||||
doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
|
||||
aspernatur obcaecati dicta.
|
||||
</BodyLong>
|
||||
</ExpansionCard.Content>
|
||||
);
|
||||
|
||||
export const Default = {
|
||||
render: (props) => {
|
||||
return (
|
||||
<ExpansionCard
|
||||
{...props}
|
||||
open={props?.open || undefined}
|
||||
size={props.size}
|
||||
aria-label="default-demo"
|
||||
>
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
{props.description && (
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
)}
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
open: false,
|
||||
size: "medium",
|
||||
description: false,
|
||||
variant: "neutral",
|
||||
},
|
||||
argTypes: {
|
||||
size: { control: "select", options: ["medium", "small"] },
|
||||
},
|
||||
};
|
||||
|
||||
export const Description = {
|
||||
render: () => (
|
||||
<ExpansionCard aria-label="bare description">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
|
||||
tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
),
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
render: () => (
|
||||
<>
|
||||
<h2>Medium</h2>
|
||||
<ExpansionCard aria-label="Demo med description">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
<ExpansionCard aria-label="Demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
<h2>Small</h2>
|
||||
<ExpansionCard size="small" aria-label="small-demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
<ExpansionCard
|
||||
size="small"
|
||||
aria-label="small-demo med avatar uten description"
|
||||
>
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
export const HeadingSizing = {
|
||||
render: () => (
|
||||
<>
|
||||
{(["large", "medium", "small"] as const).map((x) => (
|
||||
<ExpansionCard aria-label={`demo-${x}`}>
|
||||
<ExpansionCard.Header key={x}>
|
||||
<ExpansionCard.Title size={x}>{x}</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
))}
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
export const DefaultOpen = {
|
||||
render: () => (
|
||||
<ExpansionCard defaultOpen aria-label="defaultOpen demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
|
||||
tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
),
|
||||
};
|
||||
|
||||
export const ControlledState = {
|
||||
render: () => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<ExpansionCard
|
||||
open={open}
|
||||
onToggle={setOpen}
|
||||
aria-label="Controlled-state demo"
|
||||
>
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const Customization = {
|
||||
render: () => (
|
||||
<div className="subtle-card">
|
||||
<ExpansionCard aria-label="custom-styling demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
|
||||
<style>{`
|
||||
.subtle-card {
|
||||
--ac-expansioncard-bg: var(--a-surface-subtle);
|
||||
--ac-expansioncard-border-open-color: var(--a-border-alt-3);
|
||||
}`}</style>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Icon = {
|
||||
render: () => (
|
||||
<div>
|
||||
<ExpansionCard aria-label="custom-styling demo">
|
||||
<ExpansionCard.Header>
|
||||
<div className="with-icon">
|
||||
<div className="icon">
|
||||
<PlantIcon aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel
|
||||
krav til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</div>
|
||||
</div>
|
||||
</ExpansionCard.Header>
|
||||
<Content />
|
||||
</ExpansionCard>
|
||||
|
||||
<style>{`
|
||||
.with-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.icon {
|
||||
font-size: 3rem;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}`}</style>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export {
|
||||
type ExpansionCardProps,
|
||||
default as ExpansionCard,
|
||||
} from "./ExpansionCard";
|
||||
@@ -5,6 +5,7 @@ export * from "./chat";
|
||||
export * from "./chips";
|
||||
export * from "./date";
|
||||
export * from "./form";
|
||||
export * from "./expansion-card";
|
||||
export * from "./grid";
|
||||
export * from "./guide-panel";
|
||||
export * from "./help-text";
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.7.8",
|
||||
"@navikt/ds-tokens": "^2.8.1",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Aksel icons for NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "CSS for NAV internal Designsystem-components",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 2.8.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd)]:
|
||||
- @navikt/ds-react@2.8.1
|
||||
- @navikt/ds-icons@2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458)]:
|
||||
- @navikt/ds-react@2.8.0
|
||||
- @navikt/ds-icons@2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "2.7.8",
|
||||
"version": "2.8.1",
|
||||
"description": "Aksel react components for internal UIs in NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -35,8 +35,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.7.8",
|
||||
"@navikt/ds-react": "^2.7.8",
|
||||
"@navikt/ds-icons": "^2.8.1",
|
||||
"@navikt/ds-react": "^2.8.1",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^2.7.8",
|
||||
"@navikt/ds-codemod": "^2.7.8",
|
||||
"@navikt/ds-css": "^2.7.8",
|
||||
"@navikt/ds-css-internal": "^2.7.8",
|
||||
"@navikt/ds-icons": "^2.7.8",
|
||||
"@navikt/ds-react": "^2.7.8",
|
||||
"@navikt/ds-react-internal": "^2.7.8",
|
||||
"@navikt/ds-tailwind": "^2.7.8",
|
||||
"@navikt/ds-tokens": "^2.7.8"
|
||||
"@navikt/aksel-icons": "^2.8.1",
|
||||
"@navikt/ds-codemod": "^2.8.1",
|
||||
"@navikt/ds-css": "^2.8.1",
|
||||
"@navikt/ds-css-internal": "^2.8.1",
|
||||
"@navikt/ds-icons": "^2.8.1",
|
||||
"@navikt/ds-react": "^2.8.1",
|
||||
"@navikt/ds-react-internal": "^2.8.1",
|
||||
"@navikt/ds-tailwind": "^2.8.1",
|
||||
"@navikt/ds-tokens": "^2.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.2.3"
|
||||
|
||||
@@ -3,6 +3,7 @@ import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
|
||||
import BlockContent from "@sanity/block-content-to-react";
|
||||
import cl from "clsx";
|
||||
import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
|
||||
import ExpansionCard from "components/sanity-modules/ExpansionCard";
|
||||
import NextLink from "next/link";
|
||||
import React, { createContext, useContext } from "react";
|
||||
import {
|
||||
@@ -49,6 +50,7 @@ const serializers = {
|
||||
do_dont: ({ node }) => <DoDont node={node} />,
|
||||
bilde: ({ node }) => <Bilde node={node} />,
|
||||
alert: ({ node }) => <Alert node={node} />,
|
||||
expansioncard: ({ node }) => <ExpansionCard node={node} />,
|
||||
kode: ({ node }) => <Kode node={node} />,
|
||||
tabell_v2: ({ node }) => <Tabell node={node} />,
|
||||
accordion: ({ node }) => <Accordion node={node} />,
|
||||
|
||||
@@ -13,7 +13,7 @@ const Footer = () => {
|
||||
data-theme="dark"
|
||||
className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
|
||||
>
|
||||
<div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:px-6 xl:grid-cols-5 xl:gap-6">
|
||||
<div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:grid-cols-2 md:px-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6">
|
||||
<LogoBlock />
|
||||
<Snarveier />
|
||||
<SideLenker />
|
||||
|
||||
@@ -55,7 +55,10 @@ const FooterForm = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full max-w-md flex-col" data-theme="dark">
|
||||
<div
|
||||
className="flex w-full max-w-md flex-col lg:col-span-2 xl:col-span-1"
|
||||
data-theme="dark"
|
||||
>
|
||||
<div aria-live="polite">
|
||||
{sent.status && (
|
||||
<Label spacing as="p">
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { SanityBlockContent } from "@/sanity-block";
|
||||
import { ExpansionCard as DsExpansionCard } from "@navikt/ds-react";
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
|
||||
const ExpansionCard = ({
|
||||
node,
|
||||
}: {
|
||||
node: {
|
||||
heading: string;
|
||||
heading_level: "h3" | "h4";
|
||||
description?: string;
|
||||
body: any[];
|
||||
};
|
||||
}): JSX.Element => {
|
||||
if (!node.heading || !node.body || !node.heading_level) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<DsExpansionCard className="mb-7 max-w-2xl" aria-label={node.heading}>
|
||||
<DsExpansionCard.Header>
|
||||
<DsExpansionCard.Title
|
||||
as={node.heading_level}
|
||||
size={node.heading_level === "h3" ? "medium" : "small"}
|
||||
>
|
||||
{node.heading}
|
||||
</DsExpansionCard.Title>
|
||||
{node?.description && (
|
||||
<DsExpansionCard.Description>
|
||||
{node.description}
|
||||
</DsExpansionCard.Description>
|
||||
)}
|
||||
</DsExpansionCard.Header>
|
||||
<DsExpansionCard.Content>
|
||||
<SanityBlockContent blocks={node.body} noLastMargin />
|
||||
</DsExpansionCard.Content>
|
||||
</DsExpansionCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default withErrorBoundary(ExpansionCard, "ExpansionCard");
|
||||
@@ -14,7 +14,7 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<li className="flex items-center gap-2 px-2 py-4 sm:gap-4 sm:px-6">
|
||||
<li className="flex items-center gap-2 px-2 py-4 sm:gap-4 sm:px-6">
|
||||
<div className="relative h-8 w-8 shrink-0 sm:h-12 sm:w-12">
|
||||
<Image
|
||||
src={urlFor(node?.pictogram).auto("format").url()}
|
||||
|
||||
@@ -6,3 +6,15 @@
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.containerStatic {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.containerStatic > * {
|
||||
max-width: 30rem;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -4,15 +4,25 @@ import cl from "clsx";
|
||||
|
||||
export const withDsExample = (
|
||||
Component: ComponentType,
|
||||
variant?: "full" | "inverted"
|
||||
/**
|
||||
* Static: Used for dynamic-height examples like ExpansionCard
|
||||
*/
|
||||
variant?: "full" | "inverted" | "static"
|
||||
) => {
|
||||
const DsHOC = (props: any) => (
|
||||
<div
|
||||
className={cl(styles.container, {
|
||||
className={cl({
|
||||
"bg-gray-900": variant === "inverted",
|
||||
[styles.containerStatic]: variant === "static",
|
||||
[styles.container]: variant !== "static",
|
||||
})}
|
||||
>
|
||||
<div id="ds-example" className={cl({ "w-full": variant === "full" })}>
|
||||
<div
|
||||
id="ds-example"
|
||||
className={cl({
|
||||
"w-full": variant === "full",
|
||||
})}
|
||||
>
|
||||
<Component {...props} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,9 +6,11 @@ import { ChangeLogIconOutline } from "components/assets";
|
||||
const SuggestionBlockComponent = ({
|
||||
variant,
|
||||
reference = "",
|
||||
unsafe = false,
|
||||
}: {
|
||||
variant: "komponent-beta" | "komponent-ny";
|
||||
reference?: string;
|
||||
unsafe?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
@@ -22,12 +24,18 @@ const SuggestionBlockComponent = ({
|
||||
<Heading size="small" level="2">
|
||||
{options[variant]?.heading}
|
||||
</Heading>
|
||||
<BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
|
||||
<BodyLong className="mt-2">
|
||||
{variant === "komponent-beta" && unsafe
|
||||
? options["komponent-beta-unsafe"].text
|
||||
: options[variant]?.text}
|
||||
</BodyLong>
|
||||
<Button
|
||||
variant="secondary-neutral"
|
||||
as="a"
|
||||
href={options[variant].link + reference}
|
||||
className="mt-4 w-fit"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Send innspill
|
||||
</Button>
|
||||
@@ -56,6 +64,8 @@ const SuggestionBlockIcon = ({
|
||||
as="a"
|
||||
href={options[variant].link + reference}
|
||||
className="mt-4 w-fit"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Send innspill
|
||||
</Button>
|
||||
@@ -67,6 +77,7 @@ const SuggestionBlockIcon = ({
|
||||
export const SuggestionBlock = ({
|
||||
variant,
|
||||
reference = "",
|
||||
unsafe,
|
||||
}: {
|
||||
variant:
|
||||
| "ikoner"
|
||||
@@ -78,9 +89,16 @@ export const SuggestionBlock = ({
|
||||
| "ikon-not-found"
|
||||
| "ikon";
|
||||
reference?: string;
|
||||
unsafe?: boolean;
|
||||
}) => {
|
||||
if (variant === "komponent-ny" || variant === "komponent-beta") {
|
||||
return <SuggestionBlockComponent variant={variant} reference={reference} />;
|
||||
return (
|
||||
<SuggestionBlockComponent
|
||||
variant={variant}
|
||||
unsafe={unsafe}
|
||||
reference={reference}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === "ikon-ny" || variant === "ikon") {
|
||||
@@ -106,6 +124,8 @@ export const SuggestionBlock = ({
|
||||
variant="secondary-neutral"
|
||||
as="a"
|
||||
href={options[variant]?.link + reference}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Send forslag
|
||||
</Button>
|
||||
@@ -165,7 +185,45 @@ const options: {
|
||||
icon: <ChangeLogIconOutline />,
|
||||
},
|
||||
"komponent-beta": {
|
||||
text: "Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
|
||||
text: "Komponenten er under utvikling, men klar for adopsjon. Vi er ønsker gjerne innspill på hvordan den fungerer og hvilken forbedringer vi kan gjøre.",
|
||||
link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
|
||||
heading: "Beta",
|
||||
icon: (
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
focusable={false}
|
||||
aria-hidden
|
||||
>
|
||||
<path
|
||||
d="M14.5471 3.99994H10.4528V9.48408L4.83594 17.1731C3.94768 18.3891 4.92474 19.9999 6.55053 19.9999H18.4495C20.0753 19.9999 21.0523 18.3891 20.1641 17.1731L14.5471 9.48408V3.99994Z"
|
||||
stroke="#262626"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 4H15.5"
|
||||
stroke="#262626"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.75 12L16.25 12"
|
||||
stroke="#262626"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
"komponent-beta-unsafe": {
|
||||
text: "Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må ta selv ta stilling til om dere ønsker å bruke denne i produksjon.",
|
||||
link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
|
||||
heading: "Beta",
|
||||
icon: (
|
||||
|
||||
@@ -90,6 +90,13 @@ const defaultBlock = `
|
||||
${markDef}
|
||||
}
|
||||
},
|
||||
_type == "expansioncard" =>{
|
||||
...,
|
||||
body[]{
|
||||
...,
|
||||
${markDef}
|
||||
}
|
||||
},
|
||||
_type == "kode" =>{
|
||||
...,
|
||||
"ref": ref->{...},
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@sanity/block-content-to-react": "^3.0.0",
|
||||
"@sanity/client": "^5.2.2",
|
||||
"@sanity/client": "^5.3.0",
|
||||
"@sanity/code-input": "4.1.0",
|
||||
"@sanity/color-input": "^3.0.2",
|
||||
"@sanity/icons": "2.2.2",
|
||||
@@ -35,7 +35,7 @@
|
||||
"@sanity/preview-kit": "^1.3.4",
|
||||
"@sanity/table": "1.0.1",
|
||||
"@sanity/ui": "^1.3.0",
|
||||
"@sanity/vision": "3.6.0",
|
||||
"@sanity/vision": "3.7.0",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"amplitude-js": "^8.21.5",
|
||||
"boring-avatars": "1.7.0",
|
||||
@@ -53,7 +53,7 @@
|
||||
"react-dom": "^18.0.0",
|
||||
"react-modal": "3.15.1",
|
||||
"recharts": "^2.2.0",
|
||||
"sanity": "3.6.0",
|
||||
"sanity": "3.7.0",
|
||||
"sanity-plugin-asset-source-unsplash": "^1.0.6",
|
||||
"sanity-plugin-iframe-pane": "^2.2.0",
|
||||
"sanity-plugin-media": "^2.0.5",
|
||||
|
||||
@@ -6,7 +6,10 @@ const Example = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div className="grid place-items-start gap-2">
|
||||
<Accordion style={{ width: "100%", maxWidth: "65ch" }}>
|
||||
<Button variant="secondary" onClick={() => setOpen(!open)}>
|
||||
Toggle Accordion
|
||||
</Button>
|
||||
<Accordion>
|
||||
<Accordion.Item open={open}>
|
||||
<Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
@@ -26,14 +29,11 @@ const Example = () => {
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<Button variant="secondary" onClick={() => setOpen(!open)}>
|
||||
Toggle Accordion
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<Accordion style={{ width: "100%", maxWidth: "65ch" }}>
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
@@ -26,7 +26,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example);
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { ExternalLinkIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="subtle-card">
|
||||
<ExpansionCard aria-label="Demo med custom-styling">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
|
||||
til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
|
||||
<style>{`
|
||||
.subtle-card {
|
||||
--ac-expansioncard-bg: var(--a-deepblue-50);
|
||||
--ac-expansioncard-border-open-color: var(--a-border-alt-3);
|
||||
--ac-expansioncard-border-hover-color: var(--a-border-alt-3);
|
||||
}`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 4,
|
||||
desc: "Tokens lar deg lett gjøre stilendringene du trenger uten å måtte overskrive css-klasser.",
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,81 @@
|
||||
import { ExternalLinkIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<ExpansionCard aria-label="default-demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,84 @@
|
||||
import { ExternalLinkIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<ExpansionCard aria-label="Demo med description">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
Du er registerert som mottaker av sykepenger fra NAV
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 1,
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,105 @@
|
||||
import { ExternalLinkIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<ExpansionCard aria-label="Heading-size large demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title as="h2" size="large">
|
||||
Utbetaling av sykepenger
|
||||
</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
<ExpansionCard aria-label="Heading-size medium demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title as="h3" size="medium">
|
||||
Utbetaling av sykepenger
|
||||
</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
<ExpansionCard aria-label="Heading-size small demo">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title as="h4" size="small">
|
||||
Utbetaling av sykepenger
|
||||
</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 3,
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,110 @@
|
||||
import { ExternalLinkIcon, PlantIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="subtle-card">
|
||||
<ExpansionCard aria-label="Demo med custom-styling">
|
||||
<ExpansionCard.Header>
|
||||
<div className="with-icon">
|
||||
<div className="icon">
|
||||
<PlantIcon aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<ExpansionCard.Title>
|
||||
Utbetaling av sykepenger
|
||||
</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
For at yrkesskadedekningen skal gjelde, er det som hovedregel
|
||||
krav til tid, sted og arbeidsoppgaver
|
||||
</ExpansionCard.Description>
|
||||
</div>
|
||||
</div>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
|
||||
<style>{`
|
||||
.with-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.icon {
|
||||
font-size: 3rem;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
desc: "Man kan manuelt legge til ikoner eller illustrasjoner med egen styling.",
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 5,
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,94 @@
|
||||
import { ExternalLinkIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
|
||||
import { withDsExample } from "components/website-modules/examples/withDsExample";
|
||||
|
||||
const Example = () => {
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<ExpansionCard size="small" aria-label="Small-variant">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
<ExpansionCard size="small" aria-label="Small-variant med description">
|
||||
<ExpansionCard.Header>
|
||||
<ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
|
||||
<ExpansionCard.Description>
|
||||
Du er registerert som mottaker av sykepenger fra NAV
|
||||
</ExpansionCard.Description>
|
||||
</ExpansionCard.Header>
|
||||
<ExpansionCard.Content>
|
||||
<Innhold />
|
||||
</ExpansionCard.Content>
|
||||
</ExpansionCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, "static");
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
};
|
||||
|
||||
export const args = {
|
||||
index: 2,
|
||||
};
|
||||
|
||||
const Innhold = () => (
|
||||
<>
|
||||
<Label as="p" spacing>
|
||||
Beløpet går til arbeidsgiveren din
|
||||
</Label>
|
||||
<BodyLong spacing>
|
||||
Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
|
||||
pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
|
||||
forpliktet til å vise deg informasjonen fordi det handler om deg.
|
||||
</BodyLong>
|
||||
<Label as="p" spacing>
|
||||
Slik beregner vi sykepengene
|
||||
</Label>
|
||||
<dl className="border-border-subtle grid gap-1 border-b pb-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Beregnet månedslønn</dt>
|
||||
<dd>27 256 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Omgregnet til årslønn</dt>
|
||||
<dd>327 072 kr</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Daglig sykepengebeløp</dt>
|
||||
<dd>1 258 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<dl className="pt-6">
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt>Utbetalinger totalt</dt>
|
||||
<dd>5 dager</dd>
|
||||
</div>
|
||||
<div className="border-border-default flex justify-between border-b py-1">
|
||||
<dt className="font-semibold">Sykepengebeløp</dt>
|
||||
<dd>5 384 kr</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<BodyLong spacing className="mt-4">
|
||||
* Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
|
||||
utbetalingen.
|
||||
</BodyLong>
|
||||
<div className="grid w-fit gap-2">
|
||||
<Link href="#">
|
||||
Se tidligere utbetalinger{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
<Link href="#">
|
||||
Les mer om utregningen{" "}
|
||||
<ExternalLinkIcon aria-hidden fontSize="1.5rem" />
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -167,7 +167,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<div>
|
||||
<div className="px-2 sm:px-6">
|
||||
<Heading
|
||||
level="2"
|
||||
size="xlarge"
|
||||
|
||||
@@ -97,6 +97,8 @@ const Page = ({
|
||||
? "komponent-ny"
|
||||
: null;
|
||||
|
||||
const unsafe = page?.status?.unsafe;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -235,7 +237,11 @@ const Page = ({
|
||||
)}
|
||||
</BodyShort>
|
||||
{tag && (
|
||||
<SuggestionBlock variant={tag} reference={`<${page?.heading} />`} />
|
||||
<SuggestionBlock
|
||||
variant={tag}
|
||||
unsafe={unsafe}
|
||||
reference={`<${page?.heading} />`}
|
||||
/>
|
||||
)}
|
||||
<IntroSeksjon node={page?.intro} />
|
||||
{page?.status?.tag === "ready" && (
|
||||
|
||||
@@ -59,11 +59,18 @@ export const KomponentArtikkel = defineType({
|
||||
},
|
||||
validation: (Rule) => Rule.required(),
|
||||
},
|
||||
{
|
||||
defineField({
|
||||
name: "unsafe",
|
||||
title: "Unsafe",
|
||||
description: "Er komponenten Beta + UNSAFE-prefikset?",
|
||||
type: "boolean",
|
||||
hidden: ({ parent }) => !(parent?.tag === "beta"),
|
||||
}),
|
||||
defineField({
|
||||
name: "bilde",
|
||||
title: "Thumbnail",
|
||||
type: "image",
|
||||
},
|
||||
}),
|
||||
],
|
||||
options: {
|
||||
collapsible: true,
|
||||
|
||||
@@ -52,6 +52,7 @@ export const schema: SchemaPluginOptions = {
|
||||
object.Video,
|
||||
object.Accordion,
|
||||
object.Alert,
|
||||
object.ExpansionCard,
|
||||
object.Tips,
|
||||
object.UnikSidemodul,
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ export * from "./shared/accordion";
|
||||
export * from "./shared/alert";
|
||||
export * from "./shared/bilde";
|
||||
export * from "./shared/dodont";
|
||||
export * from "./shared/expansion-card";
|
||||
export * from "./shared/kode";
|
||||
export * from "./shared/relatert-innhold";
|
||||
export * from "./shared/riktekst";
|
||||
|
||||
@@ -6,6 +6,8 @@ import { defineField, defineType } from "sanity";
|
||||
export const Accordion = defineType({
|
||||
name: "accordion",
|
||||
title: "Accordion",
|
||||
description:
|
||||
"Accordion brukes hvis man har flere seksjoner man ønsker å skjule. Bruke ExpansionCard om du bare skal vise en seksjon",
|
||||
type: "object",
|
||||
icon: StackCompactIcon,
|
||||
fields: [
|
||||
@@ -37,7 +39,11 @@ export const Accordion = defineType({
|
||||
},
|
||||
],
|
||||
validation: (Rule) =>
|
||||
Rule.required().min(1).error("Accordion modul må ha minst 1 element"),
|
||||
Rule.required()
|
||||
.min(2)
|
||||
.error(
|
||||
"Accordion modul må ha minst 2 elementer. Bruk ExpansionCard om du bare trenger 1"
|
||||
),
|
||||
}),
|
||||
],
|
||||
components: {
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
import { defineField, defineType } from "sanity";
|
||||
|
||||
export const ExpansionCard = defineType({
|
||||
name: "expansioncard",
|
||||
title: "ExpansionCard",
|
||||
description:
|
||||
"ExpansionCard brukes hvis man har en seksjon man ønsker å skjule. Bruke Accordion om du trenger flere seksjoner etter hverandre",
|
||||
type: "object",
|
||||
icon: ChevronDownIcon,
|
||||
fields: [
|
||||
defineField({
|
||||
title: "Heading",
|
||||
name: "heading",
|
||||
type: "string",
|
||||
validation: (Rule) =>
|
||||
Rule.required().error("ExpansionCard må ha en heading"),
|
||||
}),
|
||||
defineField({
|
||||
title: "Heading nivå",
|
||||
name: "heading_level",
|
||||
description: "ExpansionCard kan ikke brukes som h2",
|
||||
type: "string",
|
||||
validation: (Rule) => Rule.required(),
|
||||
options: {
|
||||
list: [
|
||||
{ value: "h3", title: "H3" },
|
||||
{ value: "h4", title: "H4" },
|
||||
],
|
||||
layout: "radio",
|
||||
},
|
||||
initialValue: "h3",
|
||||
}),
|
||||
defineField({
|
||||
title: "Description (valgfritt)",
|
||||
name: "description",
|
||||
type: "string",
|
||||
}),
|
||||
defineField({
|
||||
title: "Innhold",
|
||||
name: "body",
|
||||
type: "riktekst_enkel",
|
||||
validation: (Rule) =>
|
||||
Rule.required().error("ExpansionCard må ha innhold"),
|
||||
}),
|
||||
],
|
||||
preview: {
|
||||
select: {
|
||||
body: "body",
|
||||
heading: "heading",
|
||||
},
|
||||
prepare(selection) {
|
||||
return {
|
||||
title: selection?.heading,
|
||||
subtitle: `ExpansionCard`,
|
||||
media: ChevronDownIcon,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -133,6 +133,7 @@ const Riktekst = (
|
||||
"do_dont",
|
||||
"alert",
|
||||
"accordion",
|
||||
"expansioncard",
|
||||
"tabell_v2",
|
||||
"video",
|
||||
];
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "2.7.8",
|
||||
"@navikt/ds-react": "2.7.8",
|
||||
"@navikt/ds-css": "2.8.1",
|
||||
"@navikt/ds-react": "2.8.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
|
||||
@@ -3351,7 +3351,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@navikt/aksel-icons@^2.7.7, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
"@navikt/aksel-icons@^2.7.8, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
|
||||
dependencies:
|
||||
@@ -3374,7 +3374,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-codemod@^2.7.7, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
"@navikt/ds-codemod@^2.7.8, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
|
||||
dependencies:
|
||||
@@ -3401,7 +3401,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css-internal@^2.7.7, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
"@navikt/ds-css-internal@^2.7.8, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
|
||||
dependencies:
|
||||
@@ -3412,11 +3412,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css@2.7.7, @navikt/ds-css@^2.7.7, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
"@navikt/ds-css@2.7.8, @navikt/ds-css@^2.7.8, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^2.7.7
|
||||
"@navikt/ds-tokens": ^2.7.8
|
||||
normalize.css: ^8.0.1
|
||||
postcss: ^8.4.0
|
||||
postcss-cli: ^9.0.0
|
||||
@@ -3425,7 +3425,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-icons@^2.7.7, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
"@navikt/ds-icons@^2.7.8, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-icons@workspace:@navikt/icons"
|
||||
dependencies:
|
||||
@@ -3461,8 +3461,8 @@ __metadata:
|
||||
"@babel/preset-env": 7.19.4
|
||||
"@babel/preset-react": 7.18.6
|
||||
"@babel/preset-typescript": 7.18.6
|
||||
"@navikt/ds-icons": ^2.7.7
|
||||
"@navikt/ds-react": ^2.7.7
|
||||
"@navikt/ds-icons": ^2.7.8
|
||||
"@navikt/ds-react": ^2.7.8
|
||||
"@rollup/plugin-babel": 6.0.2
|
||||
"@rollup/plugin-commonjs": 23.0.2
|
||||
"@rollup/plugin-node-resolve": ^15.0.1
|
||||
@@ -3487,12 +3487,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react-internal@^2.7.7, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
"@navikt/ds-react-internal@^2.7.8, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
|
||||
dependencies:
|
||||
"@navikt/ds-icons": ^2.7.7
|
||||
"@navikt/ds-react": ^2.7.7
|
||||
"@navikt/ds-icons": ^2.7.8
|
||||
"@navikt/ds-react": ^2.7.8
|
||||
clsx: ^1.1.1
|
||||
concurrently: 7.2.1
|
||||
copy-to-clipboard: ^3.3.1
|
||||
@@ -3508,12 +3508,13 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@2.7.7, @navikt/ds-react@^2.7.7, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@2.7.8, @navikt/ds-react@^2.7.8, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
"@floating-ui/react": 0.17.0
|
||||
"@navikt/ds-icons": ^2.7.7
|
||||
"@navikt/aksel-icons": ^2.7.8
|
||||
"@navikt/ds-icons": ^2.7.8
|
||||
"@radix-ui/react-tabs": 1.0.0
|
||||
"@radix-ui/react-toggle-group": 1.0.0
|
||||
"@testing-library/dom": 8.13.0
|
||||
@@ -3549,11 +3550,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tailwind@^2.7.7, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
"@navikt/ds-tailwind@^2.7.8, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^2.7.7
|
||||
"@navikt/ds-tokens": ^2.7.8
|
||||
"@types/jest": ^29.0.0
|
||||
color: 4.2.3
|
||||
jest: ^29.0.0
|
||||
@@ -3564,7 +3565,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tokens@^2.7.7, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
"@navikt/ds-tokens@^2.7.8, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
|
||||
dependencies:
|
||||
@@ -4216,19 +4217,19 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/block-tools@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/block-tools@npm:3.6.0"
|
||||
"@sanity/block-tools@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/block-tools@npm:3.7.0"
|
||||
dependencies:
|
||||
get-random-values-esm: ^1.0.0
|
||||
lodash: ^4.17.21
|
||||
checksum: 23b1b37c1e6b1d8fb97c4a53762e6a050848cc110c40432a63f3de0c1f559b1ef393d6968b646d0599b60166f81544bb08e3959e4123ab91bc4a476210d03ea0
|
||||
checksum: 59d8f588706e20f82842d1b4e2ad4f37c886ff703d61490f2bcca7e939b0e75351cfc03f50faae160a26897dada1a18960f1a4a49078c37921f1d25cb4183cbe
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/cli@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/cli@npm:3.6.0"
|
||||
"@sanity/cli@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/cli@npm:3.7.0"
|
||||
dependencies:
|
||||
"@babel/traverse": ^7.19.0
|
||||
chalk: ^4.1.2
|
||||
@@ -4238,7 +4239,7 @@ __metadata:
|
||||
pkg-dir: ^5.0.0
|
||||
bin:
|
||||
sanity: bin/sanity
|
||||
checksum: f38326d0c847a1da5db4806e64cfae64496049470b2a523993a0fab44335f07dbffe4e81c573d055eb2c77148617000be0a6f371af9e6c32843baa85e0be259a
|
||||
checksum: 80b6a847cba44ed6ffbe7b26cb757c9f5161364807d511258ec54d022b103a5fb5a4dbb40d97ac068ea69493b7524e65dda55ad50ce38223d6a12ca8c6be2c19
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4254,7 +4255,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/client@npm:^5, @sanity/client@npm:^5.2.0, @sanity/client@npm:^5.2.2":
|
||||
"@sanity/client@npm:^5, @sanity/client@npm:^5.2.0":
|
||||
version: 5.2.2
|
||||
resolution: "@sanity/client@npm:5.2.2"
|
||||
dependencies:
|
||||
@@ -4265,6 +4266,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/client@npm:^5.3.0":
|
||||
version: 5.3.0
|
||||
resolution: "@sanity/client@npm:5.3.0"
|
||||
dependencies:
|
||||
"@sanity/eventsource": ^4
|
||||
get-it: ^8
|
||||
rxjs: ^7
|
||||
checksum: 70b65340a3b3285c8176418e56ba24a54ce9248ba342f3dd94af4a367b071b02422689bc19a1efa7f6a88a35448879913a7e5f68791c3860f1a377cff782c5eb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/code-input@npm:4.1.0":
|
||||
version: 4.1.0
|
||||
resolution: "@sanity/code-input@npm:4.1.0"
|
||||
@@ -4330,12 +4342,12 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/diff@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/diff@npm:3.6.0"
|
||||
"@sanity/diff@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/diff@npm:3.7.0"
|
||||
dependencies:
|
||||
diff-match-patch: ^1.0.4
|
||||
checksum: b7201aca6c2014a93a45d09137baf9ddcdb1f95fdbd688c5a6eea7cc83f83607e0880e620cf5b639b7a7059193bc72ec41abf8c6ec2630baf41cfe3c38b7769c
|
||||
checksum: fed42573d0948866c5330d25cce9ca89c6a6695e01fa442a3d821bc8b17640d653ac492205691820e79c580bb551601c7a1f908652106b11772f32eddba62234
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4359,9 +4371,9 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/export@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/export@npm:3.6.0"
|
||||
"@sanity/export@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/export@npm:3.7.0"
|
||||
dependencies:
|
||||
archiver: ^5.0.0
|
||||
debug: ^3.2.7
|
||||
@@ -4371,7 +4383,7 @@ __metadata:
|
||||
p-queue: ^2.3.0
|
||||
rimraf: ^3.0.2
|
||||
split2: ^3.2.2
|
||||
checksum: 85ebebfa3cfca5dee6b417ef161a36f7d7fb3358fb83dedacb4090a80c17727fe68cecbdc1d4fade2c3fac67c612604c9e7b46c41b0c889c307daa5273b46c03
|
||||
checksum: e94e804c772359142bf53f70cc8ac8b2aff6b192baa8f25b48bb5b5c614f46c56d9c13c1d65d55f3e1741043e69d1ce7852b83eca7785f034816912a878d8cca
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4455,13 +4467,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/import@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/import@npm:3.6.0"
|
||||
"@sanity/import@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/import@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/asset-utils": ^1.2.5
|
||||
"@sanity/generate-help-url": ^3.0.0
|
||||
"@sanity/mutator": 3.6.0
|
||||
"@sanity/mutator": 3.7.0
|
||||
"@sanity/uuid": ^3.0.1
|
||||
debug: ^3.2.7
|
||||
file-url: ^2.0.2
|
||||
@@ -4477,7 +4489,7 @@ __metadata:
|
||||
rimraf: ^3.0.2
|
||||
split2: ^3.2.2
|
||||
tar-fs: ^2.1.1
|
||||
checksum: 00dc83220abb3c8c3be202352f26e7ed871495dbb25cfa7f276c76aa0a1e6ac0bdeb01a5c989268e04d653734c45fa090ea41095061b847f9a3f0a97529f1ed6
|
||||
checksum: c822527dc545d7b6c97b47210e1daf4f59adc223ac49fc4e55a86f0643d41821a499b6c7629f60c3c01c5011773beca9ba2f198bb4c128653db0a8ebe2527924
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4504,28 +4516,28 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/mutator@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/mutator@npm:3.6.0"
|
||||
"@sanity/mutator@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/mutator@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/uuid": ^3.0.1
|
||||
"@types/diff-match-patch": ^1.0.32
|
||||
debug: ^3.2.7
|
||||
diff-match-patch: ^1.0.4
|
||||
lodash: ^4.17.21
|
||||
checksum: f8bc1e3e568f610c013e553ee718a376a5f86dbc5af90c00efc1442bee2f2345c13fddba7e1c0f1264e58815cb29e26aaa52e9c5ea53e30815dc033e766991ee
|
||||
checksum: 803d5430a2fa6fb3fa0a14db1d7828dd4b23cecddea64a2edcfcf1aac0f92257fbdd931967c3ba61451106c6330d32e2ce83a3a665c8148434d50cd2211a4bc8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/portable-text-editor@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/portable-text-editor@npm:3.6.0"
|
||||
"@sanity/portable-text-editor@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/portable-text-editor@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/block-tools": 3.6.0
|
||||
"@sanity/schema": 3.6.0
|
||||
"@sanity/block-tools": 3.7.0
|
||||
"@sanity/schema": 3.7.0
|
||||
"@sanity/slate-react": 2.30.1
|
||||
"@sanity/types": 3.6.0
|
||||
"@sanity/util": 3.6.0
|
||||
"@sanity/types": 3.7.0
|
||||
"@sanity/util": 3.7.0
|
||||
debug: ^3.2.7
|
||||
is-hotkey: ^0.1.6
|
||||
lodash: ^4.17.21
|
||||
@@ -4534,7 +4546,7 @@ __metadata:
|
||||
react: ^16.9 || ^17 || ^18
|
||||
rxjs: ">=6.5.3 || ^7.0.0"
|
||||
styled-components: ^5.2
|
||||
checksum: e5a183e1c026cedd6618d4766dd2f7296d4bc390873c3b6768b6ac876ce0a600a387c5faa11752f0cab88746e9c5072a7e102ea6cbddb92b792d822b77eb9609
|
||||
checksum: f5022b20fc0655d0eeded3044b6b393842dbf3a4ee6bb310e16825cb473eabb781bdf876203457e1d5430724e93958efbb3196960768f610d870c8462970700b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4566,18 +4578,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/schema@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/schema@npm:3.6.0"
|
||||
"@sanity/schema@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/schema@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/generate-help-url": ^3.0.0
|
||||
"@sanity/types": 3.6.0
|
||||
"@sanity/types": 3.7.0
|
||||
arrify: ^1.0.1
|
||||
humanize-list: ^1.0.1
|
||||
leven: ^3.1.0
|
||||
lodash: ^4.17.21
|
||||
object-inspect: ^1.6.0
|
||||
checksum: 8d460f219a7156c49df1f7c1abf9a48505055fd37b28e7d401bfc15dc8dee84d55c7760beedce98e67a216e1e5f394ae3ae22e74ed0f79c029968af4534dbb89
|
||||
checksum: 1fef448cf4a2e60e21ed586767cf4e155acb853cbbb97f383b68752b75c5c6bfe8e0cad91dabe0eb8bbc0152671fa4245163b5a391bfe2b1d6ef08524e0ff5db
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4623,13 +4635,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/types@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/types@npm:3.6.0"
|
||||
"@sanity/types@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/types@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/client": ^5.2.0
|
||||
"@types/react": ^18.0.25
|
||||
checksum: b49e0d8264c7156a62641938aa0ac2158dc1600427d99e6277bbae6cd16f1953bd0862027fd785860ec06f7eecdf6395e57526f8dbe8a56b7c67f7b97cb2ae1f
|
||||
checksum: 7a1b36d541eae3f53ac5694d1b4c4d3712d1aa4c974c1c1590e25aad9505a5574948d29a8394b7fec4dee754d9bb2ccf41fc11ee1cb88746dbb382b7d1c5f8c1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4681,14 +4693,14 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/util@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/util@npm:3.6.0"
|
||||
"@sanity/util@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/util@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/types": 3.6.0
|
||||
"@sanity/types": 3.7.0
|
||||
get-random-values-esm: ^1.0.0
|
||||
moment: ^2.29.4
|
||||
checksum: ab9f41e6a74b11025f3f0b1d80f13a3d908797f705ff629feb969b463525481d1d4e427017e4d619d4364d86425a55d3e275048979b75aee0fe10a6b81fb5c56
|
||||
checksum: 416fd867f682f0632ae6ed64c73810715d9d1a1da867cfbc9f285db1494ec1e6056d3bd06b4d35e54b12c495cd864d6781f99907d3cd13b5cd5a1decfa9580d2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -4702,21 +4714,21 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/validation@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/validation@npm:3.6.0"
|
||||
"@sanity/validation@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/validation@npm:3.7.0"
|
||||
dependencies:
|
||||
"@sanity/types": 3.6.0
|
||||
"@sanity/types": 3.7.0
|
||||
date-fns: ^2.26.1
|
||||
lodash: ^4.17.21
|
||||
rxjs: ^7.8.0
|
||||
checksum: a6e185bf84b0096063658530087cadf4cd022ce82973aafe66285c811d760e6ae5e642c0edbebf3ae9f79a0cc4465a0329421ad31461e6499b6d60e9200945bd
|
||||
checksum: c92653c94a786ce0b28ad33b2839462adaa8272fdaba6c6dc7b1c097b729fae6152156a126dfc31d0739b0cf41139f95b09432ccfa664d148199844bd275dfb5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sanity/vision@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "@sanity/vision@npm:3.6.0"
|
||||
"@sanity/vision@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@sanity/vision@npm:3.7.0"
|
||||
dependencies:
|
||||
"@codemirror/autocomplete": ^6.1.0
|
||||
"@codemirror/commands": ^6.0.1
|
||||
@@ -4739,7 +4751,7 @@ __metadata:
|
||||
peerDependencies:
|
||||
react: ^18
|
||||
styled-components: ^5.2
|
||||
checksum: 64e15342b18fef02fe59a529c997aafa543b5a866d492db3521d1dd5bfec3ff376d69cb66a9ebf620e3e46b51e5519797269a91158f69bb20c7a5d75a01486b3
|
||||
checksum: 8bdef2476dd5fd40ca17dddaf3e29375dba49dd16bded2448e283b4b5af624f9734294991f0020f723d844d4eb4ddff51a282c8f721ec2bb6e65605e14a65902
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -7420,15 +7432,15 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "aksel.nav.no@workspace:aksel.nav.no"
|
||||
dependencies:
|
||||
"@navikt/aksel-icons": ^2.7.7
|
||||
"@navikt/ds-codemod": ^2.7.7
|
||||
"@navikt/ds-css": ^2.7.7
|
||||
"@navikt/ds-css-internal": ^2.7.7
|
||||
"@navikt/ds-icons": ^2.7.7
|
||||
"@navikt/ds-react": ^2.7.7
|
||||
"@navikt/ds-react-internal": ^2.7.7
|
||||
"@navikt/ds-tailwind": ^2.7.7
|
||||
"@navikt/ds-tokens": ^2.7.7
|
||||
"@navikt/aksel-icons": ^2.7.8
|
||||
"@navikt/ds-codemod": ^2.7.8
|
||||
"@navikt/ds-css": ^2.7.8
|
||||
"@navikt/ds-css-internal": ^2.7.8
|
||||
"@navikt/ds-icons": ^2.7.8
|
||||
"@navikt/ds-react": ^2.7.8
|
||||
"@navikt/ds-react-internal": ^2.7.8
|
||||
"@navikt/ds-tailwind": ^2.7.8
|
||||
"@navikt/ds-tokens": ^2.7.8
|
||||
prettier-plugin-tailwindcss: ^0.2.3
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@@ -21712,9 +21724,9 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"sanity@npm:3.6.0":
|
||||
version: 3.6.0
|
||||
resolution: "sanity@npm:3.6.0"
|
||||
"sanity@npm:3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "sanity@npm:3.7.0"
|
||||
dependencies:
|
||||
"@dnd-kit/core": ^6.0.5
|
||||
"@dnd-kit/modifiers": ^6.0.0
|
||||
@@ -21726,26 +21738,26 @@ __metadata:
|
||||
"@rexxars/react-json-inspector": ^8.0.1
|
||||
"@sanity/asset-utils": ^1.2.5
|
||||
"@sanity/bifur-client": ^0.3.1
|
||||
"@sanity/block-tools": 3.6.0
|
||||
"@sanity/cli": 3.6.0
|
||||
"@sanity/block-tools": 3.7.0
|
||||
"@sanity/cli": 3.7.0
|
||||
"@sanity/client": ^5.2.0
|
||||
"@sanity/color": ^2.1.20
|
||||
"@sanity/diff": 3.6.0
|
||||
"@sanity/diff": 3.7.0
|
||||
"@sanity/eventsource": ^3.0.1
|
||||
"@sanity/export": 3.6.0
|
||||
"@sanity/export": 3.7.0
|
||||
"@sanity/generate-help-url": ^3.0.0
|
||||
"@sanity/icons": ^2.1.0
|
||||
"@sanity/image-url": ^1.0.2
|
||||
"@sanity/import": 3.6.0
|
||||
"@sanity/import": 3.7.0
|
||||
"@sanity/logos": ^2.0.2
|
||||
"@sanity/mutator": 3.6.0
|
||||
"@sanity/portable-text-editor": 3.6.0
|
||||
"@sanity/schema": 3.6.0
|
||||
"@sanity/types": 3.6.0
|
||||
"@sanity/mutator": 3.7.0
|
||||
"@sanity/portable-text-editor": 3.7.0
|
||||
"@sanity/schema": 3.7.0
|
||||
"@sanity/types": 3.7.0
|
||||
"@sanity/ui": ^1.2.0
|
||||
"@sanity/util": 3.6.0
|
||||
"@sanity/util": 3.7.0
|
||||
"@sanity/uuid": ^3.0.1
|
||||
"@sanity/validation": 3.6.0
|
||||
"@sanity/validation": 3.7.0
|
||||
"@tanstack/react-virtual": 3.0.0-beta.29
|
||||
"@types/is-hotkey": ^0.1.7
|
||||
"@types/react-copy-to-clipboard": ^5.0.2
|
||||
@@ -21824,7 +21836,7 @@ __metadata:
|
||||
styled-components: ^5.2
|
||||
bin:
|
||||
sanity: bin/sanity
|
||||
checksum: 7141aed91868405544fcdd1a1b31ddcee098756eca9fbf12b257f3ca92742cd4391f63a33e3a6cb7bd2df13934bd4524b50be7a423959054778b7a9b514f4c7e
|
||||
checksum: b85e87d09556a1604084c690f4d27a515e84b40d1a3a8ffe25bd25f21070c0a561be43b8b409c1385c3aae874475ce5f8c979085e7e5ea50d0c2e12989743af2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -22016,8 +22028,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "shadow-dom@workspace:examples/shadow-dom"
|
||||
dependencies:
|
||||
"@navikt/ds-css": 2.7.7
|
||||
"@navikt/ds-react": 2.7.7
|
||||
"@navikt/ds-css": 2.7.8
|
||||
"@navikt/ds-react": 2.7.8
|
||||
"@types/react": ^18.0.0
|
||||
"@types/react-dom": ^18.0.0
|
||||
"@vitejs/plugin-react": ^2.1.0
|
||||
@@ -24931,7 +24943,7 @@ __metadata:
|
||||
"@playwright/test": ^1.30.0
|
||||
"@sanity-codegen/types": 1.0.0-alpha.13
|
||||
"@sanity/block-content-to-react": ^3.0.0
|
||||
"@sanity/client": ^5.2.2
|
||||
"@sanity/client": ^5.3.0
|
||||
"@sanity/code-input": 4.1.0
|
||||
"@sanity/color-input": ^3.0.2
|
||||
"@sanity/icons": 2.2.2
|
||||
@@ -24939,7 +24951,7 @@ __metadata:
|
||||
"@sanity/preview-kit": ^1.3.4
|
||||
"@sanity/table": 1.0.1
|
||||
"@sanity/ui": ^1.3.0
|
||||
"@sanity/vision": 3.6.0
|
||||
"@sanity/vision": 3.7.0
|
||||
"@svgr/webpack": ^5.5.0
|
||||
"@testing-library/jest-dom": ^5.16.0
|
||||
"@testing-library/react": ^13.3.0
|
||||
@@ -24972,7 +24984,7 @@ __metadata:
|
||||
react-dom: ^18.0.0
|
||||
react-modal: 3.15.1
|
||||
recharts: ^2.2.0
|
||||
sanity: 3.6.0
|
||||
sanity: 3.7.0
|
||||
sanity-plugin-asset-source-unsplash: ^1.0.6
|
||||
sanity-plugin-iframe-pane: ^2.2.0
|
||||
sanity-plugin-media: ^2.0.5
|
||||
|
||||
Reference in new issue
Block a user