hr-design-system-handlebars 0.40.0 → 0.42.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.42.0 (Thu Apr 07 2022)
+
+#### 🚀 Enhancement
+
+- FEATURE: employs a loadDynamic template as a [#207](https://github.com/mumprod/hr-design-system-handlebars/pull/207) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.41.0 (Wed Apr 06 2022)
+
+#### 🚀 Enhancement
+
+- Bild für Standard-Teaser [#206](https://github.com/mumprod/hr-design-system-handlebars/pull/206) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.40.1 (Wed Apr 06 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1533 - Datenstruktur in JSON überarbeiten [#205](https://github.com/mumprod/hr-design-system-handlebars/pull/205) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.40.0 (Tue Apr 05 2022)
 
 #### 🚀 Enhancement

package/build/helpers/case.js

@@ -1,5 +1,6 @@
 module.exports = function (value, options) {
-  this.switch_value = value;
-  this.switch_break = false;
-  return options.fn(this);
-};
+    if (value == this.switch_value) {
+        this.switch_break = true
+        return options.fn(this)
+    }
+}

package/build/helpers/switch.js

@@ -1,6 +1,5 @@
 module.exports = function (value, options) {
-  if (value == this.switch_value) {
-    this.switch_break = true;
-    return options.fn(this);
-  }
-};
+    this.switch_value = value
+    this.switch_break = false
+    return options.fn(this)
+}

package/dist/assets/index.css

@@ -1499,22 +1499,9 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: 1rem;
     margin-right: 1rem;
 }
-.mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-}
 .mt-6 {
     margin-top: 1.5rem;
 }
-.mt-0\.5 {
-    margin-top: 0.125rem;
-}
-.mt-0 {
-    margin-top: 0px;
-}
-.mt-4 {
-    margin-top: 1rem;
-}
 .-mt-2 {
     margin-top: -0.5rem;
 }
@@ -1527,12 +1514,21 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
-.mt-8 {
-    margin-top: 2rem;
+.mt-4 {
+    margin-top: 1rem;
 }
 .mt-1 {
     margin-top: 0.25rem;
 }
+.mb-4 {
+    margin-bottom: 1rem;
+}
+.mt-0\.5 {
+    margin-top: 0.125rem;
+}
+.mt-0 {
+    margin-top: 0px;
+}
 .mr-4 {
     margin-right: 1rem;
 }
@@ -1671,15 +1667,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .max-w-full {
     max-width: 100%;
 }
-.max-w-1\/1 {
-    max-width: 100%;
-}
-.max-w-2\/3 {
-    max-width: 66.66666666%;
-}
-.max-w-1\/2 {
-    max-width: 50%;
-}
 .flex-initial {
     -webkit-box-flex: 0;
         -ms-flex: 0 1 auto;
@@ -2155,7 +2142,7 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 2.25rem;
 }
 .text-4xl {
-    font-size: 2rem;
+    font-size: 2.125rem;
     line-height: 2.25rem;
 }
 .text-5xl {
@@ -2194,21 +2181,21 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-.text-toplineColor {
-    color: #006dc1;
-    color: var(--color-topline);
-}
 .text-blue-congress {
     --tw-text-opacity: 1;
     color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
+.text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
 .text-indigo-500 {
     --tw-text-opacity: 1;
     color: rgba(99, 102, 241, var(--tw-text-opacity));
 }
-.text-gray-500 {
-    --tw-text-opacity: 1;
-    color: rgba(107, 114, 128, var(--tw-text-opacity));
+.text-toplineColor {
+    color: #006dc1;
+    color: var(--color-topline);
 }
 .text-grey-scorpion {
     --tw-text-opacity: 1;
@@ -2531,12 +2518,22 @@ Ensure the default browser behavior of the `hidden` attribute.
     .md\:col-span-3 {
         grid-column: span 3 / span 3;
     }
+    .md\:mx-2 {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
     .md\:mt-0 {
         margin-top: 0px;
     }
     .md\:-mt-40 {
         margin-top: -10rem;
     }
+    .md\:mt-8 {
+        margin-top: 2rem;
+    }
+    .md\:mb-0 {
+        margin-bottom: 0px;
+    }
     .md\:flex {
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2623,7 +2620,7 @@ Ensure the default browser behavior of the `hidden` attribute.
         padding-left: 0px;
     }
     .md\:text-4xl {
-        font-size: 2rem;
+        font-size: 2.125rem;
         line-height: 2.25rem;
     }
     .md\:drop-shadow-md {
@@ -2709,9 +2706,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     .lg\:ml-2 {
         margin-left: 0.5rem;
     }
-    .lg\:block {
-        display: block;
-    }
     .lg\:flex {
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2774,9 +2768,6 @@ Ensure the default browser behavior of the `hidden` attribute.
     .lg\:max-w-3\/4 {
         max-width: 75%;
     }
-    .lg\:max-w-1\/3 {
-        max-width: 33.33333333%;
-    }
     .lg\:flex-initial {
         -webkit-box-flex: 0;
             -ms-flex: 0 1 auto;

package/dist/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}

package/dist/views/components/Page/Page.hbs

@@ -29,20 +29,20 @@
                 class="flex items-center justify-center"
             >
                 <div class="container px-3.5 md:px-5 lg:px-10">
-                    <div class="mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="100"
+                                teaserSize="xxl"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
                                 author="Stephan Reich"
                         }}
                     </div>
-                    <div class="flex mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -51,17 +51,17 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
                                 author="Stephan Reich"
                         }}
                     </div>
-                    <div class="flex mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="33"
+                                teaserSize="md"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -70,7 +70,7 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="33"
+                                teaserSize="md"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -79,17 +79,17 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="33"
+                                teaserSize="md"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
                                 author="Stephan Reich"
                         }}
                     </div>
-                    <div class="flex mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -98,17 +98,17 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
                                 author="Stephan Reich"
                         }}
                     </div>
-                    <div class="flex mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -117,17 +117,17 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="50"
+                                teaserSize="lg"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
                                 author="Stephan Reich"
                         }}
                     </div>
-                    <div class="flex mt-8">
+                    <div class="md:mt-8">
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="25"
+                                teaserSize="sm"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -136,7 +136,7 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="25"
+                                teaserSize="sm"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -145,7 +145,7 @@
 
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="25"
+                                teaserSize="sm"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -153,7 +153,7 @@
                         }}
                         {{> components/Teaser/Teaser 
                                 variant="Serif"
-                                teaserSize="25"
+                                teaserSize="sm"
                                 topline="So plant Glasner bei der Eintracht"
                                 headline="Silvas Erbe wird auf mehrere Schultern verteilt"
                                 teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."

package/dist/views/components/Teaser/Teaser-Heading.hbs

@@ -1,8 +1,8 @@
-<a href="#" class="hover:text-toplineColor">
-    <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
-        {{#if topline}}
-            {{> components/Topline text=topline }}
+{{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
+    <{{~ ../headlineTag }} class="mt-4 {{../class}}" >
+        {{#if ../topline}}
+            {{> components/Teaser/Topline text=../topline }}
         {{/if}}
-        {{> components/Title text=headline }}
-    </{{headlineTag}}>
-</a>
+        {{> components/Teaser/Title text=../headline font=../font size=../size}}
+    </{{~ ../headlineTag }}>
+{{/components/base/link}}  

package/dist/views/components/Teaser/Teaser-standard.hbs

@@ -0,0 +1,18 @@
+<article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
+    {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
+        {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
+    {{/components/base/link}}  
+    {{#if labelType}}
+        <div class="mt-4">
+            {{> components/Label type=labelType text=labelText}}
+        </div>
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
+    {{else}}
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
+    {{/if}}
+    
+    <div class="mt-2 text-base font-copy">{{shorttext}}</div>
+    {{#if profiles}}
+        <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
+    {{/if}}
+</article>

package/dist/views/components/Teaser/Teaser.hbs

@@ -1,6 +1,5 @@
 
-<div class="-{{variant}} {{inline-switch teaserSize '["100","66","50","33","25"]' '["max-w-1/1","max-w-2/3","max-w-1/2","hidden lg:block lg:max-w-1/3","hidden lg:block lg:max-w-1/4"]'}} mx-2 first:ml-0 last:mr-0">
-
+<div class="{{inline-switch teaserSize '["sm","md","lg","xl","xxl"]' '["col-span-12 md:col-span-3","col-span-12 md:col-span-4","col-span-12 md:col-span-6","col-span-12","col-span-12"]'}} md:mx-2 first:ml-0 last:mr-0 mb-4 md:mb-0">
     <img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
             loading="lazy"
             data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w, 
@@ -21,9 +20,9 @@
         <div class="mt-4">
             {{> components/Label type=labelType text=labelText}}
         </div>
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
     {{else}}
-        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
+        {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
     {{/if}}
     
     <div class="mt-2 text-base font-copy">{{teaserText}} <a class="text-indigo-500" href="#">[<span class="no-underline hover:underline">mehr</span>]</a></div>

package/dist/views/components/Teaser/Title.hbs

@@ -0,0 +1 @@
+<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl ","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>

package/dist/views/components/Teaser/Topline.hbs

@@ -0,0 +1,6 @@
+<span 
+    class="block text-base text-toplineColor font-heading"
+    aria-label="Zum Artikel: {{text}}"
+>
+    {{text}}
+</span>

package/dist/views/components/base/loadDynamic.hbs

@@ -0,0 +1,5 @@
+{{#switch templatePath}}
+    {{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
+        {{> components/Header/ServiceNavigation/ServiceNavigationItem}}
+    {{/case}}
+{{/switch}}

package/dist/views/components/base/loadSSI.hbs

@@ -1,5 +1,5 @@
 {{#if (isStorybook)}}  
-    {{> (lookup . '_template') }}   
+    {{> components/base/loadDynamic templatePath=templatePath}} 
 {{else}}
     {{{this}}}
 {{/if}}        

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.40.0",
+    "version": "0.42.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/stories/Typography.stories.mdx

@@ -94,7 +94,7 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
 | `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.75rem`  | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 2rem`    | `22px`<br />`32px` | Setzt die Eigenschaften `font-size` und `line-height` |
 | `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-4xl`          | `font-size: 2rem` <br /> `line-height: 2.25rem`     | `32px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.25rem` | `34px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung RobotoSlab
 

package/src/stories/views/components/Header/ServiceNavigation/ServiceList.hbs

@@ -8,12 +8,7 @@
     {{#with this.serviceNavigationSSILinks}}
         <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
             {{#each this}}        
-                {{!-- {{> components/base/loadSSI _template='components/Header/ServiceNavigation/ServiceNavigationItem' }} --}}                    
-                {{#if (isStorybook)}}  
-                    {{> components/Header/ServiceNavigation/ServiceNavigationItem }}   
-                {{else}}
-                    {{{this}}}
-                {{/if}}          
+                {{> components/base/loadSSI templatePath='components/Header/ServiceNavigation/ServiceNavigationItem' }}               
             {{/each}} 
         </ul>
     {{/with}}