@forsakringskassan/docs-generator 2.38.4 → 2.38.5

package/dist/style/site.css

@@ -232,6 +232,55 @@ textarea {
   display: none;
   padding: 1rem 1.5rem 0;
 }
+.cookie-warning__button-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  margin-top: 0.25rem;
+}
+.cookie-warning__button {
+  border: 2px solid transparent;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  font-weight: 600;
+  letter-spacing: 0.01rem;
+  line-height: 1.5rem;
+  max-width: 100%;
+  width: 100%;
+  text-align: center;
+  transition: background-color 350ms ease-out;
+  padding: 1rem 1.5rem;
+}
+@media (width >= 768px) {
+  .cookie-warning__button {
+    max-width: none;
+    width: auto;
+  }
+}
+.cookie-warning__button:active, .cookie-warning__button:focus {
+  outline: 3px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
+}
+.cookie-warning__button--primary {
+  background-color: #4a52b6;
+  border-color: transparent;
+  color: #fff;
+}
+.cookie-warning__button--primary:hover, .cookie-warning__button--primary:active, .cookie-warning__button--primary:focus {
+  background-color: #3b4292;
+}
+.cookie-warning__button--secondary {
+  background-color: #f5f6fa;
+  border-color: #4a52b6;
+  color: #4a52b6;
+}
+.cookie-warning__button--secondary:hover, .cookie-warning__button--secondary:active, .cookie-warning__button--secondary:focus {
+  background-color: #e5e5f5;
+}
 
 .docs-motd {
   padding: 1.5rem;
@@ -277,6 +326,204 @@ textarea {
   --docs-breakpoint-lg: 1280px;
 }
 
+.docs-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.docs-modal__title {
+  color: #1b1e23;
+  font-size: 1.5rem;
+  letter-spacing: initial;
+}
+.docs-modal__close {
+  align-items: center;
+  background: inherit;
+  border: none;
+  color: #1b1e23;
+  cursor: pointer;
+  display: flex;
+  font-weight: 700;
+  gap: 0.5rem;
+  margin: 0.375rem;
+  padding: 0.125rem 0.625rem;
+}
+.docs-modal__close .icon {
+  min-width: 1rem;
+}
+.docs-modal::backdrop {
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(5px);
+}
+
+.docs-modal-active {
+  overflow: hidden;
+}
+
+/* reset broken FKUI reset */
+dialog {
+  display: none;
+}
+dialog[open] {
+  display: block;
+}
+
+kbd {
+  border: 1px solid #bbbbbd;
+  color: var(--docs-text-color-discrete);
+  padding: 0.1rem 0.5rem;
+  border-radius: 6px;
+  font-family: var(--docs-font-family);
+}
+
+#search button {
+  background: transparent;
+  color: var(--docs-text-color-discrete);
+  border-radius: 4px;
+  border: 0;
+  box-shadow: none;
+  cursor: text;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  width: 100%;
+}
+
+#search button:hover {
+  cursor: pointer;
+  background-color: var(--docs-search-button-color-hover);
+}
+
+#search button:focus-visible {
+  border-radius: 0;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
+  outline: 3px solid transparent;
+}
+
+#search .search__icon {
+  display: inline-block;
+  height: 1rem;
+  margin-right: 0.5rem;
+  max-height: 100%;
+  max-width: 100%;
+  pointer-events: none;
+  width: 1rem;
+}
+
+#search-dialog {
+  --docs-text-color-default: var(--docs-search-text-color);
+  margin-top: 80px;
+  background: var(--docs-search-background-color);
+  border: 1px solid var(--docs-search-border-color);
+  color: var(--docs-text-color-default);
+  width: 580px;
+}
+
+.docs-search-dialog__input {
+  background-color: #fff;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  border: 2px solid #8d8e91;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  width: 100%;
+  margin: 0 0 1.5rem;
+}
+.docs-search-dialog__input:focus {
+  border-radius: 0;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
+  outline: 3px solid transparent;
+}
+.docs-search-dialog__input::-ms-clear {
+  display: none;
+}
+.docs-search-dialog__input::-webkit-search-decoration, .docs-search-dialog__input::-webkit-search-cancel-button, .docs-search-dialog__input::-webkit-search-results-button, .docs-search-dialog__input::-webkit-search-results-decoration {
+  appearance: none;
+}
+
+.docs-search-result__list {
+  overflow-y: auto;
+  max-height: 60vh;
+  margin: 0.5rem 0 1.5rem;
+  padding: 0.2rem;
+}
+.docs-search-result__item {
+  display: flex;
+  border: 2px solid #8d8e91;
+  background: #fff;
+}
+.docs-search-result__item:not(:last-child) {
+  border-bottom: none;
+}
+.docs-search-result__item:focus-within .docs-search-result__item:hover {
+  background-color: #e5e5e5;
+  cursor: pointer;
+}
+.docs-search-result__item--active {
+  background-color: #e5e5e5;
+}
+.docs-search-result__link {
+  width: 100%;
+  padding: 1.25rem;
+  text-decoration: none;
+  color: var(--docs-text-color-default);
+}
+.docs-search-result__link, .docs-search-result__link:visited {
+  color: var(--docs-text-color-default);
+  text-decoration: none;
+}
+.docs-search-result__link:focus-visible {
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
+  outline: 3px solid transparent;
+}
+
+#version button {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  margin: 0;
+  color: #5f6165;
+  text-decoration-color: #5f6165;
+}
+#version button:hover {
+  background-color: #f4f4f4;
+}
+
+#version-dialog {
+  width: 30rem;
+  max-height: 80vh;
+  background: var(--docs-version-background-color);
+  border: 1px solid var(--docs-version-border-color);
+  color: var(--docs-text-color-default);
+}
+
+.docs-selectable-version__list {
+  margin: 0 0 1.5rem;
+  padding-left: 0;
+}
+.docs-selectable-version__item {
+  display: flex;
+  border: 2px solid #8d8e91;
+  background: #fff;
+}
+.docs-selectable-version__item:not(:last-child) {
+  border-bottom: none;
+}
+.docs-selectable-version__item:focus-within, .docs-selectable-version__item:hover {
+  background: #e5e5f5;
+  cursor: pointer;
+}
+.docs-selectable-version__link {
+  width: 100%;
+  padding: 0.2rem;
+  text-decoration: none;
+  color: var(--docs-text-color-default);
+}
+.docs-selectable-version__link:focus-visible {
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff;
+  outline: 3px solid transparent;
+}
+
 .version {
   color: var(--docs-text-color-discrete);
   text-wrap: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-generator",
-  "version": "2.38.4",
+  "version": "2.38.5",
   "description": "Documentation generator",
   "keywords": [
     "documentation"

package/templates/partials/cookie-warning.html

@@ -1,19 +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>
+    <h1>{{ $t('cookie-warning.title') }}</h1>
+    <p>{{ $t('cookie-warning.message') }}</p>
+    <p>{{ $t('cookie-warning.accept') }}</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
+    <div class="cookie-warning__button-group">
+        <button id="consent-all-button" class="cookie-warning__button cookie-warning__button--primary" type="button">
+            {{ $t('cookie-warning.consent-all') }}
         </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
+            id="consent-functional-button"
+            class="cookie-warning__button cookie-warning__button--secondary"
+            type="button"
+        >
+            {{ $t('cookie-warning.consent-functional') }}
         </button>
     </div>
 </div>

package/templates/partials/search-dialog.html

@@ -1,25 +1,35 @@
-<dialog id="search-dialog">
+<dialog class="docs-modal" id="search-dialog">
+    <div class="docs-modal__header">
+        <h1 class="docs-modal__title" id="search-dialog-title">{{ $t('search.title') }}</h1>
+        <button type="button" class="docs-modal__close">
+            <span>{{ $t('modal.close') }}</span>
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use xlink:href="#docs-icon-close"></use>
+            </svg>
+        </button>
+    </div>
+
     <!-- [html-validate-disable-next wcag/h32 -- handled via script] -->
-    <form id="search-form">
-        <div class="text-field">
-            <label for="search-field" class="label">{{ $t('search.title') }}</label>
-            <div class="text-field__input-wrapper">
-                <div class="text-field__icon-wrapper">
-                    <input
-                        autofocus
-                        autocomplete="off"
-                        autocapitalize="off"
-                        autocorrect="off"
-                        id="search-field"
-                        type="text"
-                        class="text-field__input"
-                        maxlength="50"
-                        placeholder="{{ $t('search.placeholder') }}"
-                    />
-                </div>
-            </div>
-        </div>
-        <div id="search-results"></div>
+    <form class="docs-modal__body" id="search-form">
+        <input
+            autofocus
+            autocomplete="off"
+            autocapitalize="off"
+            autocorrect="off"
+            id="search-field"
+            type="search"
+            class="docs-search-dialog__input"
+            maxlength="50"
+            placeholder="{{ $t('search.placeholder') }}"
+            aria-labelledby="search-dialog-title"
+        />
+        <ul class="docs-search-result__list" id="search-results"></ul>
         <p>{{ $t('search.instructions') }}</p>
     </form>
 </dialog>
+
+<template id="search-result-item">
+    <li class="docs-search-result__item">
+        <a class="docs-search-result__link"></a>
+    </li>
+</template>

package/templates/partials/selectable-version.html

@@ -1,28 +1,7 @@
 <div class="toolbar__item">
     <form id="version">
         <button type="submit" class="anchor">
-            <span id="version-info" class="version"> Byt version </span>
+            <span id="version-info" class="version">{{ $t("selectable-version.button") }} </span>
         </button>
     </form>
-
-    <dialog id="version-dialog">
-        <div id="version-dialog-head">
-            <h1>Välj version</h1>
-            <button type="button" class="button button--discrete button--discrete--black">
-                <span>Stäng</span>
-                <svg class="button__icon icon" focusable="false" aria-hidden>
-                    <use xlink:href="#docs-icon-close"></use>
-                </svg>
-            </button>
-        </div>
-        <div id="version-list">
-            <p>Var god vänta, laddar versionsdata...</p>
-        </div>
-    </dialog>
 </div>
-
-<template id="version-list-item">
-    <li class="list__item">
-        <a class="list__item__itempane">template</a>
-    </li>
-</template>

package/templates/partials/version-modal.html

@@ -0,0 +1,20 @@
+<dialog class="docs-modal" id="version-dialog">
+    <div class="docs-modal__header">
+        <h1 class="docs-modal__title">{{ $t("selectable-version.title") }}</h1>
+        <button type="button" class="docs-modal__close">
+            <span>{{ $t("modal.close") }}</span>
+            <svg class="icon" focusable="false" aria-hidden="true">
+                <use xlink:href="#docs-icon-close"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="docs-modal__body" id="version-list">
+        <p>{{ $t("selectable-version.loading") }}</p>
+    </div>
+</dialog>
+
+<template id="version-list-item">
+    <li class="docs-selectable-version__item">
+        <a class="docs-selectable-version__link"></a>
+    </li>
+</template>