mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 01:02:02 +00:00
Compare commits
25
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
34f421835c | ||
|
Ken
|
9c495cf503 | ||
|
Ken
|
b5666ed040 | ||
|
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 | ||
|
github-actions[bot]andgithub-actions[bot]
|
777d94b3d4 | ||
|
Vegard Haugstvedt
|
7ace69f215 | ||
|
Ken
|
6724bb8f71 | ||
|
Ken
|
59253e992f | ||
|
Ken
|
91b6e0be18 | ||
|
Ken
|
02f5c29723 | ||
|
Ken
|
859d5d6407 |
No files matched your search
@@ -54,6 +54,10 @@ jobs:
|
||||
echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
|
||||
echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
|
||||
|
||||
- name: Hide page from search engines
|
||||
run: |
|
||||
echo "User-agent: *\nDisallow: /" > aksel.nav.no/website/public/robots.txt
|
||||
|
||||
- name: Restore cache
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
|
||||
@@ -23,6 +23,8 @@ module.exports = {
|
||||
addons: [
|
||||
"@storybook/addon-a11y",
|
||||
"@whitespace/storybook-addon-html",
|
||||
"storybook-addon-next-router",
|
||||
|
||||
{
|
||||
name: "@storybook/addon-storysource",
|
||||
options: {
|
||||
@@ -74,8 +76,31 @@ module.exports = {
|
||||
"../aksel.nav.no/website/components"
|
||||
),
|
||||
},
|
||||
{
|
||||
find: "@utils",
|
||||
replacement: path.resolve(
|
||||
__dirname,
|
||||
"../aksel.nav.no/website/components/website-modules/utils/index.ts"
|
||||
),
|
||||
},
|
||||
{
|
||||
find: "@lib",
|
||||
replacement: path.resolve(
|
||||
__dirname,
|
||||
"../aksel.nav.no/website/lib/index.ts"
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
/* "@/components": ["components/index.ts"],
|
||||
"@/lib": ["lib/index.ts"],
|
||||
"@/pages/*": ["pages/*"],
|
||||
"@/sanity-block": ["components/SanityBlockContent.tsx"],
|
||||
"@/utils": ["components/website-modules/utils/index.ts"],
|
||||
"@/layout": ["components/layout/index.ts"],
|
||||
"@/error-boundary": ["components/website-modules/ErrorBoundary.tsx"],
|
||||
"@/sanity-client": ["lib/sanity/sanity.server"] */
|
||||
@@ -1,3 +1,4 @@
|
||||
import { RouterContext } from "next/dist/shared/lib/router-context";
|
||||
import "@navikt/ds-css/index.css";
|
||||
import "@navikt/ds-css-internal/index.css";
|
||||
import "./layout.css";
|
||||
@@ -23,6 +24,9 @@ export const parameters = {
|
||||
},
|
||||
],
|
||||
},
|
||||
nextRouter: {
|
||||
Provider: RouterContext.Provider,
|
||||
},
|
||||
};
|
||||
|
||||
export const globalTypes = {
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
@@ -53,9 +53,9 @@
|
||||
"create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
|
||||
"copy-util": "copyfiles util/* src",
|
||||
"copy-svg": "copyfiles -f icons/*.svg dist/svg/",
|
||||
"copy": "yarn copy-util && yarn copy-svg",
|
||||
"update-metadata": "node config/metadata.js",
|
||||
"build": "yarn copy-util && yarn copy-svg && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
|
||||
"build:old": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node cleanTypes.js && yarn create-package-json-pointers-to-esm",
|
||||
"build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
|
||||
"test": "NODE_OPTIONS=--experimental-vm-modules jest",
|
||||
"fetch-new:icons": "node config/figma/index.mjs",
|
||||
"zip:icons": "node config/zip.js"
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"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.7",
|
||||
"@navikt/ds-react": "^2.7.7",
|
||||
"@navikt/ds-icons": "^2.8.2",
|
||||
"@navikt/ds-react": "^2.8.2",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/* import React from "react";
|
||||
import { PageHeader } from ".";
|
||||
|
||||
export default {
|
||||
@@ -14,11 +13,3 @@ export default {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: (props) => <PageHeader>{props.children}</PageHeader>,
|
||||
|
||||
args: {
|
||||
children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
|
||||
},
|
||||
}; */
|
||||
@@ -1,5 +1,25 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 2.8.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
|
||||
|
||||
## 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
|
||||
|
||||
- [#1863](https://github.com/navikt/aksel/pull/1863) [`7ace69f21`](https://github.com/navikt/aksel/commit/7ace69f215760bbb5bf997670c897403d8ee558d) Thanks [@it-vegard](https://github.com/it-vegard)! - Added focus indicator for tabpanel
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
.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;
|
||||
background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
|
||||
}
|
||||
|
||||
.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.7",
|
||||
"version": "2.8.2",
|
||||
"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.7",
|
||||
"@navikt/ds-tokens": "^2.8.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-cli": "^9.0.0",
|
||||
|
||||
@@ -108,6 +108,7 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-tabs__tabpanel:focus {
|
||||
.navds-tabs__tabpanel:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
@@ -106,6 +106,17 @@
|
||||
"--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-header-open-bg": "--a-surface-transparent",
|
||||
"--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,44 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 2.8.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@2.8.2
|
||||
- @navikt/ds-icons@2.8.2
|
||||
|
||||
## 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
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-icons@2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"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.7",
|
||||
"@navikt/aksel-icons": "^2.8.2",
|
||||
"@navikt/ds-icons": "^2.8.2",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
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;
|
||||
size: "medium" | "small";
|
||||
};
|
||||
|
||||
export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
|
||||
open: false,
|
||||
toggleOpen: () => {},
|
||||
size: "medium",
|
||||
});
|
||||
|
||||
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, size }}
|
||||
>
|
||||
<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,43 @@
|
||||
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}
|
||||
size={panelContext.size}
|
||||
>
|
||||
<div className="navds-expansioncard__content-inner">{children}</div>
|
||||
</BodyLong>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ExpansionCardContent;
|
||||
@@ -0,0 +1,35 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyLong } from "../typography/BodyLong";
|
||||
import { ExpansionCardContext } from "./ExpansionCard";
|
||||
|
||||
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) => {
|
||||
const panelContext = useContext(ExpansionCardContext);
|
||||
|
||||
if (panelContext === null) {
|
||||
console.error(
|
||||
"<ExpansionCard.Header> has to be used within an <ExpansionCard>"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BodyLong
|
||||
{...rest}
|
||||
as="p"
|
||||
ref={ref}
|
||||
className={cl("navds-link-panel__description", className)}
|
||||
size={panelContext.size}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -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,13 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"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.7",
|
||||
"@navikt/ds-tokens": "^2.8.2",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"description": "Aksel icons for NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 2.8.2
|
||||
|
||||
## 2.8.1
|
||||
|
||||
## 2.8.0
|
||||
|
||||
## 2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
## 2.7.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"description": "CSS for NAV internal Designsystem-components",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,37 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 2.8.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958)]:
|
||||
- @navikt/ds-react@2.8.2
|
||||
- @navikt/ds-icons@2.8.2
|
||||
|
||||
## 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
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@2.7.8
|
||||
- @navikt/ds-icons@2.7.8
|
||||
|
||||
## 2.7.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "2.7.7",
|
||||
"version": "2.8.2",
|
||||
"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.7",
|
||||
"@navikt/ds-react": "^2.7.7",
|
||||
"@navikt/ds-icons": "^2.8.2",
|
||||
"@navikt/ds-react": "^2.8.2",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
"website"
|
||||
],
|
||||
"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.8.2",
|
||||
"@navikt/ds-codemod": "^2.8.2",
|
||||
"@navikt/ds-css": "^2.8.2",
|
||||
"@navikt/ds-css-internal": "^2.8.2",
|
||||
"@navikt/ds-icons": "^2.8.2",
|
||||
"@navikt/ds-react": "^2.8.2",
|
||||
"@navikt/ds-react-internal": "^2.8.2",
|
||||
"@navikt/ds-tailwind": "^2.8.2",
|
||||
"@navikt/ds-tokens": "^2.8.2"
|
||||
},
|
||||
"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} />,
|
||||
|
||||
@@ -83,6 +83,52 @@ export const GithubIcon = ({ ...props }) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const SlackIcon = ({ ...props }) => (
|
||||
<svg
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
focusable={false}
|
||||
aria-hidden
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4.92656 12.8086C4.92625 13.1721 4.81818 13.5274 4.616 13.8295C4.41382 14.1316 4.12661 14.3669 3.79068 14.5058C3.45475 14.6447 3.08518 14.6809 2.72869 14.6098C2.37221 14.5387 2.0448 14.3635 1.78787 14.1063C1.53094 13.8492 1.35601 13.5216 1.28521 13.1651C1.2144 12.8085 1.2509 12.439 1.39008 12.1032C1.52926 11.7674 1.76488 11.4804 2.06715 11.2784C2.36942 11.0765 2.72477 10.9688 3.08828 10.9688H4.92656V12.8086Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M5.85303 12.8086C5.85303 12.3211 6.0467 11.8535 6.39145 11.5088C6.73619 11.164 7.20377 10.9703 7.69131 10.9703C8.17885 10.9703 8.64643 11.164 8.99117 11.5088C9.33591 11.8535 9.52959 12.3211 9.52959 12.8086V17.4117C9.52959 17.8993 9.33591 18.3669 8.99117 18.7116C8.64643 19.0563 8.17885 19.25 7.69131 19.25C7.20377 19.25 6.73619 19.0563 6.39145 18.7116C6.0467 18.3669 5.85303 17.8993 5.85303 17.4117V12.8086Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M7.69146 5.42656C7.32794 5.42625 6.97269 5.31818 6.67059 5.116C6.36849 4.91382 6.13312 4.62661 5.99422 4.29068C5.85532 3.95475 5.81914 3.58518 5.89025 3.22869C5.96136 2.87221 6.13656 2.5448 6.39371 2.28787C6.65086 2.03094 6.97841 1.85601 7.33496 1.78521C7.69151 1.7144 8.06105 1.7509 8.39686 1.89008C8.73267 2.02926 9.01968 2.26488 9.2216 2.56715C9.42353 2.86942 9.5313 3.22477 9.5313 3.58828V5.42656H7.69146Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M7.69141 6.35315C8.17895 6.35315 8.64652 6.54682 8.99127 6.89157C9.33601 7.23631 9.52969 7.70389 9.52969 8.19143C9.52969 8.67897 9.33601 9.14655 8.99127 9.49129C8.64652 9.83604 8.17895 10.0297 7.69141 10.0297H3.08828C2.60074 10.0297 2.13316 9.83604 1.78842 9.49129C1.44368 9.14655 1.25 8.67897 1.25 8.19143C1.25 7.70389 1.44368 7.23631 1.78842 6.89157C2.13316 6.54682 2.60074 6.35315 3.08828 6.35315H7.69141Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M15.0735 8.19139C15.0738 7.82788 15.1819 7.47263 15.3841 7.17053C15.5862 6.86843 15.8734 6.63305 16.2094 6.49416C16.5453 6.35526 16.9149 6.31908 17.2714 6.39019C17.6278 6.4613 17.9552 6.6365 18.2122 6.89365C18.4691 7.1508 18.644 7.47835 18.7148 7.8349C18.7856 8.19145 18.7491 8.56099 18.61 8.8968C18.4708 9.23261 18.2352 9.51962 17.9329 9.72154C17.6306 9.92346 17.2753 10.0312 16.9118 10.0312H15.0735V8.19139Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M14.1468 8.19141C14.1468 8.67895 13.9531 9.14652 13.6084 9.49127C13.2636 9.83601 12.796 10.0297 12.3085 10.0297C11.821 10.0297 11.3534 9.83601 11.0086 9.49127C10.6639 9.14652 10.4702 8.67895 10.4702 8.19141V3.58828C10.4702 3.10074 10.6639 2.63316 11.0086 2.28842C11.3534 1.94368 11.821 1.75 12.3085 1.75C12.796 1.75 13.2636 1.94368 13.6084 2.28842C13.9531 2.63316 14.1468 3.10074 14.1468 3.58828V8.19141Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12.3086 15.5734C12.6721 15.5737 13.0274 15.6818 13.3295 15.884C13.6316 16.0862 13.8669 16.3734 14.0058 16.7093C14.1447 17.0452 14.1809 17.4148 14.1098 17.7713C14.0387 18.1278 13.8635 18.4552 13.6063 18.7121C13.3492 18.9691 13.0216 19.144 12.6651 19.2148C12.3085 19.2856 11.939 19.2491 11.6032 19.1099C11.2674 18.9707 10.9804 18.7351 10.7784 18.4328C10.5765 18.1306 10.4688 17.7752 10.4688 17.4117V15.5734H12.3086Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M12.3085 14.6469C11.821 14.6469 11.3534 14.4532 11.0086 14.1085C10.6639 13.7637 10.4702 13.2962 10.4702 12.8086C10.4702 12.3211 10.6639 11.8535 11.0086 11.5088C11.3534 11.164 11.821 10.9703 12.3085 10.9703H16.9116C17.3992 10.9703 17.8667 11.164 18.2115 11.5088C18.5562 11.8535 18.7499 12.3211 18.7499 12.8086C18.7499 13.2962 18.5562 13.7637 18.2115 14.1085C17.8667 14.4532 17.3992 14.6469 16.9116 14.6469H12.3085Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const YarnIcon = () => (
|
||||
<svg
|
||||
width="20"
|
||||
@@ -128,23 +174,26 @@ export const StorybookIcon = ({ ...props }) => (
|
||||
<g id="storybook-icon" transform="translate(1.000000, 1.000000)">
|
||||
<path
|
||||
id="Combined-Shape"
|
||||
fill="var(--a-gray-600)"
|
||||
fill="currentColor"
|
||||
fillRule="nonzero"
|
||||
d="M50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L37.427,0.594 L37.1272753,7.62078766 C37.1238721,7.70179664 37.1419373,7.78178731 37.179031,7.85305525 L37.2223772,7.92113026 C37.3791917,8.12573637 37.6738999,8.16578288 37.880626,8.0105767 L37.880626,8.0105767 L40.6382617,5.94019678 L42.9673936,7.75618537 C43.0546693,7.82423279 43.1634862,7.85946584 43.2745216,7.85562813 C43.5338374,7.84666553 43.7367132,7.6313391 43.7276576,7.37468316 L43.7276576,7.37468316 L43.467,0.22 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 Z"
|
||||
className="group-focus:text-surface-inverted text-surface-default"
|
||||
/>
|
||||
<path
|
||||
id="S"
|
||||
fill="#fff"
|
||||
fill="currentColor"
|
||||
fillRule="nonzero"
|
||||
d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z"
|
||||
mask="url(#mask-2)"
|
||||
className="text-deepblue-700 group-focus:text-text-on-inverted"
|
||||
/>
|
||||
<path
|
||||
id="bookmark"
|
||||
fill="#fff"
|
||||
fill="currentColor"
|
||||
fillRule="nonzero"
|
||||
d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z"
|
||||
mask="url(#mask-2)"
|
||||
className="text-deepblue-700 group-focus:text-text-on-inverted"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
@@ -13,33 +13,33 @@ const Logo = (props): JSX.Element => (
|
||||
>
|
||||
<path
|
||||
d="M56.9682 23.3413L48.1959 1.94542C47.9106 1.30354 47.2687 0.839966 46.5199 0.839966C45.8067 0.839966 45.1292 1.30354 44.8795 1.94542L36.1072 23.3413C36.0359 23.5196 36.0002 23.6623 36.0002 23.7692C36.0002 24.3398 36.4638 24.839 37.07 24.839C37.498 24.839 37.9259 24.5537 38.0685 24.1615L40.1724 18.8838H52.903L55.0069 24.1615C55.1496 24.5537 55.5418 24.839 56.0054 24.839C56.6116 24.839 57.0752 24.3398 57.0752 23.7692C57.0752 23.5909 57.0039 23.4483 56.9682 23.3413ZM40.9213 17.0295L46.5199 2.9439L52.1541 17.0295H40.9213Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M75.0623 23.2343L68.1086 15.3179L74.884 8.93474C75.0623 8.75645 75.1693 8.50683 75.1693 8.29287C75.1693 7.82929 74.8127 7.40137 74.3135 7.40137C74.0995 7.40137 73.8855 7.47269 73.7072 7.61533L63.4729 17.3148V1.76712C63.4729 1.26788 63.045 0.839966 62.5457 0.839966C62.0465 0.839966 61.6186 1.26788 61.6186 1.76712V23.9119C61.6186 24.4111 62.0465 24.839 62.5457 24.839C63.045 24.839 63.4729 24.4111 63.4729 23.9119V19.5614L66.6823 16.5303L73.6003 24.5181C73.7786 24.732 74.0282 24.839 74.3491 24.839C74.884 24.839 75.2763 24.4111 75.2763 23.8762C75.2763 23.6266 75.205 23.4126 75.0623 23.2343Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M79.0353 22.9491C80.747 24.5181 82.6726 25.16 85.1331 25.16C89.448 25.16 91.5876 22.8777 91.5876 20.0963C91.5876 16.4233 88.2712 15.6031 85.3114 14.8543C82.9222 14.2481 80.7113 13.7132 80.7113 11.7519C80.7113 9.96888 82.3517 8.64947 85.0262 8.64947C86.9518 8.64947 88.5565 9.327 89.6619 10.3968C89.7689 10.5038 89.9829 10.6108 90.1612 10.6108C90.6247 10.6108 90.9813 10.2185 90.9813 9.79058C90.9813 9.5053 90.8744 9.327 90.6961 9.1487C89.4123 7.93627 87.5937 7.08043 85.0262 7.08043C81.1392 7.08043 78.8927 9.22002 78.8927 11.8589C78.8927 15.2109 82.0664 15.9597 84.9548 16.6729C87.4154 17.3148 89.7689 17.9567 89.7689 20.1676C89.7689 22.1645 88.0572 23.5909 85.1688 23.5909C83.0649 23.5909 81.3532 22.7708 80.1408 21.6296C79.9981 21.487 79.8198 21.4157 79.6059 21.4157C79.1066 21.4157 78.7144 21.8079 78.7144 22.3072C78.7144 22.5568 78.857 22.8064 79.0353 22.9491Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M95.2069 16.1024C95.2069 21.4157 98.8086 25.16 103.837 25.16C106.404 25.16 108.365 24.3398 110.077 22.8421C110.255 22.6638 110.362 22.4855 110.362 22.2359C110.362 21.7723 110.041 21.4513 109.614 21.4513C109.435 21.4513 109.257 21.487 109.15 21.594C107.688 22.9134 105.941 23.5553 103.979 23.5553C99.914 23.5553 97.4179 20.4529 97.2396 16.7086H110.541C111.254 16.7086 111.646 16.3163 111.646 15.6745C111.646 11.2526 108.758 7.08043 103.516 7.08043C98.7373 7.08043 95.2069 11.11 95.2069 16.1024ZM103.48 8.68513C107.795 8.68513 109.72 12.3224 109.756 15.2465H97.2396C97.3822 12.2511 99.4148 8.68513 103.48 8.68513Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M117.365 24.839C117.865 24.839 118.293 24.4111 118.293 23.9119V1.76712C118.293 1.26788 117.865 0.839966 117.365 0.839966C116.866 0.839966 116.438 1.26788 116.438 1.76712V23.9119C116.438 24.4111 116.866 24.839 117.365 24.839Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.292684 8.54331C-0.0977248 8.15267 -0.0975372 7.5195 0.293103 7.1291L5.44967 1.97558C5.47463 1.95063 5.4999 1.92606 5.52546 1.90187L5.52289 1.8993C6.03155 1.39065 6.65771 1.07111 7.314 0.9407C7.59976 0.874273 7.89433 0.839967 8.19243 0.839967L20.12 0.839966C22.2629 0.839967 24 2.5771 24 4.71997V16.6435C24 16.9198 23.9705 17.1931 23.9133 17.4591C23.7914 18.1347 23.4693 18.7813 22.9471 19.3035L22.9458 19.3022C22.9189 19.3309 22.8915 19.3592 22.8636 19.3871L17.7071 24.5435C17.3166 24.934 16.6834 24.934 16.2929 24.5435C15.9024 24.153 15.9024 23.5198 16.2929 23.1293L21.4494 17.9728C21.6986 17.7236 21.8706 17.4116 21.9501 17.074C22.0233 16.6182 21.8843 16.1349 21.5329 15.7835L9.06289 3.31352C8.70098 2.95161 8.20044 2.81283 7.73221 2.89716C7.40619 2.97949 7.10531 3.14852 6.86347 3.39021L1.7069 8.54373C1.31626 8.93414 0.683092 8.93395 0.292684 8.54331ZM11.4178 2.83997L22 13.4222V4.71997C22 3.68167 21.1583 2.83997 20.12 2.83997L11.4178 2.83997Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M0.292893 24.5435C-0.0976311 24.153 -0.0976311 23.5198 0.292893 23.1293L9.29289 14.1293C9.68342 13.7388 10.3166 13.7388 10.7071 14.1293C11.0976 14.5198 11.0976 15.153 10.7071 15.5435L1.70711 24.5435C1.31658 24.934 0.683417 24.934 0.292893 24.5435Z"
|
||||
fill="#004367"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { BodyShort, Heading, Link } from "@navikt/ds-react";
|
||||
|
||||
import NextLink from "next/link";
|
||||
import { EditButton, ScrollTop } from "../..";
|
||||
import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
|
||||
import Logo from "components/assets/Logo";
|
||||
import { logNav } from "components/website-modules/utils/amplitude";
|
||||
import { EditButton } from "../..";
|
||||
import FooterForm from "./FooterForm";
|
||||
|
||||
const Footer = () => {
|
||||
@@ -12,164 +13,109 @@ 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-16 px-4 pt-12 pb-16 md:px-6">
|
||||
<div className="grid gap-12 xl:grid-cols-3 xl:gap-6">
|
||||
<ScrollTop />
|
||||
<div>
|
||||
<Heading level="2" size="small">
|
||||
Aksel
|
||||
</Heading>
|
||||
<BodyShort as="ul" className="mt-5 grid gap-2">
|
||||
<li>
|
||||
<NextLink
|
||||
href="/god-praksis/artikler/om-aksel"
|
||||
passHref
|
||||
legacyBehavior
|
||||
>
|
||||
<Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
|
||||
Om Aksel
|
||||
</Link>
|
||||
</NextLink>
|
||||
</li>
|
||||
<li>
|
||||
<NextLink
|
||||
href="/god-praksis/artikler/skriv-for-aksel"
|
||||
passHref
|
||||
legacyBehavior
|
||||
>
|
||||
<Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
|
||||
Skriv for Aksel
|
||||
</Link>
|
||||
</NextLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
|
||||
href="https://nav-it.slack.com/archives/C7NE7A8UF"
|
||||
>
|
||||
#Aksel-designsystemet på Slack
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
|
||||
href="/prinsipper/brukeropplevelse"
|
||||
>
|
||||
Prinsipper for brukeropplevelse
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
|
||||
href="/side/tilgjengelighetserklaring-for-aksel"
|
||||
>
|
||||
Tilgjengelighet
|
||||
</Link>
|
||||
</li>
|
||||
{/* <li>
|
||||
<Link
|
||||
className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
|
||||
href="https://nav-it.slack.com/archives/C7NE7A8UF"
|
||||
>
|
||||
Designsystemet på Slack
|
||||
</Link>
|
||||
</li> */}
|
||||
</BodyShort>
|
||||
</div>
|
||||
<FooterForm />
|
||||
</div>
|
||||
<div className="grid xl:grid-cols-3 xl:gap-6">
|
||||
<div className="mb-4 grid gap-2 xl:mb-0">
|
||||
<svg
|
||||
width="64"
|
||||
height="20"
|
||||
viewBox="0 0 64 20"
|
||||
fill="none"
|
||||
aria-hidden
|
||||
focusable="false"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_2259_53938)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M63.4798 1H56.8198C56.8198 1 56.3608 1 56.1988 1.406L52.5138 12.693L48.8318 1.406C48.6688 1.001 48.2078 1.001 48.2078 1.001H35.4038C35.2694 1.00203 35.1407 1.05569 35.0454 1.15046C34.9501 1.24523 34.8956 1.37359 34.8938 1.508V5.341C34.8938 2.301 31.6608 1.001 29.7668 1.001C25.5268 1.001 22.6888 3.795 21.8048 8.044C21.7568 5.225 21.5228 4.215 20.7638 3.181C20.4148 2.674 19.9118 2.249 19.3638 1.896C18.2338 1.234 17.2188 1.001 15.0398 1.001H12.4798C12.4798 1.001 12.0178 1.001 11.8548 1.406L9.52582 7.18V1.508C9.52452 1.37411 9.47082 1.24606 9.37624 1.15128C9.28165 1.05651 9.15371 1.00256 9.01982 1.001H3.09682C3.09682 1.001 2.63982 1.001 2.47282 1.406L0.0528186 7.41C0.0528186 7.41 -0.189181 8.01 0.362819 8.01H2.63982V19.45C2.63982 19.734 2.86282 19.96 3.14782 19.96H9.01782C9.08466 19.9599 9.15082 19.9466 9.21253 19.9209C9.27423 19.8952 9.33027 19.8576 9.37744 19.8102C9.42462 19.7629 9.462 19.7067 9.48746 19.6449C9.51291 19.5831 9.52595 19.5168 9.52582 19.45V8.01H11.8148C13.1278 8.01 13.4048 8.046 13.9158 8.284C14.2238 8.401 14.5008 8.636 14.6528 8.907C14.9628 9.49 15.0398 10.19 15.0398 12.255V19.45C15.0398 19.734 15.2678 19.96 15.5498 19.96H21.1758C21.1758 19.96 21.8118 19.96 22.0628 19.33L23.3098 16.247C24.9678 18.571 27.6968 19.959 31.0888 19.959H31.8298C31.8298 19.959 32.4698 19.959 32.7228 19.331L34.8948 13.95V19.45C34.8948 19.5853 34.9485 19.715 35.0442 19.8106C35.1398 19.9063 35.2696 19.96 35.4048 19.96H41.1478C41.1478 19.96 41.7818 19.96 42.0358 19.33C42.0358 19.33 44.3328 13.625 44.3418 13.582H44.3458C44.4338 13.107 43.8348 13.107 43.8348 13.107H41.7848V3.316L48.2348 19.331C48.4858 19.959 49.1208 19.959 49.1208 19.959H55.9068C55.9068 19.959 56.5448 19.959 56.7968 19.331L63.9478 1.615C64.1948 1.001 63.4788 1.001 63.4788 1.001L63.4798 1ZM34.8928 13.108H31.0348C30.2962 13.108 29.5878 12.8146 29.0655 12.2923C28.5432 11.77 28.2498 11.0616 28.2498 10.323C28.2498 9.58437 28.5432 8.876 29.0655 8.35371C29.5878 7.83142 30.2962 7.538 31.0348 7.538H32.1138C32.8517 7.54012 33.5586 7.83465 34.0797 8.35706C34.6008 8.87946 34.8936 9.58713 34.8938 10.325V13.108H34.8928Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2259_53938">
|
||||
<rect width="63.9997" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
Arbeids- og velferdsetaten
|
||||
</div>
|
||||
<span className="mb-1 self-end xl:mb-0" />
|
||||
<div className="hidden self-end xl:block">
|
||||
<p>© {new Date().getFullYear()} NAV</p>
|
||||
<NextLink
|
||||
href="/side/personvernerklaering"
|
||||
className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
|
||||
>
|
||||
Personvernerklæring og informasjonskapsler
|
||||
</NextLink>
|
||||
</div>
|
||||
<div className="block self-end xl:hidden">
|
||||
© {new Date().getFullYear()} NAV |{" "}
|
||||
<NextLink
|
||||
href="/side/personvernerklaering"
|
||||
className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
|
||||
>
|
||||
Personvernerklæring og informasjonskapsler
|
||||
</NextLink>
|
||||
</div>
|
||||
</div>
|
||||
<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 />
|
||||
<Kontakt />
|
||||
<FooterForm />
|
||||
</div>
|
||||
|
||||
<EditButton />
|
||||
<svg
|
||||
width="548"
|
||||
height="422"
|
||||
viewBox="0 0 548 422"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="absolute right-0 bottom-0 z-0"
|
||||
aria-hidden
|
||||
focusable={false}
|
||||
>
|
||||
<path
|
||||
d="M664.991 350.212L431.631 116.852L664.64 116.852L898 350.212L664.991 350.212Z"
|
||||
stroke="#004367"
|
||||
strokeWidth="2.9687"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M625.456 156.037L392.097 389.396L625.456 622.756L858.816 389.396L625.456 156.037Z"
|
||||
stroke="#004367"
|
||||
strokeWidth="2.9687"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M353.262 195.222L119.903 428.581H352.912L586.271 195.222H353.262Z"
|
||||
stroke="#004367"
|
||||
strokeWidth="2.9687"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M314.076 234.407L80.7169 467.767L314.076 701.126L547.436 467.767L314.076 234.407Z"
|
||||
stroke="#004367"
|
||||
strokeWidth="2.9687"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M508.251 506.951L274.892 740.31H507.901L741.261 506.951H508.251Z"
|
||||
stroke="#004367"
|
||||
strokeWidth="2.9687"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
function LogoBlock() {
|
||||
return (
|
||||
<div>
|
||||
<Logo className="fill-white" />
|
||||
<p className="mt-4">© {new Date().getFullYear()} NAV</p>
|
||||
<p>Arbeids- og velferdsetaten</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Snarveier() {
|
||||
return (
|
||||
<div>
|
||||
<Heading level="2" size="xsmall">
|
||||
Snarveier
|
||||
</Heading>
|
||||
<BodyShort as="ul" className="mt-3 grid gap-3">
|
||||
<FooterLink href="/god-praksis/artikler/om-aksel">
|
||||
Hva er Aksel?
|
||||
</FooterLink>
|
||||
<FooterLink href="/god-praksis/artikler/skriv-for-aksel">
|
||||
Skriv for Aksel
|
||||
</FooterLink>
|
||||
<FooterLink href="/prinsipper/brukeropplevelse">
|
||||
Prinsipper for brukeropplevelse
|
||||
</FooterLink>
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Kontakt() {
|
||||
return (
|
||||
<div>
|
||||
<Heading level="2" size="xsmall">
|
||||
Finn oss
|
||||
</Heading>
|
||||
<BodyShort as="ul" className="mt-3 grid gap-3">
|
||||
<FooterLink href="https://www.figma.com/@nav_aksel">
|
||||
<FigmaIcon />
|
||||
Figma
|
||||
</FooterLink>
|
||||
<FooterLink href="https://github.com/navikt/aksel">
|
||||
<GithubIcon />
|
||||
Github
|
||||
</FooterLink>
|
||||
<FooterLink href="https://nav-it.slack.com/archives/C7NE7A8UF">
|
||||
<SlackIcon />
|
||||
Slack
|
||||
</FooterLink>
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function SideLenker() {
|
||||
return (
|
||||
<div>
|
||||
<Heading level="2" size="xsmall">
|
||||
Om nettstedet
|
||||
</Heading>
|
||||
<BodyShort as="ul" className="mt-3 grid gap-3">
|
||||
<FooterLink href="/side/personvernerklaering">
|
||||
Personvernserklæring
|
||||
</FooterLink>
|
||||
<FooterLink href="/side/tilgjengelighetserklaring-for-aksel">
|
||||
Tilgjengelighetserklæring
|
||||
</FooterLink>
|
||||
</BodyShort>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FooterLink({ children, href }) {
|
||||
return (
|
||||
<li>
|
||||
<Link
|
||||
className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 no-underline hover:underline focus:bg-blue-200 focus:shadow-blue-200"
|
||||
href={href}
|
||||
onClick={(e) =>
|
||||
logNav(
|
||||
"footer",
|
||||
window.location.pathname,
|
||||
e.currentTarget.getAttribute("href")
|
||||
)
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -1,6 +1,6 @@
|
||||
import { FeedbackT } from "@/lib";
|
||||
import { IdContext } from "@/utils";
|
||||
import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
|
||||
import { Button, Label, Textarea } from "@navikt/ds-react";
|
||||
import { IdContext } from "components/website-modules/utils/contexts/id-context";
|
||||
import { FeedbackT } from "lib/types/types";
|
||||
import { useRouter } from "next/router";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
|
||||
@@ -55,7 +55,10 @@ const FooterForm = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full max-w-md flex-col gap-8" 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">
|
||||
@@ -65,15 +68,12 @@ const FooterForm = () => {
|
||||
</div>
|
||||
{!sent.status && (
|
||||
<form onSubmit={(e) => handleSubmit(e)} className="w-full">
|
||||
<div className="mb-4 flex flex-col gap-4">
|
||||
<Heading level="2" size="small">
|
||||
Gi en tilbakemelding
|
||||
</Heading>
|
||||
<div className="mb-3 flex flex-col gap-4">
|
||||
<Textarea
|
||||
className="textarea-override"
|
||||
error={contentError.content}
|
||||
autoComplete="off"
|
||||
label="Melding"
|
||||
label="Gi oss en tilbakemelding"
|
||||
value={contactForm.content}
|
||||
onChange={(e) => {
|
||||
setContactForm({
|
||||
@@ -85,13 +85,14 @@ const FooterForm = () => {
|
||||
e.target.value.trim().length !== 0 &&
|
||||
setContentError({ ...contentError, content: "" });
|
||||
}}
|
||||
description="Ikke skriv inn navn eller andre personopplysninger"
|
||||
description="Ikke skriv inn personopplysninger"
|
||||
minRows={2}
|
||||
/>
|
||||
</div>
|
||||
{contactForm.hasWritten && <Button>Send melding</Button>}
|
||||
<Button size="small">Send melding</Button>
|
||||
<style>{`.textarea-override {
|
||||
--ac-textarea-bg: var(--a-deepblue-800);
|
||||
--ac-textarea-bg: var(--a-surface-default);
|
||||
--ac-textarea-text: var(--a-text-default);
|
||||
}`}</style>
|
||||
</form>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import Footer from "./Footer";
|
||||
import { Meta } from "@storybook/react";
|
||||
import { NextDecorator } from "../../StoryDecorator";
|
||||
|
||||
const MetaData: Meta = {
|
||||
component: Footer,
|
||||
tags: ["autodocs"],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<NextDecorator>
|
||||
<Story />
|
||||
</NextDecorator>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
};
|
||||
|
||||
export default MetaData;
|
||||
|
||||
export const FooterDemo = {
|
||||
render: () => <Footer />,
|
||||
nextRouter: {
|
||||
path: "/profile/[id]",
|
||||
asPath: "/profile/lifeiscontent",
|
||||
query: {
|
||||
id: "lifeiscontent",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -72,7 +72,7 @@ export const Header = ({
|
||||
}
|
||||
className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
|
||||
>
|
||||
<Logo />
|
||||
<Logo className="text-deepblue-800" />
|
||||
<span className="sr-only">Aksel</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -104,7 +104,6 @@ export const GlobalSearch = () => {
|
||||
)
|
||||
.then((x) => x.json())
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
setResults(res);
|
||||
logSearchAttempt(res?.hits?.totalHits ?? 0, "standard");
|
||||
setLoading(false);
|
||||
@@ -193,7 +192,7 @@ export const GlobalSearch = () => {
|
||||
<div className="z-[1050] mr-4 ml-auto flex justify-center lg:mr-0 lg:ml-0">
|
||||
<Button
|
||||
variant="primary"
|
||||
className="hover:bg-deepblue-600 bg-deepblue-500 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
|
||||
className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
|
||||
aria-keyshortcuts="Control+b"
|
||||
icon={
|
||||
<SearchIcon
|
||||
|
||||
@@ -42,16 +42,13 @@ const Element = ({
|
||||
if (!block.picture) return null;
|
||||
return (
|
||||
<figure
|
||||
className={cl(
|
||||
"flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
|
||||
{
|
||||
"basis-full": block?.fullwidth,
|
||||
"max-w-sm": !block?.fullwidth,
|
||||
}
|
||||
)}
|
||||
className={cl("sm:min-w-80 flex min-w-full flex-1 flex-col rounded-t", {
|
||||
"basis-full": block?.fullwidth,
|
||||
"max-w-sm": !block?.fullwidth,
|
||||
})}
|
||||
>
|
||||
<img
|
||||
className="rounded-t bg-gray-50 shadow-[0_0_0_1px_var(--a-border-divider)]"
|
||||
className="ring-border-subtle rounded-t bg-gray-50 ring-1"
|
||||
alt={block.alt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
@@ -61,9 +58,9 @@ const Element = ({
|
||||
className={cl(
|
||||
"z-10 -ml-[1px] w-[calc(100%_+_2px)] rounded-b border-t-8",
|
||||
{
|
||||
"border-t-green-400": block.variant === "do",
|
||||
"border-t-red-400": block.variant === "dont",
|
||||
"border-t-orange-500": block.variant === "warning",
|
||||
"border-t-border-success": block.variant === "do",
|
||||
"border-t-border-danger": block.variant === "dont",
|
||||
"border-t-border-warning": block.variant === "warning",
|
||||
}
|
||||
)}
|
||||
/>
|
||||
@@ -87,7 +84,7 @@ const DoDont = ({ node }: { node: SanityT.Schema.do_dont }) => {
|
||||
return (
|
||||
<div className="mb-8 last:mb-0">
|
||||
{node?.blokker?.length > 0 && (
|
||||
<div className="last flex flex-wrap justify-start gap-8">
|
||||
<div className="last flex flex-wrap justify-start gap-6">
|
||||
{node.blokker.map((x) => (
|
||||
<Element key={x._key} block={x} />
|
||||
))}
|
||||
|
||||
@@ -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");
|
||||
@@ -33,7 +33,7 @@ const ArtikkelCard = ({
|
||||
: _updatedAt;
|
||||
|
||||
return (
|
||||
<div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-5 pb-16 ring-1 focus-within:ring-[3px]">
|
||||
<div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-3 pb-16 ring-1 focus-within:ring-[3px] sm:p-5 sm:pb-16">
|
||||
<NextLink
|
||||
href={{
|
||||
pathname: `/${slug}`,
|
||||
|
||||
@@ -18,7 +18,10 @@ const BloggCard = ({
|
||||
>;
|
||||
}) => {
|
||||
return (
|
||||
<li key={blog._id} className="border-b-border-subtle h-fit border-b pb-8">
|
||||
<li
|
||||
key={blog._id}
|
||||
className="border-b-border-subtle flex h-full flex-col place-content-start border-b pb-8"
|
||||
>
|
||||
<Heading size="medium" as="div">
|
||||
<NextLink href={`/${blog.slug}`} passHref legacyBehavior>
|
||||
<Link
|
||||
@@ -35,9 +38,12 @@ const BloggCard = ({
|
||||
</Link>
|
||||
</NextLink>
|
||||
</Heading>
|
||||
<BodyLong className="mt-2">{blog?.ingress}</BodyLong>
|
||||
<BodyLong className="my-2">{blog?.ingress}</BodyLong>
|
||||
{getAuthors(blog).length > 0 && (
|
||||
<BodyShort size="small" className="text-text-subtle mt-6 flex gap-2">
|
||||
<BodyShort
|
||||
size="small"
|
||||
className="text-text-subtle mt-auto flex gap-2 justify-self-end"
|
||||
>
|
||||
<span className="font-semibold">{getAuthors(blog)[0]}</span>
|
||||
<span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
|
||||
</BodyShort>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { withErrorBoundary } from "@/error-boundary";
|
||||
import NextLink from "next/link";
|
||||
import Image from "next/legacy/image";
|
||||
import { logNav } from "@/utils";
|
||||
import { SanityT, urlFor } from "@/lib";
|
||||
|
||||
interface AkselTemaT extends SanityT.Schema.aksel_tema {
|
||||
refCount: number;
|
||||
}
|
||||
|
||||
const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
|
||||
if (!node?.pictogram || !node?.slug?.current || !node?.title) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<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()}
|
||||
decoding="sync"
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
aria-hidden
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<NextLink
|
||||
href={`/god-praksis/${node.slug.current}`}
|
||||
passHref
|
||||
onClick={(e) =>
|
||||
logNav(
|
||||
"card",
|
||||
window.location.pathname,
|
||||
e.currentTarget.getAttribute("href")
|
||||
)
|
||||
}
|
||||
className="navds-heading--small navds-link text-deepblue-700 navds-heading flex-wrap break-all no-underline hover:underline focus:outline-none"
|
||||
>
|
||||
{node.title}
|
||||
</NextLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default withErrorBoundary(GodPraksisCardSimple, "GodPraksisCardSimple");
|
||||
@@ -12,7 +12,7 @@ function EditButton(): JSX.Element {
|
||||
<>
|
||||
<div className="overflow-hidden">
|
||||
<Tooltip
|
||||
content="Bare tilgjengelig for innloggede redaktører"
|
||||
content="Vises bare for innloggede redaktører"
|
||||
placement="left"
|
||||
delay={500}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { logNav } from "components/website-modules/utils/amplitude";
|
||||
import Link from "next/link";
|
||||
import cl from "clsx";
|
||||
|
||||
export const IntroCards = ({
|
||||
links,
|
||||
className,
|
||||
variant,
|
||||
}: {
|
||||
links: {
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: React.FC<any>;
|
||||
href: string;
|
||||
}[];
|
||||
className?: string;
|
||||
variant?: "forside" | "komponentside";
|
||||
}) => {
|
||||
return (
|
||||
<ul className={cl("grid w-full gap-4 md:gap-6", className)}>
|
||||
{links.map(({ icon: Icon, title, desc, href }) => (
|
||||
<li key={title} className="grid">
|
||||
<Link
|
||||
href={href}
|
||||
passHref
|
||||
className={cl(
|
||||
"focus-visible:shadow-focus ring-border-subtle text-deepblue-700 bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 ring-1 hover:ring-1 focus:outline-none",
|
||||
{
|
||||
"shadow-small max-w-md": variant === "forside",
|
||||
}
|
||||
)}
|
||||
onClick={(e) =>
|
||||
logNav(
|
||||
"intro-kort",
|
||||
window.location.pathname,
|
||||
e.currentTarget.getAttribute("href")
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Icon
|
||||
aria-hidden
|
||||
className="text-deepblue-500 shrink-0 text-2xl"
|
||||
role="img"
|
||||
/>
|
||||
<span className="text-xl font-semibold group-hover:underline">
|
||||
{title}
|
||||
</span>
|
||||
</span>
|
||||
<div className="text-text-default mt-2">{desc}</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
@@ -6,6 +6,7 @@ import { SanityT, urlFor } from "@/lib";
|
||||
import cl from "clsx";
|
||||
import { getImage } from "components/website-modules/utils/get-image";
|
||||
import { SanityBlockContent } from "@/sanity-block";
|
||||
import AkselLink from "components/website-modules/AkselLink";
|
||||
|
||||
export type BloggPageT = Partial<
|
||||
SanityT.Schema.aksel_blogg & {
|
||||
@@ -44,7 +45,7 @@ export const LatestBloggposts = ({
|
||||
level={level}
|
||||
size="xlarge"
|
||||
className={cl(
|
||||
"text-deepblue-800 mx-auto w-full md:mx-0 md:max-w-none",
|
||||
"text-deepblue-700 mx-auto w-full md:mx-0 md:max-w-none",
|
||||
{ "text-5xl": variant === "blogg" }
|
||||
)}
|
||||
>
|
||||
@@ -59,18 +60,8 @@ export const LatestBloggposts = ({
|
||||
/>
|
||||
)}
|
||||
{/* Desktop-view */}
|
||||
<div
|
||||
className={cl("hidden gap-12", {
|
||||
"my-10 md:flex": variant === "forside",
|
||||
"my-20 grid-cols-2 md:grid": variant === "blogg",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={cl({
|
||||
"flex-auto grow-[4]": variant === "forside",
|
||||
"col-span-1": variant === "blogg",
|
||||
})}
|
||||
>
|
||||
<div className="my-12 hidden grid-cols-2 gap-12 md:grid">
|
||||
<div className="col-span-1">
|
||||
<div className="relative mb-10 block aspect-video">
|
||||
{bloggs[0]?.seo?.image ? (
|
||||
<Image
|
||||
@@ -123,90 +114,72 @@ export const LatestBloggposts = ({
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cl("gap-12", {
|
||||
"flex flex-auto grow-[1] place-items-start": variant === "forside",
|
||||
"col-span-1 grid": variant === "blogg",
|
||||
})}
|
||||
>
|
||||
<div className={cl("grid gap-12")}>
|
||||
{bloggs.slice(1, 4).map((blog) => (
|
||||
<div
|
||||
key={blog._id}
|
||||
className={cl("flex gap-6", {
|
||||
"border-b-border-subtle border-b pb-8": variant === "forside",
|
||||
})}
|
||||
>
|
||||
{variant === "blogg" && (
|
||||
<div className="relative hidden aspect-square h-[11.75rem] lg:block">
|
||||
{blog?.seo?.image ? (
|
||||
<Image
|
||||
src={urlFor(blog.seo.image).auto("format").url()}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={getImage(blog?.heading ?? "", "thumbnail")}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-1 grid place-content-start gap-12">
|
||||
{bloggs.slice(1, 3).map((blog) => (
|
||||
<div key={blog._id} className="flex gap-6">
|
||||
<div className="relative hidden aspect-square h-[11.75rem] lg:block">
|
||||
{blog?.seo?.image ? (
|
||||
<Image
|
||||
src={urlFor(blog.seo.image).auto("format").url()}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={getImage(blog?.heading ?? "", "thumbnail")}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<NextLink href={`/${blog.slug}`} passHref legacyBehavior>
|
||||
<Link className="text-deepblue-500 no-underline hover:underline">
|
||||
<Heading
|
||||
size="small"
|
||||
level={(Number(level) + 1).toString() as any}
|
||||
>
|
||||
{blog.heading}
|
||||
</Heading>
|
||||
</Link>
|
||||
</NextLink>
|
||||
<BodyLong className="mt-4" size="small">
|
||||
{blog?.ingress}
|
||||
</BodyLong>
|
||||
{getAuthors(blog).length > 0 ? (
|
||||
<BodyShort
|
||||
size="small"
|
||||
className="text-text-subtle mt-4 flex gap-2"
|
||||
>
|
||||
<span className="font-semibold">
|
||||
{getAuthors(blog)[0]}
|
||||
</span>
|
||||
<span>
|
||||
{dateStr(blog?.publishedAt ?? blog._createdAt)}
|
||||
</span>
|
||||
</BodyShort>
|
||||
) : (
|
||||
<BodyShort size="small" className="text-text-subtle mt-4">
|
||||
<span>
|
||||
{dateStr(blog?.publishedAt ?? blog._createdAt)}
|
||||
</span>
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<NextLink href={`/${blog.slug}`} passHref legacyBehavior>
|
||||
<Link className="text-deepblue-500 no-underline hover:underline">
|
||||
<Heading
|
||||
size="small"
|
||||
level={(Number(level) + 1).toString() as any}
|
||||
>
|
||||
{blog.heading}
|
||||
</Heading>
|
||||
</Link>
|
||||
</NextLink>
|
||||
<BodyLong className="mt-4" size="small">
|
||||
{blog?.ingress}
|
||||
</BodyLong>
|
||||
{getAuthors(blog).length > 0 ? (
|
||||
<BodyShort
|
||||
size="small"
|
||||
className="text-text-subtle mt-4 flex gap-2"
|
||||
>
|
||||
<span className="font-semibold">{getAuthors(blog)[0]}</span>
|
||||
<span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
|
||||
</BodyShort>
|
||||
) : (
|
||||
<BodyShort size="small" className="text-text-subtle mt-4">
|
||||
<span>{dateStr(blog?.publishedAt ?? blog._createdAt)}</span>
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{variant === "forside" && (
|
||||
<AkselLink href="/produktbloggen" className="h-fit self-end">
|
||||
Les flere blogginnlegg
|
||||
</AkselLink>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile view */}
|
||||
<div className="my-10 mx-auto grid gap-12 md:hidden">
|
||||
<div
|
||||
className={cl("w-full", {
|
||||
"border-b-border-subtle border-b pb-8": variant === "forside",
|
||||
})}
|
||||
>
|
||||
<div className="w-full">
|
||||
<div className="relative mb-10 block aspect-video">
|
||||
{bloggs[0]?.seo?.image ? (
|
||||
<Image
|
||||
@@ -258,36 +231,29 @@ export const LatestBloggposts = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="grid w-full gap-12">
|
||||
{bloggs.slice(1, 4).map((blog) => (
|
||||
<div
|
||||
key={blog._id}
|
||||
className={cl({
|
||||
"border-b-border-subtle border-b pb-8": variant === "forside",
|
||||
})}
|
||||
>
|
||||
{variant === "blogg" && (
|
||||
<div className="relative mb-6 block aspect-video">
|
||||
{blog?.seo?.image ? (
|
||||
<Image
|
||||
src={urlFor(blog.seo.image).auto("format").url()}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={getImage(blog?.heading ?? "", "thumbnail")}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{bloggs.slice(1, 3).map((blog) => (
|
||||
<div key={blog._id}>
|
||||
<div className="relative mb-6 block aspect-video">
|
||||
{blog?.seo?.image ? (
|
||||
<Image
|
||||
src={urlFor(blog.seo.image).auto("format").url()}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={getImage(blog?.heading ?? "", "thumbnail")}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
aria-hidden
|
||||
priority
|
||||
className="rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<NextLink href={`/${blog.slug}`} passHref legacyBehavior>
|
||||
<Link className="text-deepblue-500 no-underline hover:underline">
|
||||
@@ -318,6 +284,11 @@ export const LatestBloggposts = ({
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{variant === "forside" && (
|
||||
<AkselLink href="/produktbloggen" className="self-end">
|
||||
Les flere blogginnlegg
|
||||
</AkselLink>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.animated {
|
||||
animation: rotation 30s ease-in-out infinite;
|
||||
animation: rotation 60s ease-in-out infinite;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
@@ -8,21 +8,21 @@
|
||||
}
|
||||
|
||||
.animated1 {
|
||||
animation: shape-1 30s ease-in-out infinite;
|
||||
animation: shape-1 60s ease-in-out infinite;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: translate(-95rem, -13.95rem);
|
||||
}
|
||||
|
||||
.animated2 {
|
||||
animation: shape-2 30s ease-in-out infinite;
|
||||
animation: shape-2 60s ease-in-out infinite;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: translate(-69.5rem, -13.95rem);
|
||||
}
|
||||
|
||||
.animated3 {
|
||||
animation: shape-3 30s ease-in-out infinite;
|
||||
animation: shape-3 60s ease-in-out infinite;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: scaleX(-1) rotate(90deg) translate(0, -27.7rem);
|
||||
@@ -34,14 +34,14 @@
|
||||
}
|
||||
|
||||
.animated5 {
|
||||
animation: shape-5 30s ease-in-out infinite;
|
||||
animation: shape-5 60s ease-in-out infinite;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: scaleX(-1) rotate(90deg) translate(-27.75rem, 27.75rem);
|
||||
}
|
||||
|
||||
.animated6 {
|
||||
animation: shape-6 30s ease-in-out infinite;
|
||||
animation: shape-6 60s ease-in-out infinite;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: translate(70rem, -13.95rem);
|
||||
|
||||
@@ -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->{...},
|
||||
@@ -216,17 +223,7 @@ export const akselForsideQuery = `*[_type == "aksel_forside"][0]{
|
||||
"slug": slug.current,
|
||||
${contributorsAll}
|
||||
},
|
||||
komigang[]{
|
||||
...,
|
||||
"slug": reference->slug.current
|
||||
},
|
||||
tema[]{
|
||||
...,
|
||||
...ref->,
|
||||
"oppsummering": intro,
|
||||
...ref->{"refCount": count(*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && references(^._id)])},
|
||||
},
|
||||
"temaCount": count(*[_type == "aksel_tema" && defined(seksjoner) && count(*[_type == "aksel_artikkel" && !(_id in path("drafts.**")) && references(^._id)]) > 0]),
|
||||
"tema": *[_type == "aksel_tema" && defined(seksjoner[].sider[])],
|
||||
"resent": *[_type == "aksel_artikkel" && defined(publishedAt)] | order(publishedAt desc)[0...3]{
|
||||
_id,
|
||||
heading,
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -35,5 +35,5 @@ export const Demo = {
|
||||
|
||||
export const args = {
|
||||
index: 7,
|
||||
desc: "Vi anbefaler å bruke UNSAFE_useRangeDatepicker-hook hvis man har input-felter",
|
||||
desc: "Før du belger å bruke range, vurder om to enkelte datepickere for start/slutt-dato ville vært bedre. Range fungerer bedre for korte perioder innenfor en månede.",
|
||||
};
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
@@ -12,7 +12,10 @@ import { ToolCard } from "components/website-modules/ToolsCard";
|
||||
import { PreviewSuspense } from "next-sanity/preview";
|
||||
import Head from "next/head";
|
||||
import React, { lazy } from "react";
|
||||
import { AkselTemaT } from "..";
|
||||
|
||||
interface AkselTemaT extends SanityT.Schema.aksel_tema {
|
||||
refCount: number;
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
temaer: AkselTemaT[];
|
||||
|
||||
@@ -6,86 +6,29 @@ import {
|
||||
CompassIcon,
|
||||
ComponentIcon,
|
||||
PaletteIcon,
|
||||
PauseIcon,
|
||||
PlayIcon,
|
||||
PauseFillIcon,
|
||||
PlayFillIcon,
|
||||
} from "@navikt/aksel-icons";
|
||||
import { BodyLong, Heading } from "@navikt/ds-react";
|
||||
import { Heading, Ingress } from "@navikt/ds-react";
|
||||
import cl from "clsx";
|
||||
import { Header } from "components/layout/header/Header";
|
||||
import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
|
||||
import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
|
||||
import GodPraksisCardSimple from "components/sanity-modules/cards/GodPraksisCardSimple";
|
||||
import AkselLink from "components/website-modules/AkselLink";
|
||||
import { AkselCube } from "components/website-modules/cube";
|
||||
import { IntroCards } from "components/website-modules/IntroCards";
|
||||
import { LatestBloggposts } from "components/website-modules/LatestBloggs";
|
||||
import { ToolCard } from "components/website-modules/ToolsCard";
|
||||
import { PrefersReducedMotion } from "components/website-modules/utils/prefers-reduced-motion";
|
||||
import { PreviewSuspense } from "next-sanity/preview";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { lazy, useEffect, useState } from "react";
|
||||
import { logNav } from "../components";
|
||||
|
||||
const introcards = [
|
||||
{
|
||||
title: "Komponenter",
|
||||
desc: "Bibliotekene Core og Interne flater",
|
||||
icon: ComponentIcon,
|
||||
href: "/komponenter",
|
||||
},
|
||||
{
|
||||
title: "Design Tokens",
|
||||
desc: "Farger, spacing, shadows, etc.",
|
||||
icon: PaletteIcon,
|
||||
href: "/grunnleggende/styling/design-tokens",
|
||||
},
|
||||
{
|
||||
title: "Ikoner",
|
||||
desc: "Alle ikonene våre",
|
||||
icon: CompassIcon,
|
||||
href: "/ikoner",
|
||||
},
|
||||
];
|
||||
const WithPreview = lazy(() => import("../components/WithPreview"));
|
||||
|
||||
const IntroCards = () => {
|
||||
return (
|
||||
<ul className="centered-layout mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 sm:mb-36 md:gap-6">
|
||||
{introcards.map(({ icon: Icon, title, desc, href }) => (
|
||||
<li key={title} className="grid">
|
||||
<Link
|
||||
href={href}
|
||||
passHref
|
||||
className="focus-visible:shadow-focus bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 hover:ring-1 focus:outline-none"
|
||||
onClick={(e) =>
|
||||
logNav(
|
||||
"intro-kort",
|
||||
window.location.pathname,
|
||||
e.currentTarget.getAttribute("href")
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="items-center gap-2 sm:flex">
|
||||
<Icon aria-hidden className="shrink-0 text-2xl" role="img" />
|
||||
<span className="text-xl font-semibold group-hover:underline">
|
||||
{title}
|
||||
</span>
|
||||
</span>
|
||||
<div className="text-text-subtle mt-2">{desc}</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const GetStarted = ({
|
||||
links,
|
||||
togglePause,
|
||||
}: {
|
||||
links: { title: string; slug: string }[];
|
||||
togglePause: (x: boolean) => void;
|
||||
}) => {
|
||||
const [reducedMotion, setReducedMotion] = useState(false);
|
||||
const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
|
||||
const [pause, setPause] = useState(false);
|
||||
const [reducedMotion, setReducedMotion] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const disableAnimations =
|
||||
@@ -96,69 +39,22 @@ const GetStarted = ({
|
||||
const data = localStorage.getItem("pause-animations");
|
||||
if (disableAnimations) {
|
||||
setPause(true);
|
||||
togglePause(true);
|
||||
setPause(true);
|
||||
return;
|
||||
}
|
||||
setPause(JSON.parse(data) ?? false);
|
||||
togglePause(JSON.parse(data) ?? false);
|
||||
}, [togglePause]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-deepblue-700 text-text-on-action relative mx-auto w-full max-w-screen-lg -translate-y-1/2 rounded-2xl py-12 px-2">
|
||||
<Heading size="xlarge" level="2" className="text-center">
|
||||
Kom i gang
|
||||
</Heading>
|
||||
<ul
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${links.length}, minmax(0, 1fr))`,
|
||||
}}
|
||||
className="mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 sm:grid md:gap-8"
|
||||
>
|
||||
{links.map((x) => (
|
||||
<li key={x.title}>
|
||||
<AkselLink href={`/${x.slug}`} inverted>
|
||||
{x.title}
|
||||
</AkselLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{!reducedMotion && (
|
||||
<button
|
||||
className="focus-visible:ring-border-focus-on-inverted absolute top-2 right-2 grid h-11 w-11 place-items-center rounded text-2xl focus:outline-none focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
setPause(!pause);
|
||||
togglePause(!pause);
|
||||
localStorage.setItem("pause-animations", JSON.stringify(!pause));
|
||||
}}
|
||||
>
|
||||
{pause ? (
|
||||
<>
|
||||
<PlayIcon aria-hidden />
|
||||
<span className="sr-only">Start animasjon</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PauseIcon aria-hidden />
|
||||
<span className="sr-only">Stopp animasjon</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WithPreview = lazy(() => import("../components/WithPreview"));
|
||||
|
||||
const Forside = ({
|
||||
page,
|
||||
tema,
|
||||
bloggs,
|
||||
resent,
|
||||
komigang,
|
||||
temaCount,
|
||||
}: PageProps): JSX.Element => {
|
||||
const [pause, setPause] = useState(false);
|
||||
const validatedTema = tema
|
||||
.filter((t) => {
|
||||
return (
|
||||
t?.title &&
|
||||
t?.slug &&
|
||||
t?.pictogram &&
|
||||
t?.seksjoner.find((s) => !!s?.sider.find((s) => s?._ref))
|
||||
);
|
||||
})
|
||||
.sort((a, b) => a.title.localeCompare(b.title));
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -199,58 +95,102 @@ const Forside = ({
|
||||
|
||||
<div
|
||||
className={cl(
|
||||
"header-animated-bg relative max-w-[100vw] overflow-hidden bg-[#DCCAF3]",
|
||||
"header-animated-bg relative max-w-[100vw] overflow-hidden bg-violet-200",
|
||||
{ "animation-stop": pause }
|
||||
)}
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
|
||||
<div className="z-20 pb-8">
|
||||
<div className="centered-layout sm:mb-18 relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36 sm:max-w-[648px]">
|
||||
<div className="z-20 pb-28">
|
||||
<div className="centered-layout relative mb-12 mt-20 grid place-items-center text-center sm:mt-36 sm:max-w-[632px]">
|
||||
<Heading
|
||||
level="1"
|
||||
size="xlarge"
|
||||
className="text-deepblue-800 leading-[1.2] sm:text-[3.5rem]"
|
||||
className="text-deepblue-700 leading-[1.2] sm:text-[3.5rem]"
|
||||
>
|
||||
{page.title}
|
||||
Aksel gjør det enklere å lage digitale produkter
|
||||
</Heading>
|
||||
<AkselCube />
|
||||
</div>
|
||||
|
||||
<IntroCards />
|
||||
<IntroCards
|
||||
links={[
|
||||
{
|
||||
title: "Komponenter",
|
||||
desc: "Bibliotekene Core og Interne flater",
|
||||
icon: ComponentIcon,
|
||||
href: "/komponenter",
|
||||
},
|
||||
{
|
||||
title: "Design Tokens",
|
||||
desc: "Farger, spacing, shadows, etc.",
|
||||
icon: PaletteIcon,
|
||||
href: "/grunnleggende/styling/design-tokens",
|
||||
},
|
||||
{
|
||||
title: "Ikoner",
|
||||
desc: "Alle ikonene våre",
|
||||
icon: CompassIcon,
|
||||
href: "/ikoner",
|
||||
},
|
||||
]}
|
||||
className="centered-layout mb-40 max-w-md grid-cols-1 sm:mb-36 md:max-w-screen-lg md:grid-cols-3"
|
||||
variant="forside"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-surface-subtle min-h-96 relative pb-72 md:pb-40">
|
||||
<div className="centered-layout grid max-w-screen-2xl">
|
||||
<GetStarted links={komigang} togglePause={setPause} />
|
||||
{/* God praksis */}
|
||||
<div className="mx-auto">
|
||||
<Heading
|
||||
level="2"
|
||||
size="xlarge"
|
||||
className="text-deepblue-800 mb-8 text-center sm:text-[3.25rem]"
|
||||
>
|
||||
God praksis
|
||||
</Heading>
|
||||
{page?.god_praksis_intro && (
|
||||
<BodyLong className="text-center">
|
||||
{page.god_praksis_intro}
|
||||
</BodyLong>
|
||||
<div className="bg-surface-default ring-border-subtle mx-auto w-full -translate-y-48 rounded-2xl px-4 py-12 ring-1 sm:-translate-y-32 sm:px-12 sm:py-20">
|
||||
{!reducedMotion && (
|
||||
<button
|
||||
className="focus-visible:shadow-focus text-text-subtle hover:text-text-default absolute top-2 right-2 grid h-11 w-11 place-items-center rounded-xl text-2xl focus:outline-none focus-visible:ring-2"
|
||||
onClick={() => {
|
||||
setPause(!pause);
|
||||
localStorage.setItem(
|
||||
"pause-animations",
|
||||
JSON.stringify(!pause)
|
||||
);
|
||||
}}
|
||||
>
|
||||
{pause ? (
|
||||
<>
|
||||
<PlayFillIcon aria-hidden />
|
||||
<span className="sr-only">Start animasjon</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PauseFillIcon aria-hidden />
|
||||
<span className="sr-only">Stopp animasjon</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<div className="px-2 sm:px-6">
|
||||
<Heading
|
||||
level="2"
|
||||
size="xlarge"
|
||||
className="text-deepblue-700 mb-6"
|
||||
>
|
||||
God praksis
|
||||
</Heading>
|
||||
{page?.god_praksis_intro && (
|
||||
<Ingress className="max-w-3xl">
|
||||
{page.god_praksis_intro}
|
||||
</Ingress>
|
||||
)}
|
||||
</div>
|
||||
<ul className="mt-12 grid gap-x-8 md:grid-cols-2 xl:grid-cols-3">
|
||||
{validatedTema.map((t) => (
|
||||
<GodPraksisCardSimple key={t._id} node={t} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="card-grid-2-1 mx-auto mt-16 max-w-5xl">
|
||||
{tema.map((t) => (
|
||||
<GodPraksisCard key={t._id} node={t} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mx-auto mt-8">
|
||||
<AkselLink href="/god-praksis">
|
||||
{`Utforsk alle ${temaCount} tema i god praksis`}
|
||||
</AkselLink>
|
||||
</div>
|
||||
<div className="mt-20">
|
||||
<Heading level="3" size="medium">
|
||||
Nylige artikler
|
||||
|
||||
<div className="-mt-24 sm:-mt-12">
|
||||
<Heading level="3" size="medium" className="text-deepblue-800">
|
||||
Siste fra God praksis
|
||||
</Heading>
|
||||
<div className="card-grid-3-1 my-6">
|
||||
{resent.map((art: any) => (
|
||||
@@ -263,7 +203,7 @@ const Forside = ({
|
||||
))}
|
||||
</div>
|
||||
<AkselLink href="/god-praksis/artikler">
|
||||
Utforsk alle artikler i god praksis
|
||||
Utforsk alle artikler i God praksis
|
||||
</AkselLink>
|
||||
</div>
|
||||
</div>
|
||||
@@ -279,9 +219,6 @@ const Forside = ({
|
||||
variant="forside"
|
||||
level="2"
|
||||
/>
|
||||
<AkselLink href="/produktbloggen">
|
||||
Les flere blogginnlegg
|
||||
</AkselLink>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -304,12 +241,8 @@ const Page = (props: PageProps): JSX.Element => {
|
||||
return <Forside {...props} />;
|
||||
};
|
||||
|
||||
export interface AkselTemaT extends SanityT.Schema.aksel_tema {
|
||||
refCount: number;
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
tema: AkselTemaT[];
|
||||
tema: SanityT.Schema.aksel_tema[];
|
||||
bloggs: Partial<
|
||||
SanityT.Schema.aksel_blogg & {
|
||||
slug: string;
|
||||
@@ -327,11 +260,6 @@ interface PageProps {
|
||||
tema: string[];
|
||||
contributors?: { title?: string }[];
|
||||
}[];
|
||||
komigang: {
|
||||
title: string;
|
||||
slug: string;
|
||||
}[];
|
||||
temaCount: number;
|
||||
slug: string;
|
||||
preview: boolean;
|
||||
}
|
||||
@@ -348,8 +276,6 @@ export const getStaticProps = async ({
|
||||
bloggs = null,
|
||||
tema = null,
|
||||
resent = null,
|
||||
komigang = null,
|
||||
temaCount = 0,
|
||||
} = await client.fetch(akselForsideQuery);
|
||||
|
||||
return {
|
||||
@@ -358,8 +284,6 @@ export const getStaticProps = async ({
|
||||
bloggs,
|
||||
page,
|
||||
resent,
|
||||
komigang,
|
||||
temaCount,
|
||||
slug: "/",
|
||||
preview,
|
||||
id: page?._id ?? "",
|
||||
|
||||
@@ -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" && (
|
||||
|
||||
@@ -2,18 +2,19 @@ import { komponentLandingQuery, SanityT, SidebarT, urlFor } from "@/lib";
|
||||
import { SanityBlockContent } from "@/sanity-block";
|
||||
import { getClient } from "@/sanity-client";
|
||||
import { logAmplitudeEvent } from "@/utils";
|
||||
import { CodeIcon } from "@navikt/aksel-icons";
|
||||
import { BodyShort, Heading, Ingress } from "@navikt/ds-react";
|
||||
import cl from "clsx";
|
||||
import {
|
||||
GithubIcon,
|
||||
YarnIcon,
|
||||
FigmaIcon,
|
||||
ChangelogIcon,
|
||||
FigmaIcon,
|
||||
GithubIcon,
|
||||
StorybookIcon,
|
||||
YarnIcon,
|
||||
} from "components/assets";
|
||||
import { WithSidebar } from "components/layout/page-templates/WithSidebar";
|
||||
import ComponentOverview from "components/sanity-modules/ComponentOverview";
|
||||
import { SuggestionBlock } from "components/website-modules/suggestionblock";
|
||||
import { IntroCards } from "components/website-modules/IntroCards";
|
||||
import { PreviewSuspense } from "next-sanity/preview";
|
||||
import Head from "next/head";
|
||||
import { lazy } from "react";
|
||||
@@ -24,13 +25,13 @@ function Links() {
|
||||
<BodyShort
|
||||
as="span"
|
||||
size="small"
|
||||
className="text-text-subtle mb-6 flex flex-wrap gap-4"
|
||||
className="text-text-on-inverted mt-2 flex flex-wrap gap-4"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://github.com/navikt/aksel/tree/main/%40navikt"
|
||||
className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
|
||||
className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
|
||||
onClick={() =>
|
||||
logAmplitudeEvent("link", {
|
||||
kilde: "intro-lenker ikonside",
|
||||
@@ -44,7 +45,7 @@ function Links() {
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://yarnpkg.com/package/@navikt/ds-react"
|
||||
className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
|
||||
className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
|
||||
onClick={() =>
|
||||
logAmplitudeEvent("link", {
|
||||
kilde: "intro-lenker ikonside",
|
||||
@@ -59,7 +60,7 @@ function Links() {
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href="/grunnleggende/kode/endringslogg"
|
||||
className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
|
||||
className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
|
||||
onClick={() =>
|
||||
logAmplitudeEvent("link", {
|
||||
kilde: "intro-lenker komponenter",
|
||||
@@ -75,7 +76,7 @@ function Links() {
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://www.figma.com/@nav_aksel"
|
||||
className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
|
||||
className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
|
||||
onClick={() =>
|
||||
logAmplitudeEvent("link", {
|
||||
kilde: "intro-lenker ikonside",
|
||||
@@ -83,13 +84,13 @@ function Links() {
|
||||
})
|
||||
}
|
||||
>
|
||||
<FigmaIcon /> Figma
|
||||
<FigmaIcon /> Figma-community
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
href="/storybook"
|
||||
className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus group flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
|
||||
className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted group flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
|
||||
onClick={() =>
|
||||
logAmplitudeEvent("link", {
|
||||
kilde: "intro-lenker ikonside",
|
||||
@@ -97,7 +98,7 @@ function Links() {
|
||||
})
|
||||
}
|
||||
>
|
||||
<StorybookIcon className="mr-1 group-focus:invert" /> Storybook
|
||||
<StorybookIcon className="mr-1 " /> Storybook
|
||||
</a>
|
||||
</BodyShort>
|
||||
);
|
||||
@@ -147,11 +148,39 @@ const Page = ({
|
||||
<WithSidebar
|
||||
sidebar={sidebar}
|
||||
pageType={{ type: "Komponenter", title: "Komponenter" }}
|
||||
intro={<Ingress className="text-text-on-action">{page?.intro}</Ingress>}
|
||||
intro={
|
||||
<Ingress className="text-text-on-action">
|
||||
{page?.intro}
|
||||
<Links />
|
||||
</Ingress>
|
||||
}
|
||||
pageProps={page}
|
||||
>
|
||||
<Links />
|
||||
<SuggestionBlock variant="komponenter" />
|
||||
{/* <SuggestionBlock variant="komponenter" /> */}
|
||||
<IntroCards
|
||||
links={[
|
||||
{
|
||||
title: "Kom i gang med Kode",
|
||||
desc: "Intro til alle kodepakkene våre",
|
||||
icon: CodeIcon,
|
||||
href: "/grunnleggende/kode/kom-i-gang-med-kodepakkene",
|
||||
},
|
||||
{
|
||||
title: "Kom i gang med Figma",
|
||||
desc: "Hvordan bruke Figma-bibliotekene våre",
|
||||
icon: FigmaIcon,
|
||||
href: "/grunnleggende/styling/design-tokens",
|
||||
},
|
||||
{
|
||||
title: "Forslag til nye komponenter",
|
||||
desc: "Opprett et github-issue",
|
||||
icon: GithubIcon,
|
||||
href: `https://github.com/navikt/aksel/issues/new?labels=forespørsel+🥰%2Ckomponenter+🧩&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
|
||||
},
|
||||
]}
|
||||
className="grid-cols-1 pb-8 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3"
|
||||
variant="komponentside"
|
||||
/>
|
||||
{komponentKategorier
|
||||
.filter(
|
||||
(kat) => links?.filter((x) => x.kategori === kat.value).length > 0
|
||||
|
||||
@@ -6,6 +6,7 @@ export const Feedback = defineType({
|
||||
title: "Feedback",
|
||||
name: "aksel_feedback",
|
||||
type: "document",
|
||||
liveEdit: true,
|
||||
__experimental_omnisearch_visibility: false,
|
||||
fields: [
|
||||
defineField({
|
||||
@@ -43,12 +44,6 @@ export const Feedback = defineType({
|
||||
type: "text",
|
||||
readOnly: true,
|
||||
}),
|
||||
defineField({
|
||||
title: "Behandlet",
|
||||
name: "behandlet",
|
||||
type: "boolean",
|
||||
initialValue: false,
|
||||
}),
|
||||
defineField({
|
||||
title: "URL",
|
||||
name: "url",
|
||||
@@ -69,10 +64,17 @@ export const Feedback = defineType({
|
||||
defineField({
|
||||
title: "Notater",
|
||||
description:
|
||||
"Legg til noen notater hvis det var noen aksjonspunkter basert på tilbakemeldingen",
|
||||
"Legg til notater hvis det var noen tanker/aksjonspunkter basert på tilbakemeldingen",
|
||||
name: "notat",
|
||||
type: "text",
|
||||
}),
|
||||
defineField({
|
||||
title: "Behandlet",
|
||||
description: "Tagger tilbakemeldingen som sett/tatt rede for/ferdig",
|
||||
name: "behandlet",
|
||||
type: "boolean",
|
||||
initialValue: false,
|
||||
}),
|
||||
],
|
||||
preview: {
|
||||
select: {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { defineField, defineType } from "sanity";
|
||||
import { allArticleDocsRef } from "../../config";
|
||||
import { groups } from "./presets";
|
||||
import { SEOFields } from "./presets/seo";
|
||||
|
||||
@@ -9,88 +8,12 @@ export const Forside = defineType({
|
||||
type: "document",
|
||||
groups,
|
||||
fields: [
|
||||
defineField({
|
||||
title: "Tittel",
|
||||
name: "title",
|
||||
type: "string",
|
||||
validation: (Rule) => Rule.required(),
|
||||
}),
|
||||
defineField({
|
||||
title: "'Kom i gang'-lenker",
|
||||
name: "komigang",
|
||||
type: "array",
|
||||
validation: (Rule) => Rule.required().min(2).max(3),
|
||||
of: [
|
||||
{
|
||||
type: "object",
|
||||
name: "link",
|
||||
fields: [
|
||||
{
|
||||
type: "string",
|
||||
name: "title",
|
||||
validation: (Rule) => Rule.required().max(50),
|
||||
},
|
||||
{
|
||||
title: "Reference",
|
||||
name: "reference",
|
||||
type: "reference",
|
||||
to: allArticleDocsRef,
|
||||
validation: (Rule) => Rule.required(),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
defineField({
|
||||
title: "God praksis intro",
|
||||
name: "god_praksis_intro",
|
||||
type: "text",
|
||||
validation: (Rule) => Rule.required(),
|
||||
}),
|
||||
defineField({
|
||||
title: "Tema",
|
||||
description: "Tema som blir vist på forsiden",
|
||||
name: "tema",
|
||||
type: "array",
|
||||
validation: (Rule) => Rule.required().min(4),
|
||||
of: [
|
||||
{
|
||||
type: "object",
|
||||
name: "temalink",
|
||||
fields: [
|
||||
{
|
||||
name: "ref",
|
||||
type: "reference",
|
||||
to: [{ type: "aksel_tema" }],
|
||||
validation: (Rule) => Rule.required(),
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "intro",
|
||||
validation: (Rule) => Rule.required().max(210),
|
||||
options: {
|
||||
//@ts-ignore
|
||||
maxLength: 210,
|
||||
},
|
||||
},
|
||||
],
|
||||
preview: {
|
||||
select: {
|
||||
ref: "ref.title",
|
||||
intro: "intro",
|
||||
pictogram: "ref.pictogram",
|
||||
},
|
||||
prepare({ ...props }) {
|
||||
return {
|
||||
title: props?.ref,
|
||||
subtitle: props?.intro,
|
||||
media: props?.pictogram,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
SEOFields,
|
||||
],
|
||||
});
|
||||
@@ -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",
|
||||
];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.header-animated-bg {
|
||||
animation: animated-bg 30s ease infinite;
|
||||
animation: animated-bg 60s ease infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "2.7.7",
|
||||
"@navikt/ds-react": "2.7.7",
|
||||
"@navikt/ds-css": "2.8.2",
|
||||
"@navikt/ds-react": "2.8.2",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
|
||||
+13
-11
@@ -7,7 +7,8 @@
|
||||
"postinstall": "husky install",
|
||||
"boot": "yarn workspaces foreach -v -pA --topological-dev --no-private run build",
|
||||
"clean": "node scripts/clean.js && yarn workspace @navikt/ds-codemod clean",
|
||||
"storybook": "concurrently \"yarn watch:tw\" \"cross-env STORYBOOK_STORIES=all storybook dev -p 6006\"",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"storybook:aksel": "concurrently \"yarn watch:tw\" \"cross-env STORYBOOK_STORIES=all storybook dev -p 6006\"",
|
||||
"dev": "yarn workspace aksel.nav.no dev",
|
||||
"docgen": "yarn workspaces foreach -p run docgen",
|
||||
"chromatic": "npx chromatic --project-token x3xqdfgkujg --build-script-name build:storybook",
|
||||
@@ -191,15 +192,15 @@
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "0.4.7",
|
||||
"@changesets/cli": "2.25.0",
|
||||
"@storybook/addon-a11y": "7.0.0-beta.54",
|
||||
"@storybook/addon-actions": "7.0.0-beta.54",
|
||||
"@storybook/addon-essentials": "7.0.0-beta.54",
|
||||
"@storybook/addon-storysource": "7.0.0-beta.54",
|
||||
"@storybook/addons": "7.0.0-beta.54",
|
||||
"@storybook/csf-tools": "7.0.0-beta.54",
|
||||
"@storybook/react": "7.0.0-beta.54",
|
||||
"@storybook/react-vite": "7.0.0-beta.54",
|
||||
"@storybook/theming": "7.0.0-beta.54",
|
||||
"@storybook/addon-a11y": "7.0.0-rc.5",
|
||||
"@storybook/addon-actions": "7.0.0-rc.5",
|
||||
"@storybook/addon-essentials": "7.0.0-rc.5",
|
||||
"@storybook/addon-storysource": "7.0.0-rc.5",
|
||||
"@storybook/addons": "7.0.0-rc.5",
|
||||
"@storybook/csf-tools": "7.0.0-rc.5",
|
||||
"@storybook/react": "7.0.0-rc.5",
|
||||
"@storybook/react-vite": "7.0.0-rc.5",
|
||||
"@storybook/theming": "7.0.0-rc.5",
|
||||
"@typescript-eslint/parser": "^5.41.0",
|
||||
"@whitespace/storybook-addon-html": "^5.0.3",
|
||||
"chromatic": "6.5.4",
|
||||
@@ -220,7 +221,8 @@
|
||||
"react": "^18.0.0",
|
||||
"react-docgen-typescript": "2.2.2",
|
||||
"react-dom": "^18.0.0",
|
||||
"storybook": "7.0.0-beta.54",
|
||||
"storybook": "7.0.0-rc.5",
|
||||
"storybook-addon-next-router": "^4.0.2",
|
||||
"stylelint": "^14.8.5",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-standard": "^25.0.0",
|
||||
|
||||
Reference in new issue
Block a user