Merge branch 'main' into tokens/add-font-sizes

digdir · Feb 1, 2024 · 641b715 · 641b715
2 parents b1e5f2f + 5a1d463
commit 641b715
Show file tree

Hide file tree

Showing 170 changed files with 3,777 additions and 1,638 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,6 +39,14 @@ module.exports = {
  files: ['storefront/**/*'],
  extends: ['plugin:@next/next/recommended'],
  },
+ {
+ // MDX files
+ extends: ['plugin:mdx/recommended'],
+ files: ['**/*.md?(x)'],
+ settings: {
+ 'mdx/code-blocks': false,
+ },
+ },
  ],
  rules: {
  // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
@@ -79,6 +87,7 @@ module.exports = {
  'import/resolver': {
  typescript: {
  alwaysTryTypes: true,
+ project: ['./apps/*/tsconfig.json', './packages/*/tsconfig.json'],
  },
  },
  },

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -156,6 +156,10 @@
  }
 </script>
 
+<script>
+ document.documentElement.setAttribute('lang', 'no');
+</script>
+
 <header class="header">
  <div class="header__container">
  <div class="header__left">

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -3,6 +3,10 @@
  href="https://altinncdn.no/fonts/inter/inter.css"
 />
 
+<script>
+ document.documentElement.setAttribute('lang', 'no');
+</script>
+
 <style>
  * {
  font-feature-settings: 'cv05' 1 !important;

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,15 @@
  "[ignore]": {
  "editor.defaultFormatter": "foxundermoon.shell-format"
  },
+ "eslint.probe": [
+ "javascript",
+ "javascriptreact",
+ "typescript",
+ "typescriptreact",
+ "html",
+ "vue",
+ "markdown",
+ "mdx"
+ ],
  "jest.jestCommandLine": "yarn test"
 }
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -1 +1 @@
-* @mimarz @Thuneer @Barsnes
+* @mimarz @Barsnes
diff --git a/apps/storefront/components/Link/Github/GithubLink.tsx b/apps/storefront/components/Link/Github/GithubLink.tsx
@@ -0,0 +1,30 @@
+'use client';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import Image from 'next/image';
+import { Link } from '@digdir/design-system-react';
+import { useRouter } from 'next/router';
+
+export const GithubLink = ({ ...rest }: HTMLAttributes<HTMLAnchorElement>) => {
+ const { asPath } = useRouter();
+ const href = `https://github.com/digdir/designsystemet/tree/main/apps/storefront/pages${asPath}.mdx`;
+
+ return (
+ <Link
+ href={href}
+ target='_blank'
+ rel='noopener noreferrer'
+ {...rest}
+ >
+ <Image
+ height={20}
+ width={20}
+ alt='github logo'
+ src='/img/logos/github-logo.svg'
+ />
+ Rediger denne siden på Github
+ </Link>
+ );
+};
+
+export default GithubLink;
diff --git a/apps/storefront/components/Meta/Meta.tsx b/apps/storefront/components/Meta/Meta.tsx
@@ -4,9 +4,10 @@ import Head from 'next/head';
 interface MetaProps {
  title: string;
  description: string;
+ image?: string;
 }
 
-const Meta = ({ title, description }: MetaProps) => {
+const Meta = ({ title, description, image }: MetaProps) => {
  title = `${title} - Felles Designsystem`;
  return (
  <Head>
@@ -24,6 +25,16 @@ const Meta = ({ title, description }: MetaProps) => {
  rel='shortcut icon'
  href='/favicon.ico'
  />
+
+ {/* images */}
+ <meta
+ property='og:image'
+ content={image ? image : '/img/designsystemet-meta.png'}
+ />
+ <meta
+ property='twitter:image'
+ content={image ? image : '/img/designsystemet-meta.png'}
+ />
  </Head>
  );
 };

diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
@@ -53,6 +53,10 @@
  padding: var(--fds-spacing-4) var(--fds-spacing-7) 0 var(--fds-spacing-7);
 }
 
+.githubLink {
+ margin-top: var(--fds-spacing-6);
+}
+
 @media (max-width: 576px) {
  .content {
  padding: 0;

diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 
+import GithubLink from 'components/Link/Github/GithubLink';
+
 import { Container, SidebarMenu, MdxContent } from '../../components';
 
 import classes from './MenuPageLayout.module.css';
@@ -38,6 +40,7 @@ const MenuPageLayout = ({ content, data }: PageLayoutProps) => {
  id='content'
  >
  <MdxContent>{content}</MdxContent>
+ <GithubLink className={classes.githubLink} />
  </div>
  </main>
  </Container>

diff --git a/apps/storefront/next.config.mjs b/apps/storefront/next.config.mjs
@@ -54,7 +54,7 @@ export default {
  ignoreDuringBuilds: true,
  },
  i18n: {
- locales: ['nb'],
- defaultLocale: 'nb',
+ locales: ['no'],
+ defaultLocale: 'no',
  },
 };
diff --git a/apps/storefront/pages/404.mdx b/apps/storefront/pages/404.mdx
@@ -1,5 +1,5 @@
-import { Meta } from '@components';
 import { NotFoundLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Feil: Fant ikke siden'

diff --git a/...front/pages/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare.mdx b/...front/pages/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare.mdx
@@ -1,5 +1,5 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Brukergrupper som er digitalt sårbare'

diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste.mdx b/apps/storefront/pages/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste.mdx
@@ -1,5 +1,5 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Brukerreise for din tjeneste'

diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/felles-innsiktsbase.mdx b/apps/storefront/pages/god-praksis/brukerinnsikt/felles-innsiktsbase.mdx
@@ -1,5 +1,5 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Felles innsiktsbibliotek'

diff --git a/apps/storefront/pages/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko.mdx b/apps/storefront/pages/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko.mdx
@@ -1,5 +1,5 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='I innbyggeren sine sko'

diff --git a/apps/storefront/pages/god-praksis/index.mdx b/apps/storefront/pages/god-praksis/index.mdx
@@ -1,15 +1,9 @@
-import {
- Meta,
- Grid,
- NavigationCard,
- TeaserCard,
- Container,
- ImageSection,
-} from '@components';
+import { BranchingIcon } from '@navikt/aksel-icons';
+
 import { NavPageLayout } from '@layouts';
-import { BranchingIcon, ImageIcon } from '@navikt/aksel-icons';
+import { Meta, Grid, TeaserCard } from '@components';
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <NavPageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/andre-ressurser.mdx b/apps/storefront/pages/god-praksis/innholdsarbeid/andre-ressurser.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@components';
 import { MenuPageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Andre gode språkressurser'
  description='Her har vi samlet noen andre gode artikler som angår innhold.'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <MenuPageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/skriverad.mdx b/apps/storefront/pages/god-praksis/innholdsarbeid/skriverad.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Slik skriver du kort og tydelig'
  description='Retningslinjene skal hjelpe oss til å skrive brukertilpasset, klart og helhetlig.'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <PageLayout
  content={children}
  data={{
@@ -21,7 +21,7 @@ export default ({ children, menu }) => (
 
 Komponentene i designsystemet skal fylles med informasjon til brukerne. Når vi gjør det, er det viktig at vi skriver på et klart og korrekt språk som er tilpasset målgruppen. Brukerne skal finne, forstå og gjøre det de kom til tjenesten for å gjøre.
 
-Her får du noen generelle råd om klarspråk, og lenker videre hvis du vil lese mer om hvordan du kan skrive klart og tydelig. I tillegg er det råd om språk i retningslinjene for de enkelte komponentene i designsystemet. 
+Her får du noen generelle råd om klarspråk, og lenker videre hvis du vil lese mer om hvordan du kan skrive klart og tydelig. I tillegg er det råd om språk i retningslinjene for de enkelte komponentene i designsystemet.
 
 ## Test på ekte brukere
 
@@ -61,6 +61,7 @@ Når språket blir formelt plasserer vi i ofte verbet for langt ut i setningen.
 **Skriv heller:** Arbeidstaker må oppfylle noen plikter
 
 ### Vil du lese mer om klarspråk?
+
 [KS har en rekke gode råd om klart språk i digitale løsninger.](https://www.ks.no/fagomrader/digitalisering/klart-sprak-i-digitale-selvbetjeningslosninger/)
 
 [Les mer om generelle skriveråd fra Språkrådet.](https://www.sprakradet.no/klarsprak/om-skriving/generelle-skriverad-nynorsk/)
diff --git a/apps/storefront/pages/god-praksis/innholdsarbeid/skumlesing.mdx b/apps/storefront/pages/god-praksis/innholdsarbeid/skumlesing.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Skumlesing'
  description='Slik skriver du tekster som er lette å skumlese'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <PageLayout
  content={children}
  data={{
@@ -46,13 +46,13 @@ Når vi har god struktur på innholdet og bruker klart språk og ord som folk kj
 
  - Ha maks 3-4 setninger per avsnitt.
 
-5. **Lag meningsbærende overskrifter og mellomoverskrifter** 
+5. **Lag meningsbærende overskrifter og mellomoverskrifter**
 
 Overskriftene og mellomoverskriftene skal gjengi innholdet i avsnittet. De skal helst være en hel setning.
 
- - Overskrifter fungerer som veiskilt i teksten og gjør den enklere å skanne og lettere å lese.
- - Mellomtitler bør henge sammen narrativt slik at brukeren forstår det viktigste ved å bare lese dem.
- - Sett de viktigste ordene først.
+- Overskrifter fungerer som veiskilt i teksten og gjør den enklere å skanne og lettere å lese.
+- Mellomtitler bør henge sammen narrativt slik at brukeren forstår det viktigste ved å bare lese dem.
+- Sett de viktigste ordene først.
 
 6. **Ikke bruk store bokstaver, kursiv og fet tekst**
 

diff --git a/apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx b/apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx
@@ -1,12 +1,12 @@
-import { Meta, ResponsiveIframe } from '@components';
 import { PageLayout } from '@layouts';
+import { Meta, ResponsiveIframe } from '@components';
 
 <Meta
  title='Forstå synsnedsettelse'
  description='Brønnøysundregistrene har undersøkt hvordan mennesker med synsnedsettelser opplever å bruke digitale produkter.'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <PageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/grunnleggende/designelementer/design-tokens.mdx b/apps/storefront/pages/grunnleggende/designelementer/design-tokens.mdx
@@ -1,13 +1,12 @@
-import { Meta } from '@components';
 import { MenuPageLayout } from '@layouts';
-import { Figma } from 'mdx-embed';
+import { Meta } from '@components';
 
 <Meta
  title='Design Tokens'
  description='Design tokens er gjenbrukbare verdier som fungerer som et bindeleddet mellom alle flater.'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <MenuPageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/grunnleggende/designelementer/farger.mdx b/apps/storefront/pages/grunnleggende/designelementer/farger.mdx
@@ -1,13 +1,12 @@
-import { Meta, TokenList } from '@components';
 import { MenuPageLayout } from '@layouts';
-import { Figma } from 'mdx-embed';
+import { Meta, TokenList } from '@components';
 
 <Meta
  title='Farger'
  description='Fargesystemet består av globale farger og et semantisk nivå som beskriver hva fargen skal brukes til.'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <MenuPageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/grunnleggende/designelementer/ikoner.mdx b/apps/storefront/pages/grunnleggende/designelementer/ikoner.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@components';
 import { MenuPageLayout } from '@layouts';
+import { Meta } from '@components';
 
 <Meta
  title='Ikoner'
  description='Beskrivelse'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <MenuPageLayout
  content={children}
  data={{

diff --git a/apps/storefront/pages/grunnleggende/designelementer/sizing.mdx b/apps/storefront/pages/grunnleggende/designelementer/sizing.mdx
@@ -1,14 +1,12 @@
-import { Meta, TokenList } from '@components';
 import { MenuPageLayout } from '@layouts';
-import { Figma } from 'mdx-embed';
-import { CodeSnippet } from '@components';
+import { Meta, TokenList, CodeSnippet } from '@components';
 
 <Meta
  title='Størrelser'
  description='Beskrivelse'
 />
 
-export default ({ children, menu }) => (
+export default ({ children }) => (
  <MenuPageLayout
  content={children}
  data={{
@@ -49,8 +47,8 @@ component-mode-height.large (sizing.10 / 40-45px)
 
 Størrelsene er satt opp til å passe sammen med [fluid typography](/grunnleggende/designelementer/typografi#fluid-typography). De varier derfor noe etter hvilken viewport du har. `Sizing.10` vil dermed være 40px på viewport 320, og 45px på viewport 1360.
 
-<CodeSnippet
- children='"sizing": {
+<CodeSnippet language='json'>
+ {`"sizing": {
  "1": {
  "value": "{base_sizing}/16*{font-size.f0}",
  "type": "sizing",
@@ -72,6 +70,5 @@ Størrelsene er satt opp til å passe sammen med [fluid typography](/grunnleggen
  "type": "sizing",
  "description": "48px - 54px"
  },
- }'
- language='json'
-/>
+ }`}
+</CodeSnippet>