feat: designsystemet

assets/sass/custom.scss

@@ -56,53 +56,6 @@
   }
 }
 
-.breadcrumb {
-  padding: 0 $spacing-base-2;
-
-  a {
-    font-family: $font-family;
-    font-style: normal;
-    font-weight: $font-weight-regular;
-    font-size: $font-size-400;
-    line-height: $font-line-height-30;
-    color: $color-neutral-grey-800;
-    text-decoration: none;
-    border-bottom: 1px solid $color-neutral-grey-800;
-    padding-bottom: $spacing-base-1;
-  }
-}
-
-.breadcrumb ul {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.breadcrumb li:not(:last-child)::after {
-  @include font-awsome("\f054");
-  color: $color-neutral-grey-600;
-  display: inline-block;
-  margin: 0 $spacing-base-4;
-  font-size: $spacing-base-3;
-  font-weight: $font-weight-medium;
-}
-
-.breadcrumb li:last-child {
-  a {
-    border: none;
-  }
-}
-
-.accordion-item {
-  border: none;
-}
-
-.accordion-button {
-  font-size: $font-size-500;
-}
-
 .divider__title {
   h2 {
     font-size: $font-size-900 !important;
@@ -243,3 +196,11 @@
     font-weight: $font-weight-medium;
   }
 }
+
+summary {
+  display: flex;
+}
+
+summary:before {
+  display: inline-block;
+}

content/teams/designsystemet/index.md

@@ -1,66 +1,103 @@
 ---
 title: Designsystemet
-Ingress: Designsystemet er en verktøykasse med grunnleggende UI-komponenter, retningslinjer og mønstre som skal bidra til effektiv produktutvikling og helhetlige brukeropplevelser. Komponenter fra designsystemet er i bruk i Altinn Studio og i flere av Digdirs løsninger. Andre offentlige virksomheter har også tatt i bruk og bidrar til å videreutvikle designsystemet. Designsystemet er anerkjent som [Digital Public Good](https://www.digitalpublicgoods.net/r/designsystemet). 
+Ingress: Designsystemet er en verktøykasse med grunnleggende UI-komponenter, retningslinjer og mønstre som skal bidra til effektiv produktutvikling og helhetlige brukeropplevelser. Komponenter fra designsystemet er i bruk i Altinn Studio og i flere av Digdirs løsninger. Andre offentlige virksomheter har også tatt i bruk og bidrar til å videreutvikle designsystemet. Designsystemet er anerkjent som [Digital Public Good](https://www.digitalpublicgoods.net/r/designsystemet).
 
 navigation_link:
   title: Produkteier
   subtitle: Marianne Røsvik
 
+layout: designsystemet/single
+
 banner:
   image:
     src: /illustrations/illustration-11.png
     alt: Illustrasjon av en person som sitter og leser en bok
 
-tags:
-- pg_portaler
-- stream-aligned
----
-
-
-{{< team/members title="Medlemmer i teamet" slack_url="https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ" slack_url_text="Bli med i Slack for teamet" >}}
-  {{< team/github-profile url="" name="Marianne Røsvik" role="Produkteier, Fast, Stavanger" >}}
-  {{< team/github-profile url="" name="Michael Marszalek" role="Tech lead, frontend, Fast, Stavanger" >}}
-  {{< team/github-profile url="" name="Lasse Febakke Straum" role="Design Lead, Fast, Oslo" >}}
-  {{< team/github-profile url="" name="Øyvind Thune" role="Design og Frontend, Fast, Leikanger" >}}
-  {{< team/github-profile url="" name="Tobias Barsnes" role="Frontend, Fast, Leikanger" >}}
-  {{< team/github-profile url="" name="Frank Dahle" role="UU-spesialist, Fast, Brønnøysund" >}}  
-  {{< team/github-profile url="" name="Oddbjørn Øvernes" role="Frontend, Konsulent, Bergen" >}}  
-  {{< team/github-profile url="" name="" role="" >}}
+links:
+  slack_url: https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ
+  slack_url_text: Bli med i Slack for teamet
+  website_url: https://www.designsystemet.no
+  website_url_text: Les mer på designsystemet.no
 
-<br/>
-Andre etater som er en del av teamet
-  {{< team/github-profile url="" name="" role="" >}}
-  {{< team/github-profile url="" name="" role="" >}}
-  {{< team/github-profile url="" name="" role="" >}}
-  {{< team/github-profile name="Stian Morsund" role="Tech lead designsystem, KS Digital" >}}
-  {{< team/github-profile name="Roy Halvor Frimanslund" role="Brukskvalitet-lead, Brønnøysundregistrene" >}}
-  {{< team/github-profile name="Eirik Backer" role="Tech lead, Mattilsynet" >}}
-  {{< team/github-profile name="Une Sofie Kinn Ekroll" role="Konsulent, Utdanningsdirektoratet" >}}
-{{< /team/members >}}
+members:
+  core:
+    - name: Marianne Røsvik
+      initials: MR
+      role: Produkteier, Fast
+      location: Stavanger
+    - name: Michael Marszalek
+      initials: MM
+      role: Tech lead, frontend, Fast
+      location: Stavanger
+    - name: Lasse Febakke Straum
+      initials: LS
+      role: Design lead, Fast
+      location: Oslo
+    - name: Øyvind Thune
+      initials: ØT
+      role: Design og frontend, Fast
+      location: Leikanger
+    - name: Tobias Barsnes
+      initials: TB
+      role: Frontend, Fast
+      location: Leikanger
+    - name: Frank Dahle
+      initials: FD
+      role: UU-spesialist, Fast
+      location: Brønnøysund
+    - name: Oddbjørn Øvernes
+      initials: OØ
+      role: Frontend, Konsulent
+      location: Bergen
+  collaborators:
+    - name: Stian Morsund
+      initials: SM
+      role: Tech lead designsystem
+      location: KS Digital
+    - name: Roy Halvor Frimanslund
+      initials: RF
+      role: Brukskvalitet-lead
+      location: Brønnøysundregistrene
+    - name: Eirik Backer
+      initials: EB
+      role: Tech lead
+      location: Mattilsynet
+    - name: Une Sofie Kinn Ekroll
+      initials: UE
+      role: Konsulent
+      location: Utdanningsdirektoratet
 
+products:
+  - title: Roadmap for produktet
+    subtitle: Roadmap
+    url: https://github.com/orgs/digdir/projects/8/views/33
+    url_text: Åpne i GitHub
+  - title: Hva inngår i sprinten
+    subtitle: Backlog for hva som pågår
+    url: https://github.com/orgs/digdir/projects/3
+    url_text: Se backlog
+  - title: Repo
+    subtitle: Hold deg oppdatert her
+    url: https://github.com/digdir/designsystemet
+    url_text: Gå til repo
 
-{{< team/products title="Produkter" >}}
-{{< team/product-item title="Roadmap for produktet" subtitle="Roadmap" url="https://github.com/orgs/digdir/projects/8/views/33" url_text="GitHub">}}
-{{< team/product-item title="Hva inngår i sprinten" subtitle="Backlog for hva som pågår" url="https://github.com/orgs/digdir/projects/3" url_text="GitHub" >}}
-{{< team/product-item title="Repo" subtitle="Hold deg oppdatert her" url="https://github.com/digdir/designsystemet" url_text="GitHub" >}}
-{{< /team/products >}}
+governance:
+  - title: Utvikling og drift
+    description: Kjerneteamet består av designere og utviklere fra Digdir, Brønnøysundregistrene, Mattilsynet, Utdanningsdirektoratet og KS Digital.
+  - title: Mønstersamarbeid
+    description: Digdir, Nav, Skatteetaten, Oslo kommune, Politiet og Entur utvikler felles interaksjonsmønstre.
+  - title: Community
+    description: Et bredt åpent nettverk av virksomheter bidrar gjennom åpne prosesser med tydelig versjonsstyring og kvalitetssikring.
 
+responsibilities:
+  - Forenkle og effektivisere arbeidsflyten for designere, utviklere og produktteam.
+  - Tilby grunnleggende UI-komponenter og mønstre der tilgjengelighet og testing er ivaretatt.
+  - Tilby dokumentasjon, retningslinjer og god praksis for UI-komponenter og mønstre.
+  - Koordinere og tilrettelegge for samarbeid mellom DevOps-team som bruker og bidrar til å utvikle designsystemet.
+  - Involvere andre offentlige aktører i samarbeidet.
+  - Skape en samarbeidsarena rundt designsystem og brukeropplevelse i Norge.
 
-{{< team/responsibilities title="Samstyringsmodell" >}}
-Det er etablert en samstyringsmodell med tre nivåer:
-1. **Utvikling og drift**: Kjerneteamet består av designere og utviklere fra Digdir, Brønnøysundregistrene, Mattilsynet, Utdanningsdirektoratet og KS Digital.
-2. **Mønstersamarbeid**: Digdir, Nav, Skatteetaten, Oslo kommune, Politiet og Entur utvikler felles interaksjonsmønstre.
-3. **Community**: Et bredt åpent nettverk av virksomheter bidrar gjennom åpne prosesser med tydelig versjonsstyring og kvalitetssikring
-
-{{< team/responsibilities title="Ansvarsområder" >}}
-
-- Forenkle og effektivisere arbeidsflyten for designere, utviklere og produktteam.
-- Tilby grunnleggende UI-komponenter og mønstre der tilgjengelighet og testing er ivaretatt.
-- Tilby dokumentasjon, retningslinjer og god praksis for UI-komponenter og mønstre
-- Koordinere og tilrettelegge for samarbeid mellom DevOps-team som bruker og bidrar til å utvikle designsystemet
-- Involvere andre offentlige aktører i samarbeidet
-- Skape en samarbeidsarena rundt designsystem og brukeropplevelse i Norge
-
+tags:
+- pg_portaler
+- stream-aligned
 ---
-
-**Les mer på [designsystemet.no](https://www.designsystemet.no)**

layouts/_default/_markup/render-image.html

@@ -1,6 +1,6 @@
 {{- if (and .Title .Text)  -}}
   <figure>
-    <a href="{{ .Destination | safeURL }}">
+    <a class="ds-link" href="{{ .Destination | safeURL }}">
         <img class="img-fluid" src="{{ .Destination | safeURL }}"
         {{- with .Text }} alt="{{ . }}"{{ end -}}
         {{- with .Title }} title="{{ . }}"{{ end -}}

layouts/_default/_markup/render-link.html

@@ -0,0 +1 @@
+<a class="ds-link" href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>

layouts/partials/components/accordion.html

@@ -1,36 +1,13 @@
 <!-- For usage example check out: layouts/brukeropplevelse-og-datadeling/team/list.html -->
 {{ $id := (now.UnixNano) | printf "%x" | replaceRE "[^a-zA-Z0-9]+" "" }}
 
-
-<div class="accordion" id="accordion-{{ $id }}">
-  <div class="accordion-item">
-    <h2 class="accordion-header" id="heading-{{ $id }}" style="margin: 0">
-      <button
-        class="accordion-button collapsed"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#collapse-{{ $id }}"
-        aria-expanded="true"
-        aria-controls="collapse-{{ $id }}"
-        style="color: #1E2B3C; background-color: #FAEEC2"
-      >
-        {{ $.title }}
-      </button>
-    </h2>
-    <div
-      id="collapse-{{ $id }}"
-      class="accordion-collapse collapse"
-      aria-labelledby="heading-{{ $id }}"
-      data-bs-parent="#accordion-{{ $id }}"
-    >
-      <div
-        class="row accordion-body d-flex justify-content-between"
-        style="box-sizing: border-box; word-wrap: break-word; background-color: #FFFFFF;"
-      >
-        <div class="col-12" style="word-wrap: break-word;">
-          {{ $.content | markdownify | safeHTML }}
-        </div>
-      </div>
+<div class="ds-card">
+  <details class="ds-details" data-variant="tinted">
+    <summary>
+      {{ $.title }}
+    </summary>
+    <div>
+      {{ $.content | markdownify | safeHTML }}
     </div>
-  </div>
+  </details>
 </div>

layouts/partials/components/breadcrumbs.html

@@ -1,16 +1,20 @@
-<div class="container breadcrumb">
-  <ul id="breadcrumbs">
-    <li><a href="/">Baksia</a></li>
+<ds-breadcrumbs class="ds-breadcrumbs container">
+  <ol id="breadcrumbs">
+    <li><a href="/" class="ds-link">Baksia</a></li>
     {{- range .Ancestors.Reverse }}
       {{ if not .IsHome }}
-      <li><a href="{{ .RelPermalink }}">{{ humanize (index (split .RelPermalink "/") (sub (len (split .RelPermalink "/")) 2)) }}</a></li>
+      <li><a href="{{ .RelPermalink }}" class="ds-link">{{ humanize (index (split .RelPermalink "/") (sub (len (split .RelPermalink "/")) 2)) }}</a></li>
       {{- end }}
     {{- end }}
 
-    {{ if .Params.linktitle }}
-      <li>{{ .Params.linktitle }}</li>
-    {{ else }}
-      <li>{{ humanize (index (split .RelPermalink "/") (sub (len (split .RelPermalink "/")) 2)) }}</li>
-    {{ end }}
-  </ul>
-</div>
+    <li>
+      <a href="{{ .RelPermalink }}" class="ds-link" aria-current="page" style="text-decoration: none;">
+        {{ if .Params.linktitle }}
+          {{ .Params.linktitle }}
+        {{ else }}
+          {{ humanize (index (split .RelPermalink "/" ) (sub (len (split .RelPermalink "/")) 2)) }}
+        {{ end }}
+      </a>
+    </li>
+  </ol>
+</ds-breadcrumbs>

layouts/partials/layout/footer.html

@@ -1,5 +1,4 @@
 <footer class="footer component">
-    {{ partial "components/figures" . }}
     <div class="container">
         <div class="row">
             <div class="col-lg-4">