@aarhus-university/au-designsystem-delphinus 0.33.3 → 0.34.0

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+## 0.34.0 (January 11, 2022)
+This is the **biggest** Delphinus update yet! Enjoy!
+
+### Core Delphinus Updates
+* **CHANGED MARKUP:** [Horizontal scroll component](https://delphinus.au.dk/components/horizontal-scroll) now needs a wrapper (`.horizontal-scroll__scrollable-content`) for it's content. Also `.horizontal-scroll__scrollable-content-padding` is deprecated and has no effect anymore. Padding is added automatically when `.horizontal-scroll` sits inside a `.page__content__block--no-padding`.
+* **CHANGED MARKUP:** Use of input fields in toolbar requires new markup, see [toolbar](https://delphinus.au.dk/components/toolbar).
+* **CHANGED MARKUP:** [Modal views](https://delphinus.au.dk/components/modal-view) now require a `.modal-view__container` around te modal-view__body.
+* **CHANGED MARKUP:** `.search-filter__item` now requires the value of the filter to be wrapped in a span with class `.search-filter__item__value`. See [search fields](https://delphinus.au.dk/form-search).
+* **DEPRECATED:** `.modal-view__body--high` modifier. Use `.modal-view--high` instead (must be set directly on `.modal-view` div, see [modal views](https://delphinus.au.dk/components/modal-view)).
+* **DEPRECATED:** `.toggle-button` component can no longer be used.
+* **REMOVED:** stylesheet no longer includes warning for browsers that do not support CSS vars (previously shown as a red banner at the top of the page).
+* Updated to use Font Awesome 6 for [icons](https://delphinus.au.dk/icons).
+* **WARNING:** Delphinus now uses a [subset of Font Awesome](https://delphinus.au.dk/icons.html#icon-details). All other icons are no longer available. Is your icon missing? Please tell us at <claus.stadel@au.dk>.
+* **TO BE DEPRECATED:** In stead of setting icons on buttons etc. via a `data-icon` attribute, set icons using the [icon classes](https://delphinus.au.dk/icons.html#icon-details).
+* Introduces a 5th font-size in Delphinus, so that `h3`'s are now larger than the body text.
+* Adds new components: [Cards](https://delphinus.au.dk/components/cards), [Tags](https://delphinus.au.dk/components/tags), [Profile images](https://delphinus.au.dk/components/profile-image), [Switch](https://delphinus.au.dk/components/switch) and [Truncator](https://delphinus.au.dk/components/truncator).
+* Adds header and snapping option for [horizontal scroll](https://delphinus.au.dk/components/horizontal-scroll).
+* Adds support for [`select`'s with inline label](https://delphinus.au.dk/form-search.html#inline-select).
+* Adds style for [`.copy-to-clipboard`](https://delphinus.au.dk/components/copy-to-clipboard) (previously only markup and js). And adds option to use button inside `.copy-to-clipboard`, to not have the entire element be a button.
+* Better and more accessible [search fields](https://delphinus.au.dk/form-search). And you can now have a [search field in the header](https://delphinus.au.dk/navigation).
+* Adds `.page__content__block--small-gap-above` and `.page__content__block--extra-small-gap-above` modifiers to make the gap between two `.page__content__block`'s smaller than the default.
+* Adds new modifiers to change design and behaviour of the [toolbar component](https://delphinus.au.dk/components/toolbar).
+* Adds `.toolbar__filter` option for adding [multidimensional filters in a toolbar](https://delphinus.au.dk/components/toolbar.html#filters)
+* Adds new modifiers for [List Navigator component](https://delphinus.au.dk/components/list-navigator.html)
+* Adds modifiers for larger facts and links in [fact list component](https://delphinus.au.dk/components/fact-list).
+* Improves scrolling and sizing of [modal views](https://delphinus.au.dk/components/modal-view) on small screens: Now better prevents scrolling of the page behind the modal-view, and height of modal-view better accommodates the actual height of the viewport regardless of browser chrome visibility.
+
+### Delphinus Projects Updates
+#### Mit Studie
+Fixed timetable style for new `.horizontal-scroll` markup and style.
+
+### Typo3
+* Adds support for using delphinus `.page` layout in Typo3.
+* Adds fixes for using Cards and Horizontal scroll components inside Typo3
+* Added initial styling and markup for [employee profiles](https://delphinus.au.dk/projects/typo3/employee-profiles/).
+* Moved news and events demo pages to subdirectory.
+
+### Course catalogue
+Adds [the project](https://delphinus.au.dk/projects/course-catalogue/)
+
+
+## 0.33.4 (December 15, 2022)
+
+### Core Delphinus Updates
+None
+
+### Delphinus Projects Updates
+#### Typo3
+Changes naming of classes for info boxes in news, so that only one class is required regardless of positioning of the info box. Previously used an additional `--left` and `--rigth` modifer classes to set floating of the box on wider screens.
+
 ## 0.33.3 (November 17, 2022)
 
 ### Core Delphinus Updates
@@ -88,6 +138,8 @@ Updated setCopyToClipboard to take a non-hardcoded label for "Copied" notificati
 ### Delphinus Projects Updates
 None
 
+
+
 ## 0.30.10 (August 24, 2022)
 
 ### Core Delphinus Updates
@@ -543,14 +595,14 @@ Adds compiled versions of css and js for typo3-project to npm-package.
 
 ## 0.23.5 (November 11, 2021)
 
-Release containing a lot of new stuff for minansøgning.au.dk: https://delphinus.au.dk/projects/bachelor-applications/
+Release containing a lot of new stuff for minansøgning.au.dk: <https://delphinus.au.dk/projects/bachelor-applications/>
 
 ### New features and components in core Delphinus
 
-* Header-callout: Put messages directly below the page header. Less real-estate consuming than using .notfication in a .page__content__block: https://delphinus.au.dk/components/header-callout.html
-* Large bullet lists: https://delphinus.au.dk/components/large-bullets.html
-* List for highlighting a list of facts or figures: https://delphinus.au.dk/components/fact-list.html
-* Better, easier center alignment of content in a .page__content__block. E.g. used here: https://delphinus.au.dk/projects/bachelor-applications/receipt-accepted.html
-* Page content can snap to content above. See this link, previously there would have been whitespace between the header and the first .page__content__block in the content: https://delphinus.au.dk/projects/bachelor-applications/applications-overview.html
-* Collapse content into tabs in narrow viewports: https://delphinus.au.dk/components/tabbed-content.html
-* Impersonation and simplar stuff for testing-purposes can be put away in a collapsible-panel above the header: https://delphinus.au.dk/projects/bachelor-applications/impersonation-form.html
+* Header-callout: Put messages directly below the page header. Less real-estate consuming than using .notfication in a .page__content__block: <https://delphinus.au.dk/components/header-callout.html>
+* Large bullet lists: <https://delphinus.au.dk/components/large-bullets.html>
+* List for highlighting a list of facts or figures: <https://delphinus.au.dk/components/fact-list.html>
+* Better, easier center alignment of content in a .page__content__block. E.g. used here: <https://delphinus.au.dk/projects/bachelor-applications/receipt-accepted.html>
+* Page content can snap to content above. See this link, previously there would have been whitespace between the header and the first .page__content__block in the content: <https://delphinus.au.dk/projects/bachelor-applications/applications-overview.html>
+* Collapse content into tabs in narrow viewports: <https://delphinus.au.dk/components/tabbed-content.html>
+* Impersonation and simplar stuff for testing-purposes can be put away in a collapsible-panel above the header: <https://delphinus.au.dk/projects/bachelor-applications/impersonation-form.html>

package/Gruntfile.js

@@ -88,7 +88,7 @@ module.exports = (grunt) => {
         tasks: ['copy', 'cleanempty'],
       },
       webpack: {
-        files: ['source/**/*.js'],
+        files: ['source/**/*.ts'],
         tasks: ['webpack'],
       },
     },

package/README.md

@@ -2,4 +2,4 @@
 
 For more information on how to use, see our [coding documentation](https://delphinus.au.dk/code).
 
-For updates on fixes, changes and new features, see our [release notes](https://gitlab.au.dk/au-web-og-digital/au-designsystem-delphinus/-/blob/master/CHANGELOG.md) (requires Aarhus University-login).
+For updates on fixes, changes and new features, see our [release notes](https://delphinus.au.dk/changelog) 

package/build/changelog.html

@@ -0,0 +1,429 @@
+<!doctype html><html lang="en-US"><head><title>Changelog - Delphinus Design System</title><!--meta(HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE")--><!--meta(HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE")--><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/><meta name="format-detection" content="telephone=no"/><meta name="format-detection" content="date=no"/><meta name="format-detection" content="address=no"/><meta name="format-detection" content="email=no"/><meta name="robots" content="noindex, nofollow"/><link rel="preload" as="font" href="https://fonts.au.dk/fonts/fa6/fa-pro-solid-900.otf" type="font/otf" crossorigin="anonymous"/><link rel="preload" as="font" href="https://fonts.au.dk/fonts/au_peto-webfont.woff" type="font/woff" crossorigin="anonymous"/><link rel="icon" href="/assets/delphinus-favicon.ico" sizes="any"/><link rel="icon" href="/assets/delphinus-favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/assets/delphinus-apple-touch-icon.png"/><script src="/js/demo.js"></script><script src="/js/app.js"></script><link rel="stylesheet" href="/demo-style.css"/><script async="async" src="https://siteimproveanalytics.com/js/siteanalyze_4573657.js"></script><!-- Global site tag (gtag.js) - Google Analytics --><script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-158118132-1"></script><script>window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'UA-158118132-1');</script></head><body class="theme--dark body--scrollbar-dark" id="body"><div class="page" id="page"><aside class="page__accessibility" aria-labelledby="skip-to-content"><a class="button button--dimmed screenreader-only screenreader-only--show-on-focus" href="#content" id="skip-to-content">Skip to main content</a></aside><header class="page__header"><nav class="nav--has-active-item nav nav--site-nav" aria-label="Main navigation"><div><a href="/"><div class="delphinus"><h1 id="home"> <strong>Delphinus</strong> 
+Design System</h1></div></a></div><div class="nav__site"><div class="nav__items"><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/text.html">Text</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/colors.html">Colors</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/spacings.html">Whitespace</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/interactivity.html">Interactivity</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/navigation.html">Navigation</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/layout.html">Layout</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/buttons.html">Buttons</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/form.html">Forms</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/icons.html">Icons</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/tables.html">Tables</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/components">Components</a><!--add header or splitter before the item--><div class="nav__split"></div><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/atom-fonts.html">Atoms</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/code.html">Code</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item" href="/projects">Projects</a><!--add header or splitter before the item--><!--determine if item should be active--><!--for demo purposes: if active item is a number, this defines the index of the item, that should be active  --><!--set the path to the page--><!--for demo purposes, if the slug is null make an anchor link without an anchor --><a class="nav__item--active nav__item" href="/changelog.html">Changelog</a></div><button class="nav__toggle" aria-haspopup="true" aria-expanded="false" title="">Menu</button><!--.nav__items#nav-items-globala(href="/text.html" class= active_nav_item=="text" ? "nav__item--active" : "").nav__item Text
+a(href="/colors.html" class= active_nav_item=="colors" ? "nav__item--active" : "").nav__item Colors
+a(href="/spacings.html" class= active_nav_item=="spacing" ? "nav__item--active" : "").nav__item Whitespace
+a(href="/interactivity.html" class= active_nav_item=="interactivity" ? "nav__item--active" : "").nav__item Interactivity
+a(href="/navigation.html" class= active_nav_item=="navigation" ? "nav__item--active" : "").nav__item Navigation
+a(href="/layout.html" class= active_nav_item=="layout" ? "nav__item--active" : "").nav__item Layout
+a(href="/buttons.html" class= active_nav_item=="buttons" ? "nav__item--active" : "").nav__item Buttons
+a(href="/form.html" class= active_nav_item=="forms" ? "nav__item--active" : "").nav__item Forms
+a(href="/icons.html" class= active_nav_item=="icons" ? "nav__item--active" : "").nav__item Icons
+a(href="/tables.html" class= active_nav_item=="tables" ? "nav__item--active" : "").nav__item Tables
+a(href="/components" class= active_nav_item=="components" ? "nav__item--active" : "").nav__item Components
+.nav__split
+a(href="/atom-fonts.html" class= active_nav_item=="atoms" ? "nav__item--active" : "").nav__item Atoms
+a(href="/code.html" class= active_nav_item=="code" ? "nav__item--active" : "").nav__item Code
+a(href="/projects" class= active_nav_item=="projects" ? "nav__item--active" : "").nav__item Projects
+a(href="/changelog.html" class= active_nav_item=="changelog" ? "nav__item--active" : "").nav__item Changelog--><!--button(title="Show full menu" aria-label="Show full menu" aria-haspopup="true" aria-expanded="false" aria-controls="nav-items-global").nav__toggle Menu--></div></nav></header><main class="page__content theme--normal" id="content"><div class="page__content__block"><h1> <strong>Changelog</strong></h1><div class="changelog"><h2>0.34.0 (January 11, 2022)</h2>
+<p>This is the <strong>biggest</strong> Delphinus update yet! Enjoy!</p>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li><strong>CHANGED MARKUP:</strong> <a href="https://delphinus.au.dk/components/horizontal-scroll">Horizontal scroll component</a> now needs a wrapper (<code>.horizontal-scroll__scrollable-content</code>) for it's content. Also <code>.horizontal-scroll__scrollable-content-padding</code> is deprecated and has no effect anymore. Padding is added automatically when <code>.horizontal-scroll</code> sits inside a <code>.page__content__block--no-padding</code>.</li>
+<li><strong>CHANGED MARKUP:</strong> Use of input fields in toolbar requires new markup, see <a href="https://delphinus.au.dk/components/toolbar">toolbar</a>.</li>
+<li><strong>CHANGED MARKUP:</strong> <a href="https://delphinus.au.dk/components/modal-view">Modal views</a> now require a <code>.modal-view__container</code> around te modal-view__body.</li>
+<li><strong>CHANGED MARKUP:</strong> <code>.search-filter__item</code> now requires the value of the filter to be wrapped in a span with class <code>.search-filter__item__value</code>. See <a href="https://delphinus.au.dk/form-search">search fields</a>.</li>
+<li><strong>DEPRECATED:</strong> <code>.modal-view__body--high</code> modifier. Use <code>.modal-view--high</code> instead (must be set directly on <code>.modal-view</code> div, see <a href="https://delphinus.au.dk/components/modal-view">modal views</a>).</li>
+<li><strong>DEPRECATED:</strong> <code>.toggle-button</code> component can no longer be used.</li>
+<li><strong>REMOVED:</strong> stylesheet no longer includes warning for browsers that do not support CSS vars (previously shown as a red banner at the top of the page).</li>
+<li>Updated to use Font Awesome 6 for <a href="https://delphinus.au.dk/icons">icons</a>.</li>
+<li><strong>WARNING:</strong> Delphinus now uses a <a href="https://delphinus.au.dk/icons.html#icon-details">subset of Font Awesome</a>. All other icons are no longer available. Is your icon missing? Please tell us at <a href="mailto:claus.stadel@au.dk">claus.stadel@au.dk</a>.</li>
+<li><strong>TO BE DEPRECATED:</strong> In stead of setting icons on buttons etc. via a <code>data-icon</code> attribute, set icons using the <a href="https://delphinus.au.dk/icons.html#icon-details">icon classes</a>.</li>
+<li>Introduces a 5th font-size in Delphinus, so that <code>h3</code>'s are now larger than the body text.</li>
+<li>Adds new components: <a href="https://delphinus.au.dk/components/cards">Cards</a>, <a href="https://delphinus.au.dk/components/tags">Tags</a>, <a href="https://delphinus.au.dk/components/profile-image">Profile images</a>, <a href="https://delphinus.au.dk/components/switch">Switch</a> and <a href="https://delphinus.au.dk/components/truncator">Truncator</a>.</li>
+<li>Adds header and snapping option for <a href="https://delphinus.au.dk/components/horizontal-scroll">horizontal scroll</a>.</li>
+<li>Adds support for <a href="https://delphinus.au.dk/form-search.html#inline-select"><code>select</code>'s with inline label</a>.</li>
+<li>Adds style for <a href="https://delphinus.au.dk/components/copy-to-clipboard"><code>.copy-to-clipboard</code></a> (previously only markup and js). And adds option to use button inside <code>.copy-to-clipboard</code>, to not have the entire element be a button.</li>
+<li>Better and more accessible <a href="https://delphinus.au.dk/form-search">search fields</a>. And you can now have a <a href="https://delphinus.au.dk/navigation">search field in the header</a>.</li>
+<li>Adds <code>.page__content__block--small-gap-above</code> and <code>.page__content__block--extra-small-gap-above</code> modifiers to make the gap between two <code>.page__content__block</code>'s smaller than the default.</li>
+<li>Adds new modifiers to change design and behaviour of the <a href="https://delphinus.au.dk/components/toolbar">toolbar component</a>.</li>
+<li>Adds <code>.toolbar__filter</code> option for adding <a href="https://delphinus.au.dk/components/toolbar.html#filters">multidimensional filters in a toolbar</a></li>
+<li>Adds new modifiers for <a href="https://delphinus.au.dk/components/list-navigator.html">List Navigator component</a></li>
+<li>Adds modifiers for larger facts and links in <a href="https://delphinus.au.dk/components/fact-list">fact list component</a>.</li>
+<li>Improves scrolling and sizing of <a href="https://delphinus.au.dk/components/modal-view">modal views</a> on small screens: Now better prevents scrolling of the page behind the modal-view, and height of modal-view better accommodates the actual height of the viewport regardless of browser chrome visibility.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<p>Fixed timetable style for new <code>.horizontal-scroll</code> markup and style.</p>
+<h3>Typo3</h3>
+<ul>
+<li>Adds support for using delphinus <code>.page</code> layout in Typo3.</li>
+<li>Adds fixes for using Cards and Horizontal scroll components inside Typo3</li>
+<li>Added initial styling and markup for <a href="https://delphinus.au.dk/projects/typo3/employee-profiles/">employee profiles</a>.</li>
+<li>Moved news and events demo pages to subdirectory.</li>
+</ul>
+<h3>Course catalogue</h3>
+<p>Adds <a href="https://delphinus.au.dk/projects/course-catalogue/">the project</a></p>
+<h2>0.33.4 (December 15, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Changes naming of classes for info boxes in news, so that only one class is required regardless of positioning of the info box. Previously used an additional <code>--left</code> and <code>--rigth</code> modifer classes to set floating of the box on wider screens.</p>
+<h2>0.33.3 (November 17, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fix processing animation for Safari 16.0, where the animation wouldn't rotate.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.33.2 (November 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fix of Content-Toggle callbacks.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.33.1 (November 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fix of Content-Toggle naming and return types.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.33.0 (November 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Content-Toggle and Toolbar scripts updated to reflect Course Catalogue behaviour.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.32.0 (November 3, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Pagination component added.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.31.1 (October 28, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Fix for caption on hero image floating beyond width of image.</p>
+<h2>0.31.0 (October 27, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Major update to news, including</p>
+<ul>
+<li>&quot;Related story&quot; link style for all sites, not just omnibus.</li>
+<li>No &quot;gray bars&quot; on images, except for very small hero-images.</li>
+<li>Center and left-aligned infoboxes when using content elements.</li>
+<li>Text is now centered in both &quot;normal&quot; normal news and news using content elements.</li>
+<li>Support for YouTube and Vimeo in hero image.</li>
+<li>Constrain height of hero image, if heigher than a 3:2-format.</li>
+</ul>
+<h2>0.30.13 (October 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Added datetime-local as type on input fields for form styling.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.12 (October 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Adjusted styling of .datepicker when it is placed inside a fieldset.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.11 (September 13, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Updated setCopyToClipboard to take a non-hardcoded label for &quot;Copied&quot; notification as parameter.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.10 (August 24, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<p>Fix to allow sameday events in timetable events to visually overflow past midnight.</p>
+<h2>0.30.9 (August 23, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Updates <code>.environment-label</code> for use with <code>.box</code>.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.8 (August 2, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes issue where height of <code>nav__item</code> was set incorrectly, in wide screen wiewports (Issue introduced in 0.30.7).</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.7 (August 2, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes issue where height of <code>nav__item</code> was set incorrectly, in wide screen wiewports (Issue introduced in 0.30.6).</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.6 (August 2, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes issue where height of <code>nav__item</code> was set incorrectly, when <code>.nav.</code> is toggled (Issue introduced in 0.29.0).</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<ul>
+<li>Adds support for beta-label on event type in timetable modal view.</li>
+</ul>
+<h2>0.30.5 (July 29, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<ul>
+<li>Fix issue where secondary title in event tiles (introduced in 0.30.4) did not show in short duration events.</li>
+<li>Fix issue where short duration events, would show a white background behind the left side border of the event tile, if the tile has a theme class applied.</li>
+</ul>
+<h2>0.30.4 (July 26, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<p>Mit Studie: Add styling for a secondary title in event tiles.</p>
+<h2>0.30.3 (July 26, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<p>Mit Studie: Adjusted min width of timetable in default viewport, after page sidepadding changes introduced in 0.29.0.</p>
+<h2>0.30.2 (July 25, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Removed border on <code>.text--callout</code>.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>Typo3: Callout on old articles.</p>
+<h2>0.30.1 (July 19, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None - build only.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.30.0 (July 19, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<ul>
+<li>Added missing modules (e.g. pre-header) to styles.</li>
+</ul>
+<h2>0.29.0 (June 27, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Real estate optimizations for <code>.nav</code> component. When used elsewhere, than in site header, the <code>.nav</code> component no longer has any whitespace at top. If you use <code>.tabbed-content</code> in your design or <code>.nav</code> in a <code>.page__content__block</code> please check that there is still sufficient whitespace above it.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<ul>
+<li>Fixes a few alignment issues in <code>.timetable</code> and <code>.timeline</code> introduced by the new side padding in narrow viewports from 0.27.0.</li>
+</ul>
+<h2>0.28.0 (June 24, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Moved type definitions to seperate npm project.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.27.0 (June 23, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Tweaked vertical page margins in narrow viewport. Now, mobile has a bit more room horizontally. NOTE: If your design uses things that &quot;pop&quot; over the pages margins, please check, that there is still room for that after updating.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.8 (June 21, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Correct typing of events i navigational scripts.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.7 (June 21, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Return types on navigational functions for useEffect in React 18.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.6 (June 21, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Removal of event listeners (before re-adding) in scripts in preparation for StrictMode in React 18.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.5 (June 20, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes issue in navigation where the menu toogle would jump to bottom of the menu, when opened.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.4 (June 7, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<ul>
+<li>Removed box-shadow from <code>.roles-config__role__content</code></li>
+</ul>
+<h2>0.26.3 (June 1, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Adds class for header in <code>toast-notification</code>.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.2 (May 30, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Fixes alignment of processing animation in buttons and <code>processing-state</code> component, that could sometimes not be rotating around its' center. Now uses an svg-mask in stead of a D from AU Peto font. This will also prevent the occasional rotating D, if Peto font is not loaded.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.1 (May 23, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Moved types folder to root and added missing package.json for automatic type recognition in other projects.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.26.0 (May 23, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Added support for Typescript and converted existing scripts to Typescript.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.25.0 (May 19, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Added stepper component <a href="https://delphinus.au.dk/components/stepper">https://delphinus.au.dk/components/stepper</a>.</li>
+<li>Fix missing red border on invalid checkbox and radiobutton input.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.24.1 (April 21, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Adds overwrite for all default content elements style in typo3 v10.</p>
+<h2>0.24.0 (March 29, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li><code>.hr--page-content-block-seperator</code> modifier for adding equal space above an below a <code>hr</code> that is the first or last element of a content block.</li>
+<li><code>.page__footer--only-logo-and-seal</code>modifier for when the footer should only contain the logo and seal.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.23.25 (March 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes icon size in <code>.nav__item--icon</code> so that the icon is only large, when used in <code>.nav__utilities</code>. Otherwise, the icon has the same size as the text.</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Mit Studie</h4>
+<p>Fixes rendering issue in Chrome, where the missing exam component could have 1px line on the left.</p>
+<h2>0.23.24 (February 24, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Adds support for the HTML content element type in news.</p>
+<h2>0.23.23 (February 23, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Fixes alignment when using content element headers and subheader in news.</p>
+<h2>0.23.22 (February 15, 2022)</h2>
+<p>Don't use has bugs.</p>
+<h2>0.23.21 (February 14, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Support news using content elements in other layouts, than full width layouts.</p>
+<h2>0.23.20 (February 10, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Improved design for skip-to-content accessibility-link.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.23.19 (February 8, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<ul>
+<li>Prevents pseudo element in news figures from being z-indexed above the image.</li>
+<li>Allows images in one column galleries in content elements to be less wide, than the text and makes the caption follow the width of the image.</li>
+</ul>
+<h2>0.23.18 (February 7, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p><code>.typography-dense</code> now supports headings, blockquotes, lists and hr.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.23.17 (February 7, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>When you have a list of links (<code>ul</code> or <code>ol</code>) you can skip the underlining of the links for visual clarity by adding class <code>.list--links</code> to the list.</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<ul>
+<li>New icons on infobox in news.</li>
+<li>Allow tables to be wider than text when using content elements.</li>
+</ul>
+<h2>0.23.16 (February 4, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>Typo3</h4>
+<p>Prevent news hero images from stretching, when not as wide as the page. And prevent hero image from being of a wider aspect ratio than 16:9 in narrow viewports (cropped on sides).</p>
+<p>Loads of stuff for supporting news using content elements:</p>
+<ul>
+<li>Center aligned text in articles</li>
+<li>Floated images and video (above the medium breakpoint)</li>
+<li>Multicolumn image galleries (above the medium breakpoint)</li>
+<li>Infobox (collapsed and with an expand-toggle in narrow viewports)</li>
+</ul>
+<h2>0.23.15 (January 28, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Prevent site logo from hanging, when there is no other content (no site name) in the header home link.</li>
+<li>Fix processing state of buttons that use the utility-button mixin, before this fix the spinner was in the same color, as the button background and therefore hard to see, also button text was still showing.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.23.14 (January 21, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes styling of links in an <code>.empty-state</code> component.</p>
+<h3>Delphinus Projects Updates</h3>
+<p>None</p>
+<h2>0.23.13 (January 20, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<ul>
+<li>Support for nesting in <code>ul</code>, <code>ol</code> lists.</li>
+<li>Introduces <code>utility-shadow</code> color for setting shadows on buttons etc. in elements that has a utility color as background.</li>
+</ul>
+<h3>Delphinus Projects Updates</h3>
+<h4>Bachelor applications</h4>
+<p>Removes custom strike-through in annulled application titles. Back to <code>text-decoration: line-through</code> in order to support multiline titles.</p>
+<h2>0.23.12 (January 12, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>None</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>TYPO3-project</h4>
+<ul>
+<li>Adds styling for table, pre and hr tags in news content.</li>
+<li>Fixes rendering of custom bullets in news content.</li>
+</ul>
+<h2>0.23.11 (January 12, 2022)</h2>
+<p>Don't use, has bug in typo3-project.</p>
+<h2>0.23.10 (January 12, 2022)</h2>
+<p>Don't use, has bug in typo3-project.</p>
+<h2>0.23.9 (January 12, 2022)</h2>
+<h3>Core Delphinus Updates</h3>
+<p>Fixes foreground-color for elements with &quot;theme&quot; and &quot;theme-secondary&quot; as background-color, that could otherwise have too low contrast in dark themes.</p>
+<h3>Delphinus Projects Updates</h3>
+<h4>TYPO3-project</h4>
+<ul>
+<li>Adjusts vertical gutters in the .typo3-delphinus wrapper for various layout templates, to be in line with Delphinus vertical gutter.</li>
+<li>Adjusts horizontal gutters for typo3 sites that are &quot;framed&quot; on wide screens (.universe, .omnibus, .aarhus-bss).</li>
+<li>Various styling fixes for omnibus: Font rendering on headers, link underlining.</li>
+</ul>
+<h2>0.23.8 (December 22, 2021)</h2>
+<p>Adds README-file to project.</p>
+<h2>0.23.7 (December 22, 2021)</h2>
+<p>Adds .typography-dense class for less spacious typography. Currently only adds less vertical margin to p-tags.</p>
+<h2>0.23.6 (December 14, 2021)</h2>
+<p>Adds compiled versions of css and js for typo3-project to npm-package.</p>
+<h2>0.23.5 (November 11, 2021)</h2>
+<p>Release containing a lot of new stuff for minansøgning.au.dk: <a href="https://delphinus.au.dk/projects/bachelor-applications/">https://delphinus.au.dk/projects/bachelor-applications/</a></p>
+<h3>New features and components in core Delphinus</h3>
+<ul>
+<li>Header-callout: Put messages directly below the page header. Less real-estate consuming than using .notfication in a .page__content__block: <a href="https://delphinus.au.dk/components/header-callout.html">https://delphinus.au.dk/components/header-callout.html</a></li>
+<li>Large bullet lists: <a href="https://delphinus.au.dk/components/large-bullets.html">https://delphinus.au.dk/components/large-bullets.html</a></li>
+<li>List for highlighting a list of facts or figures: <a href="https://delphinus.au.dk/components/fact-list.html">https://delphinus.au.dk/components/fact-list.html</a></li>
+<li>Better, easier center alignment of content in a .page__content__block. E.g. used here: <a href="https://delphinus.au.dk/projects/bachelor-applications/receipt-accepted.html">https://delphinus.au.dk/projects/bachelor-applications/receipt-accepted.html</a></li>
+<li>Page content can snap to content above. See this link, previously there would have been whitespace between the header and the first .page__content__block in the content: <a href="https://delphinus.au.dk/projects/bachelor-applications/applications-overview.html">https://delphinus.au.dk/projects/bachelor-applications/applications-overview.html</a></li>
+<li>Collapse content into tabs in narrow viewports: <a href="https://delphinus.au.dk/components/tabbed-content.html">https://delphinus.au.dk/components/tabbed-content.html</a></li>
+<li>Impersonation and simplar stuff for testing-purposes can be put away in a collapsible-panel above the header: <a href="https://delphinus.au.dk/projects/bachelor-applications/impersonation-form.html">https://delphinus.au.dk/projects/bachelor-applications/impersonation-form.html</a></li>
+</ul>
+</div></div></main><footer class="page__footer"><div class="page__footer__content"><div class="row row--align-left"><div class="row__item row__item--basis-15"><h1 class="text--default-size text--pull"><strong>Delphinus Design System </strong> <span class="u-avoid-wrap">is built and maintained by:</span></h1><p>AU IT - Brugeropevelser,
+<span class="u-avoid-wrap">Aarhus University</span><br/>Helsingforsgade 10<br/>8200 Aarhus N, Denmark</p></div><div class="row__item row__item--basis-15"><h2 class="text--default-size text--strong text--pull">Contact</h2><ul class="list--dense ul--no-bullets"><li>Claus Stadel at  <a href="mailto:claus.stadel@au.dk">claus.stadel@au.dk</a></li><li>Thomas Riis Hansen at  <a href="mailto:trh@au.dk">trh@au.dk</a></li></ul></div></div></div><div class="page__footer__compliance"><ul class="page__footer__compliance__links"><li> <a href="/cookies.html">Cookies on this site</a></li><li> <a href="https://international.au.dk/about/profile/privacy-policy/">Aarhus University's privacy policy</a></li></ul></div><div class="page__footer__artwork"><div class="artwork-peto" aria-hidden="true"><div class="artwork-peto__foreground"><svg viewBox="0 0 600 200"><text x="0" y="100">Delphi</text><text x="0" y="200">nus</text></svg></div><div class="artwork-peto__background"><svg viewBox="0 0 600 200"><text x="0" y="100">Design</text><text x="0" y="200">System</text></svg></div></div></div><object class="page__footer__logo" role="img" type="image/svg+xml" tabindex="-1" aria-labelledby="page-footer-logo"><p id="page-footer-logo">The logo of Aarhus University.</p></object><object class="page__footer__seal" role="img" type="image/svg+xml" tabindex="-1" aria-labelledby="page-footer-seal"><p id="page-footer-seal">The seal of Aarhus University. The seal depicts an anchor surrounded by two dolphins. The university motto and Latin name are written on the outline: Solidum petit in profundis - Universitas Arhusiensis.</p></object></footer></div><div class="modal-views"></div><section class="atom-picker theme--normal view--default" aria-label="Color and theme picker" id="atom-picker"><div class="atom-picker__scale"><button class="atom-picker__scale__item atom-picker__scale__item__position-toggle" title="Toggle postion of picker" tabindex="-1"></button><button class="atom-picker__scale__item atom-picker__scale__item__theme-style" title="Toggle between normal and dark theme" tabindex="-1"></button><button class="atom-picker__scale__item__default atom-picker__scale__item" title="Force scale to: default" tabindex="-1"></button><button class="atom-picker__scale__item__medium atom-picker__scale__item" title="Force scale to: medium" tabindex="-1"></button><button class="atom-picker__scale__item__wide atom-picker__scale__item" title="Force scale to: wide" tabindex="-1"></button><button class="atom-picker__scale__item atom-picker__scale__item__reset" tabindex="-1">Reset</button></div><div class="atom-picker__color"><button class="theme--blue atom-picker__color__item" title="Switch theme to color: blue" tabindex="-1"></button><button class="theme--cyan atom-picker__color__item" title="Switch theme to color: cyan" tabindex="-1"></button><button class="theme--turquoise atom-picker__color__item" title="Switch theme to color: turquoise" tabindex="-1"></button><button class="theme--green atom-picker__color__item" title="Switch theme to color: green" tabindex="-1"></button><button class="theme--yellow atom-picker__color__item" title="Switch theme to color: yellow" tabindex="-1"></button><button class="theme--orange atom-picker__color__item" title="Switch theme to color: orange" tabindex="-1"></button><button class="theme--red atom-picker__color__item" title="Switch theme to color: red" tabindex="-1"></button><button class="theme--magenta atom-picker__color__item" title="Switch theme to color: magenta" tabindex="-1"></button><button class="theme--purple atom-picker__color__item" title="Switch theme to color: purple" tabindex="-1"></button></div></section></body></html>