@forsakringskassan/docs-generator 1.32.0 → 1.33.0

package/dist/style/core.css

@@ -1,10 +1,16 @@
 @charset "UTF-8";
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:root {
+  --docs-breakpoint-sm: 640px;
+  --docs-breakpoint-md: 1024px;
+  --docs-breakpoint-lg: 1280px;
+}
+
+h1:not(.code-preview h1),
+h2:not(.code-preview h2),
+h3:not(.code-preview h3),
+h4:not(.code-preview h4),
+h5:not(.code-preview h5),
+h6:not(.code-preview h6) {
   font-family: var(--docs-heading-font-family);
   font-weight: var(--docs-heading-font-weight);
   line-height: var(--docs-heading-line-height);
@@ -53,7 +59,7 @@ h6 {
   margin-top: 2rem;
 }
 
-@media (width >= 640px) {
+@media (width <= 640px) {
   h1 {
     font-size: var(--f-font-size-h2);
   }
@@ -152,7 +158,7 @@ main {
   padding-right: 2rem;
   grid-template: "sidenav title" auto "sidenav aside" auto "sidenav content" 1fr/min-content 1fr;
 }
-@media screen and (width >= 1024px) {
+@media screen and (width >= 1280px) {
   .layout--content-with-menu #primary,
   .layout--pattern #primary,
   .layout--component #primary {
@@ -286,18 +292,43 @@ main {
 
 #outline {
   margin-bottom: 1rem;
-  display: none;
-  position: sticky;
-  top: 1rem;
-  padding-right: 1rem;
-  max-height: calc(100vh - 2rem);
-  overflow-y: auto;
-  max-width: 15rem;
-  scrollbar-width: thin;
+}
+#outline summary {
+  display: flex;
 }
 @media (width >= 1280px) {
   #outline {
-    display: block;
+    position: sticky;
+    top: 1rem;
+    padding: 0.25rem 1rem 0.25rem 0.25rem;
+    overflow-y: auto;
+    max-height: calc(100vh - 2rem);
+    max-width: 15rem;
+    scrollbar-width: thin;
+  }
+  #outline summary {
+    pointer-events: none;
+    cursor: text;
+  }
+}
+@media (width < 1280px) {
+  #outline summary {
+    width: min-content;
+    cursor: pointer;
+  }
+  #outline summary::after {
+    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZD0iTTQ2Ny42NTggMTk2LjkxM0wyODMuNjU2IDM3Mi45MDdDMjc1LjkyMiAzODAuMzEzIDI2NS45NTMgMzg0IDI1NiAzODRDMjQ2LjA0NyAzODQgMjM2LjA3OCAzODAuMzEzIDIyOC4zNDQgMzcyLjkwN0w0NC4zNDIgMTk2LjkxM0MyOC4zODkgMTgxLjYzMyAyNy44MjYgMTU2LjMyMSA0My4wOTIgMTQwLjM1M0M1OC4zNzMgMTI0LjM1NCA4My42ODYgMTIzLjg1NCA5OS42NTUgMTM5LjEwM0wyNTYgMjg4LjY2TDQxMi4zNDUgMTM5LjEwM0M0MjguMzE0IDEyMy44MjIgNDUzLjYyNyAxMjQuMzg1IDQ2OC45MDggMTQwLjM1M0M0ODQuMTc0IDE1Ni4zMjEgNDgzLjYxMSAxODEuNjMzIDQ2Ny42NTggMTk2LjkxM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K");
+    transform: translateY(3px);
+    transition: all 200ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
+    margin-left: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    display: inline;
+  }
+  #outline[open] > summary::after {
+    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZD0iTTQ2Ny42NTggMTk2LjkxM0wyODMuNjU2IDM3Mi45MDdDMjc1LjkyMiAzODAuMzEzIDI2NS45NTMgMzg0IDI1NiAzODRDMjQ2LjA0NyAzODQgMjM2LjA3OCAzODAuMzEzIDIyOC4zNDQgMzcyLjkwN0w0NC4zNDIgMTk2LjkxM0MyOC4zODkgMTgxLjYzMyAyNy44MjYgMTU2LjMyMSA0My4wOTIgMTQwLjM1M0M1OC4zNzMgMTI0LjM1NCA4My42ODYgMTIzLjg1NCA5OS42NTUgMTM5LjEwM0wyNTYgMjg4LjY2TDQxMi4zNDUgMTM5LjEwM0M0MjguMzE0IDEyMy44MjIgNDUzLjYyNyAxMjQuMzg1IDQ2OC45MDggMTQwLjM1M0M0ODQuMTc0IDE1Ni4zMjEgNDgzLjYxMSAxODEuNjMzIDQ2Ny42NTggMTk2LjkxM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K");
+    transform: rotate(180deg) translateY(-5px);
+    transition: all 200ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
   }
 }
 #outline::-webkit-scrollbar {

package/dist/style/index.css

@@ -1,10 +1,16 @@
 @charset "UTF-8";
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:root {
+  --docs-breakpoint-sm: 640px;
+  --docs-breakpoint-md: 1024px;
+  --docs-breakpoint-lg: 1280px;
+}
+
+h1:not(.code-preview h1),
+h2:not(.code-preview h2),
+h3:not(.code-preview h3),
+h4:not(.code-preview h4),
+h5:not(.code-preview h5),
+h6:not(.code-preview h6) {
   font-family: var(--docs-heading-font-family);
   font-weight: var(--docs-heading-font-weight);
   line-height: var(--docs-heading-line-height);
@@ -53,7 +59,7 @@ h6 {
   margin-top: 2rem;
 }
 
-@media (width >= 640px) {
+@media (width <= 640px) {
   h1 {
     font-size: var(--f-font-size-h2);
   }
@@ -152,7 +158,7 @@ main {
   padding-right: 2rem;
   grid-template: "sidenav title" auto "sidenav aside" auto "sidenav content" 1fr/min-content 1fr;
 }
-@media screen and (width >= 1024px) {
+@media screen and (width >= 1280px) {
   .layout--content-with-menu #primary,
   .layout--pattern #primary,
   .layout--component #primary {
@@ -286,18 +292,43 @@ main {
 
 #outline {
   margin-bottom: 1rem;
-  display: none;
-  position: sticky;
-  top: 1rem;
-  padding-right: 1rem;
-  max-height: calc(100vh - 2rem);
-  overflow-y: auto;
-  max-width: 15rem;
-  scrollbar-width: thin;
+}
+#outline summary {
+  display: flex;
 }
 @media (width >= 1280px) {
   #outline {
-    display: block;
+    position: sticky;
+    top: 1rem;
+    padding: 0.25rem 1rem 0.25rem 0.25rem;
+    overflow-y: auto;
+    max-height: calc(100vh - 2rem);
+    max-width: 15rem;
+    scrollbar-width: thin;
+  }
+  #outline summary {
+    pointer-events: none;
+    cursor: text;
+  }
+}
+@media (width < 1280px) {
+  #outline summary {
+    width: min-content;
+    cursor: pointer;
+  }
+  #outline summary::after {
+    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZD0iTTQ2Ny42NTggMTk2LjkxM0wyODMuNjU2IDM3Mi45MDdDMjc1LjkyMiAzODAuMzEzIDI2NS45NTMgMzg0IDI1NiAzODRDMjQ2LjA0NyAzODQgMjM2LjA3OCAzODAuMzEzIDIyOC4zNDQgMzcyLjkwN0w0NC4zNDIgMTk2LjkxM0MyOC4zODkgMTgxLjYzMyAyNy44MjYgMTU2LjMyMSA0My4wOTIgMTQwLjM1M0M1OC4zNzMgMTI0LjM1NCA4My42ODYgMTIzLjg1NCA5OS42NTUgMTM5LjEwM0wyNTYgMjg4LjY2TDQxMi4zNDUgMTM5LjEwM0M0MjguMzE0IDEyMy44MjIgNDUzLjYyNyAxMjQuMzg1IDQ2OC45MDggMTQwLjM1M0M0ODQuMTc0IDE1Ni4zMjEgNDgzLjYxMSAxODEuNjMzIDQ2Ny42NTggMTk2LjkxM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K");
+    transform: translateY(3px);
+    transition: all 200ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
+    margin-left: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    display: inline;
+  }
+  #outline[open] > summary::after {
+    content: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZD0iTTQ2Ny42NTggMTk2LjkxM0wyODMuNjU2IDM3Mi45MDdDMjc1LjkyMiAzODAuMzEzIDI2NS45NTMgMzg0IDI1NiAzODRDMjQ2LjA0NyAzODQgMjM2LjA3OCAzODAuMzEzIDIyOC4zNDQgMzcyLjkwN0w0NC4zNDIgMTk2LjkxM0MyOC4zODkgMTgxLjYzMyAyNy44MjYgMTU2LjMyMSA0My4wOTIgMTQwLjM1M0M1OC4zNzMgMTI0LjM1NCA4My42ODYgMTIzLjg1NCA5OS42NTUgMTM5LjEwM0wyNTYgMjg4LjY2TDQxMi4zNDUgMTM5LjEwM0M0MjguMzE0IDEyMy44MjIgNDUzLjYyNyAxMjQuMzg1IDQ2OC45MDggMTQwLjM1M0M0ODQuMTc0IDE1Ni4zMjEgNDgzLjYxMSAxODEuNjMzIDQ2Ny42NTggMTk2LjkxM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K");
+    transform: rotate(180deg) translateY(-5px);
+    transition: all 200ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
   }
 }
 #outline::-webkit-scrollbar {
@@ -853,6 +884,13 @@ kbd {
   background-color: #f4f4f4;
 }
 
+.cookie-warning {
+  background: var(--docs-cookie-background-color);
+  border-bottom: 2px solid var(--docs-cookie-border-color);
+  display: none;
+  padding: 1rem 1.5rem 0;
+}
+
 :root {
   --docs-font-family: arial, "Helvetica Neue", sans-serif;
   --docs-font-weight: normal;
@@ -869,6 +907,8 @@ kbd {
   --docs-version-text-color: var(--docs-text-color-discrete);
   --docs-version-link-color: var(--docs-text-color-discrete);
   --docs-version-hover-color: var(--docs-text-color-default);
+  --docs-cookie-background-color: #f5f6fa;
+  --docs-cookie-border-color: #4a52b6;
 }
 
 *,

package/dist/style/site.css

@@ -1,3 +1,10 @@
+.cookie-warning {
+  background: var(--docs-cookie-background-color);
+  border-bottom: 2px solid var(--docs-cookie-border-color);
+  display: none;
+  padding: 1rem 1.5rem 0;
+}
+
 :root {
   --docs-font-family: arial, "Helvetica Neue", sans-serif;
   --docs-font-weight: normal;
@@ -14,6 +21,8 @@
   --docs-version-text-color: var(--docs-text-color-discrete);
   --docs-version-link-color: var(--docs-text-color-discrete);
   --docs-version-hover-color: var(--docs-text-color-default);
+  --docs-cookie-background-color: #f5f6fa;
+  --docs-cookie-border-color: #4a52b6;
 }
 
 *,
@@ -76,6 +85,12 @@ textarea {
   margin: 0;
 }
 
+:root {
+  --docs-breakpoint-sm: 640px;
+  --docs-breakpoint-md: 1024px;
+  --docs-breakpoint-lg: 1280px;
+}
+
 .version {
   color: var(--docs-text-color-discrete);
   text-wrap: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-generator",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Documentation generator",
   "keywords": [
     "documentation"
@@ -13,6 +13,7 @@
   "license": "MIT",
   "author": "Försäkringskassan",
   "sideEffects": [
+    "dist/runtime-bootstrap.js",
     "dist/runtime.js",
     "src/runtime/**/*"
   ],

package/templates/base.template.html

@@ -81,6 +81,7 @@
                 {%- endfor -%}
 
                 <main>
+                    <!-- [html-validate-disable-next heading-level, no-unused-disable -- allowed sectioning root] -->
                     <h1 id="title">{{ doc.attributes.title }}</h1>
                     {% set arr = ['component', 'pattern'] %} {% if doc.attributes.layout in arr %}
                     <div id="aside">
@@ -88,14 +89,17 @@
                         {%- block aside %}
                         {%- endblock %}
 
-                        <div id="outline">
-                            <h2 class="outline__heading">Innehåll</h2>
+
+                        {% if doc.outline | length %}
+                        <details id="outline">
+                            <summary class="outline__heading">Innehåll</summary>
                             <ul>
                                 {% for heading in doc.outline %}
                                 <li><a href="#{{ heading.anchor }}">{{ heading.title | escape }}</a></li>
                                 {% endfor %}
                             </ul>
-                        </div>
+                        </details>
+                        {% endif %}
                     </div>
                     {% endif %}
 

package/templates/partials/cookie-warning.html

@@ -0,0 +1,19 @@
+<div class="cookie-warning">
+    <!-- [html-validate-disable-next heading-level, no-unused-disable -- allowed sectioning root] -->
+    <h1>Kakor på webbplatsen</h1>
+    <p>
+        Vi använder kakor (cookies) för att webbplatsen ska fungera så bra som möjligt för dig.<br />
+        Vi använder också kakor för webbanalys för att göra webbplatsen bättre.
+    </p>
+    <p>Godkänner du att vi också använder kakor för webbanalys?</p>
+
+    <div class="button-group">
+        <button id="consent-all-button" class="button button-group__item button--primary" type="button">
+            Ja, jag godkänner alla kakor
+        </button>
+
+        <button id="consent-functional-button" class="button button-group__item button--secondary" type="button">
+            Nej, jag godkänner bara nödvändiga kakor
+        </button>
+    </div>
+</div>

package/templates/partials/matomo.html

@@ -1,29 +1,33 @@
 <script>
     (() => {
-        const allowedHostnames = {{ hostname | json }};
-        if (allowedHostnames.length === 0 || allowedHostnames.includes(location.hostname)) {
-            /* Matomo */
-            var _paq = (window._paq = window._paq || []);
-            _paq.push(["setAPIUrl", "{{ apiUrl }}"]);
-            _paq.push(["trackPageView"]);
-            _paq.push(["enableLinkTracking"]);
-            (function () {
-                var u = "{{ trackerUrl }}";
-                _paq.push(["setTrackerUrl", u + "matomo.php"]);
-                _paq.push(["setSiteId", "{{ siteId }}"]);
-                var d = document,
-                    g = d.createElement("script"),
-                    s = d.getElementsByTagName("script")[0];
-                g.async = true;
-                g.src = u + "matomo.js";
-                s.parentNode.insertBefore(g, s);
-            })();
-            /* End Matomo Code */
-        } else {
-            console.error(
-                "Matomo analytics disabled as we are not running on one of the configured hostnames",
-                allowedHostnames,
-            );
-        }
+        withCookieConsent(() =>  {
+            const allowedHostnames = {{ hostname | json }};
+            if (allowedHostnames.length === 0 || allowedHostnames.includes(location.hostname)) {
+                /* Matomo */
+                var _paq = (window._paq = window._paq || []);
+                {% if apiUrl %}
+                    _paq.push(["setAPIUrl", "{{ apiUrl }}"]);
+                {% endif %}
+                _paq.push(["trackPageView"]);
+                _paq.push(["enableLinkTracking"]);
+                (function () {
+                    var u = "{{ trackerUrl }}";
+                    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+                    _paq.push(["setSiteId", "{{ siteId }}"]);
+                    var d = document,
+                        g = d.createElement("script"),
+                        s = d.getElementsByTagName("script")[0];
+                    g.async = true;
+                    g.src = u + "matomo.js";
+                    s.parentNode.insertBefore(g, s);
+                })();
+                /* End Matomo Code */
+            } else {
+                console.error(
+                    "Matomo analytics disabled as we are not running on one of the configured hostnames",
+                    allowedHostnames,
+                );
+            }
+        });
     })();
 </script>