Compare commits

...
Author SHA1 Message Date
github-actions[bot]andgithub-actions[bot] e2a9d027dc Version Packages (#1749)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-01-17 10:32:23 +01:00
Ken 22dfd8e603 :sparkled: Prop for posisjonering av toptekst i Chat (#1748)
* :sparkled: Prop for posisjonering av toptekst i Chat

* 📝 changeset

* 📝 Docs

* 📝 Demo

* 🎨 fliptoptext -> toptextPosition
2023-01-17 10:26:14 +01:00
Ken 53d1947311 📝 Tekstendringer sanity profilside 2023-01-17 09:39:38 +01:00
Ken d4e7c47772 🎨 Sanity feedback preview 2023-01-17 07:37:20 +01:00
Ken e191dffdf8 🔥 Fjernet dårlige editor-navn 2023-01-16 09:12:05 +01:00
Ken 7e0ee60d47 🔥 Fjernet dårlige editor-navn 2023-01-16 08:57:11 +01:00
github-actions[bot]andgithub-actions[bot] 4ecaeb9d04 Version Packages (#1746)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-01-13 16:03:31 +01:00
Ken 8e5c554431 ⬆️ Bump @floating-ui/react 2023-01-13 15:56:12 +01:00
Ken 727be0a98b 🔥 Fjernet snowfall fra forside 2023-01-13 15:15:47 +01:00
github-actions[bot]andgithub-actions[bot] 4c2e44ced1 Version Packages (#1745)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-01-13 15:07:11 +01:00
Ken 2fd1dd443f 🔥 Fjernet ubrukt kode forside 2023-01-13 14:41:06 +01:00
Ken a6c3391237 📝 changeset 2023-01-13 14:38:45 +01:00
KenandKenAJoh 5ede88a188 Ikonsynk Figma (#1739)
Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>
2023-01-13 14:38:05 +01:00
Ken 2785593d20 ⬆️ Yarn lock update 2023-01-13 12:38:54 +01:00
Ken a37c743547 🐛 Bedre logging av temavisninger 2023-01-12 09:36:02 +01:00
Ken 6f0e18c3cf 🐛 E2E tester feilet grunnet aria-hidden 2023-01-12 09:18:10 +01:00
Ken bdfaa54e81 ♿ Gjemte til-toppen knapp for skjermleser 2023-01-12 08:27:03 +01:00
Ken 595796af6c 📝 Oppdatert grunnleggnde config 2023-01-12 06:50:16 +01:00
Ken c85b34e86f 🐛 Fikset henting av sider for testing i e2e! 2023-01-10 10:41:17 +01:00
Ken fc46b5a97b 🔍 Sitemap har nå lastmod-attr 2023-01-10 09:50:10 +01:00
Ken c7fcf57fdf :map: Google search-index ignorerer priority i sitemap 2023-01-10 08:28:21 +01:00
Ken 560d8bd1e8 🔍 Bedre robots.txt 2023-01-10 08:21:32 +01:00
Ken 7a53de186e 📝 1 Artikler -> 1 Artikkel 2023-01-09 13:48:57 +01:00
Ken 4feb798b25 🐛 God-praksis feilet ved visning av god-praksis sider 2023-01-09 12:53:54 +01:00
Ken c713b469f0 🔥 Fjernet ubrukt import Temaview 2023-01-09 12:40:42 +01:00
Ken 676392a5c4 🐛 Nye tema uten sider brakk sanity 2023-01-09 12:39:02 +01:00
Ken c049e08555 🎨 Sanity config refactor 2023-01-09 11:51:33 +01:00
github-actions[bot]andgithub-actions[bot] d8c898db8c Version Packages (#1738)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-01-09 11:05:24 +01:00
Ken 8a1ef5e7e2 🐛 Radio fikk ikke error-farge grunnet indeterminate (#1737) 2023-01-09 10:59:01 +01:00
Lars Hansen 293594235a #aksel til #Aksel 2023-01-05 15:28:57 +01:00
Lars Hansen a54d97591e Merge remote-tracking branch 'origin/master' 2023-01-05 15:28:09 +01:00
Lars Hansen dc2e7fb766 endre lenke fra #aksel og #designsystem til #aksel-designsystemet 2023-01-05 15:23:32 +01:00
Ken 53df42df22 📝 Fikset lenker til #aksel slack etter arkivering 2023-01-05 14:53:36 +01:00
Ken 5b9840524c ✅ Fikset date-test 2023-01-03 10:16:36 +01:00
Ken 0d6ddfd95e 🐛 Profilvisning sanity 2023-01-03 10:05:38 +01:00
Ken 0394e819ba ⚰️ Fjernet trello og algolia-integrasjon 2023-01-03 09:50:46 +01:00
Ken 67fc9ad560 🐛 La til kode-lenker igjen 2022-12-22 21:49:44 +01:00
Ken 8fe5c88eba 🐛 Preview låste seg på komponentsider 2022-12-22 17:11:43 +01:00
Ken 1fbcf78745 🎨 Hue-tilpassning i header på komponentsider 2022-12-22 16:35:13 +01:00
Ken 83dc3236e8 🎨 resolver dokument-ref for alle artikkel-sider 2022-12-22 16:12:57 +01:00
Ken 7503c7fa7f ✨ Feedback integrert på artikkelsider i sanity
🎨 Feedback-dokument

🎨 Sender nå feedback til sanity

🎨 Preview for feedback
2022-12-22 15:08:53 +01:00
Ken e668181690 ✨ Intro-lenker komponentsider 2022-12-21 21:07:05 +01:00
Ken 353dff3da5 🎨 localstorage for animasjons-stopp 2022-12-21 19:02:11 +01:00
Ken a11993a155 🔥 2022-12-21 15:23:06 +01:00
Ken 7b53b7670f ♿ play/pause knapp forside 2022-12-21 15:18:08 +01:00
Ken 0aaa0c4e10 📝 Klarspråk 2022-12-21 14:45:11 +01:00
Ken ea5e1f768c 🎨 Feedback-dokument 2022-12-21 14:31:49 +01:00
Ken e6b16e9b31 🐛 Fikset imports i script 2022-12-21 14:24:43 +01:00
Ken 1029d42163 Merge branch 'next' 2022-12-21 13:52:59 +01:00
Ken fba5140d8b 🚚 Flyttet scripts 2022-12-21 13:52:14 +01:00
Kai Erik Schieren fe72f32dbb ✨ moved backup (#1735) 2022-12-21 13:46:13 +01:00
Ken 6a0890b42b 💄 Kube på god-praksis forside 2022-12-21 13:13:24 +01:00
Ken 320f45a775 💄 Bedre beta-visning på komponentoversikt 2022-12-21 12:44:12 +01:00
Ken 3feb2283a4 🐛 Fikset kode-eksempler resizing 2022-12-21 12:16:59 +01:00
Ken c3b416a3cb 🎨 Deprecated-tag i sidebar sist 2022-12-21 10:10:23 +01:00
Ken 36fba1a33b 🐛 Riktig publiserings-logikk 2022-12-21 09:59:37 +01:00
Ken a9e080f892 📝 Ikonoppdatering 2022-12-20 19:16:54 +01:00
Ken 0dc8eb7a1e Ikonsynk Figma (#1730) 2022-12-20 19:15:49 +01:00
Ken 70fd78c926 🔍 Bedre scroll logging 2022-12-20 18:18:15 +01:00
Ken dbc5e7dc07 💄 Mindre gap introcards forside 2022-12-20 17:07:44 +01:00
Ken 4b0b8e4ae4 🐛 Fjernet gammel internal kategori 2022-12-20 16:33:12 +01:00
Ken 57e7e1ecc4 🐛 Forsøk på fix for flaky e2e tester 2022-12-20 16:25:17 +01:00
Ken 9534fe2540 ⚰️ fjernet limits for hva redirects kan løse 2022-12-20 16:02:23 +01:00
Ken 44683d38f1 🎨 La til ny kategori: interne 2022-12-20 16:00:42 +01:00
Ken 23c976e5d2 🐛 Fjernet sidecar fra aksel 2022-12-20 15:26:01 +01:00
Ken 9ea823d630 🐛 Fikset import 2022-12-20 15:14:36 +01:00
Ken 65c65a6637 🎨 Fikset OG-bilde grunnleggende, migrerings-script 2022-12-20 15:05:53 +01:00
ef2a2a9c49 Visuelle oppdateringer Aksel + nytt sanity-studio (#1734)
Co-authored-by: Kai Erik Schieren <kai.schieren@soprasteria.com>
Co-authored-by: Kai Erik Schieren <111572054+kschieren@users.noreply.github.com>
2022-12-20 14:00:20 +01:00
Ken 3f63fd7fb6 🐛 Backup funket ikke 2022-12-20 12:21:06 +01:00
Ken 6fe9788444 🐛 Button submittet form i table 2022-12-16 12:47:35 +01:00
Ken 10c6545885 🐛 Fikset e2e tester 2022-12-15 16:11:31 +01:00
Ken 2e76272a35 🐛 Fikset preview fra dev->prod 2022-12-15 15:44:20 +01:00
Ken 803a7a4d0f ♿ Fokusmarkering relatert innhold-cards 2022-12-15 14:18:10 +01:00
315 changed files with 9294 additions and 12416 deletions

No files matched your search

-3
View File
@@ -22,9 +22,6 @@ jobs:
- name: add tokens to .env
run: |
echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
-3
View File
@@ -21,9 +21,6 @@ jobs:
- name: add tokens to .env
run: |
echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+3 -4
View File
@@ -22,18 +22,17 @@ jobs:
key: ${{ runner.os }}-build-${{ github.sha }}
restore-keys: |
${{ runner.os }}-build-
- name: Install dependencies
run: cd aksel.nav.no/sanity && yarn
run: cd aksel.nav.no/website && yarn
- name: Export dataset
run: cd aksel.nav.no/sanity && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
run: cd aksel.nav.no/website && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
- name: Upload GCP bucket
uses: "google-github-actions/auth@v0"
with:
credentials_json: "${{ secrets.gcp_credentials_prod }}"
- uses: "google-github-actions/upload-cloud-storage@v0"
with:
path: ./aksel.nav.no/sanity
path: ./aksel.nav.no/website
destination: "aksel-website-prod/backups"
glob: "backup-*.tar.gz"
+1 -4
View File
@@ -21,9 +21,6 @@ jobs:
- name: add tokens to .env
run: |
echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> aksel.nav.no/website/.env
echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
@@ -47,7 +44,7 @@ jobs:
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: yarn workspace website e2e
run: yarn workspace website e2e:full
- uses: actions/upload-artifact@v3
if: always()
with:
-25
View File
@@ -1,25 +0,0 @@
name: Indexing search
on:
workflow_dispatch:
schedule:
# 01.00 & 12.00 every day
- cron: "00 01,12 * * *"
jobs:
searchcrawl:
name: Search-indexing aksel.nav.no
runs-on: ubuntu-latest
env:
APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
steps:
- uses: actions/checkout@v2
- name: Read crawler.json
id: algolia_config
run: echo "::set-output name=config::$(cat ./aksel.nav.no/crawler.json | jq -r tostring)"
- name: Push indices to Algolia
uses: signcl/docsearch-scraper-action@master
env:
APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
CONFIG: ${{ steps.algolia_config.outputs.config }}
+3 -1
View File
@@ -148,4 +148,6 @@ tmp.json
/playwright/.cache/
playwright-report/
/test-results/
backup-*.tar.gz
backup-*.tar.gz
sitemap-urls.json
*.tar.gz
+12
View File
@@ -1,5 +1,17 @@
# @navikt/ds-codemod
## 2.0.15
## 2.0.14
## 2.0.13
## 2.0.12
## 2.0.11
## 2.0.10
## 2.0.9
## 2.0.8
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-codemod",
"version": "2.0.9",
"version": "2.0.15",
"description": "Aksel codemods for NAVs designsystem",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
+2 -2
View File
@@ -39,8 +39,8 @@
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
},
"dependencies": {
"@navikt/ds-icons": "^2.0.9",
"@navikt/ds-react": "^2.0.9",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"clsx": "^1.1.1"
},
"devDependencies": {
+20
View File
@@ -1,5 +1,25 @@
# @navikt/ds-css
## 2.0.15
### Patch Changes
- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
## 2.0.14
## 2.0.13
## 2.0.12
### Patch Changes
- [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
## 2.0.11
## 2.0.10
## 2.0.9
## 2.0.8
+1 -1
View File
@@ -14,7 +14,7 @@
background: transparent;
cursor: pointer;
border: none;
border-bottom: 2px solid var(--a-border-strong);
border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
}
.navds-accordion__header:focus {
+16
View File
@@ -77,6 +77,22 @@
align-self: flex-end;
}
.navds-chat--top-text-left .navds-chat__top-text {
align-self: flex-start;
}
.navds-chat--top-text-right .navds-chat__top-text {
align-self: flex-end;
}
.navds-chat--left .navds-chat__top-text--right {
align-self: flex-end;
}
.navds-chat--right .navds-chat__top-text--left {
align-self: flex-start;
}
.navds-chat__name {
font-weight: var(--a-font-weight-bold);
}
+4 -12
View File
@@ -143,27 +143,21 @@
.navds-checkbox--error
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-radio__label::before {
.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}
.navds-checkbox--error
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-radio__label::before {
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}
.navds-checkbox--error
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+ .navds-radio__label::before {
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}
@@ -171,9 +165,7 @@
.navds-checkbox--error
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error
> .navds-radio__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+ .navds-radio__label::before {
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "2.0.9",
"version": "2.0.15",
"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.0.9",
"@navikt/ds-tokens": "^2.0.15",
"normalize.css": "^8.0.1",
"postcss": "^8.4.0",
"postcss-cli": "^9.0.0",
+1
View File
@@ -10,6 +10,7 @@
"--ac-alert-success-bg": "--a-surface-success-subtle"
},
"accordion": {
"--ac-accordion-header-border": "--a-border-strong",
"--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
"--ac-accordion-header-border-hover": "--a-border-strong",
"--ac-accordion-item-bg-open": "--a-surface-action-subtle",
+48
View File
@@ -1,5 +1,53 @@
# @navikt/ds-react
## 2.0.15
### Patch Changes
- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
- Updated dependencies []:
- @navikt/ds-icons@2.0.15
## 2.0.14
### Patch Changes
- [`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react
- Updated dependencies []:
- @navikt/ds-icons@2.0.14
## 2.0.13
### Patch Changes
- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
- @navikt/ds-icons@2.0.13
## 2.0.12
### Patch Changes
- Updated dependencies []:
- @navikt/ds-icons@2.0.12
## 2.0.11
### Patch Changes
- Updated dependencies []:
- @navikt/ds-icons@2.0.11
## 2.0.10
### Patch Changes
- Button submittet form i table
- Updated dependencies []:
- @navikt/ds-icons@2.0.10
## 2.0.9
### Patch Changes
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "2.0.9",
"version": "2.0.15",
"description": "Aksel react-components for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
@@ -36,8 +36,8 @@
"test": "TZ=UTC jest"
},
"dependencies": {
"@floating-ui/react-dom-interactions": "0.9.2",
"@navikt/ds-icons": "^2.0.9",
"@floating-ui/react": "0.17.0",
"@navikt/ds-icons": "^2.0.15",
"@radix-ui/react-tabs": "1.0.0",
"@radix-ui/react-toggle-group": "1.0.0",
"clsx": "^1.2.1",
+22 -2
View File
@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
* Background color on bubble
*/
backgroundColor?: string;
/**
* Overrides hoizontal position of toptext
*/
toptextPosition?: "left" | "right";
}
export type BubbleType = React.ForwardRefExoticComponent<
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
>;
const Bubble: BubbleType = forwardRef(
({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
(
{
children,
className,
name,
timestamp,
backgroundColor,
toptextPosition,
...rest
},
ref
) => {
return (
<div
ref={ref}
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
{...rest}
>
{(timestamp || name) && (
<div className="navds-chat__top-text">
<div
className={cl(
`navds-chat__top-text`,
toptextPosition && `navds-chat__top-text--${toptextPosition}`
)}
>
{name && <Detail className="navds-chat__name">{name}</Detail>}
{timestamp && (
<Detail className="navds-chat__timestamp">{timestamp}</Detail>
+13 -1
View File
@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
* @default "left"
*/
position?: "left" | "right";
/**
* Hoizontal position of toptext
* @default Same as chat
*/
toptextPosition?: "left" | "right";
}
interface ChatComponent
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
position = "left",
avatarBgColor,
backgroundColor,
toptextPosition,
...rest
},
ref
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
return (
<div
ref={ref}
className={cl("navds-chat", className, `navds-chat--${position}`)}
className={cl(
"navds-chat",
className,
`navds-chat--${position} navds-chat--top-text-${
toptextPosition ?? position
}`
)}
{...rest}
>
<BodyShort
@@ -116,6 +116,57 @@ export const Position = () => {
);
};
export const ToptextPosition = () => {
return (
<div className="colgap">
<Chat
avatar="ON"
name="Ola Normann"
timestamp="01.01.21 14:00"
backgroundColor="rgba(255, 249, 240, 1)"
avatarBgColor="rgba(255, 236, 204, 1)"
toptextPosition="right"
>
<Chat.Bubble>
Adipisicing laborum est eu laborum est sit in commodo enim sint
laboris labore nisi ut.
</Chat.Bubble>
</Chat>
<Chat
avatar="KH"
name="Kari Høyli"
timestamp="01.01.21 14:32"
position="right"
backgroundColor="rgba(230, 240, 255, 1)"
avatarBgColor="rgba(204, 225, 255, 1)"
toptextPosition="left"
>
<Chat.Bubble>
Reprehenderit pariatur officia exercitation laboris.
</Chat.Bubble>
<Chat.Bubble>
Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
est dolore incididunt. Occaecat cupidatat magna.
</Chat.Bubble>
</Chat>
<Chat
avatar="ON"
name="Ola Normann"
timestamp="01.01.21 15:00"
backgroundColor="rgba(255, 249, 240, 1)"
avatarBgColor="rgba(255, 236, 204, 1)"
>
<Chat.Bubble toptextPosition="right">
Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
labore sunt aute.
</Chat.Bubble>
</Chat>
</div>
);
};
export const Avatar = () => {
return (
<Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
@@ -36,7 +36,7 @@ describe("Returns if year is at start or end of range", () => {
expect(hasNextYear(new Date(), years, 1)).toBeTruthy();
});
test("Should have previous year (true)", () => {
expect(hasNextYear(new Date("Aug 3 2023"), years, -1)).toBeTruthy();
expect(hasNextYear(new Date("Aug 3 2024"), years, -1)).toBeTruthy();
});
test("Should not have next year (false)", () => {
expect(hasNextYear(new Date("Aug 3 2029"), years, 1)).toBeFalsy();
+1 -1
View File
@@ -1,5 +1,5 @@
import React, { forwardRef, InputHTMLAttributes } from "react";
import cl from "clsx";
import React, { forwardRef, InputHTMLAttributes } from "react";
import { BodyShort, Detail, omit } from "../..";
import { FormFieldProps } from "../useFormField";
import { useRadio } from "./useRadio";
@@ -23,7 +23,7 @@ export const Default = (props) => {
value={props.controlled ? state : undefined}
onChange={props.controlled ? setState : undefined}
hideLegend={props.hideLegend}
error={props.errorGroup ? "Errormelding" : undefined}
error={props.error ? "Errormelding" : undefined}
size={props?.size}
>
<Radio value="radio1">{props.children || "Apple"}</Radio>
@@ -41,6 +41,7 @@ export const Default = (props) => {
Default.args = {
controlled: false,
error: false,
size: "medium",
legend: "Legend-tekst",
radioDescription: false,
+1 -1
View File
@@ -8,7 +8,7 @@ import {
useDismiss,
useFloating,
useInteractions,
} from "@floating-ui/react-dom-interactions";
} from "@floating-ui/react";
import cl from "clsx";
import React, {
forwardRef,
@@ -44,6 +44,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
>
{sortable ? (
<button
type="button"
className="navds-table__sort-button"
onClick={
sortable && sortKey
@@ -85,6 +85,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
>
{!expansionDisabled && (
<button
type="button"
className="navds-table__toggle-expand-button"
aria-controls={id}
aria-expanded={isOpen}
+1 -1
View File
@@ -11,7 +11,7 @@ import {
useFocus,
useHover,
useInteractions,
} from "@floating-ui/react-dom-interactions";
} from "@floating-ui/react";
import cl from "clsx";
import React, {
cloneElement,
+12
View File
@@ -1,5 +1,17 @@
# @navikt/ds-tailwind
## 2.0.15
## 2.0.14
## 2.0.13
## 2.0.12
## 2.0.11
## 2.0.10
## 2.0.9
## 2.0.8
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tailwind",
"version": "2.0.9",
"version": "2.0.15",
"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.0.9",
"@navikt/ds-tokens": "^2.0.15",
"@types/jest": "^29.0.0",
"color": "4.2.3",
"jest": "^29.0.0",
+12
View File
@@ -1,5 +1,17 @@
# @navikt/ds-tokens
## 2.0.15
## 2.0.14
## 2.0.13
## 2.0.12
## 2.0.11
## 2.0.10
## 2.0.9
## 2.0.8
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tokens",
"version": "2.0.9",
"version": "2.0.15",
"description": "Design-tokens for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"keywords": [
+20
View File
@@ -1,5 +1,25 @@
# @navikt/ds-icons
## 2.0.15
## 2.0.14
## 2.0.13
### Patch Changes
- [`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ikonjusteringer sirkleikoner
## 2.0.12
## 2.0.11
### Patch Changes
- Oppdatert svg-path i ikoner
## 2.0.10
## 2.0.9
## 2.0.8
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-icons",
"version": "2.0.9",
"version": "2.0.15",
"description": "Aksel icons for NAV",
"author": "Aksel | NAV designsystem team",
"repository": {
+3 -1
View File
@@ -1,3 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 2.5C6.64137 2.5 2.5 6.64137 2.5 11.75C2.5 16.8586 6.64137 21 11.75 21C16.8586 21 21 16.8586 21 11.75C21 6.64137 16.8586 2.5 11.75 2.5ZM1 11.75C1 5.81294 5.81294 1 11.75 1C17.6871 1 22.5 5.81294 22.5 11.75C22.5 17.6871 17.6871 22.5 11.75 22.5C5.81294 22.5 1 17.6871 1 11.75Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.75H7V11.25H17V12.75Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 17L11.25 7L12.75 7L12.75 17H11.25Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 651 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM13 6V11H18V13H13V18H11V13H6V11H11V6H13Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 1C5.81294 1 1 5.81294 1 11.75C1 17.6871 5.81294 22.5 11.75 22.5C17.6871 22.5 22.5 17.6871 22.5 11.75C22.5 5.81294 17.6871 1 11.75 1ZM11.25 12.75V17H12.75V12.75H17V11.25H12.75V7H11.25V11.25H7V12.75H11.25Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 381 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 4.7071C8.09763 4.31657 8.09763 3.68341 7.70711 3.29289C7.31658 2.90236 6.68342 2.90236 6.29289 3.29289L2.29289 7.29289C2.10535 7.48042 2 7.73478 2 8C2 8.26521 2.10535 8.51957 2.29289 8.7071L6.29289 12.7071C6.68342 13.0976 7.31658 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 8.99999H15C17.7614 8.99999 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 6.99999 15 6.99999H5.41421L7.70711 4.7071Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70708 4.7071L8.41418 3.99999L6.99997 2.58578L6.29286 3.29288L2.29286 7.29289L1.58575 7.99999L2.29286 8.7071L6.29286 12.7071L6.99997 13.4142L8.41418 12L7.70708 11.2929L5.41418 8.99999H15C17.7614 8.99999 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7878H12.7878V21H13.7878H15C18.866 21 22 17.866 22 14C22 10.134 18.866 6.99999 15 6.99999H5.41418L7.70708 4.7071Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 734 B

After

Width:  |  Height:  |  Size: 536 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711L5.41422 7H15C18.866 7 22 10.134 22 14C22 17.866 18.866 21 15 21H13.7879C13.2356 21 12.7879 20.5523 12.7879 20C12.7879 19.4477 13.2356 19 13.7879 19H15C17.7614 19 20 16.7614 20 14C20 11.2386 17.7614 9 15 9H5.41421L7.70711 11.2929C8.09763 11.6834 8.09763 12.3166 7.70711 12.7071C7.31659 13.0976 6.68342 13.0976 6.2929 12.7071L2.29289 8.70711C2.10536 8.51957 2 8.26522 2 8C2 7.73479 2.10536 7.48043 2.29289 7.2929L6.2929 3.29289C6.68342 2.90237 7.31659 2.90237 7.70711 3.29289Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41418 3.99999L6.99997 2.58578L1.58575 7.99999L6.99997 13.4142L8.41418 12L5.41418 8.99999H15C17.7614 8.99999 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H12.7878V21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 6.99999 15 6.99999H5.41418L8.41418 3.99999Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 831 B

After

Width:  |  Height:  |  Size: 427 B

+2 -1
View File
@@ -1,3 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.81465 5.94668 2.5511 11 2.04938V12.4142L18.3288 19.743C16.6044 21.1544 14.4017 22 12 22C6.47715 22 2 17.5228 2 12ZM19.7488 21.163C17.6587 22.9321 14.9533 24 12 24C5.37258 24 0 18.6274 0 12C0 5.70934 4.84047 0.549225 11 0.0410738V0H12H13V0.0410738C19.1595 0.549225 24 5.70934 24 12C24 14.9533 22.9321 17.6587 21.163 19.7488L21.1924 19.7782L20.4853 20.4853L19.7782 21.1924L19.7488 21.163ZM19.743 18.3288C21.1543 16.6044 22 14.4017 22 12C22 6.81465 18.0533 2.5511 13 2.04938V11.5858L19.743 18.3288Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 2.5H12.75V12.1729L19.5103 18.4504L18.4897 19.5496L11.25 12.8271V2.5Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 614 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410767C4.84047 0.549228 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7803 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410767C18.2766 0.476386 22.5852 4.32557 23.712 9.37485C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 1.27576C5.66285 1.6608 1.25 6.31506 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C14.5711 22.75 16.9313 21.8474 18.7812 20.3418L11.25 12.8107V1.27576ZM19.8766 19.3159C21.6596 17.3972 22.75 14.8259 22.75 12C22.75 6.31506 18.3372 1.6608 12.75 1.27576V12.1893L19.8766 19.3159Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 489 B

After

Width:  |  Height:  |  Size: 449 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.58579L21.4142 10L16 15.4142L14.5858 14L17.5858 11H8C6.34315 11 5 12.3431 5 14V18H3V14C3 11.2386 5.23858 9 8 9H17.5858L14.5858 6.00001L16 4.58579Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 322 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 17V18H5V17H3ZM20 10L20.7071 10.7071L21.4142 10L20.7071 9.29289L20 10ZM16.7071 5.29289L16 4.58579L14.5858 6L15.2929 6.70711L16.7071 5.29289ZM15.2929 13.2929L14.5858 14L16 15.4142L16.7071 14.7071L15.2929 13.2929ZM5 17V14H3V17H5ZM8 11H20V9H8V11ZM20.7071 9.29289L16.7071 5.29289L15.2929 6.70711L19.2929 10.7071L20.7071 9.29289ZM19.2929 9.29289L15.2929 13.2929L16.7071 14.7071L20.7071 10.7071L19.2929 9.29289ZM5 14C5 12.3431 6.34315 11 8 11V9C5.23858 9 3 11.2386 3 14H5Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.58578L21.4142 10L16 15.4142L14.5858 14L17.5858 11H8C6.34315 11 5 12.3431 5 14V18H3V14C3 11.2386 5.23858 9 8 9H17.5858L14.5858 6L16 4.58578Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 316 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 315 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.414 8.99998L21.7068 3.70709L20.2926 2.29288L14.9999 7.5856V2.99998H12.9999V11H20.9999V8.99998H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 520 B

After

Width:  |  Height:  |  Size: 399 B

+2 -1
View File
@@ -1,3 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM18 11H6V13H18V11Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 2.5C6.64137 2.5 2.5 6.64137 2.5 11.75C2.5 16.8586 6.64137 21 11.75 21C16.8586 21 21 16.8586 21 11.75C21 6.64137 16.8586 2.5 11.75 2.5ZM1 11.75C1 5.81294 5.81294 1 11.75 1C17.6871 1 22.5 5.81294 22.5 11.75C22.5 17.6871 17.6871 22.5 11.75 22.5C5.81294 22.5 1 17.6871 1 11.75Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.75H7V11.25H17V12.75Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 413 B

After

Width:  |  Height:  |  Size: 544 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12ZM18 11H6V13H18V11Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 1C5.81294 1 1 5.81294 1 11.75C1 17.6871 5.81294 22.5 11.75 22.5C17.6871 22.5 22.5 17.6871 22.5 11.75C22.5 5.81294 17.6871 1 11.75 1ZM7 12.75H17V11.25H7V12.75Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 336 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 3.7071C10.0976 3.31658 10.0976 2.68341 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L5.29289 5.29289C5.10535 5.48043 5 5.73478 5 6C5 6.26522 5.10535 6.51957 5.29289 6.70711L8.29289 9.7071C8.68342 10.0976 9.31658 10.0976 9.70711 9.7071C10.0976 9.31658 10.0976 8.68341 9.70711 8.29289L8.41421 7H17C18.6569 7 20 8.34314 20 10V12C20 12.5523 20.4477 13 21 13C21.5523 13 22 12.5523 22 12V10C22 7.23857 19.7614 5 17 5H8.41421L9.70711 3.7071ZM14.2929 20.2929C13.9024 20.6834 13.9024 21.3166 14.2929 21.7071C14.6834 22.0976 15.3166 22.0976 15.7071 21.7071L18.7071 18.7071C18.8946 18.5196 19 18.2652 19 18C19 17.7348 18.8946 17.4804 18.7071 17.2929L15.7071 14.2929C15.3166 13.9024 14.6834 13.9024 14.2929 14.2929C13.9024 14.6834 13.9024 15.3166 14.2929 15.7071L15.5858 17L7 17C5.34314 17 4 15.6568 4 14L4 12C4 11.4477 3.55228 11 3 11C2.44771 11 2 11.4477 2 12V14C2 16.7614 4.23858 19 7 19H15.5858L14.2929 20.2929Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 3.7071L10.4142 2.99999L9 1.58578L8.29289 2.29289L5.29289 5.29289L4.58578 6L5.29289 6.7071L8.29289 9.7071L9 10.4142L10.4142 8.99999L9.70711 8.29289L8.41421 6.99999H17C18.6569 6.99999 20 8.34314 20 9.99999V12V13H22V12V9.99999C22 7.23857 19.7614 4.99999 17 4.99999H8.41421L9.70711 3.7071ZM14.2929 20.2929L13.5858 21L15 22.4142L15.7071 21.7071L18.7071 18.7071L19.4142 18L18.7071 17.2929L15.7071 14.2929L15 13.5858L13.5858 15L14.2929 15.7071L15.5858 17L7 17C5.34314 17 4 15.6568 4 14L4 12L4 11H2V12V14C2 16.7614 4.23858 19 7 19H15.5858L14.2929 20.2929Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 727 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM9.70711 2.29289C10.0976 2.68342 10.0976 3.31658 9.70711 3.70711L8.41421 5H17C19.7614 5 22 7.23858 22 10V12C22 12.5523 21.5523 13 21 13C20.4477 13 20 12.5523 20 12V10C20 8.34315 18.6569 7 17 7H8.41421L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L5.29289 6.70711C5.10535 6.51957 5 6.26522 5 6C5 5.73479 5.10535 5.48043 5.29289 5.2929L8.29289 2.29289C8.68342 1.90237 9.31658 1.90237 9.70711 2.29289ZM14.2929 21.7071C13.9024 21.3166 13.9024 20.6834 14.2929 20.2929L15.5858 19H7C4.23858 19 2 16.7614 2 14V12C2 11.4477 2.44771 11 3 11C3.55228 11 4 11.4477 4 12V14C4 15.6569 5.34314 17 7 17H15.5858L14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929C14.6834 13.9024 15.3166 13.9024 15.7071 14.2929L18.7071 17.2929C18.8946 17.4804 19 17.7348 19 18C19 18.2652 18.8946 18.5196 18.7071 18.7071L15.7071 21.7071C15.3166 22.0976 14.6834 22.0976 14.2929 21.7071Z" fill="#262626"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 3.7071L10.4142 2.99999L9 1.58578L8.29289 2.29289L5.29289 5.29289L4.58578 6L5.29289 6.7071L8.29289 9.7071L9 10.4142L10.4142 8.99999L9.70711 8.29289L8.41421 6.99999H17C18.6569 6.99999 20 8.34314 20 9.99999V12V13H22V12V9.99999C22 7.23857 19.7614 4.99999 17 4.99999H8.41421L9.70711 3.7071ZM14.2929 20.2929L13.5858 21L15 22.4142L15.7071 21.7071L18.7071 18.7071L19.4142 18L18.7071 17.2929L15.7071 14.2929L15 13.5858L13.5858 15L14.2929 15.7071L15.5858 17L7 17C5.34314 17 4 15.6568 4 14L4 12L4 11H2V12V14C2 16.7614 4.23858 19 7 19H15.5858L14.2929 20.2929Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 727 B

+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.70817 6C8.11909 4.75448 9.9715 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12H2C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C9.27396 2 6.80296 3.09136 5 4.85869L5 2H3L3 8H9V6H6.70817Z" fill="#262626"/>
<path d="M6.70817 6C8.11909 4.75448 9.9715 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12H2C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C9.27396 2 6.80296 3.09136 5 4.85869L5 2H3L3 8H9V6H6.70817Z" fill="#262626"/>
</svg>

Before

Width:  |  Height:  |  Size: 434 B

After

Width:  |  Height:  |  Size: 394 B

+12
View File
@@ -1,5 +1,17 @@
# @navikt/ds-css-internal
## 2.0.15
## 2.0.14
## 2.0.13
## 2.0.12
## 2.0.11
## 2.0.10
## 2.0.9
## 2.0.8
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css-internal",
"version": "2.0.9",
"version": "2.0.15",
"description": "CSS for NAV internal Designsystem-components",
"author": "Aksel | NAV designsystem team",
"keywords": [
+48
View File
@@ -1,5 +1,53 @@
# @navikt/ds-react-internal
## 2.0.15
### Patch Changes
- Updated dependencies [[`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593)]:
- @navikt/ds-react@2.0.15
- @navikt/ds-icons@2.0.15
## 2.0.14
### Patch Changes
- Updated dependencies [[`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52)]:
- @navikt/ds-react@2.0.14
- @navikt/ds-icons@2.0.14
## 2.0.13
### Patch Changes
- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
- @navikt/ds-icons@2.0.13
- @navikt/ds-react@2.0.13
## 2.0.12
### Patch Changes
- Updated dependencies []:
- @navikt/ds-react@2.0.12
- @navikt/ds-icons@2.0.12
## 2.0.11
### Patch Changes
- Updated dependencies []:
- @navikt/ds-icons@2.0.11
- @navikt/ds-react@2.0.11
## 2.0.10
### Patch Changes
- Updated dependencies []:
- @navikt/ds-react@2.0.10
- @navikt/ds-icons@2.0.10
## 2.0.9
### Patch Changes
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react-internal",
"version": "2.0.9",
"version": "2.0.15",
"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.0.9",
"@navikt/ds-react": "^2.0.9",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"clsx": "^1.1.1",
"copy-to-clipboard": "^3.3.1"
},
+1 -6
View File
@@ -65,11 +65,6 @@ Blir brukt flere keys i .env under `./website`, men kun `SANITY_PRIVATE_NO_DRAFT
- SANITY_WRITE_KEY:
For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch
- ALGOLIA_ADMIN:
For å oppdatere records i søkemotoren. Trengs bare hvis man oppdaterer søkeindexen lokalt.
- ALGOLIA_ID:
Søkemotor index-id for å redigere riktig Index. Trengs bare for at søk skal fungere lokalt
- TRELLO_TOKEN: Sender feedback til et egent trello-board. Ikke nødvendig lokalt hvis man ikke vil teste feedback-modulen.
- SANITY_PREVIEW_TOKEN: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste preview-sider
- SANITY_PRIVATE_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
@@ -89,4 +84,4 @@ Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`
Spørsmål og kontakt kan rettes til team Aksel
Aksel har også en egen slack-kanal #aksel
Aksel har også en egen Slack-kanal #Aksel-designsystemet
-54
View File
@@ -1,54 +0,0 @@
{
"index_name": "aksel_docsearch",
"start_urls": [
"https://aksel.nav.no/",
{
"url": "https://aksel.nav.no/designsystem",
"tags": ["designsystem", "docs"]
},
{
"url": "https://aksel.nav.no/god-praksis/",
"tags": ["aksel"],
"selectors_key": "aksel"
},
{
"url": "https://aksel.nav.no/produktbloggen/",
"tags": ["aksel"],
"selectors_key": "aksel"
},
{
"url": "https://aksel.nav.no/prinsipper/",
"tags": ["aksel"],
"selectors_key": "aksel"
}
],
"selectors": {
"default": {
"lvl0": {
"selector": "h1.algolia-index-lvl1",
"global": true
},
"lvl1": ".algolia-index-tabs--active",
"lvl2": "h2.algolia-index-lvl2",
"lvl3": "h3.algolia-index-lvl3",
"text": "p.algolia-index-body, p.algolia-index-ingress"
},
"aksel": {
"lvl0": {
"selector": "h1.algolia-index-lvl1",
"global": true
},
"lvl1": "h2.algolia-index-lvl2",
"lvl2": "h3.algolia-index-lvl3",
"text": "p.algolia-index-body, p.algolia-index-ingress"
}
},
"selectors_exclude": [".algolia-ignore-index"],
"stop_urls": [
"https://aksel.nav.no/preview",
"https://old-design-nav.vercel.app",
"https://aksel.nav.no/eksempler"
],
"sitemap_urls": ["https://aksel.nav.no/api/sitemap"],
"js_render": true
}
-7
View File
@@ -40,10 +40,3 @@ spec:
- host: cdn.sanity.io
rules: []
env:
azure:
application:
enabled: true
allowAllUsers: true
tenant: nav.no
sidecar:
enabled: true
-7
View File
@@ -38,13 +38,6 @@ spec:
- host: cdn.sanity.io
rules: []
env:
azure:
application:
enabled: true
allowAllUsers: true
tenant: nav.no
sidecar:
enabled: true
gcp:
buckets:
- name: aksel-website-prod
+8 -8
View File
@@ -15,14 +15,14 @@
"website"
],
"dependencies": {
"@navikt/ds-codemod": "^2.0.9",
"@navikt/ds-css": "^2.0.9",
"@navikt/ds-css-internal": "^2.0.9",
"@navikt/ds-icons": "^2.0.9",
"@navikt/ds-react": "^2.0.9",
"@navikt/ds-react-internal": "^2.0.9",
"@navikt/ds-tailwind": "^2.0.9",
"@navikt/ds-tokens": "^2.0.9"
"@navikt/ds-codemod": "^2.0.15",
"@navikt/ds-css": "^2.0.15",
"@navikt/ds-css-internal": "^2.0.15",
"@navikt/ds-icons": "^2.0.15",
"@navikt/ds-react": "^2.0.15",
"@navikt/ds-react-internal": "^2.0.15",
"@navikt/ds-tailwind": "^2.0.15",
"@navikt/ds-tokens": "^2.0.15"
},
"devDependencies": {
"prettier-plugin-tailwindcss": "^0.1.13"
+1
View File
@@ -1 +1,2 @@
.yarn/cache
*.tar.gz
@@ -62,8 +62,8 @@ export default function SetPrivateAction(props) {
dele offentlig kan medføre eks omdømmetap og uønsket oppmerksomhet
utenfra. Dobbelsjekk med temaansvarlig og andre som har skrevet
artikkelen før du velger å åpne innholdet for alle. Er du usikker
er det bare å sende en melding på #aksel eller #aksel-redaktører
på slack.
er det bare å sende en melding på #Aksel-designsystemet eller
#aksel-redaktører på Slack.
</BodyLong>
) : (
<>
+7 -2
View File
@@ -1,8 +1,8 @@
import { useEffect } from "react";
import config from "config:sanity";
const BUNDLE_CHECK_INTERVAL = 60 * 1000;
const BUNDLE_CHECK_INTERVAL_DECLINED = 60 * 10000;
const BUNDLE_CHECK_INTERVAL = 60 * 5000;
const BUNDLE_CHECK_INTERVAL_DECLINED = 60 * 20000;
const CHANGES_AVAILABLE_MESSAGE =
"Studioet er har nye endringer! For å ta i bruk disse vil siden nå oppdateres for den nyeste versjonen.";
@@ -25,6 +25,11 @@ const BundleChecker = () => {
interval = createInterval();
return () => clearInterval(interval);
/*
TODO: @release uncomment for redirecting to new studio
*/
/* window.location.replace(`http://aksel.nav.no/admin`); */
}, []);
// We're a react component, in theory, so return null to not render anything
@@ -11,11 +11,6 @@ export const adminPanel = async (roles) =>
S.list()
.title("Admin")
.items([
S.documentListItem()
.title(`Forside Aksel`)
.schemaType(`vk_frontpage`)
.icon(() => <Picture />)
.id(`frontpage_vk_praksis`),
S.listItem()
.title("Standalone-sider")
.child(S.documentTypeList("aksel_standalone")),
@@ -75,8 +75,8 @@ const IntroPage = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
>
<ReadMore header="Har du ikke de rollene du trenger?">
Send en melding til oss på{" "}
<Link href="https://nav-it.slack.com/archives/C0370ADS0HX">
#Aksel
<Link href="https://nav-it.slack.com/archives/C7NE7A8UF">
#Aksel-designsystemet
</Link>{" "}
slack så fikser vi det.
</ReadMore>
+38
View File
@@ -114,3 +114,41 @@ export const groups = [
title: "SEO",
},
];
export const validateKategoriSlug = (Rule, prefix) =>
Rule.required().custom((slug, { document }) => {
if (!slug.current.startsWith(`${prefix}${document?.kategori}/`)) {
return `Slug må starte med prefiks: ${prefix}${document?.kategori}`;
}
if ((slug.current.match(/\//g) || []).length > 3 - 1) {
return `Siden kan bare være på ${3} nivå`;
}
return true;
});
export const kategoriSlug = (prefix: string) => ({
title: "url (v2)",
name: "slug_v2",
type: "slug",
validation: (Rule) => validateKategoriSlug(Rule, prefix),
group: "settings",
options: {
source: (s) => `${s?.kategori}/${s?.heading}`,
slugify: (input) => {
return (
`${prefix}${input}`
.toLowerCase()
.trim()
.slice(0, 200)
.trim()
.replace(/\s+/g, "-")
.replace(/-+/gm, "-")
.replace(/æ/g, "a")
.replace(/å/g, "a")
.replace(/ø/g, "o")
// eslint-disable-next-line no-useless-escape
.replace(/[&\\#!,+()$~%.'"¨:*?<>{}]/g, "")
);
},
},
});
@@ -21,6 +21,21 @@ export default {
...defaultDocPreview,
fields: [
publishedAtField,
{
title: "Sist godkjent",
name: "updateInfo",
type: "object",
hidden: true,
fields: [
{
type: "date",
name: "lastVerified",
title: "Sist oppdatert",
description: "Kun synlig for utviklere",
readOnly: true,
},
],
},
editorField,
titleField,
sanitySlug(prefix, 3),
@@ -3,12 +3,12 @@ import {
editorField,
groups,
innholdFieldNew,
kategoriSlug,
publishedAtField,
sanitySlug,
titleField,
} from "@/lib";
const prefix = "designsystem/side/";
const prefix = "grunnleggende/";
export default {
title: "Artikkel",
@@ -17,17 +17,26 @@ export default {
groups,
...defaultDocPreview,
fields: [
{
title: "Sist godkjent",
name: "updateInfo",
type: "object",
hidden: true,
fields: [
{
type: "date",
name: "lastVerified",
title: "Sist oppdatert",
description: "Kun synlig for utviklere",
readOnly: true,
},
],
},
publishedAtField,
editorField,
titleField,
sanitySlug(prefix, 3),
{
title: "url (v2)",
name: "slug_v2",
type: "slug",
hidden: ({ currentUser }) =>
!currentUser.roles.find((x) => x.name === "developer"),
},
kategoriSlug(prefix),
{ title: "url", name: "slug", type: "slug", hidden: true },
{
title: "Kategori",
name: "kategori",
@@ -5,6 +5,139 @@ import React from "react";
import profilePage from "../../components/profile/profile-page";
import { isEditorUnique } from "@/lib";
import userStore from "part:@sanity/base/user";
import sanityClient from "part:@sanity/base/client";
const navn = [
"Alpesteinbukk",
"Amurtiger",
"Kamel",
"Blissbukk",
"Borneoorangutang",
"Damfrosk",
"Dvergsilkeape",
"Dåhjort",
"Edderkoppape",
"Elandantilope",
"Elg",
"Esel",
"Oter",
"Fjellrev",
"Flodsvin",
"Fugler",
"Gaupe",
"Gepard",
"Gulkinngibbon",
"Javalangur",
"Jerv",
"Krokodille",
"Labrador",
"Puddel",
"Skogskatt",
"Maine Coon",
"Lavlandstapir",
"Beagle",
"Hysky",
"Løve",
"Løvetamarin",
"Nubisk geit",
"Papegøye",
"Ringhalelemur",
"Rødpanda",
"Sau",
"Sjimpanse",
"Sjiraff",
"Stråleskilpadde",
"Slanger",
"Steppesebra",
"Flamingo",
"Struts",
"Shetlandsponni",
"Surikat",
"Tiger",
"Ulv",
"Fjordfe",
"Ekorn",
"Bever",
"Lemen",
"Klatremus",
"Fjellmarkmus",
"Dvergmus",
"Småskogmus",
"Steinkobbe",
"Røyskatt",
"Moskusfe",
];
const adjektiv = [
"aktuell",
"alvorlig",
"ansvarlig",
"berømt",
"bevisst",
"klein",
"eksisterende",
"fjern",
"forsiktig",
"heldig",
"hjelpsom",
"hyppig",
"imponerende",
"kul",
"sjarmerende",
"lykkelig",
"lys",
"merkelig",
"mistenkelig",
"modig",
"morsom",
"nysgjerrig",
"rå",
"rask",
"blå",
"fersk",
"grønn",
"rettferdig",
"rimelig",
"ryddig",
"selvsikker",
"skarp",
"skikkelig",
"skyldig",
"smal",
"sprudlende",
"søt",
"stolt",
"streng",
"sulten",
"tilgjengelig",
"vennlig",
"voksen",
"ærlig",
"flittig",
];
const client = sanityClient.withConfig({ apiVersion: "2020-06-19" });
const generateName = async () => {
console.log("ran");
const names = await client.fetch(`*[_type == "editor"].anon_navn.current`);
let c = 0;
let res = "";
while ((res === "" || names.includes(res)) && c < 1000) {
const adj = adjektiv[Math.floor(Math.random() * adjektiv.length)];
const animal = navn[Math.floor(Math.random() * navn.length)];
res = `${adj.charAt(0).toUpperCase() + adj.slice(1)} ${animal}`;
c += 1;
}
console.log(res);
return res;
};
const generateInitialName = async () => ({
current: await generateName(),
});
export default {
title: "Redaktører",
@@ -31,6 +164,23 @@ export default {
slugify: (input) => input,
},
},
{
title: "Gjør meg anonym",
description:
"På artikler bytter vi ut navnet ditt med et tullenavn. Eks. Sprudlende Tiger",
name: "anonym",
type: "boolean",
initialValue: true,
hidden: true,
},
{
hidden: true,
title: "Anonymt navn",
name: "anon_navn",
type: "slug",
initialValue: () => generateInitialName(),
readOnly: true,
},
{
title: "Roller",
description: "eks: Utvikler, Webanalytiker, uu-spesialist",
@@ -3,12 +3,12 @@ import {
editorField,
groups,
innholdFieldNew,
kategoriSlug,
publishedAtField,
sanitySlug,
titleField,
} from "@/lib";
const prefix = "designsystem/komponenter/";
const prefix = "komponenter/";
export default {
title: "Komponentartikkel",
@@ -20,13 +20,22 @@ export default {
publishedAtField,
editorField,
titleField,
sanitySlug(prefix, 3),
kategoriSlug(prefix),
{ title: "url", name: "slug", type: "slug", hidden: true },
{
title: "url (v2)",
name: "slug_v2",
type: "slug",
hidden: ({ currentUser }) =>
!currentUser.roles.find((x) => x.name === "developer"),
title: "Sist godkjent",
name: "updateInfo",
type: "object",
hidden: true,
fields: [
{
type: "date",
name: "lastVerified",
title: "Sist oppdatert",
description: "Kun synlig for utviklere",
readOnly: true,
},
],
},
{
title: "Kategori",
@@ -70,7 +79,7 @@ export default {
},
{
name: "bilde",
title: "Thumbnail/og-bilde",
title: "Thumbnail",
type: "image",
},
],
@@ -130,5 +130,19 @@ export default {
},
],
},
{
title: "Pictogram",
name: "pictogram",
type: "image",
fields: [
{
name: "alt",
type: "string",
title: "Attribution",
hidden: true,
},
],
validation: (Rule) => Rule.required().error("Tema må ha pictogram"),
},
],
};
-2
View File
@@ -4,7 +4,6 @@ import schemaTypes from "all:part:@sanity/base/schema-type";
/* Schemas */
/* Documents */
import editors from "./documents/editors";
import frontpage from "./documents/frontpage";
import redirect from "./documents/redirects";
import KodeEksempler from "./documents/kode-eksempler";
import Tokens from "./documents/tokens";
@@ -26,7 +25,6 @@ export default createSchema({
name: "default",
types: schemaTypes.concat([
...v2Blocks,
frontpage,
editors,
redirect,
Navigation,
+1 -3
View File
@@ -7,8 +7,6 @@ if (!sanityToken) {
throw new Error("Could not find token from SANITY_TOKEN");
}
console.log(sanityToken);
const client = sanityClient({
projectId: SanityConfig.api.projectId,
dataset: SanityConfig.api.dataset,
@@ -47,4 +45,4 @@ const main = async () => {
});
};
/* main(); */
main();
@@ -2,6 +2,7 @@ import { ExternalLink } from "@navikt/ds-icons";
import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
import BlockContent from "@sanity/block-content-to-react";
import cl from "classnames";
import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
import NextLink from "next/link";
import React, { createContext, useContext } from "react";
import {
@@ -10,7 +11,6 @@ import {
Bilde,
CodeExamples,
DoDont,
InnholdsKort,
Kode,
LevelTwoHeading,
PropsSeksjon,
@@ -93,7 +93,7 @@ const serializers = {
case "h3":
return (
<Heading
className="algolia-index-lvl3 max-w-text mt-8 scroll-mt-20 focus:outline-none"
className="algolia-index-lvl3 max-w-text text-deepblue-800 mt-8 scroll-mt-20 focus:outline-none"
spacing
level="3"
size="medium"
@@ -105,7 +105,7 @@ const serializers = {
case "h4":
return (
<Heading
className="algolia-index-lvl4 max-w-text mt-6"
className="algolia-index-lvl4 max-w-text text-deepblue-800 mt-6"
spacing
level="4"
size="small"
@@ -1,31 +0,0 @@
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const AkselLogo = (props): JSX.Element => (
<svg
focusable="false"
aria-hidden="true"
viewBox="0 0 28 28"
width="28"
height="28"
fill="none"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m3 9 5.268-5.268A2.5 2.5 0 0 1 10.036 3H22.5A2.5 2.5 0 0 1 25 5.5v12.465a2.5 2.5 0 0 1-.732 1.767L19 25"
></path>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m3 9 5.232-5.232a2.5 2.5 0 0 1 3.536 0l12.464 12.464a2.5 2.5 0 0 1 0 3.536L19 25m-7-9-9 9"
></path>
</svg>
);
export default AkselLogo;
@@ -1,97 +0,0 @@
export const DsFrontpageIllustration = ({ ...rest }) => (
<svg
width="624"
height="240"
viewBox="0 0 624 240"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden
aria-label="illustrasjon for designsystemet"
{...rest}
>
<g clipPath="url(#clip0_2835_38953)">
<circle cx="386.5" cy="144.5" r="95.5" fill="#E6F0FF" />
<rect x="144" y="97" width="144" height="144" fill="#66A5F4" />
<rect x="49" y="193" width="48" height="48" fill="#0067C5" />
<rect x="96" y="193" width="48" height="48" fill="#E6F0FF" />
<rect y="193" width="48" height="48" fill="#262626" />
<line x1="96.5" y1="-1" x2="96.5" y2="240" stroke="#0067C5" />
<line x1="480.5" y1="-1" x2="480.5" y2="240" stroke="#0067C5" />
<line x1="144.5" y1="2.18557e-08" x2="144.5" y2="240" stroke="#0067C5" />
<line x1="288.5" y1="2.18557e-08" x2="288.5" y2="240" stroke="#0067C5" />
<line x1="48.5" y1="-2.18557e-08" x2="48.5" y2="240" stroke="#0067C5" />
<line x1="144" y1="145.5" x2="-4.37114e-08" y2="145.5" stroke="#0067C5" />
<line x1="144" y1="193.5" x2="-4.37114e-08" y2="193.5" stroke="#0067C5" />
<line x1="288" y1="97.5" y2="97.5" stroke="#0067C5" />
<line x1="480" y1="97.5" x2="288" y2="97.5" stroke="#0067C5" />
<line x1="624" y1="49.5" x2="288" y2="49.5" stroke="#0067C5" />
<line x1="624" y1="192.5" x2="288" y2="192.5" stroke="#0067C5" />
<rect x="480" y="193" width="144" height="50" fill="#262626" />
<path
d="M200.355 159.833L200.355 159.833L200.358 159.841C201.098 162.554 201.863 165.194 202.652 167.761L204.167 173.032H193.152L194.667 167.761C195.457 165.193 196.198 162.575 196.889 159.909L196.89 159.907L198.625 153.087C199.202 155.319 199.779 157.567 200.355 159.833ZM177.525 193.186L177.311 193.841H178H186.722H187.098L187.203 193.479L190.868 180.758H206.377L210.043 193.479L210.147 193.841H210.523H219.541H220.229L220.016 193.186L204.272 144.845L204.16 144.5H203.797H193.744H193.381L193.269 144.845L177.525 193.186ZM226.741 191.699L226.746 191.703C228.825 193.731 231.545 194.728 234.856 194.728C237.098 194.728 239.172 194.243 241.069 193.27C242.815 192.396 244.455 191.334 245.99 190.084L246.483 193.414L246.547 193.841H246.978H254H254.5V193.341V171.831C254.5 166.692 253.354 162.691 250.984 159.906C248.645 157.05 245.107 155.661 240.473 155.661C237.511 155.661 234.742 156.138 232.168 157.097C229.626 158.044 227.328 159.168 225.275 160.47L224.879 160.72L225.103 161.131L228.208 166.823L228.458 167.282L228.906 167.011C230.51 166.039 232.138 165.213 233.787 164.534C235.455 163.867 237.141 163.535 238.847 163.535C240.029 163.535 240.986 163.725 241.739 164.079L241.75 164.084L241.761 164.089C242.518 164.401 243.106 164.862 243.541 165.47L243.553 165.486L243.566 165.502C244.051 166.076 244.387 166.764 244.568 167.579L244.572 167.595L244.576 167.612C244.77 168.268 244.9 168.96 244.966 169.686C241.406 170.08 238.311 170.633 235.685 171.349L235.683 171.35C232.991 172.097 230.728 173.025 228.904 174.14L228.904 174.14L228.898 174.143C227.114 175.265 225.767 176.63 224.882 178.243L224.882 178.243L224.879 178.249C224.047 179.809 223.638 181.592 223.638 183.584C223.638 186.898 224.662 189.62 226.741 191.699L226.741 191.699ZM241.338 186.104L241.338 186.104L241.33 186.109C240.23 186.751 238.988 187.076 237.591 187.076C236.145 187.076 235.001 186.727 234.121 186.067C233.3 185.451 232.843 184.442 232.843 182.919C232.843 182.12 233.041 181.366 233.444 180.651C233.831 179.962 234.493 179.331 235.473 178.77L235.481 178.766L235.489 178.761C236.473 178.152 237.782 177.601 239.432 177.116C240.945 176.671 242.8 176.304 245 176.02V183.365C243.7 184.555 242.479 185.465 241.338 186.104Z"
fill="black"
stroke="black"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M530.667 89H520V99.6667H530.667V89ZM530.667 115.667H520V126.333H530.667V115.667ZM520 142.333H530.667V153H520V142.333ZM557.333 89H546.667V99.6667H557.333V89ZM546.667 115.667H557.333V126.333H546.667V115.667ZM557.333 142.333H546.667V153H557.333V142.333ZM573.333 89H584V99.6667H573.333V89ZM584 115.667H573.333V126.333H584V115.667ZM573.333 142.333H584V153H573.333V142.333Z"
fill="#262626"
/>
</g>
<defs>
<clipPath id="clip0_2835_38953">
<rect width="624" height="240" fill="white" />
</clipPath>
</defs>
</svg>
);
export const DsFrontpageFooterIllustration = ({ ...rest }) => (
<svg
viewBox="0 0 624 240"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden
aria-label="illustrasjon for designsystemet"
{...rest}
>
<g clipPath="url(#clip0_2835_38954)">
<circle cx="386.5" cy="144.5" r="95.5" fill="#E6F0FF" />
<rect x="144" y="97" width="144" height="144" fill="#66A5F4" />
<rect x="49" y="193" width="48" height="48" fill="#0067C5" />
<rect x="96" y="193" width="48" height="48" fill="#E6F0FF" />
<rect y="193" width="48" height="48" fill="#262626" />
<line x1="96.5" y1="-1" x2="96.5" y2="240" stroke="#0067C5" />
<line x1="480.5" y1="-1" x2="480.5" y2="240" stroke="#0067C5" />
<line x1="144.5" y1="2.18557e-08" x2="144.5" y2="240" stroke="#0067C5" />
<line x1="288.5" y1="2.18557e-08" x2="288.5" y2="240" stroke="#0067C5" />
<line x1="48.5" y1="-2.18557e-08" x2="48.5" y2="240" stroke="#0067C5" />
<line x1="144" y1="145.5" x2="-4.37114e-08" y2="145.5" stroke="#0067C5" />
<line x1="144" y1="193.5" x2="-4.37114e-08" y2="193.5" stroke="#0067C5" />
<line x1="288" y1="97.5" y2="97.5" stroke="#0067C5" />
<line x1="480" y1="97.5" x2="288" y2="97.5" stroke="#0067C5" />
<line x1="624" y1="49.5" x2="288" y2="49.5" stroke="#0067C5" />
<line x1="624" y1="192.5" x2="288" y2="192.5" stroke="#0067C5" />
<rect x="480" y="193" width="144" height="50" fill="#262626" />
<path
d="M200.355 159.833L200.355 159.833L200.358 159.841C201.098 162.554 201.863 165.194 202.652 167.761L204.167 173.032H193.152L194.667 167.761C195.457 165.193 196.198 162.575 196.889 159.909L196.89 159.907L198.625 153.087C199.202 155.319 199.779 157.567 200.355 159.833ZM177.525 193.186L177.311 193.841H178H186.722H187.098L187.203 193.479L190.868 180.758H206.377L210.043 193.479L210.147 193.841H210.523H219.541H220.229L220.016 193.186L204.272 144.845L204.16 144.5H203.797H193.744H193.381L193.269 144.845L177.525 193.186ZM226.741 191.699L226.746 191.703C228.825 193.731 231.545 194.728 234.856 194.728C237.098 194.728 239.172 194.243 241.069 193.27C242.815 192.396 244.455 191.334 245.99 190.084L246.483 193.414L246.547 193.841H246.978H254H254.5V193.341V171.831C254.5 166.692 253.354 162.691 250.984 159.906C248.645 157.05 245.107 155.661 240.473 155.661C237.511 155.661 234.742 156.138 232.168 157.097C229.626 158.044 227.328 159.168 225.275 160.47L224.879 160.72L225.103 161.131L228.208 166.823L228.458 167.282L228.906 167.011C230.51 166.039 232.138 165.213 233.787 164.534C235.455 163.867 237.141 163.535 238.847 163.535C240.029 163.535 240.986 163.725 241.739 164.079L241.75 164.084L241.761 164.089C242.518 164.401 243.106 164.862 243.541 165.47L243.553 165.486L243.566 165.502C244.051 166.076 244.387 166.764 244.568 167.579L244.572 167.595L244.576 167.612C244.77 168.268 244.9 168.96 244.966 169.686C241.406 170.08 238.311 170.633 235.685 171.349L235.683 171.35C232.991 172.097 230.728 173.025 228.904 174.14L228.904 174.14L228.898 174.143C227.114 175.265 225.767 176.63 224.882 178.243L224.882 178.243L224.879 178.249C224.047 179.809 223.638 181.592 223.638 183.584C223.638 186.898 224.662 189.62 226.741 191.699L226.741 191.699ZM241.338 186.104L241.338 186.104L241.33 186.109C240.23 186.751 238.988 187.076 237.591 187.076C236.145 187.076 235.001 186.727 234.121 186.067C233.3 185.451 232.843 184.442 232.843 182.919C232.843 182.12 233.041 181.366 233.444 180.651C233.831 179.962 234.493 179.331 235.473 178.77L235.481 178.766L235.489 178.761C236.473 178.152 237.782 177.601 239.432 177.116C240.945 176.671 242.8 176.304 245 176.02V183.365C243.7 184.555 242.479 185.465 241.338 186.104Z"
fill="black"
stroke="black"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M530.667 89H520V99.6667H530.667V89ZM530.667 115.667H520V126.333H530.667V115.667ZM520 142.333H530.667V153H520V142.333ZM557.333 89H546.667V99.6667H557.333V89ZM546.667 115.667H557.333V126.333H546.667V115.667ZM557.333 142.333H546.667V153H557.333V142.333ZM573.333 89H584V99.6667H573.333V89ZM584 115.667H573.333V126.333H584V115.667ZM573.333 142.333H584V153H573.333V142.333Z"
fill="#262626"
/>
</g>
<defs>
<clipPath id="clip0_2835_38954">
<rect width="624" height="240" fill="white" />
</clipPath>
</defs>
</svg>
);
@@ -1,116 +0,0 @@
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const FigmaIcon = ({ ...props }): JSX.Element => (
<svg
{...props}
width="1em"
height="1em"
viewBox="0 0 18 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-label="Figma"
aria-hidden
>
<path
d="M15.5 4.99999C15.5 6.93299 13.9531 8.49999 12.0449 8.49999H8.5V1.5H12.0449C13.9531 1.5 15.5 3.067 15.5 4.99999Z"
fill="#FF7262"
stroke="#262626"
/>
<path
d="M1.5 4.99999C1.5 6.93299 3.04691 8.49999 4.95513 8.49999H8.5V1.5H4.95513C3.04691 1.5 1.5 3.067 1.5 4.99999Z"
fill="#F24E1E"
stroke="#262626"
/>
<path
d="M1.5 12C1.5 13.933 3.04691 15.5 4.95513 15.5H8.5V8.5H4.95513C3.04691 8.5 1.5 10.067 1.5 12Z"
fill="#A259FF"
stroke="#262626"
/>
<path
d="M1.5 19C1.5 20.933 3.0692 22.5 4.97742 22.5C6.91042 22.5 8.5 20.9126 8.5 18.9545V15.5H4.95513C3.04691 15.5 1.5 17.067 1.5 19Z"
fill="#0ACF83"
stroke="#262626"
/>
<path
d="M8.5 12C8.5 13.933 10.0469 15.5 11.9551 15.5H12.0449C13.9531 15.5 15.5 13.933 15.5 12C15.5 10.067 13.9531 8.5 12.0449 8.5H11.9551C10.0469 8.5 8.5 10.067 8.5 12Z"
fill="#1ABCFE"
stroke="#262626"
/>
</svg>
);
export const FigmaIconNoSync = ({ ...props }): JSX.Element => (
<svg
{...props}
width="1.5rem"
height="1.5rem"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-label="Figma ikke i sync"
>
<path d="M1.5 22.5L22.5 1.5" stroke="#BA3A26" strokeWidth="2" />
<path
d="M18.5 4.99999C18.5 6.93299 16.9531 8.49999 15.0449 8.49999H11.5V1.5H15.0449C16.9531 1.5 18.5 3.067 18.5 4.99999Z"
stroke="#262626"
/>
<path
d="M4.5 4.99999C4.5 6.93299 6.04691 8.49999 7.95513 8.49999H11.5V1.5H7.95513C6.04691 1.5 4.5 3.067 4.5 4.99999Z"
stroke="#262626"
/>
<path
d="M4.5 12C4.5 13.933 6.04691 15.5 7.95513 15.5H11.5V8.5H7.95513C6.04691 8.5 4.5 10.067 4.5 12Z"
stroke="#262626"
/>
<path
d="M4.5 19C4.5 20.933 6.0692 22.5 7.97742 22.5C9.91042 22.5 11.5 20.9126 11.5 18.9545V15.5H7.95513C6.04691 15.5 4.5 17.067 4.5 19Z"
stroke="#262626"
/>
<path
d="M11.5 12C11.5 13.933 13.0469 15.5 14.9551 15.5H15.0449C16.9531 15.5 18.5 13.933 18.5 12C18.5 10.067 16.9531 8.5 15.0449 8.5H14.9551C13.0469 8.5 11.5 10.067 11.5 12Z"
stroke="#262626"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15 17.335H16.6664C15.8573 17.9444 15.3333 18.9147 15.3333 20.0081C15.3333 21.319 16.0865 22.453 17.1812 23.0001L17.4786 22.402C16.6014 21.9636 16 21.056 16 20.0081C16 19.0192 16.5357 18.1551 17.3333 17.6925V19.674H18V16.6667H15V17.335ZM22.6667 19.9921C22.6667 21.0855 22.1427 22.0558 21.3336 22.6651H23V23.3334L20 23.3334V20.3262H20.6667V22.3076C21.4643 21.8451 22 20.981 22 19.9921C22 18.9442 21.3986 18.0366 20.5214 17.5982L20.8188 17.0001C21.9135 17.5472 22.6667 18.6811 22.6667 19.9921Z"
fill="#262626"
/>
</svg>
);
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const FigmaIconGrayScale = ({ ...props }): JSX.Element => (
<svg
width="18"
height="26"
viewBox="0 0 18 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
aria-label="Figma ikon"
focusable="false"
>
<g clipPath="url(#clip0)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.459473 5.44999C0.459473 2.97008 2.46984 0.959717 4.94975 0.959717H8.06672H9.53756H12.6545C15.1344 0.959717 17.1448 2.97008 17.1448 5.44999C17.1448 7.02029 16.3387 8.40232 15.1178 9.2049C16.3387 10.0075 17.1448 11.3895 17.1448 12.9598C17.1448 15.4397 15.1344 17.4501 12.6545 17.4501H12.557C11.3944 17.4501 10.335 17.0082 9.53756 16.2833V17.4501V20.4207C9.53756 22.9336 7.47466 24.9597 4.97398 24.9597C2.50023 24.9597 0.459473 22.9555 0.459473 20.4694C0.459473 18.8992 1.26547 17.5172 2.48632 16.7146C1.26547 15.912 0.459473 14.53 0.459473 12.9598C0.459473 11.3895 1.26553 10.0075 2.48647 9.2049C1.26553 8.40232 0.459473 7.02029 0.459473 5.44999ZM8.06672 12.9598V9.94037H4.94975C3.28215 9.94037 1.93031 11.2922 1.93031 12.9598C1.93031 14.6214 3.2725 15.9696 4.93186 15.9792L4.94975 15.9792H8.06672V12.9598ZM9.53756 12.9598C9.53756 14.6274 10.8894 15.9792 12.557 15.9792H12.6545C14.3221 15.9792 15.674 14.6274 15.674 12.9598C15.674 11.2922 14.3221 9.94037 12.6545 9.94037H12.557C10.8894 9.94037 9.53756 11.2922 9.53756 12.9598ZM4.94975 17.4501L4.93195 17.45C3.27255 17.4596 1.93031 18.8078 1.93031 20.4694C1.93031 22.1309 3.30021 23.4889 4.97398 23.4889C6.67467 23.4889 8.06672 22.1091 8.06672 20.4207V17.4501H4.94975ZM4.94975 2.43055H8.06672V8.46943H4.94975C3.28215 8.46943 1.93031 7.11758 1.93031 5.44999C1.93031 3.7824 3.28215 2.43055 4.94975 2.43055ZM9.53756 8.46943V2.43055H12.6545C14.3221 2.43055 15.674 3.7824 15.674 5.44999C15.674 7.11758 14.3221 8.46943 12.6545 8.46943H9.53756Z"
fill="var(--a-text-subtle)"
/>
</g>
<defs>
<clipPath id="clip0">
<rect
width="18"
height="25"
fill="white"
transform="translate(0 0.5)"
/>
</clipPath>
</defs>
</svg>
);
@@ -0,0 +1,73 @@
export const ChangelogIcon = () => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable={false}
aria-hidden
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.4688 2.26716C10.3077 1.83185 9.69206 1.83185 9.53098 2.26716L9.26942 2.97401C9.21878 3.11087 9.11087 3.21877 8.97401 3.26942L8.26716 3.53098C7.83185 3.69206 7.83185 4.30775 8.26716 4.46883L8.97401 4.73039C9.11087 4.78103 9.21878 4.88894 9.26942 5.0258L9.53098 5.73265C9.69206 6.16796 10.3077 6.16796 10.4688 5.73265L10.7304 5.0258C10.781 4.88894 10.8889 4.78103 11.0258 4.73039L11.7327 4.46883C12.168 4.30775 12.168 3.69206 11.7327 3.53098L11.0258 3.26942C10.8889 3.21877 10.781 3.11087 10.7304 2.97401L10.4688 2.26716ZM4.53098 5.26715C4.69206 4.83185 5.30775 4.83185 5.46883 5.26716L6.00048 6.70392C6.05112 6.84078 6.15903 6.94868 6.29589 6.99933L7.73265 7.53098C8.16796 7.69206 8.16796 8.30775 7.73265 8.46883L6.29589 9.00048C6.15903 9.05112 6.05112 9.15903 6.00048 9.29589L5.46883 10.7327C5.30775 11.168 4.69206 11.168 4.53098 10.7326L3.99933 9.29589C3.94868 9.15903 3.84078 9.05112 3.70392 9.00048L2.26716 8.46883C1.83185 8.30775 1.83185 7.69206 2.26716 7.53098L3.70392 6.99933C3.84078 6.94868 3.94868 6.84078 3.99933 6.70392L4.53098 5.26715ZM12.531 8.26716C12.6921 7.83185 13.3077 7.83185 13.4688 8.26716L14.5407 11.1637C14.5913 11.3006 14.6992 11.4085 14.8361 11.4591L17.7326 12.531C18.168 12.6921 18.168 13.3077 17.7326 13.4688L14.8361 14.5407C14.6992 14.5913 14.5913 14.6992 14.5407 14.8361L13.4688 17.7326C13.3078 18.168 12.6921 18.168 12.531 17.7326L11.4591 14.8361C11.4085 14.6992 11.3006 14.5913 11.1637 14.5407L8.26716 13.4688C7.83185 13.3077 7.83185 12.6921 8.26716 12.531L11.1637 11.4591C11.3006 11.4085 11.4085 11.3006 11.4591 11.1637L12.531 8.26716Z"
fill="currentColor"
/>
</svg>
);
export const FigmaIcon = () => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable={false}
aria-hidden
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 4C3 1.80306 4.76151 0 6.96154 0H9H10H11H13.0385C15.2385 0 17 1.80306 17 4C17 5.19041 16.4828 6.26518 15.6589 7.00012C16.4828 7.73506 17 8.80982 17 10.0002C17 12.1972 15.2385 14.0002 13.0385 14.0002H12.9615C12.2462 14.0002 11.5772 13.8096 11 13.4768V14.0002V15.9608C11 18.1876 9.19358 19.9998 6.98065 19.9998C4.78895 19.9998 3 18.2051 3 15.9998C3 14.8095 3.51701 13.7349 4.34067 13C3.51701 12.2651 3 11.1905 3 10.0002C3 8.80983 3.51718 7.73506 4.34108 7.00012C3.51718 6.26518 3 5.19041 3 4ZM9 10.0002V8.00024H6.96154C5.89033 8.00024 5 8.88346 5 10.0002C5 11.1046 5.87059 11.9805 6.92578 11.9999L6.96154 11.9998H9V10.0002ZM11 10.0002C11 11.117 11.8903 12.0002 12.9615 12.0002H13.0385C14.1097 12.0002 15 11.117 15 10.0002C15 8.88346 14.1097 8.00024 13.0385 8.00024H12.9615C11.8903 8.00024 11 8.88346 11 10.0002ZM6.96154 14.0002L6.92578 14.0001C5.87059 14.0195 5 14.8954 5 15.9998C5 17.1081 5.90111 17.9998 6.98065 17.9998C8.08142 17.9998 9 17.0907 9 15.9608V14.0002H6.96154ZM6.96154 2H9V6H6.96154C5.89033 6 5 5.11678 5 4C5 2.88323 5.89033 2 6.96154 2ZM11 6V2H13.0385C14.1097 2 15 2.88323 15 4C15 5.11678 14.1097 6 13.0385 6H11Z"
fill="currentColor"
/>
</svg>
);
export const GithubIcon = () => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable={false}
aria-hidden
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.9702 0C4.45694 0 0 4.4898 0 10.0443C0 14.4843 2.85571 18.2427 6.81735 19.5729C7.31265 19.6729 7.49408 19.3567 7.49408 19.0908C7.49408 18.858 7.47775 18.0598 7.47775 17.2282C4.70429 17.8269 4.12673 16.0308 4.12673 16.0308C3.68102 14.8667 3.02061 14.5675 3.02061 14.5675C2.11286 13.9522 3.08673 13.9522 3.08673 13.9522C4.09367 14.0188 4.62204 14.9833 4.62204 14.9833C5.51327 16.5131 6.94939 16.0808 7.52714 15.8147C7.60959 15.1661 7.87388 14.7171 8.15449 14.4678C5.94245 14.2349 3.6151 13.3702 3.6151 9.51204C3.6151 8.41449 4.01102 7.51653 4.63837 6.81816C4.53939 6.56878 4.19265 5.53755 4.73755 4.15735C4.73755 4.15735 5.57939 3.89122 7.47755 5.18837C8.29022 4.9685 9.12832 4.85666 9.9702 4.85571C10.812 4.85571 11.6702 4.97224 12.4627 5.18837C14.361 3.89122 15.2029 4.15735 15.2029 4.15735C15.7478 5.53755 15.4008 6.56878 15.3018 6.81816C15.9457 7.51653 16.3253 8.41449 16.3253 9.51204C16.3253 13.3702 13.998 14.2182 11.7694 14.4678C12.1327 14.7837 12.4461 15.3822 12.4461 16.3302C12.4461 17.6771 12.4298 18.7582 12.4298 19.0906C12.4298 19.3567 12.6114 19.6729 13.1065 19.5731C17.0682 18.2424 19.9239 14.4843 19.9239 10.0443C19.9402 4.4898 15.4669 0 9.9702 0Z"
fill="currentColor"
/>
</svg>
);
export const YarnIcon = () => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable={false}
aria-hidden
>
<path
d="M19.0336 16.0116C18.0026 16.2564 17.4807 16.482 16.2049 17.3131C14.2075 18.6018 12.0297 19.201 12.0297 19.201C12.0297 19.201 11.8493 19.4716 11.3274 19.5941C10.4253 19.8131 7.02969 20 6.72041 20.0064C5.88923 20.0129 5.38021 19.7938 5.23845 19.4523C4.80675 18.4214 5.85701 17.9704 5.85701 17.9704C5.85701 17.9704 5.62505 17.8286 5.48974 17.6997C5.36732 17.5773 5.23845 17.3325 5.19979 17.4227C5.03871 17.8157 4.95495 18.7758 4.52325 19.2075C3.93046 19.8067 2.80933 19.6069 2.14567 19.259C1.41758 18.8724 2.19722 17.9639 2.19722 17.9639C2.19722 17.9639 1.80418 18.1959 1.48845 17.7191C1.20495 17.2809 0.940773 16.5335 1.01165 15.6121C1.10186 14.549 2.27454 13.5309 2.27454 13.5309C2.27454 13.5309 2.06835 11.9781 2.7449 10.3866C3.35701 8.93685 5.00649 7.77061 5.00649 7.77061C5.00649 7.77061 3.62119 6.24355 4.13665 4.85824C4.4717 3.95618 4.60701 3.96262 4.71655 3.92396C5.10314 3.77577 5.47686 3.61468 5.75392 3.31185C7.13923 1.817 8.90469 2.10051 8.90469 2.10051C8.90469 2.10051 9.72943 -0.431708 10.5026 0.0644255C10.741 0.219065 11.598 2.12628 11.598 2.12628C11.598 2.12628 12.5129 1.59149 12.616 1.79123C13.1702 2.86726 13.2346 4.92267 12.9897 6.17267C12.5774 8.23453 11.5464 9.34278 11.1341 10.0387C11.0374 10.1997 12.2423 10.7088 13.0026 12.8157C13.7049 14.7423 13.0799 16.3595 13.1895 16.5399C13.2088 16.5722 13.2153 16.585 13.2153 16.585C13.2153 16.585 14.0207 16.6495 15.6379 15.6508C16.5013 15.116 17.5258 14.5167 18.6921 14.5039C19.8196 14.4845 19.8776 15.8118 19.0336 16.0116Z"
fill="currentColor"
/>
</svg>
);
@@ -0,0 +1,47 @@
import React from "react";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const Logo = (props): JSX.Element => (
<svg
width="119"
height="26"
viewBox="0 0 119 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
{...props}
>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
</svg>
);
export default Logo;
@@ -1,5 +1,5 @@
export * from "./FigmaIcon";
export { default as NavLogoWhite } from "./NavLogoWhite";
export { default as NAVLogoDark } from "./NavLogoDark";
export * from "./DsFrontpageIllustration";
export * from "./Logo";
export * from "./Icons";
-2
View File
@@ -22,8 +22,6 @@ export { default as EditButton } from "./website-modules/EditButton";
export { default as Feedback } from "./website-modules/feedback";
export * from "./website-modules/H2";
export { default as PreviewBanner } from "./website-modules/PreviewBanner";
export { default as Search } from "./website-modules/search";
export { PrinsippSlope, Slope } from "./website-modules/Slope";
export * from "./website-modules/TilToppen";
export * from "./website-modules/TOC";
export * from "./website-modules/utils";
@@ -2,25 +2,7 @@ import Error from "next/error";
import React from "react";
import { SanityT } from "@/lib";
import AkselArtikkelTemplate from "./page-templates/AkselArtikkel";
import AkselBloggTemplate from "./page-templates/AkselBlogg";
import ArtikkelTemplate from "./page-templates/Artikkel";
import KomponentArtikkelTemplate from "./page-templates/KomponentArtikkel";
import AkselPrinsippTemplate from "./page-templates/AkselPrinsipp";
import AkselStandaloneTemplate from "./page-templates/AkselStandalone";
type komponent_artikkel = {
komponent_artikkel: (props: {
data: SanityT.Schema.komponent_artikkel;
title: string;
}) => JSX.Element;
};
type ds_artikkel = {
ds_artikkel: (props: {
data: SanityT.Schema.ds_artikkel;
title: string;
}) => JSX.Element;
};
type aksel_artikkel = {
aksel_artikkel: (props: {
@@ -29,20 +11,6 @@ type aksel_artikkel = {
}) => JSX.Element;
};
type aksel_blogg = {
aksel_blogg: (props: {
data: SanityT.Schema.aksel_blogg;
title: string;
}) => JSX.Element;
};
type aksel_standalone = {
aksel_standalone: (props: {
data: SanityT.Schema.aksel_standalone;
title: string;
}) => JSX.Element;
};
type aksel_prinsipp = {
aksel_prinsipp: (props: {
data: SanityT.Schema.aksel_prinsipp;
@@ -50,33 +18,18 @@ type aksel_prinsipp = {
}) => JSX.Element;
};
type templateT =
| komponent_artikkel
| ds_artikkel
| aksel_artikkel
| aksel_blogg
| aksel_standalone
| aksel_prinsipp;
type templateT = aksel_artikkel | aksel_prinsipp;
const templates: templateT = {
komponent_artikkel: (props) => <KomponentArtikkelTemplate {...props} />,
ds_artikkel: (props) => <ArtikkelTemplate {...props} />,
aksel_artikkel: (props) => <AkselArtikkelTemplate {...props} />,
aksel_blogg: (props) => <AkselBloggTemplate {...props} />,
aksel_prinsipp: (props) => <AkselPrinsippTemplate {...props} />,
aksel_standalone: (props) => <AkselStandaloneTemplate {...props} />,
};
const TemplatePicker = ({
data,
title,
}: {
data:
| SanityT.Schema.komponent_artikkel
| SanityT.Schema.aksel_artikkel
| SanityT.Schema.aksel_blogg
| SanityT.Schema.aksel_standalone
| SanityT.Schema.aksel_prinsipp;
data: SanityT.Schema.aksel_artikkel | SanityT.Schema.aksel_prinsipp;
title: string;
}): JSX.Element => {
if (!Object.keys(templates).includes(data?._type)) {
@@ -1,39 +0,0 @@
import { getActiveHeading } from "@/components";
import { mockArtikkel, mockNav } from "@/mockdata";
import { PagePropsContext } from "@/utils";
import Footer from "./Footer";
export default {
title: "LayoutsParts/Footer",
component: Footer,
parameters: {
layout: "fullscreen",
},
};
const args = {
page: mockArtikkel,
navigation: mockNav,
activeHeading: getActiveHeading(mockNav, "designsystem/side/oversikt-guider"),
slug: "designsystem/side/oversikt-guider",
};
export const AkselFooter = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<Footer variant="aksel" />
</PagePropsContext.Provider>
);
};
AkselFooter.args = args;
export const DsFooter = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<Footer variant="ds" />
</PagePropsContext.Provider>
);
};
DsFooter.args = args;
@@ -1,28 +1,22 @@
import { BodyShort, Heading, Link } from "@navikt/ds-react";
import cl from "classnames";
import NextLink from "next/link";
import { EditButton, ScrollTop } from "../..";
import FooterForm from "./FooterForm";
const Footer = ({ variant = "ds" }: { variant: "ds" | "aksel" }) => {
const Footer = () => {
return (
<footer
data-hj-suppress
data-theme="dark"
className={cl(
"algolia-ignore-index text-text-on-inverted relative flex w-full justify-center px-4",
{
"bg-deepblue-800": variant === "aksel",
"bg-gray-900": variant === "ds",
}
)}
className="algolia-ignore-index text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
>
<div className="dynamic-wrapper relative grid w-full gap-16 py-12">
<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 as="p" size="small">
Kontakt oss
<Heading level="2" size="small">
Aksel
</Heading>
<BodyShort as="ul" className="mt-5 grid gap-2">
<li>
@@ -39,26 +33,30 @@ const Footer = ({ variant = "ds" }: { variant: "ds" | "aksel" }) => {
</Link>
</NextLink>
</li>
{variant === "aksel" && (
<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/C0370ADS0HX"
>
Aksel på Slack
</Link>
</li>
)}
{variant === "ds" && (
<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="https://nav-it.slack.com/archives/C7NE7A8UF"
>
Designsystemet på Slack
</Link>
</li>
)}
</li> */}
</BodyShort>
</div>
<FooterForm />
@@ -90,9 +88,10 @@ const Footer = ({ variant = "ds" }: { variant: "ds" | "aksel" }) => {
</svg>
Arbeids- og velferdsetaten
</div>
<BodyShort className="mb-1 self-end xl:mb-0">
<span className="mb-1 self-end xl:mb-0" />
{/* <BodyShort className="mb-1 self-end xl:mb-0">
Redaktør: Eidar Grande Vollan
</BodyShort>
</BodyShort> */}
<div className="hidden self-end xl:block">
<p>&copy; 2022 NAV</p>
<NextLink href="/side/personvernerklaering" passHref>
@@ -111,7 +110,48 @@ const Footer = ({ variant = "ds" }: { variant: "ds" | "aksel" }) => {
</div>
</div>
</div>
<EditButton variant={variant} />
<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>
);
};
@@ -1,9 +1,12 @@
import { FeedbackT } from "@/lib";
import { IdContext } from "@/utils";
import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import isEmpty from "validator/lib/isEmpty";
import { useContext, useEffect, useState } from "react";
const FooterForm = () => {
const idCtx = useContext(IdContext);
const [contactForm, setContactForm] = useState({
content: "",
hasWritten: false,
@@ -17,7 +20,7 @@ const FooterForm = () => {
const handleSubmit = (e) => {
e.preventDefault();
let fail = false;
if (isEmpty(contactForm.content, { ignore_whitespace: true })) {
if (!contactForm?.content || contactForm?.content.trim().length === 0) {
setContentError({
...contentError,
content: "Melding kan ikke være tom. Fyll inn meldingen.",
@@ -28,12 +31,16 @@ const FooterForm = () => {
if (fail) return;
setContentError({ content: "" });
fetch("/api/generalFeedback", {
const body: FeedbackT = {
message: contactForm.content,
url: `${basePath}${asPath}`,
type: "footer",
docId: idCtx?.id,
};
fetch("/api/feedback", {
method: "POST",
body: JSON.stringify({
message: contactForm.content,
url: `${basePath}${asPath}`,
}),
body: JSON.stringify(body),
});
setSent({ status: true });
@@ -58,10 +65,11 @@ const FooterForm = () => {
) : (
<form onSubmit={(e) => handleSubmit(e)} className="w-full">
<div className="mb-4 flex flex-col gap-4">
<Heading as="legend" size="small">
<Heading level="2" size="small">
Gi en tilbakemelding
</Heading>
<Textarea
className="textarea-override"
error={contentError.content}
autoComplete="off"
label="Melding"
@@ -73,7 +81,7 @@ const FooterForm = () => {
hasWritten: true,
});
e.target.value &&
!isEmpty(e.target.value, { ignore_whitespace: true }) &&
e.target.value.trim().length !== 0 &&
setContentError({ ...contentError, content: "" });
}}
description="Ikke skriv inn navn eller andre personopplysninger"
@@ -81,6 +89,9 @@ const FooterForm = () => {
/>
</div>
{contactForm.hasWritten && <Button>Send melding</Button>}
<style>{`.textarea-override {
--ac-textarea-bg: var(--a-deepblue-800);
}`}</style>
</form>
)}
</div>
@@ -1,74 +0,0 @@
import cl from "classnames";
import NextLink from "next/link";
import React from "react";
import { logNav, Search } from "../..";
import AkselLogo from "../../assets/AkselLogo";
import ProfileDropdown from "./ProfileDropdown";
const AkselHeader = ({
variant,
}: {
variant?: "forside" | "artikkel" | "blogg" | "inngang";
}): JSX.Element => {
return (
<header
className={cl(
"shadow-header group sticky top-0 z-20 w-full backdrop-blur transition-colors duration-200 ease-out",
{
"header-aksel-forside bg-deepblue-900/90 hover:bg-deepblue-900 text-white":
variant === "forside",
"header-aksel-artikkel text-deepblue-800 bg-gray-50/80":
variant === "artikkel",
"header-aksel-artikkel text-deepblue-800 bg-white/80":
variant === "inngang",
"header-aksel-artikkel text-deepblue-800 bg-orange-50/80 ":
variant === "blogg",
}
)}
>
<div className="dynamic-wrapper flex justify-between">
<a className="skiplink" href="#hovedinnhold" tabIndex={-1}>
Hopp til innhold
</a>
<NextLink href="/" passHref>
<a
className={cl("flex gap-3 px-4 py-3 focus:outline-none", {
"focus-visible:shadow-focus-inverted-inset hover:bg-gray-100/10":
variant === "forside",
"focus-visible:shadow-focus-inset hover:bg-gray-900/10":
variant === "artikkel" || variant === "blogg",
})}
onClick={(e) =>
logNav(
"header",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
>
<AkselLogo className="h-7 w-7" aria-hidden />
<span className="text-2xl">Aksel</span>
</a>
</NextLink>
<span className="flex">
<ProfileDropdown dark={variant === "forside"} />
<Search
variant={variant === "forside" ? "aksel-inverted" : "aksel"}
/>
</span>
</div>
<style jsx global>{`
.search-open .header-aksel-forside {
background-color: var(--a-deepblue-900);
}
.search-open .header-aksel-artikkel {
background-color: var(--a-gray-50);
}
`}</style>
</header>
);
};
export default AkselHeader;
@@ -1,92 +0,0 @@
import { DsNavigationHeadingT } from "@/lib";
import { Header } from "@navikt/ds-react-internal";
import cl from "classnames";
import NextLink from "next/link";
import React, { useContext } from "react";
import { logNav, PagePropsContext, Search } from "../..";
import MobileNavigation from "./menu/MobileNav";
import PortalNavigation from "./menu/PortalNav";
import ProfileDropdown from "./ProfileDropdown";
const DesignsystemHeader = (): JSX.Element => {
const { pageProps } = useContext(PagePropsContext);
const nonMobile = (
<>
<PortalNavigation title="Designsystemet" />
<div className="z-[1050] mr-auto flex">
{pageProps?.navigation?.headings.map(
(heading: DsNavigationHeadingT) => (
<NextLink
href={`/${
(heading.link_ref as { slug?: { current: string } })?.slug
?.current
}`}
passHref
key={heading.title + heading.link_ref}
>
<a
onClick={(e) =>
logNav(
"header",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
className={cl(
"algolia-index-heading 2lg:px-4 min-w-header flex cursor-pointer items-center justify-center whitespace-nowrap py-0 px-2 focus:outline-none",
{
"text-text-on-inverted hover:bg-gray-800 focus-visible:shadow-[inset_0_0_0_1px_var(--a-gray-900),inset_0_0_0_3px_var(--a-border-focus-on-inverted)]":
!(pageProps?.activeHeading?.title === heading.title),
"algolia-index-heading--active text-text-default bg-white hover:bg-gray-50 focus-visible:shadow-[inset_0_0_0_1px_var(--a-gray-900),inset_0_0_0_2px_var(--a-white)_,inset_0_0_0_4px_var(--a-gray-900)]":
pageProps?.activeHeading?.title === heading.title,
}
)}
>
{heading.title}
</a>
</NextLink>
)
)}
</div>
<div className="ml-auto flex">
<ProfileDropdown dark />
<Search />
</div>
</>
);
const mobile = (
<>
<PortalNavigation title="Designsystemet" />
<div className="ml-auto flex">
<ProfileDropdown dark />
<Search />
<MobileNavigation />
</div>
</>
);
return (
<>
<a className="skiplink" href="#hovedinnhold" tabIndex={-1}>
Hopp til innhold
</a>
<Header className="z-[1050] justify-center">
<div
className="h-header hidden w-full max-w-screen-2xl lg:flex"
data-theme="light"
>
{nonMobile}
</div>
<div
className="h-header flex w-full max-w-screen-2xl lg:hidden"
data-theme="light"
>
{mobile}
</div>
</Header>
</>
);
};
export default DesignsystemHeader;
@@ -0,0 +1,105 @@
import { Close, Hamburger as HamburgerIcon } from "@navikt/ds-icons";
import { Button } from "@navikt/ds-react";
import cl from "classnames";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import ReactModal from "react-modal";
import { logNav } from "../..";
const LinkElement = ({ name, href, onClick }) => {
const { asPath } = useRouter();
return (
<li className="flex h-11 items-center">
<Link href={href} passHref>
<a
className={cl(
"hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
{
"before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
asPath.startsWith(href),
"": !asPath.startsWith(href),
}
)}
onClick={(e) => {
logNav(
"header",
window.location.pathname,
e.currentTarget.getAttribute("href")
);
onClick();
}}
>
{name}
</a>
</Link>
</li>
);
};
export const Hamburger = () => {
const [open, setOpen] = useState(false);
useEffect(() => {
ReactModal.setAppElement("#__next");
}, []);
return (
<>
<div className={cl("z-[1050] mr-0 flex h-full justify-center")}>
<Button
variant="tertiary"
aria-haspopup="false"
onClick={() => setOpen(!open)}
aria-expanded={open}
className="aksel-tertiary-button"
icon={
<HamburgerIcon
className="pointer-events-none text-2xl"
aria-label="Åpne meny"
/>
}
/>
<ReactModal
isOpen={open}
onRequestClose={() => setOpen(false)}
aria={{ modal: true }}
overlayClassName="header-modal__overlay"
contentLabel="Meny"
className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
>
<nav aria-label="hovedmeny">
<ul>
<Button
variant="tertiary"
onClick={() => setOpen(false)}
className="aksel-tertiary-button absolute top-2 right-2"
icon={<Close title="lukk meny" className="h-5 w-5" />}
/>
<LinkElement
onClick={() => setOpen(false)}
name="God praksis"
href="/god-praksis"
/>
<LinkElement
onClick={() => setOpen(false)}
name="Grunnleggende"
href="/grunnleggende"
/>
<LinkElement
onClick={() => setOpen(false)}
name="Komponenter"
href="/komponenter"
/>
<LinkElement
onClick={() => setOpen(false)}
name="Blogg"
href="/produktbloggen"
/>
</ul>
</nav>
</ReactModal>
</div>
</>
);
};
@@ -1,74 +0,0 @@
import { getActiveHeading } from "@/components";
import { mockArtikkel, mockNav } from "@/mockdata";
import { PagePropsContext } from "@/utils";
import AkselHeader from "./AkselHeader";
import DesignsystemHeader from "./DesignsystemHeader";
export default {
title: "LayoutsParts/Header",
component: AkselHeader,
subComponents: {
DesignsystemHeader,
},
parameters: {
layout: "fullscreen",
},
};
const args = {
page: mockArtikkel,
navigation: mockNav,
activeHeading: getActiveHeading(mockNav, "designsystem/side/oversikt-guider"),
slug: "designsystem/side/oversikt-guider",
};
export const ArtikkelHeader = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<AkselHeader variant="artikkel" />
</PagePropsContext.Provider>
);
};
ArtikkelHeader.args = args;
export const ArtikkelForside = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<AkselHeader variant="forside" />
</PagePropsContext.Provider>
);
};
ArtikkelForside.args = args;
export const BloggHeader = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<AkselHeader variant="blogg" />
</PagePropsContext.Provider>
);
};
BloggHeader.args = args;
export const DesignsystemHeaderWNav = (props) => {
return (
<PagePropsContext.Provider value={{ pageProps: props }}>
<DesignsystemHeader />
</PagePropsContext.Provider>
);
};
DesignsystemHeaderWNav.args = args;
export const DesignsystemHeaderNoNav = (props) => {
return (
<PagePropsContext.Provider
value={{ pageProps: { ...props, activeHeading: null } }}
>
<DesignsystemHeader />
</PagePropsContext.Provider>
);
};
DesignsystemHeaderWNav.args = args;
@@ -0,0 +1,87 @@
import Logo from "components/assets/Logo";
import Link from "next/link";
import { logNav } from "../..";
import cl from "classnames";
import { useRouter } from "next/router";
import { Hamburger } from "components/layout/header/Hamburger";
const LinkElement = ({ name, href }) => {
const { asPath } = useRouter();
return (
<li>
<Link href={href} passHref>
<a
className={cl(
"text-text-default focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
{
"before:bg-border-action-selected font-semibold before:absolute before:bottom-[4px] before:z-10 before:h-1 before:w-full before:rounded-full":
asPath.startsWith(href),
"hover:before:bg-border-subtle-hover before:absolute before:bottom-[4px] before:z-10 before:h-1 before:w-full before:rounded-full":
!asPath.startsWith(href),
}
)}
onClick={(e) =>
logNav(
"header",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
>
{name}
</a>
</Link>
</li>
);
};
export const Header = ({
variant = "default",
}: {
variant?: "blogg" | "subtle" | "default" | "transparent";
}) => {
return (
<>
<a className="skiplink" href="#hovedinnhold" tabIndex={-1}>
Hopp til innhold
</a>
<header
className={cl("h-header z-20 flex items-center", {
"bg-[#FEFCE9]": variant === "blogg",
"bg-surface-default": variant === "default",
"bg-surface-subtle": variant === "subtle",
"bg-surface-transparent": variant === "transparent",
})}
>
<div className="xs:pr-6 xs:pl-4 mx-auto flex h-11 w-full max-w-screen-2xl items-center justify-between pr-4 pl-4">
<Link href="/" passHref>
<a
onClick={(e) =>
logNav(
"header",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
>
<Logo />
<span className="sr-only">Aksel</span>
</a>
</Link>
<nav className="hidden h-full md:block" aria-label="Hovedmeny">
<ul className="hidden h-full gap-2 md:flex">
<LinkElement name="God praksis" href="/god-praksis" />
<LinkElement name="Grunnleggende" href="/grunnleggende" />
<LinkElement name="Komponenter" href="/komponenter" />
<LinkElement name="Bloggen" href="/produktbloggen" />
</ul>
</nav>
<div className="h-full md:hidden">
<Hamburger />
</div>
</div>
</header>
</>
);
};
@@ -1,32 +0,0 @@
/* import { Logout } from "@navikt/ds-icons";
import { Button } from "@navikt/ds-react";
import { useContext } from "react";
import {
AuthenticationContext,
AuthenticationStatus,
} from "../../website-modules/utils";
const ProfileDropdown = ({ dark = false }: { dark?: boolean }) => {
const context = useContext(AuthenticationContext);
if (context.status !== AuthenticationStatus.IS_AUTHENTICATED) {
return null;
}
return (
<Button
data-theme={dark ? "dark" : "light"}
onClick={() => context.logout()}
className="my-auto bg-transparent md:mx-4"
variant="secondary"
icon={<Logout title="Logg ut" className="block xs:hidden" />}
>
<span className="hidden xs:block">Logg ut</span>
</Button>
);
}; */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ProfileDropdown = ({ dark = false }: { dark?: boolean }) => null;
export default ProfileDropdown;
@@ -1,165 +0,0 @@
import { Back, Close, Hamburger, Next } from "@navikt/ds-icons";
import { Detail, Heading } from "@navikt/ds-react";
import cl from "classnames";
import NextLink from "next/link";
import React, { useContext, useEffect, useState } from "react";
import { PagePropsContext } from "../../..";
import { DsNavigationHeadingT } from "@/lib";
import Menu from "../../menu/DsMobileMenu";
import Toggle from "./Toggle";
const MobileNavigation = () => {
const { pageProps } = useContext(PagePropsContext);
const [open, setOpen] = useState(false);
const [heading, setHeading] = useState(pageProps?.activeHeading);
const [level, setLevel] = useState(0);
useEffect(() => {
pageProps?.activeHeading && setHeading(pageProps?.activeHeading);
}, [pageProps?.activeHeading]);
const button = (
<>
{open ? (
<Close
className="pointer-events-none text-2xl"
aria-label="Lukk meny"
/>
) : (
<Hamburger
className="pointer-events-none text-2xl"
aria-label="Åpne meny"
/>
)}
</>
);
const headingMenu = pageProps?.navigation?.headings && (
<>
<ul className="animate-fadeIn text-text-default hidden md:block lg:hidden">
{pageProps?.navigation?.headings.map(
(heading: DsNavigationHeadingT) => (
<li
key={heading._key}
className={cl(
"focus-within:shadow-focus-inset hover:bg-surface-hover first-of-type:rounded-t last-of-type:rounded-b",
{
"border-l-surface-inverted bg-surface-neutral-subtle border-l-[6px]":
pageProps?.activeHeading?.title === heading.title,
}
)}
>
<NextLink
href={`/${heading?.link_ref?.slug?.current ?? "#"}`}
passHref
>
<a
className={cl(
"text-text-default flex min-h-[48px] w-full items-center justify-between bg-none py-3 pr-4 pl-8 no-underline focus:outline-none",
{
"pl-[26px] font-semibold":
pageProps?.activeHeading?.title === heading.title,
}
)}
onClick={() => {
setHeading(heading);
setOpen(false);
}}
>
{heading?.title}
</a>
</NextLink>
</li>
)
)}
</ul>
<ul
className={cl({
"animate-fadeIn block md:hidden lg:block": !heading || level === 0,
hidden: level === 1,
})}
>
{pageProps?.navigation.headings.map((heading: DsNavigationHeadingT) => (
<li
key={heading._key}
className={cl(
"focus-within:shadow-focus-inset hover:bg-surface-neutral-subtle first-of-type:rounded-t last-of-type:rounded-b",
{
"border-l-surface-inverted bg-surface-neutral-subtle border-l-[6px]":
pageProps?.activeHeading?.title === heading.title,
}
)}
>
<button
className={cl(
"text-text-default flex min-h-[48px] w-full items-center justify-between bg-none py-3 pr-4 pl-8 no-underline focus:outline-none",
{
"pl-[26px] font-semibold":
pageProps?.activeHeading?.title === heading.title,
}
)}
onClick={() => {
setHeading(heading);
setLevel(1);
}}
>
{heading?.title}
<Next aria-hidden title={`åpne ${heading?.title} menyen`} />
</button>
</li>
))}
</ul>
</>
);
const menu = (
<>
{heading && (
<div
className={cl("animate-fadeIn text-text-default", {
hidden: level === 0,
})}
>
<Heading
onClick={() => setLevel(0)}
as="button"
size="xsmall"
className="text-text-default hover:bg-surface-neutral-subtle focus-visible:shadow-focus-inset flex w-full items-center gap-2 rounded-t-[4px] border-none bg-none px-2 py-4 hover:underline focus:outline-none"
>
<Back aria-hidden aria-label="tilbake til hovedmeny" />
Tilbake
</Heading>
<Detail
size="small"
className="heading--active bg-surface-subtle p-2 uppercase"
>
{heading.title}
</Detail>
<Menu
inCategory={level === 0}
heading={heading}
onClick={() => setOpen(false)}
className="animate-fadeIn mt-0 max-h-[512px] overflow-y-auto"
/>
</div>
)}
</>
);
return (
<Toggle
isHamburger
open={open}
setOpen={setOpen}
buttonContent={button}
menu={
<>
{headingMenu}
{menu}
</>
}
/>
);
};
export default MobileNavigation;
@@ -1,47 +0,0 @@
import NextLink from "next/link";
import React from "react";
import { logNav } from "../../..";
import AkselLogo from "../../../assets/AkselLogo";
const PortalNav = ({ title }: { title: string }) => {
return (
<div className="text-text-on-inverted xs:mr-8 z-[1050] mr-0 flex h-full justify-center">
<NextLink href="/" passHref>
<a
onClick={(e) =>
logNav(
"portalnavigasjon",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
className="navdsi-header__button min-w-header flex items-center justify-center border-none focus:outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--a-surface-inverted),inset_0_0_0_3px_var(--a-border-focus-on-inverted)]"
>
<span className="sr-only">Tilbake til forsiden</span>
<AkselLogo
focusable={false}
className="h-7 w-7 "
aria-hidden
aria-label="Tilbake til forsiden"
/>
</a>
</NextLink>
<NextLink href="/designsystem" passHref>
<a
onClick={(e) =>
logNav(
"portalnavigasjon",
window.location.pathname,
e.currentTarget.getAttribute("href")
)
}
className="navdsi-header__button min-w-header flex items-center justify-center border-none focus:outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--a-surface-inverted),inset_0_0_0_3px_var(--a-border-focus-on-inverted)]"
>
{title}
</a>
</NextLink>
</div>
);
};
export default PortalNav;
@@ -1,68 +0,0 @@
import { Popover } from "@navikt/ds-react";
import cl from "classnames";
import React, { useState } from "react";
const Toggle = ({
buttonContent,
menu,
open,
setOpen,
isHamburger,
inverted,
}: {
buttonContent: React.ReactNode;
menu: React.ReactNode;
open: boolean;
setOpen: (v: boolean) => void;
isHamburger?: boolean;
inverted?: boolean;
}) => {
const [buttonRef, setButtonRef] = useState(null);
return (
<>
<div
className={cl("z-[1050] mr-0 flex h-full justify-center", {
"xs:mr-8": !isHamburger,
})}
>
<button
ref={setButtonRef}
aria-haspopup="false"
onClick={() => setOpen(!open)}
aria-expanded={open}
className={cl({
"min-w-header focus-visible:shadow-focus-inset ml-auto flex items-center justify-center border-r-0 hover:bg-gray-800/10 focus:outline-none":
inverted,
"navdsi-dropdown__toggle navdsi-header__button min-w-header justify-center gap-4 border-none focus-visible:shadow-[inset_0_0_0_1px_var(--a-surface-inverted),inset_0_0_0_3px_var(--a-border-focus-on-inverted)]":
!inverted,
})}
>
{buttonContent}
</button>
<Popover
onClose={() => setOpen(false)}
anchorEl={buttonRef}
open={open}
arrow={false}
placement="bottom-start"
offset={8}
className="animate-fadeIn bg-surface-default shadow-large z-[1100] w-80 max-w-full rounded border-none"
>
{menu}
</Popover>
</div>
{!inverted && (
<div
className={cl(
"fixed inset-0 z-[1010] h-full w-screen bg-gray-900 transition-opacity",
{ "visible opacity-50": open, "invisible opacity-0": !open }
)}
/>
)}
</>
);
};
export default Toggle;
@@ -1,4 +1 @@
export { default as Footer } from "./footer/Footer";
export { default as AkselHeader } from "./header/AkselHeader";
export { default as DsHeader } from "./header/DesignsystemHeader";
export { default as DsSidebar } from "./sidebar/DesignsystemSidebar";
@@ -1,181 +0,0 @@
import { Expand } from "@navikt/ds-icons";
import { BodyShort, Detail, Tag } from "@navikt/ds-react";
import cl from "classnames";
import NextLink from "next/link";
import React, { useContext, useMemo, useState } from "react";
import { logNav, PagePropsContext } from "../..";
import { DsNavigationHeadingMenuT, DsNavigationHeadingT } from "@/lib";
import style from "./index.module.css";
const NavItem = ({
onClick,
item,
inDropdown = false,
}: {
item: DsNavigationHeadingMenuT;
inDropdown?: boolean;
onClick?: () => void;
}) => {
const { pageProps } = useContext<any>(PagePropsContext);
return (
<li
className={cl(
style.item,
"focus-within:shadow-focus peer relative rounded-sm before:absolute before:left-0 before:z-[-1]",
{
"before:border-l-deepblue-300 before:top-1/2 before:h-6 before:-translate-y-1/2 before:border-l-[8px]":
pageProps?.page?.slug === item?.link?.slug?.current,
"before:h-full before:border-l before:border-l-gray-200 hover:before:border-l-2 hover:before:border-l-gray-500":
pageProps?.page?.slug !== item?.link?.slug?.current && inDropdown,
"pl-2": inDropdown,
"mr-2 px-0": !inDropdown,
}
)}
>
<NextLink href={`/${item.link.slug.current}`} passHref>
<BodyShort
as="a"
size="small"
onClick={(e) => {
onClick && onClick();
logNav(
"meny",
window.location.pathname,
e.currentTarget.getAttribute("href")
);
}}
className={cl(
"hover:text-deepblue-800 relative flex overflow-hidden px-2 py-[6px] no-underline focus:outline-none",
{
"text-deepblue-800 font-semibold":
pageProps?.page?.slug === item?.link?.slug?.current,
"text-text-subtle": !(
pageProps?.page?.slug === item?.link?.slug?.current
),
"pl-4":
!inDropdown &&
pageProps?.page?.slug === item?.link?.slug?.current,
}
)}
>
{item.title}
<span className="ml-2 capitalize">
{item?.link?.status &&
["deprecated", "beta", "new"].includes(item.link.status?.tag) && (
<Tag
size="xsmall"
variant={
item.link.status?.tag === "beta"
? "alt1"
: item.link.status?.tag === "deprecated"
? "neutral"
: "info"
}
>
{item.link.status?.tag}
</Tag>
)}
</span>
</BodyShort>
</NextLink>
</li>
);
};
const Dropdown = ({
items,
onClick,
}: {
items: DsNavigationHeadingMenuT[];
onClick?: () => void;
}) => {
const [heading, ...rest] = items;
const [open, setOpen] = useState(true);
return (
<li
key={heading.title}
data-open={open}
className={cl(style.dropdown, "w-full")}
>
<button
onClick={() => setOpen((x) => !x)}
className="min-h-8 text-text-subtle hover:text-deepblue-800 group z-10 flex w-full cursor-pointer items-center justify-between pr-2 focus:outline-none"
aria-expanded={open}
>
<Detail
as="span"
className="group-focus-visible:shadow-focus group-hover:bg-surface-neutral-subtle group-active:bg-bg-surface-neutral-subtle-hover mt-6 flex w-full items-center justify-between rounded-sm pl-2 font-semibold first:mt-0"
>
{heading.title}
<span className="flex h-6 w-6 items-center justify-center rounded">
<Expand
className={cl("text-base", { "rotate-180": open })}
aria-hidden
title={!open ? `åpne ${heading.title}` : `lukk ${heading.title}`}
/>
</span>
</Detail>
</button>
<ul hidden={!open} className="px-2">
{rest.map((z) => (
<NavItem item={z} key={z._key} inDropdown onClick={onClick} />
))}
</ul>
</li>
);
};
const Menu = ({
heading,
onClick,
}: {
heading?: DsNavigationHeadingT;
onClick?: () => void;
}): JSX.Element => {
const lists = useMemo(() => {
const groups = () => {
if (!heading.menu || heading.menu.length === 0) return;
const list = [];
let last = 0;
heading.menu.forEach((x, y) => {
if (x._type === "subheading") {
list.push(heading.menu.slice(last, y));
last = y;
} else if (y === heading.menu.length - 1) {
list.push(heading.menu.slice(last, heading.menu.length));
}
});
return list.filter((x) => x.length > 0);
};
const menulist = groups();
return (
<ul className="py-4 pl-6">
{menulist
? menulist.map((x: DsNavigationHeadingMenuT[], y) => {
return x[0]._type === "item" ? (
// eslint-disable-next-line react/prop-types
x.map((item) => (
<NavItem onClick={onClick} item={item} key={item._key} />
))
) : (
<Dropdown items={x} key={y} onClick={onClick} />
);
})
: null}
</ul>
);
}, [heading.menu, onClick]);
return (
<nav aria-label={heading.title} className={cl("overflow-x-auto")}>
{lists}
</nav>
);
};
export default Menu;
@@ -1,93 +0,0 @@
import { BodyShort, Detail } from "@navikt/ds-react";
import cl from "classnames";
import NextLink from "next/link";
import React, { useContext, useState, useEffect } from "react";
import { logNav, PagePropsContext } from "../..";
import { DsNavigationHeadingMenuT, DsNavigationHeadingT } from "@/lib";
const Menu = ({
heading,
onClick,
inCategory,
className,
}: {
heading?: DsNavigationHeadingT;
onClick?: () => void;
inCategory?: boolean;
className?: string;
}): JSX.Element => {
const { pageProps } = useContext<any>(PagePropsContext);
const [sidebarMenu, setSidebarMenu] = useState<DsNavigationHeadingMenuT[]>(
[]
);
useEffect(() => {
if (!heading || !heading?.menu) return;
setSidebarMenu([...heading.menu]);
}, [heading]);
return (
<nav
aria-label={heading.title}
className={cl(className, "overflow-x-auto")}
>
<BodyShort as="ul">
{sidebarMenu.map((item, x) => {
if (item._type === "subheading") {
return (
<Detail
as="li"
size="small"
key={item.title + x}
className="text-text-default before:bg-border-divider relative mt-6 pt-7 pr-4 pb-[14px] pl-8 uppercase before:absolute before:top-0 before:left-auto before:right-auto before:h-[1px] before:w-9/12 first:mt-0 first:pt-[14px] first:before:bg-transparent"
>
{item.title}
</Detail>
);
}
return (
<li
key={item.title + x}
className={cl(
"focus-within:shadow-focus-inset hover:bg-bg-subtle last-of-type:rounded-b",
{
"rounded-b": inCategory,
"bg-surface-neutral-subtle":
pageProps?.page?.slug === item?.link?.slug?.current,
}
)}
>
<NextLink href={`/${item.link.slug.current}`} passHref>
<a
onClick={(e) => {
onClick && onClick();
logNav(
"meny",
window.location.pathname,
e.currentTarget.getAttribute("href")
);
}}
className={cl(
"hover:text-text-default flex py-3 pr-4 no-underline focus:outline-none",
{
"text-text-default border-l-[6px] border-l-gray-900 pl-[26px] font-semibold":
pageProps?.page?.slug === item?.link?.slug?.current,
"text-text-subtle pl-8": !(
pageProps?.page?.slug === item?.link?.slug?.current
),
}
)}
>
{item.title}
</a>
</NextLink>
</li>
);
})}
</BodyShort>
</nav>
);
};
export default Menu;
@@ -1,4 +0,0 @@
.item + .dropdown,
.dropdown[data-open="true"] + .dropdown {
@apply mt-6;
}
@@ -2,13 +2,12 @@ import { SanityT, urlFor } from "@/lib";
import { SanityBlockContent } from "@/sanity-block";
import { Next } from "@navikt/ds-icons";
import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
import { FooterSlope } from "components/website-modules/Slope";
import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
import Head from "next/head";
import NextLink from "next/link";
import {
abbrName,
ArtikkelCard,
BreadCrumbs,
dateStr,
Feedback,
@@ -27,16 +26,29 @@ const AkselArtikkelTemplate = ({
return null;
}
const authors = (data?.contributors as any)?.map((x) => x?.title);
const date = data?.updateInfo?.lastVerified
? data?.updateInfo?.lastVerified
: data?.publishedAt
? data.publishedAt
: data._updatedAt;
const authors = (data?.contributors as any)?.map((x) => x?.title) ?? [];
const hasTema = "tema" in data && data.tema && data?.tema.length > 0;
const aside = data?.relevante_artikler?.length > 0 && (
<aside className="mt-16 overflow-x-clip bg-gray-50 ">
<FooterSlope />
<div className="relative bg-gray-100 pt-12 pb-16">
<aside
className="overflow-x-clip py-8"
aria-labelledby="relevante-artikler-aside"
>
<div className="relativept-12 pb-16">
<div className="dynamic-wrapper">
<Heading level="2" size="medium" className="text-deepblue-700 px-4">
<Heading
level="2"
size="medium"
className="text-deepblue-700 px-4"
id="relevante-artikler-aside"
>
{data?.relevante_artikler?.length === 1
? `Les også`
: `Relevante artikler`}
@@ -60,6 +72,11 @@ const AkselArtikkelTemplate = ({
content={`${data?.heading} - ${title}`}
key="ogtitle"
/>
<meta
name="description"
content={data?.seo?.meta ?? data?.ingress}
key="desc"
/>
<meta
property="og:description"
content={data?.seo?.meta ?? data?.ingress}
@@ -74,6 +91,14 @@ const AkselArtikkelTemplate = ({
.width(1200)
.height(630)
.fit("crop")
.quality(100)
.url()
: hasTema && (data.tema[0] as any)?.seo?.image
? urlFor((data.tema[0] as any)?.seo?.image)
.width(1200)
.height(630)
.fit("crop")
.quality(100)
.url()
: ""
}
@@ -86,7 +111,7 @@ const AkselArtikkelTemplate = ({
<Heading
level="1"
size="large"
className="algolia-index-lvl1 text-deepblue-700 mt-4 md:text-5xl"
className="algolia-index-lvl1 text-deepblue-800 mt-4 md:text-5xl"
>
{data.heading}
</Heading>
@@ -101,7 +126,7 @@ const AkselArtikkelTemplate = ({
as="span"
className="text-text-subtle whitespace-nowrap"
>
{dateStr(data?._updatedAt)}
{dateStr(date)}
</BodyShort>
{authors?.length > 0 && (
<BodyShort size="small" as="div" className="flex flex-wrap gap-1">
@@ -1,144 +0,0 @@
import { SanityT, urlFor } from "@/lib";
import { SanityBlockContent } from "@/sanity-block";
import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
import Head from "next/head";
import { abbrName, dateStr, Feedback, TableOfContents } from "../..";
import Footer from "../footer/Footer";
import AkselHeader from "../header/AkselHeader";
const AkselBloggTemplate = ({
data,
title,
}: {
data: SanityT.Schema.aksel_blogg;
title: string;
}): JSX.Element => {
if (!data.content || !data.heading) {
return null;
}
const authors = (data?.contributors as any)?.map((x) => x?.title);
return (
<>
<Head>
<title>{`${data?.heading} - ${title}`}</title>
<meta
property="og:title"
content={`${data?.heading} - ${title}`}
key="ogtitle"
/>
<meta
property="og:description"
content={data?.seo?.meta ?? data?.ingress}
key="ogdesc"
/>
{authors?.[0] && <meta name="twitter:label1" content="Skrevet av" />}
{authors?.[0] && <meta name="twitter:data1" content={authors?.[0]} />}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:label2" content="Publisert" />
<meta
name="twitter:data2"
content={dateStr(data?.publishedAt ?? data._createdAt)}
/>
<meta property="og:type" content="article" />
<meta
property="og:image"
content={
data?.seo?.image
? urlFor(data?.seo?.image)
.width(1200)
.height(630)
.fit("crop")
.url()
: ""
}
key="ogimage"
/>
</Head>
<AkselHeader variant="blogg" />
<main
tabIndex={-1}
id="hovedinnhold"
className="aksel-artikkel xs:pb-32 bg-orange-50 pt-[8vw] pb-16 focus:outline-none"
>
<div className="px-4">
<div className="dynamic-wrapper-prose text-center">
<Heading
level="1"
size="xlarge"
className="algolia-index-lvl1 hyphen mt-1 break-words text-5xl"
>
{data.heading}
</Heading>
{data?.ingress && (
<Ingress className="mt-4">{data?.ingress}</Ingress>
)}
<div className="mt-8 inline-flex flex-wrap gap-2 text-base">
{authors?.[0] && (
<>
<BodyShort size="small" as="address" className="not-italic">
{authors?.[0]}
</BodyShort>
<BodyShort
size="small"
className="text-text-subtle"
as="span"
>
—
</BodyShort>
</>
)}
<BodyShort size="small" as="span" className="text-text-subtle">
{dateStr(data?.publishedAt ?? data._createdAt)}
</BodyShort>
</div>
</div>
</div>
<div className="mt-16">
<TableOfContents changedState={data?.content ?? []} hideToc />
<div className="mt-8 px-4">
<SanityBlockContent
className="dynamic-wrapper-prose"
blocks={data?.content ?? []}
variant="aksel"
/>
</div>
</div>
<div className="mt-16 px-4">
<div className="dynamic-wrapper-prose">
{authors?.length > 0 && (
<Label className="text-deepblue-700 mb-2" as="p">
Bidragsytere
</Label>
)}
{authors?.length > 0 && (
<BodyShort
as="div"
className="text-text-subtle mb-1 flex flex-wrap gap-1"
>
{authors.map(abbrName).map((x, y) => (
<address className="not-italic" key={x}>
{x}
{y !== authors.length - 1 && ", "}
</address>
))}
</BodyShort>
)}
<BodyShort as="span" className="text-text-subtle whitespace-nowrap">
Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
</BodyShort>
</div>
<div className="dynamic-wrapper-prose pt-16">
<Feedback akselFeedback docId={data?._id} docType={data?._type} />
</div>
</div>
</main>
<Footer variant="aksel" />
</>
);
};
export default AkselBloggTemplate;
@@ -2,15 +2,15 @@ import { SanityT, urlFor } from "@/lib";
import { SanityBlockContent } from "@/sanity-block";
import { BodyShort, Heading, Ingress, Label } from "@navikt/ds-react";
import cl from "classnames";
import { Header } from "components/layout/header/Header";
import Head from "next/head";
import { AkselHeader, Footer } from "..";
import { Footer } from "..";
import {
abbrName,
Bilde,
BreadCrumbs,
dateStr,
Feedback,
PrinsippSlope,
TableOfContents,
} from "../..";
@@ -25,7 +25,7 @@ const AkselPrinsippTemplate = ({
return null;
}
const authors = (data?.contributors as any)?.map((x) => x?.title);
const authors = (data?.contributors as any)?.map((x) => x?.title) ?? [];
const mainPage = data?.prinsipp?.hovedside;
return (
@@ -51,13 +51,14 @@ const AkselPrinsippTemplate = ({
.width(1200)
.height(630)
.fit("crop")
.quality(100)
.url()
: ""
}
key="ogimage"
/>
</Head>
<AkselHeader variant={mainPage ? "inngang" : "artikkel"} />
<Header variant={mainPage ? "default" : "subtle"} />
<main
tabIndex={-1}
id="hovedinnhold"
@@ -68,7 +69,7 @@ const AkselPrinsippTemplate = ({
<article className="overflow-x-clip">
<div
className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
"pb-24": mainPage,
"pb-32": mainPage,
})}
>
<div className="pt-12">
@@ -112,13 +113,12 @@ const AkselPrinsippTemplate = ({
</div>
</div>
</div>
{mainPage && <PrinsippSlope />}
<div
className={cl("pt-4", {
className={cl("pt-32", {
"bg-gray-100": mainPage,
})}
>
<div className="max-w-aksel xs:w-[90%] mx-auto px-4 ">
<div className="max-w-aksel xs:w-[90%] mx-auto px-4">
<div className="pb-16 md:pb-32">
<div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
<TableOfContents
@@ -130,7 +130,7 @@ const AkselPrinsippTemplate = ({
{data?.hero_bilde && (
<Bilde
node={data.hero_bilde as any}
className="xs:-mt-64 -mt-36 mb-10"
className="xs:-mt-72 -mt-36 mb-10"
/>
)}
<SanityBlockContent
@@ -178,7 +178,7 @@ const AkselPrinsippTemplate = ({
</div>
</article>
</main>
<Footer variant="aksel" />
<Footer />
</>
);
};
@@ -1,74 +0,0 @@
import { Feedback, TableOfContents } from "@/components";
import { SanityT } from "@/lib";
import { SanityBlockContent } from "@/sanity-block";
import { Heading } from "@navikt/ds-react";
import Head from "next/head";
import Footer from "../footer/Footer";
import AkselHeader from "../header/AkselHeader";
const AkselStandaloneTemplate = ({
data,
title,
}: {
data: SanityT.Schema.aksel_standalone;
title: string;
}): JSX.Element => {
if (!data.content || !data.heading) {
return null;
}
return (
<>
<Head>
<title>{`${data?.heading} - ${title}`}</title>
<meta
property="og:title"
content={`${data?.heading} - ${title}`}
key="ogtitle"
/>
</Head>
<AkselHeader variant="artikkel" />
<main
tabIndex={-1}
id="hovedinnhold"
className="aksel-artikkel xs:pb-32 bg-gray-50 pt-[8vw] pb-16 focus:outline-none"
>
<div className="px-4">
<div className="dynamic-wrapper-prose">
<Heading
level="1"
size="xlarge"
className="algolia-index-lvl1 mt-1"
>
{data.heading}
</Heading>
</div>
</div>
<div className="mt-12">
<TableOfContents changedState={data?.content ?? []} hideToc />
<div className="mt-8 px-4">
<SanityBlockContent
className="dynamic-wrapper-prose"
blocks={data?.content ?? []}
variant="aksel"
/>
</div>
</div>
<div className="mt-16 px-4">
<div className="dynamic-wrapper-prose border-t border-gray-300 pt-8">
<Feedback
akselFeedback
text="siden"
docId={data?._id}
docType={data?._type}
/>
</div>
</div>
</main>
<Footer variant="aksel" />
</>
);
};
export default AkselStandaloneTemplate;
@@ -1,61 +0,0 @@
import { SanityT } from "@/lib";
import { SanityBlockContent } from "@/sanity-block";
import { BodyShort, Heading } from "@navikt/ds-react";
import Head from "next/head";
import { dateStr, Feedback, TableOfContents } from "../..";
const ArtikkelTemplate = ({
data,
title,
}: {
data: SanityT.Schema.ds_artikkel;
title: string;
}): JSX.Element => {
if (!data.content || !data.heading) {
return null;
}
return (
<>
<Head>
{data.heading && (
<>
<title>{`${data.heading} - ${title}`}</title>
<meta property="og:title" content={`${data.heading} - ${title}`} />
</>
)}
</Head>
<div className="content-box">
<div className="pt-8 pb-6">
<Heading
size="xlarge"
level="1"
spacing
className="algolia-index-lvl1"
>
{data.heading}
</Heading>
<BodyShort
size="small"
as="span"
className="text-text-subtle flex items-center"
>
{`Oppdatert ${dateStr(data._updatedAt)}`}
</BodyShort>
</div>
</div>
<div className="relative flex max-w-full md:max-w-7xl">
<TableOfContents changedState={data.content} hideToc={false} />
<div className="content-box">
<SanityBlockContent className="mt-12" blocks={data.content} />
<Feedback docId={data?._id} docType={data?._type} />
</div>
</div>
</>
);
};
export default ArtikkelTemplate;
Loaded 100 of 315 files, more files were not shown because too many files have changed in this diff. Show more