@erst-vg/dkfds-vite 8.0.1

package/dist/scss/themes/_virkdk.scss

@@ -0,0 +1,21 @@
+/*
+----------------------------------------
+Virk theme
+----------------------------------------
+*/
+$theme-colors: (
+    "virk": (
+        100: #0059B3,
+        200: #004993,
+        300: #003972
+    )
+);
+
+$theme-color-primary: 'virk-100';
+$theme-color-primary-dark: 'virk-200';
+$theme-color-primary-darker: 'virk-300';
+$header-portal-logo: 'logo_virk.svg';
+$header-portal-logo-height: 4.8rem;
+$header-portal-logo-width: 7.8rem;
+$header-portal-compact-logo-width: 3.8rem;
+

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@erst-vg/dkfds-vite",
+  "version": "8.0.1",
+  "description": "Fork af DKFDS version 8.0.1, som virker med Vite",
+  "engines": {
+    "node": ">= 4"
+  },
+  "main": "dist/js/dkfds.min.js",
+  "scripts": {
+    "build": "gulp build",
+    "build:css": "gulp sass",
+    "build:js": "gulp javascript",
+    "prepublish": "gulp build",
+    "release": "gulp release",
+    "version": "npm run prepublish",
+    "watch": "gulp watch"
+  },
+  "author": "Erhvervsstyrelsen og Digitaliseringsstyrelsen",
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.11",
+    "ansi-colors": "^4.1.1",
+    "app-root-path": "^3.0.0",
+    "array-filter": "^1.0.0",
+    "array-foreach": "^1.0.2",
+    "autoprefixer": "^9.8.0",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.1",
+    "classlist-polyfill": "^1.0.3",
+    "core-js": "^2.5.7",
+    "del": "^5.1.0",
+    "fancy-log": "^1.3.3",
+    "gulp": "^4.0.2",
+    "gulp-changed": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "gulp-eslint": "^5.0.0",
+    "gulp-filter": "^6.0.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^1.0.0",
+    "gulp-sass": "^4.1.1",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-stylelint": "^13.0.0",
+    "gulp-uglify": "^3.0.0",
+    "gulp4-run-sequence": "^1.0.1",
+    "node-notifier": "^6.0.0",
+    "normalize.css": "^8.0.1",
+    "object-assign": "^4.1.1",
+    "postcss-csso": "^4.0.0",
+    "postcss-discard-comments": "^4.0.2",
+    "receptor": "^0.1.3",
+    "sass": "^1.49.7",
+    "stylelint": "^13.6.0",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
+    "zip-folder": "^1.0.0"
+  }
+}

package/src/components/accordion/accordion.njk

@@ -0,0 +1,43 @@
+{% from "components/icons/icons--svg.njk" import icon_svg as icon_svg %}
+<div class="container">
+{% macro accordion(params) %}
+{% set bulk = params.openCloseButton | default(false) %}
+{% set multiselectable = params.multiselectable | default(true) %}
+{% if bulk %}<button class="accordion-bulk-button" data-accordion-bulk-expand="true">Åbn alle</button>{% endif %}
+<ul class="accordion{% if multiselectable %} accordion-multiselectable{% endif %}">
+  {%- for item in params.items -%}
+  <li>
+    {%- if params.headingLevel !== false -%}
+    <{{params.headingLevel | default('h3') }}>
+    {%- endif -%}
+    <button class="accordion-button{% if item.errorMessage %} accordion-error {% endif %}" aria-expanded="{{ item.expanded | default('false') }}" {% if item.errorMessage %} aria-describedby="{{ params.idPrefix }}{{ item.id }}" {% endif %} aria-controls="{{ params.idPrefix }}{{ item.id }}">
+      {{ item.title }}
+      {%- if item.icon %}
+        <span class="accordion-icon">
+          <span class="icon_text">{{ item.icontext }}</span>  {{ icon_svg({"name": item.icon})}}
+        </span>
+      {% endif -%}
+    </button>
+    {%-  if params.headingLevel !== false -%}
+    </{{params.headingLevel | default('h3') }}>
+    {%- endif -%}
+       {%- set ariahidden = "true" -%}
+      {%- if item.expanded %}
+        {% set ariahidden = "false" %}
+      {% else -%}
+        {% set ariahidden = "true" %}
+      {% endif -%}
+    <div id="{{ params.idPrefix }}{{ item.id }}"{% if ariahidden %}aria-hidden="{{ariahidden}}"{% endif %} class="accordion-content">
+    {%- if item.errorMessage %}
+      <div class="alert alert-error" role="alert">
+             <div class="alert-body">
+                 <p class="alert-text">{{item.errorMessage}}</p>
+             </div>
+         </div>
+     {% endif -%}
+      {{ item.content | safe }}
+    </div>
+  </li>
+  {%- endfor -%}
+</ul>
+{% endmacro %}

package/src/components/accordion/accordion.yaml

@@ -0,0 +1,62 @@
+params:
+- name: id
+  type: string
+  required: false
+  description: The ID of the button.
+- name: openCloseButton
+  type: boolean
+  required: false
+  description: Show open/close all button.
+- name: heading_level
+  type: string
+  required: false
+  description: Heading level of the button. If false, no heading around the button. Otherwise default is h3.
+- name: multiselectable
+  type: boolean
+  required: false
+  description: Default is true. If true, more than one accordion can be open at the time. On false, only one accordion will be open. 
+- name: idPrefix
+  type: string
+  required: true
+  description: String for ID attributes. Is prepended to the ids in every accordion in list.
+- name: items
+  type: array
+  required: true
+  description: Array of accordions.
+    - name: title
+      type: string
+      required: true
+      description: Text in accordion button.
+    - name: errorMessage
+      type: string
+      required: false
+      description: Error message located in content.
+    - name: expanded
+      type: boolean
+      required: false
+      description: Expands accordion on true. Default is false.
+    - name: id
+      type: string
+      required: true
+      description: Id of the content container
+    - name: icon
+      type: string
+      required: false
+      description: Name of icon to be shown in button.
+    - name: icontext
+      type: string
+      required: false
+      description: Text placed next to icon
+    - name: icontext
+      type: string
+      required: false
+      description: Text placed next to icon
+    - name: content
+      type: string
+      required: true
+      description: Content for the accordion. Can contain HTML.
+      
+
+
+
+  

package/src/components/alerts/alerts.njk

@@ -0,0 +1,19 @@
+{% macro alert(params) %}
+<div class="alert{% if params.classes %} {{ params.classes }}{% endif %}{% if params.paragraph %} alert--paragraph{% endif %}{% if params.icon %} alert--show-icon{% endif %}{% if params.closeButton %} has-close{% endif %}"{% if params.role %} role="{{params.role}}" aria-atomic="true"{% endif %}{% if params.ariaLabel %} aria-label ="{{ params.ariaLabel }}"{% endif %}{% if params.attributes %} {{ params.attributes | safe }}{% endif %}>
+  <div class="alert-body">
+    {%- if params.heading -%}
+    <p class="alert-heading{% if params.closeButton %} pr-7{% endif %}">{{ params.heading | safe }}</p>
+    {%- endif -%}
+
+    {%- if params.contentContainer == false -%}
+    {{ params.content | safe }}
+    {%- else -%}
+    <p class="alert-text">{{ params.content | safe }}</p>
+    {%- endif -%}
+
+    {%- if params.closeButton -%}
+    <button type="button" class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#close"></use></svg>Luk</button>
+    {%- endif -%}
+  </div>
+</div>
+{% endmacro %}

package/src/components/alerts/alerts.yaml

@@ -0,0 +1,41 @@
+params:
+- name: role
+  type: string
+  required: false
+  description: role of the alert.
+- name: classes
+  type: string
+  required: false
+  description: Classes of the alert.
+- name: heading
+  type: string
+  required: false
+  description: Title of the alert.
+- name: content
+  type: string
+  required: false
+  description: Content of the alert.
+- name: ariaLabel
+  type: string
+  required: false
+  description: aria-label on the alert.
+- name: closeButton
+  type: boolean
+  required: false
+  description: Show close button on true.
+- name: attributes
+  type: string
+  required: false
+  description: Additional attributes of the alert.
+- name: contentContainer
+  type: boolean
+  required: false
+  description: Excludes alert-text container on content.
+- name: paragraph
+  type: boolean
+  required: false
+  description: Sets paragraph width on true.
+- name: icon
+  type: boolean
+  required: false
+  description: Adds icon on true.

package/src/components/badge/badges.njk

@@ -0,0 +1,3 @@
+{%- macro badge(params) -%}
+    <span class="badge {{params.classes}}">{{ params.text }}</span>
+{%- endmacro -%}

package/src/components/badge/badges.yaml

@@ -0,0 +1,9 @@
+params:
+- name: classes
+  type: string
+  required: true
+  description: Classes of the badge.
+- name: text
+  type: string
+  required: true
+  description: Text of the badge

package/src/components/breadcrumbs/breadcrumbs.njk

@@ -0,0 +1,15 @@
+{%- macro breadcrumbs(params) -%}
+<nav class="breadcrumbs{%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} aria-label="{{ params.ariaLabel| default('Brødkrumme') }}">
+  <ol class="breadcrumbs__list">
+  {%- for item in params.items -%}
+    {% if item.href %}
+    <li class="breadcrumbs__list-item">
+      <a class="breadcrumbs__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+    </li>
+    {% else %}
+    <li class="breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>
+    {% endif %}
+  {%- endfor -%}
+  </ol>
+</nav>
+{%- endmacro -%}

package/src/components/breadcrumbs/breadcrumbs.yaml

@@ -0,0 +1,45 @@
+params:
+- name: classes
+  type: string
+  required: false
+  description: Classes of the breadcrumb.
+- name: attributes
+  type: array
+  required: false
+  description: Array of attributes.
+  - name: attribute
+    type: string
+    required: true
+    description: Name of attribute
+  - name: value
+    type: string
+    required: true
+    description: Value of attribute
+- name: ariaLabel
+  type: string
+  required: false
+  description: Value of attribute aria-label. Default is "Brødkrumme"
+- name: items
+  type: array
+  required: true
+  description: List of crumbs
+  - name: href
+    type: string 
+    required: false
+    description: Path to crumb page.
+  - name: text
+    type: string 
+    required: false
+    description: Text title of crumb.
+  - name: attributes
+    type: array
+    required: false
+    description: Array of attributes for the crumb.
+    - name: attribute
+      type: string
+      required: true
+      description: Name of attribute
+    - name: value
+      type: string
+      required: true
+      description: Value of attribute

package/src/components/buttons/buttons.njk

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

package/src/components/buttons/buttons.yaml

@@ -0,0 +1,25 @@
+params:
+- name: id
+  type: string
+  required: false
+  description: The ID of the button.
+- name: text
+  type: string
+  required: true
+  description: The text of the button.
+- name: classes
+  type: string
+  required: true
+  description: The classes of the button.
+- name: srOnly
+  type: string
+  required: false
+  description: The sr-only text of the button.
+- name: attributes
+  type: string
+  required: false
+  description: Additional attributes of the button.
+- name: icon
+  type: string
+  required: false
+  description: Icon of the button.

package/src/components/cards/cards.njk

@@ -0,0 +1,56 @@
+{% import "components/buttons/buttons.njk" as button %}
+
+{% macro card(params) %}
+  {% macro cardHeader(params) %}
+    {%- if (params.heading) or (params.subheading) -%}
+        <div class="card-header">
+          <{{params.headingLevel | default('h3')}} class="header-title">{{params.heading}}</{{params.headingLevel | default('h3')}}>
+          {%- if params.subheading -%}<p class="sub-header">{{params.subheading}}</p>{%- endif -%}
+        </div>
+      {%- endif -%}
+  {% endmacro %}
+
+  {% macro cardText(params) %}
+      {%if params.text %}
+        <div class="card-text">
+          <p>{{params.text | safe}}</p>
+        </div>{% endif %}
+  {% endmacro %}
+
+  {% macro cardContent(params) %}
+  {% if params.content %}<div class="card-content">
+        {{params.content | safe}}
+    </div>{% endif %}
+  {% endmacro %}
+
+  {% macro cardActions(params) %}
+  {% if (params.actionContent) or (params.actionButtons) or (params.actionLinks) %}<div class="card-footer card-action">
+      {% if params.actionContent %}<div class="action-content">
+        {{params.actionContent | safe}}
+      </div>{% endif %}
+      {% if params.actionButtons %}<div class="action-buttons">
+      {{ params.actionButtons | safe}}
+      </div>{% endif %}
+      {% if params.actionLinks %}<div class="action-links">
+      {{ params.actionLinks | safe}}
+      </div>{% endif %}
+    </div>{% endif %}
+  {% endmacro %}
+
+  <div class="card{% if params.sameHeight %} card-align-height{% endif %}">
+    {% set order = params.order | default(["header", "text", "content", "action"]) %}
+    {%- for item in order -%}
+    {%- if item == "header" -%}
+    {{cardHeader(params)}}
+    {%- elseif item == "text" -%}
+    {{cardText(params)}}
+    {%- elseif item == "content" -%}
+    {{cardContent(params)}}
+    {%- elseif item == "action" -%}
+    {{cardActions(params)}}
+    {%- endif -%}
+    {%- endfor -%}
+  </div>
+{% endmacro %}
+
+

package/src/components/cards/cards.yaml

@@ -0,0 +1,39 @@
+params:
+- name: heading
+  type: string
+  required: false
+  description: Heading of the card
+- name: headingLevel
+  type: string
+  required: false
+  description: Heading level of the heading. Default is h3.
+- name: subheading
+  type: string
+  required: false
+  description: Subheading of the card
+- name: text
+  type: string
+  required: true
+  description: Card text
+- name: content
+  type: string
+  required: false
+  description: content of the card
+- name: actionContent
+  type: string
+  required: false
+  description: Content added at the bottom of the card
+- name: actionButtons
+  type: string
+  required: false
+  description: Buttons added at the bottom of the card
+- name: actionLinks
+  type: string
+  required: false
+  description: Links added at the bottom of the card
+- name: sameHeight
+  type: boolean
+  required: false
+  description: On true, sets same height of cards in row.
+
+  

package/src/components/cookie-message/cookie-message.njk

@@ -0,0 +1,20 @@
+{% macro cookie_message(params) %}
+<div class="cookie-container" role="complementary" aria-labelledby="cookie-message-heading1" aria-describedby="cookie-message-text">
+  <div class="cookie-message">
+    <div class="cookie-text">
+      <div class="h3 mt-0 mb-3" id="cookie-message-heading1">{{ params.heading | safe }}</div>
+      <p class="mt-0" id="cookie-message-text">{{ params.message | safe }}</p>
+    </div>
+    <div class="cookie-actions">
+      <ul class="inline-list">
+        <li>
+          <a href="#" class="button button-secondary">{{ params.accept }}</a>
+        </li>
+        <li>
+          <a href="#" class="ml-md-4 button button-tertiary">{{ params.decline }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+{% endmacro %}

package/src/components/cookie-message/cookie-message.yaml

@@ -0,0 +1,17 @@
+params:
+- name: heading
+  type: string
+  required: true
+  description: Heading of the cookie message
+- name: message
+  type: string
+  required: true
+  description: Body text of the cookie message
+- name: accept
+  type: string
+  required: true
+  description: Text on accept button
+- name: decline
+  type: string
+  required: true
+  description: Text on decline button

package/src/components/details/details.njk

@@ -0,0 +1,8 @@
+{% macro details(params) %}
+<details class="details">
+  <summary class="details-summary">{{ params.summary }}</summary>
+  <div class="details-text">
+      {{ params.content | safe }}
+  </div>
+</details>
+{% endmacro %}

package/src/components/details/details.yaml

@@ -0,0 +1,9 @@
+params:
+- name: summary
+  type: string
+  required: true
+  description: Button text of the details component.
+- name: content
+  type: string
+  required: true
+  description: Content of the details component. Can contain HTML.

package/src/components/footers/footer.njk

@@ -0,0 +1,40 @@
+{% from "components/language-switcher/language-switcher.njk" import languageSwitcher as languageSwitcher %}
+
+{% macro footer(params) %}
+  <footer>
+    <div class="footer">
+      <div class="container">
+          {%- if params.columns -%}
+          <div class="row">
+          {%- for column in params.columns -%}
+          <div class="col-12 col-sm-12 col-md-{{ column.columnSize }} footer-col {{ column.classes }}">
+            <section>
+              <div class="{%- if column.textAlignRight %} align-text-right  {% else %} align-text-left {% endif -%}">
+                {{ column.content | safe }}
+                {% for list in column.lists %}
+                  <ul class=" {{ list.classes|default('unstyled-list') }} {%- if list.inline %} inline-list {% endif -%} ">
+                    {% for item in list.items %}
+                    <li class="{% if item.hideOnPrint %}d-print-none{% endif %}">{{item.content | safe}}</li>
+                    {% endfor %}
+                  </ul>
+                {% endfor %}
+              </div>
+            </section>
+          </div>
+          {% endfor -%}
+        </div>
+          {%- endif -%}
+          {%- if params.list -%}
+            <ul class="{% if params.columns %}mt-4 {% endif %}align-text-left unstyled-list inline-list">
+              {%- for item in params.list.items -%}
+              <li class="{% if item.hideOnPrint %}d-print-none{% endif %}">{{item.content | safe}}</li>
+              {% endfor -%}
+            </ul>
+          {%- endif -%}
+      </div>
+    </div>
+    {% if params.languageSwitcher %}
+      {{ languageSwitcher(params.languageSwitcher) }}
+    {% endif %}
+  </footer>
+{% endmacro %}

package/src/components/footers/footer.yaml

@@ -0,0 +1,66 @@
+params:
+- name: columns
+  type: object
+  required: false
+  description: Array of column objects 
+  - name: columnSize
+    type: int
+    required: true
+    description: Number of columns out of 12. Sets the width of the column
+  - name: classes
+    type: string
+    required: false
+    description: Additional classes to add to the column
+  - name: textAlignRight
+    type: boolean
+    required: false
+    description: Sets the text to align right on true. Left on false.
+  - name: content
+    type: string
+    required: false
+    description: Content of the column
+  - name: lists
+    type: array
+    required: false
+    description: Array of lists.
+    - name: classes
+      type: string
+      required: false
+      description: Classes of the list. Default is "unstyled-list".
+    - name: inlineList
+      type: boolean
+      required: false
+      description: Makes the list inline on true.
+    - name: items
+      type: object
+      required: false
+      description: Array of items for the list.
+      - name: hideOnPrint
+        type: boolean
+        required: false
+        description: Hides list item on print.
+      - name: content
+        type: string
+        required: false
+        description: Content of list item. Can contain HTML.
+- name: list
+  type: array
+  required: false
+  description: Inline list.
+  - name: items
+    type: object
+    required: false
+    description: Array of items for the list.
+    - name: hideOnPrint
+      type: boolean
+      required: false
+      description: Hides list item on print.
+    - name: content
+      type: string
+      required: false
+      description: Content of list item. Can contain HTML.
+- name: languageSwitcher
+  type: object
+  required: false
+  description: Language switcher object.
+  

package/src/components/form/controls/checkbox.njk

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

package/src/components/form/controls/checkbox.yaml

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