Activate Prettier

Prettier was installed but not used

.eslintrc.json

@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "prettier"],
   "env": {
     "es6": true,
     "browser": true

.prettierignore

@@ -0,0 +1,8 @@
+/.yarn
+/dist
+/public
+
+# Ignore all HTML, YAML and Markdown files
+*.html
+*.yml
+*.md

.prettierrc.yml

@@ -0,0 +1,2 @@
+semi: false
+singleQuote: true

.stylelintrc.yml

@@ -11,8 +11,7 @@ rules:
   selector-no-qualifying-type: null
   scss/percent-placeholder-pattern: null
   no-empty-source: null
-  max-nesting-depth:
-    - 3
+  max-nesting-depth: 3
   selector-type-no-unknown:
     - true
     - ignore:

components/01-pages/culture-pages/work-page/_work-page.scss

@@ -35,4 +35,3 @@
     }
   }
 }
-

components/01-pages/story-pages/story-detail-page/_story-detail-page.scss

@@ -14,7 +14,6 @@
     @extend %box-shadow-primary-25-right-bottom;
   }
 
-
   figure {
     @extend %container-vertical-spacing-lg;
   }

components/01-pages/topic-page/_topic-page.scss

@@ -1 +0,0 @@
-

components/01-pages/training-pages/training-detail-page/_training-detail-page.scss

@@ -1,14 +1,14 @@
 .training-detail-page {
-    @extend %article-layout;
+  @extend %article-layout;
 
-    align-items: center;
+  align-items: center;
 
-    img,
-    > img {
-      @extend %box-shadow-primary-25-right-bottom;
-    }
+  img,
+  > img {
+    @extend %box-shadow-primary-25-right-bottom;
+  }
 
-    figure {
-      @extend %container-vertical-spacing-lg;
-    }
+  figure {
+    @extend %container-vertical-spacing-lg;
+  }
 }

components/02-layouts/component-layouts/container/_container.scss

@@ -3,7 +3,7 @@
 .container-xl,
 %container-xl,
 .container-md,
-%container-md  {
+%container-md {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -45,9 +45,6 @@
   padding-bottom: $spacer-base;
 }
 
-
-
-
 //Breakpoints
 
 @media screen and (min-width: $grid-breakpoint-lg) {

components/02-layouts/component-layouts/tile-layout/_tile-layout.scss

@@ -24,7 +24,7 @@
   .tile-grid-alternating-1-4 {
     grid-template-columns: repeat(2, minmax(6rem, 1fr));
 
-    :nth-child(5n+1) {
+    :nth-child(5n + 1) {
       grid-column: span 2;
     }
   }

components/02-layouts/page-layouts/article-layout-simple/_article-layout-simple.scss

@@ -30,7 +30,7 @@
   }
 
   // Breakpoints
-  @media screen and (min-width: $grid-breakpoint-md){
+  @media screen and (min-width: $grid-breakpoint-md) {
     padding-right: $spacer-xxl;
     padding-left: $spacer-xxl;
   }
@@ -83,4 +83,3 @@
     }
   }
 }
-

components/02-layouts/page-layouts/article-layout/_article-layout.scss

@@ -31,7 +31,7 @@
   }
 
   // Breakpoints
-  @media screen and (min-width: $grid-breakpoint-md){
+  @media screen and (min-width: $grid-breakpoint-md) {
     padding-right: $spacer-xxl;
     padding-left: $spacer-xxl;
   }
@@ -98,4 +98,3 @@
     }
   }
 }
-

components/03-organisms/footer/_footer.scss

@@ -11,10 +11,10 @@
   gap: $spacer-base;
 }
 
-.footer__form ,
+.footer__form,
 .footer__offices__section,
 .footer__list__section {
-  display:grid;
+  display: grid;
   gap: $spacer-xs;
 }
 
@@ -26,11 +26,10 @@
 .footer__offices__section__list {
   @extend %list-unstyled;
 
-  display:grid;
+  display: grid;
   gap: $spacer-base;
 }
 
-
 .footer__paragraph,
 .footer__address {
   @extend %heading-font-regular;
@@ -63,7 +62,7 @@
     height: $font-size-xxs;
     margin-right: $spacer-xxs;
     color: $footer-heading-color;
-    content: asset-url("icons/pin.svg");
+    content: asset-url('icons/pin.svg');
   }
 }
 
@@ -111,10 +110,10 @@
   }
 
   .footer__form {
-    grid-row: 1 / 2 ;
+    grid-row: 1 / 2;
   }
 
-  .footer__offices{
+  .footer__offices {
     grid-row: 1;
   }
 

components/03-organisms/navbar/_navbar-common.scss

@@ -107,7 +107,7 @@ $navbar-secondary-font-size: ms(-2);
   width: 100%;
   height: 3px;
   background-color: $navbar-link-active-color;
-  content: "";
+  content: '';
 }
 
 .navbtn--meta {

components/03-organisms/navbar/_navbar-mobile.scss

@@ -11,7 +11,7 @@ $navbar-primary-font-size: ms(3);
       width: 1px;
       height: 1.5em;
       background-color: $navbar-link-color;
-      content: "";
+      content: '';
     }
   }
 

components/03-organisms/navbar/_navbar.scss

@@ -1,3 +1,3 @@
-@import "./navbar-common";
-@import "./navbar-mobile";
-@import "./navbar-desktop";
+@import './navbar-common';
+@import './navbar-mobile';
+@import './navbar-desktop';

components/03-organisms/navbar/navbar.js

@@ -28,8 +28,9 @@ export default class Navbar extends HTMLElement {
 
   init() {
     this.primaryList = document.querySelector('.primary-nav__list')
-    this.dropdownToggles = Array.from(document.querySelectorAll('.dropdown__toggle--navbar'))
-      .map(el => new DropdownToggle(el, el.getAttribute('for')))
+    this.dropdownToggles = Array.from(document.querySelectorAll('.dropdown__toggle--navbar')).map(
+      (el) => new DropdownToggle(el, el.getAttribute('for'))
+    )
     this.dropdownPrimaryLinks = document.querySelectorAll('.dropdown .navbtn--primary')
 
     // add --enhanced modifier
@@ -38,12 +39,12 @@ export default class Navbar extends HTMLElement {
       '.primary-nav__list',
       '.primary-nav__item',
       '.dropdown__list-wrapper',
-      '.dropdown__toggle'
+      '.dropdown__toggle',
     ])
 
     // enhance drill down ux
     // (copy dropdown heading link into dropdown list if not present)
-    this.dropdownPrimaryLinks.forEach(link => {
+    this.dropdownPrimaryLinks.forEach((link) => {
       const targetDropdownList = link.parentNode.querySelector('.dropdown__list')
       if (!targetDropdownList.querySelector('.dropdown__item--clone')) {
         const anchorClone = document.createElement('a')
@@ -69,7 +70,7 @@ export default class Navbar extends HTMLElement {
         this.uncheckDropdownToggles(all, ddt)
         this.primaryList.classList.remove('primary-nav__list--level2')
       })
-      ddt.relatedLink.addEventListener('click', e => {
+      ddt.relatedLink.addEventListener('click', (e) => {
         if (this.isMobile) {
           e.preventDefault()
           ddt.checked = true
@@ -79,13 +80,12 @@ export default class Navbar extends HTMLElement {
       })
     })
 
-    document.querySelector('.navbtn--drill-up')
-      .addEventListener('click', () => {
-        this.uncheckDropdownToggles(this.dropdownToggles)
-        this.primaryList.classList.remove('primary-nav__list--level2')
-      })
+    document.querySelector('.navbtn--drill-up').addEventListener('click', () => {
+      this.uncheckDropdownToggles(this.dropdownToggles)
+      this.primaryList.classList.remove('primary-nav__list--level2')
+    })
 
-    document.querySelector('body').addEventListener('click', e => {
+    document.querySelector('body').addEventListener('click', (e) => {
       if (this.primaryList.contains(e.target)) return
       this.uncheckDropdownToggles(this.dropdownToggles)
       this.primaryList.classList.remove('primary-nav__list--level2')
@@ -95,15 +95,14 @@ export default class Navbar extends HTMLElement {
   }
 
   enhance(selectors) {
-    selectors.forEach(s => {
+    selectors.forEach((s) => {
       s = s.startsWith('.') ? s.slice(1) : s
-      Array.from(document.querySelectorAll('.' + s))
-        .forEach(e => e.classList.add(s + '--enhanced'))
+      Array.from(document.querySelectorAll('.' + s)).forEach((e) => e.classList.add(s + '--enhanced'))
     })
   }
 
   uncheckDropdownToggles(toggles, except) {
-    toggles.forEach(t => {
+    toggles.forEach((t) => {
       if (except !== t) {
         t.checked = false
       }

components/03-organisms/newsletter-optin/_newsletter-optin.scss

@@ -6,7 +6,7 @@
   justify-content: center;
   background-blend-mode: multiply;
   background-color: $brand-gray-75;
-  background-image: asset-url("bg-images/edition-02/edition02-data-05.webp");
+  background-image: asset-url('bg-images/edition-02/edition02-data-05.webp');
   background-size: cover;
   color: $newsletter-optin-color;
 

components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss

@@ -64,7 +64,7 @@ $conclusion-border-size: ms(5);
     > li p {
       @extend %heading-font-regular;
 
-    /* stylelint-disable-next-line selector-max-compound-selectors */
+      /* stylelint-disable-next-line selector-max-compound-selectors */
       li::marker {
         color: $bullet-list-color;
       }

components/04-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss

@@ -19,7 +19,7 @@
     flex-grow: 1;
     margin-left: 10px;
     background-color: $footnote-section-headline-color;
-    content: "\a0";
+    content: '\a0';
   }
 }
 

components/04-molecules/article&blog-post-elements/info-note/info-note.scss

@@ -21,7 +21,7 @@
   &__text * {
     @extend %heading-font-regular;
 
-    color: $info-note-text-color;;
+    color: $info-note-text-color;
     font-size: $font-size-xs;
     text-align: left;
   }

components/04-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss

@@ -19,21 +19,21 @@ long-quote > blockquote,
 
     &:lang(de) {
       &::before {
-        content: "„";
+        content: '„';
       }
 
       &::after {
-        content: "“";
+        content: '“';
       }
     }
 
     &:lang(en) {
       &::before {
-        content: "“";
+        content: '“';
       }
 
       &::after {
-        content: "”";
+        content: '”';
       }
     }
   }

components/04-molecules/article&blog-post-elements/share-section/_share-section.scss

@@ -28,7 +28,7 @@
   @extend %list-unstyled;
 
   display: flex;
-  flex-wrap:nowrap;
+  flex-wrap: nowrap;
   justify-content: center;
 }
 

components/04-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss

@@ -26,7 +26,7 @@
 
     &::before {
       padding-right: 0.5rem;
-      content: asset-url("icons/arrow-short-down.svg");
+      content: asset-url('icons/arrow-short-down.svg');
     }
   }
 
@@ -53,7 +53,7 @@
 
   .toc--sticky {
     position: sticky;
-    top:$spacer-xs;
+    top: $spacer-xs;
     align-self: start;
   }
 }

components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js

@@ -42,14 +42,14 @@ export default class WallOfConsent extends HTMLElement {
     this.prepend(this.content)
     this.toggleInitialElements(true)
     this.checkbox.checked = true
-    this.classList.add("revealed")
+    this.classList.add('revealed')
   }
 
   removeContent() {
     this.content.innerHTML = ''
     this.toggleInitialElements(false)
     this.checkbox.checked = false
-    this.classList.remove("revealed")
+    this.classList.remove('revealed')
   }
 
   toggleInitialElements(hidden) {

components/04-molecules/contact-person/_contact-person.scss

@@ -23,7 +23,6 @@
   width: 100%;
   grid-gap: $spacer-base;
   grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
-
 }
 
 .contact-person__subheading {

components/04-molecules/search/search-result/_search-result.scss

@@ -17,7 +17,7 @@
 
 .search-result__type + .search-result__date {
   &::before {
-    content: " | ";
+    content: ' | ';
   }
 }