@erst-vg/dkfds-vite 8.0.1

package/src/components/overflow-menu/overflow-menu.njk

@@ -0,0 +1,13 @@
+ {% macro overflowmenu(params) %}
+ {% set openRight = params.openRight | default(true) %}
+ {% set icon = params.button.icon | default('more-vert') %}
+    <div class="overflow-menu {% if openRight %} overflow-menu--open-right{% else %} overflow-menu--open-left{% endif %}">
+        <button class="button-overflow-menu js-dropdown {% if params.doResponsiveCollapse %} js-dropdown--responsive-collapse {% endif %}" data-js-target="{{ params.id }}" aria-haspopup="true" aria-expanded="false">
+            {% if params.button.srOnly %}<span class="sr-only">{% endif %}{{ params.button.text }}{% if params.button.srOnly %}</span>{% endif %}
+            {% if icon %}<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#{{ icon }}"></use></svg>{% endif %}
+        </button>
+        <div class="overflow-menu-inner" id="{{ params.id }}" aria-hidden="true">
+            {{ params.content | safe }}
+        </div>
+    </div>
+{% endmacro %}

package/src/components/overflow-menu/overflow-menu.yaml

@@ -0,0 +1,33 @@
+params:
+- name: openRight
+  type: boolean
+  required: false
+  description: Opens the overflow menu on the right on true. Left on false. Default is true.
+- name: doResponsiveCollapse
+  type: boolean
+  required: false
+  description: 
+- name: button
+  type: object
+  required: true
+  description: Text on button.
+  - name: text
+    type: string
+    required: true
+    description: Text on button.
+  - name: srOnly
+    type: boolean
+    required: false
+    description: Hide text on button except for screenreaders.
+  - name: icon
+    type: string
+    required: true
+    description: Icon to use on button.
+- name: id
+  type: string
+  required: true
+  description: Id of the drop down element.
+- name: content
+  type: string
+  required: true
+  description: Id of the drop down element. Allows HTML.

package/src/components/pagination/pagination.njk

@@ -0,0 +1,78 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{% macro pagination(params) %}
+<nav class="pagination"{% if params.id %} id="{{ params.id }}"{% endif %}{% if params.ariaLabel %} aria-label="{{ params.ariaLabel }}"{% endif %}>
+    <a href="#" class="button button-arrow button-first{% if params.currentPage == 1 %} hidden{% endif %}">{{ icon_svg({"name": "first-page"}) }}<span class="sr-only">Første side</span></a>
+    <a href="#" class="button button-arrow button-previous{% if params.currentPage == 1 %} hidden{% endif %}" aria-label="Forrige side">
+        {{ icon_svg({"name": "chevron-left"}) }}<span class="pagination-nav-link">{{ params.previousName | default('Forrige') }}</span>
+    </a>
+    <span class="pagination-mobile">Side {{ params.currentPage }} af {{ params.totalPages }}</span>
+    <ul class="pagination__items">{% if params.totalPages > 7 %}{% if params.currentPage < 5 %}
+                {% for i in range(1, 6) %}
+                    {% if i == params.currentPage %}
+                    <li class="pagination-item pagination-number">
+                        <a href="#" class="button current-page" aria-label='{{ "Side " + i }}' aria-current="page">{{ i }}</a>
+                    </li>
+                    {% else %}
+                    <li class="pagination-item pagination-number">
+                        <a href="#" class="button button-secondary" aria-label='{{ "Side " + i }}'>{{ i }}</a>
+                    </li>
+                    {% endif %}
+                {% endfor %}<li class="pagination-item pagination-overflow" role="presentation">
+                    <span>...</span>
+                </li>
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='{{ "Sidste side, side " + params.totalPages }}'>{{ params.totalPages }}</a>
+                </li>
+            {% elseif params.currentPage + 4 > params.totalPages %}
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='Side 1'>1</a>
+                </li>
+                <li class="pagination-item pagination-overflow" role="presentation">
+                    <span>...</span>
+                </li>
+                {% for i in range(params.totalPages - 4, params.totalPages + 1) %}
+                    {% if i == params.currentPage %}
+                    <li class="pagination-item pagination-number">
+                        <a href="#" class="button current-page" aria-label='{{ "Side " + i }}' aria-current="page">{{ i }}</a>
+                    </li>
+                    {% else %}
+                    <li class="pagination-item pagination-number">
+                        <a href="#" class="button button-secondary" aria-label='{{ "Side " + i }}'>{{ i }}</a>
+                    </li>{% endif %}{% endfor %}
+            {% else %}
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='Side 1'>1</a>
+                </li>
+                <li class="pagination-item pagination-overflow" role="presentation">
+                    <span>...</span>
+                </li>
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='{{ "Side " + (params.currentPage - 1) }}'>{{ params.currentPage - 1 }}</a>
+                </li>
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button current-page" aria-label='{{ "Side " + params.currentPage }}' aria-current="page">{{ params.currentPage }}</a>
+                </li>
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='{{ "Side " + (params.currentPage + 1) }}'>{{ params.currentPage + 1 }}</a>
+                </li>
+                <li class="pagination-item pagination-overflow" role="presentation">
+                    <span>...</span>
+                </li>
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='{{ "Sidste side, side " + (params.totalPages) }}'>{{ params.totalPages }}</a>
+                </li>{% endif %}{% else %}
+            {% for i in range(1, params.totalPages + 1) %}
+                {% if i == params.currentPage %}
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button current-page" aria-label='{{ "Side " + i }}' aria-current="page">{{ i }}</a>
+                </li>
+                {% else %}
+                <li class="pagination-item pagination-number">
+                    <a href="#" class="button button-secondary" aria-label='{{ "Side " + i }}'>{{ i }}</a>
+                </li>{% endif %}{% endfor %}{% endif %}</ul>
+    <a href="#" class="button button-arrow button-next{% if params.currentPage == params.totalPages %} hidden{% endif %}" aria-label="Næste side">
+        <span class="pagination-nav-link">{{ params.nextName | default('Næste') }}</span>{{ icon_svg({"name": "chevron-right"}) }}
+    </a>
+    <a href="#" class="button button-arrow button-last{% if params.currentPage == params.totalPages %} hidden{% endif %}">{{ icon_svg({"name": "last-page"}) }}<span class="sr-only">Sidste side</span></a>
+</nav>
+{% endmacro %}

package/src/components/pagination/pagination.yaml

@@ -0,0 +1,25 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: The ID of the pagination container.
+- name: ariaLabel
+  type: string
+  required: false
+  description: The description of the pagination.
+- name: totalPages
+  type: int
+  required: true
+  description: Total number of pages.
+- name: currentPage
+  type: int
+  required: true
+  description: The number of the current page displayed.
+- name: previousName
+  type: string
+  required: false
+  description: The name of the previous page button, defaults to 'Forrige'.
+- name: nextName
+  type: string
+  required: false
+  description: The name of the next page button, defaults to 'Næste'.

package/src/components/side-navigation/sidenav.njk

@@ -0,0 +1,11 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+
+{% macro nav_list(params) %}
+{% for item in params.links %}<li{% if item.current or item.active or item.isAnchorLinks %} class="{% if item.current %}current{% endif %} {% if item.active %}{% if item.current %} {% endif %}active{% endif %} {% if item.isAnchorLinks %}{% if item.current or item.active %} {% endif %}has-anchor-links{% endif %}"{% endif %} role="none">
+  <a href="{{ item.href | default('#')}}" role="menuitem" {% if item.current %}aria-current="true"{% endif %} {% if item.active %}aria-current="page"{% endif %}>
+    {% if item.iconbefore %}<span class="sidenav-icon-before">{{ icon_svg({"name": item.iconbefore}) }} </span>{% endif %}{{ item.text }}{% if item.information %} <span class="sidenav-information">{{item.information}}</span>{% endif %}
+  </a>
+  {% if item.current and item.links %}<ul class="{{ params.subclass }}" role="menu">{{ nav_list({"links":item.links, "subclass": params.subclass}) }}</ul>{% endif %}
+  {% if item.active and item.links %}<ul class="{{ params.subclass }}" role="menu">{{ nav_list({"links":item.links, "subclass": params.subclass}) }}</ul>{% endif %}
+</li>{% endfor %}
+{% endmacro %}

package/src/components/side-navigation/sidenav.yaml

@@ -0,0 +1,41 @@
+params:
+- name: subclass
+  type: string
+  required: true
+  description: Classes on sublists (ul element)
+- name: links
+  type: array
+  required: true
+  description: List of links.
+  - name: text
+    type: string
+    required: true
+    description: Link text
+  - name: href
+    type: string
+    required: true
+    description: Link url
+  - name: current
+    type: boolean
+    required: false
+    description: Is link current (parent or actual page)?
+  - name: active
+    type: boolean
+    required: false
+    description: Is link active page?
+  - name: information
+    type: string
+    required: false
+    description: Additional text information on link
+  - name: iconbefore
+    type: string
+    required: false
+    description: Icon on link.
+  - name: isAnchorLinks
+    type: boolean
+    required: false
+    description: Is this a list of internal page links?
+  - name: links
+    type: array
+    required: false
+    description: Link array containing links.

package/src/components/side-navigation/stepguide.njk

@@ -0,0 +1,23 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+
+{% macro stepguide(params) %}
+<nav>
+  <ul class="sidenav-list" role="menu">
+    {% for trin in params.steps %}
+      {% set disabled = trin.disabled | default(false) %}
+      <li{% if disabled or trin.active %} class="{% if disabled %}disabled{% endif %} {% if trin.active %}active current{% endif %}"{% endif %} role="none">
+        <a {% if not disabled %}href="{{trin.href}}" {% endif %}role="menuitem" {% if trin.active %}aria-current="page"{% endif %}{% if trin.active %} aria-current="page"{% endif %}>
+            <span class="sidenav-number">{{loop.index}}.</span> <span class="sidenav-title">{{trin.text}}</span>
+            {% if trin.icon %}
+            <span class="sidenav-icon{%if trin.iconclass %} {{ trin.iconclass }}{% endif %}">
+                {{ icon_svg(trin.icon) }}
+            </span>
+            {% endif %}
+            {% if trin.information %}
+                <span class="sidenav-information">{{trin.information}}</span>
+            {% endif %}
+        </a>
+      </li>{% endfor %}
+  </ul>
+</nav>
+{% endmacro %}

package/src/components/side-navigation/stepguide.yaml

@@ -0,0 +1,37 @@
+params:
+- name: subclass
+  type: string
+  required: true
+  description: Classes on sublists (ul element)
+- name: steps
+  type: array
+  required: true
+  description: List of steps.
+  - name: text
+    type: string
+    required: true
+    description: Link text
+  - name: href
+    type: string
+    required: true
+    description: Link url
+  - name: active
+    type: boolean
+    required: false
+    description: Is link active page?
+  - name: information
+    type: string
+    required: false
+    description: Additional text information on link
+  - name: icon
+    type: string
+    required: false
+    description: Icon object.
+  - name: iconclass
+    type: string
+    required: false
+    description: additional classes on sidenav-icon element.
+  - name: disabled
+    type: boolean
+    required: false
+    description: Is step disabled?

package/src/components/spinner/spinner.njk

@@ -0,0 +1,4 @@
+{% macro spinner(params) %}
+<div class="spinner"></div>
+<div class="spinner-status" role="status">{{ params.status | default('Arbejder') }}</div>
+{% endmacro %}

package/src/components/spinner/spinner.yaml

@@ -0,0 +1,5 @@
+params:
+- name: status
+  type: string
+  required: false
+  description: Text status of the spinner.

package/src/components/table/table.njk

@@ -0,0 +1,56 @@
+
+
+{% from "components/buttons/buttons.njk" import button as button %}
+{% macro table(params) %}
+
+{%- set unique = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50] | random -%}
+{%- set ariacontrols = "" -%}
+{%- for row in params.tbody -%}
+    {%- set ariacontrols = ariacontrols + " " + params.id+"-check-"+unique+"-"+loop.index -%}
+{%- endfor -%}
+<div class="table--responsive-scroll">
+    <table class="table table--selectable" id="{{params.id}}">
+        <thead>
+            <tr>
+            {%- if params.selectable -%}
+            <th>
+            <input id="{{params.id}}-check-{{unique}}-all" type="checkbox" class="form-checkbox" aria-controls="{{ariacontrols}}">
+            <label for="{{params.id}}-check-{{unique}}-all" aria-label="Vælg alle rækker"><span class="sr-only">Vælg alle rækker</span></label>
+            </th>
+            {%- endif -%}
+            {% for th in params.thead %}
+                <th>{{th}}</th>
+            {% endfor %}
+            </tr>
+        </thead>
+        
+        <tbody>
+            {% for row in params.tbody %}
+            <tr>
+                {%- if params.selectable -%}
+                <td><input id="{{params.id}}-check-{{unique}}-{{loop.index}}" type="checkbox" name="{{params.id}}-check[]" class="form-checkbox" value="{{row[0]}}">
+                    <label for="{{params.id}}-check-{{unique}}-{{loop.index}}" aria-label="Vælg række"><span class="sr-only">Vælg række</span></label>
+                </td>
+                {%- endif -%}
+                {% for td in row %}
+                <td>{{td | safe}}</td>
+                {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% if params.actions %}
+    <div class="table-actions">
+        <p class="table-selected-number no-selected">Vælg en eller flere rækker for at udføre funktioner</p>
+        {% for action in params.actions %}
+            {{ button(action) }}
+        {% endfor %}
+    </div>
+    {%- endif -%}
+</div>
+{% endmacro %}
+
+{% macro checkbox(id, label, name, value, controls) %}
+  <input id="{{id}}" type="checkbox"{% if name %}name="{{name}}"{% endif %} class="form-checkbox"{% if value %}value="{{value}}"{% endif %}{% if controls %} aria-controls="{{controls | trim}}"{% endif %} />
+  <label for="{{id}}" aria-label="{{label}}"></label>
+{% endmacro %}

package/src/components/table/table.yaml

@@ -0,0 +1,42 @@
+params:
+- name: selectable
+  type: boolean
+  required: false
+  description: Set to true if rows are selectable.
+- name: id
+  type: string
+  required: false
+  description: Id of the table.
+- name: thead
+  type: array
+  required: true
+  description: List of table headers.
+  - type: string
+    required: true
+    description: Table header
+- name: tbody
+  type: array
+  required: true
+  description: List of table rows.
+  - type: array
+    required: true
+    description: List of cell values.
+    - type: string
+      required: true
+      description: Cell value
+- name: actions
+  type: array
+  required: false
+  description: List of actions to take with selected rows.
+  - name: text
+    type: string
+    required: true
+    description: Text on action button.
+  - name: classes
+    type: string
+    required: true
+    description: Classes of action button.
+  - name: icon
+    type: string
+    required: false
+    description: Icon name of action button.

package/src/components/tabnav/tabnav.njk

@@ -0,0 +1,19 @@
+{% macro tabnav(params) %}
+<div class="tabnav" role="tablist">
+  {% for item in params.items %}
+    <button aria-controls="{{item.panel.id}}" id="{{item.button.id}}" class="tabnav-item" role="tab"
+      aria-selected="{{ item.active | default('false') }}">
+      <span>{{ item.button.text }}</span>
+    </button>
+    {%- set ariahidden = "true" -%}
+    {%- if item.active %}
+      {% set ariahidden = "false" %}
+    {% else -%}
+      {% set ariahidden = "true" %}
+    {% endif -%}
+     <section class="tabnav-panel" aria-hidden="{{ariahidden}}" role="tabpanel" tabindex="0" id="{{item.panel.id}}" aria-labelledby="{{item.button.id}}">
+        {{ item.panel.content | safe }}
+      </section>
+  {% endfor %}
+</div>
+{% endmacro %}

package/src/components/tabnav/tabnav.yaml

@@ -0,0 +1,33 @@
+params:
+- name: items
+  type: array
+  required: true
+  description: The ID of the input.
+  - name: button
+    type: object
+    required: true
+    description: The ID of the input.
+    - name: id
+      type: string
+      required: true
+      description: The ID of the button.
+    - name: text
+      type: string
+      required: true
+      description: The text of the button.
+  - name: panel
+    type: object
+    required: true
+    description: The ID of the input.
+    - name: panel
+      type: object
+      required: true
+      description: The ID of the panel.
+    - name: content
+      type: string
+      required: true
+      description: Content of the panel.
+  - name: active
+    type: boolean
+    required: false
+    description: Tab is active on true.

package/src/components/tags/tags.njk

@@ -0,0 +1,4 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+{%- macro tag(params) -%}
+    <button class="tag {{ params.classes }}" {{ params.attributes }}>{{ params.text }} {% if params.icon %} {{ icon_svg({"name": params.icon})}} {% endif %}</button>
+{%- endmacro -%}

package/src/components/tags/tags.yaml

@@ -0,0 +1,18 @@
+params:
+- name: classes
+  type: string
+  required: false
+  description: Classes of the tag.
+- name: attributes
+  type: string
+  required: false
+  description: Attributes of the tag.
+- name: text
+  type: string
+  required: false
+  description: Text of the tag.
+- name: icon
+  type: string
+  required: false
+  description: Icon name
+  

package/src/components/toast/toast.njk

@@ -0,0 +1,10 @@
+{% macro toast(params) %}
+<div class="toast toast-{{params.type}}{% if params.show %} show{% endif %}" id="{{params.id}}" role="status">
+    <div class="toast-icon"></div>
+    <div class="toast-message">
+        {% if params.heading %}<p class="bold">{{params.heading}}</p>{% endif %}
+        <button class="toast-close">Luk</button>
+        {% if params.content %}<p>{{params.content}}</p>{% endif %}
+    </div>
+</div>
+{% endmacro %}

package/src/components/toast/toast.yaml

@@ -0,0 +1,17 @@
+params:
+- name: type
+  type: string
+  required: false
+  description: Type of toast. Options are success, warning, error, info
+- name: id
+  type: string
+  required: false
+  description: Id of the toast.
+- name: heading
+  type: string
+  required: false
+  description: Heading of the toast.
+- name: content
+  type: string
+  required: false
+  description: Message of the toast.

package/src/components/toggle/toggle.njk

@@ -0,0 +1,4 @@
+{% macro toggle(params) %}
+<input id="{{params.id}}" type="checkbox" {% if params.name %}name="{{params.name}}"{% endif %} value="{{params.value}}" class="form-toggle" {% if params.disabled %}disabled{% endif %} {% if params.checked %}checked{% endif %} {{params.inputAttributes | safe }} />
+<label for="{{params.id}}" class="form-toggle-label {{params.labelClasses}}" {{params.labelAttributes | safe}} >{{params.label | safe }}</label>
+{% endmacro %}

package/src/components/toggle/toggle.yaml

@@ -0,0 +1,38 @@
+params:
+- name: id
+  type: string
+  required: true
+  description: Id of the input.
+- name: name
+  type: string
+  required: true
+  description: Name of the input.
+- name: value
+  type: string
+  required: true
+  description: Value of the input.
+- name: disabled
+  type: boolean
+  required: false
+  description: true on disabled.
+- name: checked
+  type: boolean
+  required: false
+  description: true on checked.
+- name: inputAttributes
+  type: string
+  required: false
+  description: Additional attributes for the input.
+- name: labelClasses
+  type: string
+  required: false
+  description: Additional classes for the label.
+- name: labelAttributes
+  type: string
+  required: false
+  description: Additional attributes for the label.
+- name: label
+  type: string
+  required: true
+  description: Label text
+  

package/src/components/type/links.njk

@@ -0,0 +1,3 @@
+{% macro link(params) %}
+  <a href="{{params.url}}" class="{{params.classes}}" {{params.attributes}}>{{params.text}}</a>
+{% endmacro %}

package/src/components/type/lists.njk

@@ -0,0 +1,25 @@
+{# Unordered list #}
+{% macro ul_list(params) %}
+  {% for item in params.items %}
+  <li>{{ item.text }}
+    {%- if item.items -%}
+    <ul {% if params.subclass%}class="{{ params.subclass }}" {% endif %}>
+      {{ ul_list({"items": item.items, "subclass": params.subclass}) }}
+    </ul>
+    {%- endif -%}
+  </li>
+  {% endfor %}
+{% endmacro %}
+
+{# Ordered list #}
+{% macro ol_list(params) %}
+  {%- for item in params.items -%}
+  <li>{{ item.text }}
+    {%- if item.list -%}
+    <ol {% if params.subclass%}class="{{ params.subclass }}" {% endif %}{% if item.list.type %}type="{{item.list.type}}"{% endif %}>
+      {{ ol_list({"items": item.list.items, "type": item.list.type, "subclass": params.subclass}) }}
+    </ol>
+    {%- endif -%}
+  </li>
+  {%- endfor -%}
+{% endmacro %}