hr-design-system-handlebars 0.42.11 → 0.44.0

package/.storybook/main.js

@@ -33,6 +33,7 @@ module.exports = {
         // Make whatever fine-grained changes you need
         config.resolve.alias = {
             ...config.resolve.alias,
+            scripts: path.resolve(__dirname, '../scripts'),
             components: path.resolve(__dirname, '../src/stories/views/components'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
             hrQueryNew$: path.resolve(

package/.storybook/preview.js

@@ -96,6 +96,9 @@ export const parameters = {
     options: {
         storySort: {
             order: [
+                'Einführung',
+                'Grundlegendes',
+                ['Konventionen und Datenstrukturen', 'Testdatenbereitstellung', '*'],
                 'Komponenten',
                 [
                     'Page',

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.44.0 (Mon May 02 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1550 [#224](https://github.com/mumprod/hr-design-system-handlebars/pull/224) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.43.1 (Thu Apr 28 2022)
+
+#### 🐛 Bug Fix
+
+- Zusatzinformationen neben Label [#223](https://github.com/mumprod/hr-design-system-handlebars/pull/223) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.43.0 (Thu Apr 28 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1547 - alternative Teaser Init [#222](https://github.com/mumprod/hr-design-system-handlebars/pull/222) (zouhair1 [@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 2
+
+- selbaciri (zouhair1)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.42.11 (Thu Apr 28 2022)
 
 #### 🐛 Bug Fix

package/{scripts → build/scripts}/build.js

@@ -1,7 +1,7 @@
 const { execSync } = require('child_process')
-const { resolve, join } = require('path')
+const { resolve } = require('path')
 
-const root = resolve(__dirname, '..')
+const root = resolve(__dirname, '../..')
 const run = (cmd) => execSync(cmd, { stdio: 'inherit', cwd: root })
 
 // Copy hbs files into the dist folder

package/build/scripts/jsoninclude.js

@@ -0,0 +1,140 @@
+/**
+ * jsoninclude - JSON Parser that includes JSON from other files.
+ */
+;(function () {
+    'use strict'
+
+    const _ = require('underscore'),
+        fs = require('fs'),
+        options = require('../../config.js')
+
+    JSON.minify = JSON.minify || require('node-json-minify')
+
+    /**
+     * Set value for a object property path given as String.
+     */
+    var setObjectValue = function (obj, value, path) {
+        var aPath = path.split('.'),
+            parent = obj
+
+        for (var i = 0; i < aPath.length - 1; i++) {
+            if (!parent.hasOwnProperty(aPath[i])) {
+                console.warn("Can't set object value. Wrong path: " + path)
+                return
+            }
+
+            parent = parent[aPath[i]]
+        }
+
+        parent[aPath[aPath.length - 1]] = value
+    }
+
+    /**
+     * Get value for a object property path given as String.
+     */
+    var getObjectValue = function (obj, path) {
+        var aPath = path.split('.'),
+            parent = obj
+
+        for (var i = 0; i < aPath.length; i++) {
+            if (!parent.hasOwnProperty(aPath[i])) {
+                console.warn("Can't get object value. Wrong path: " + path)
+                return {}
+            }
+
+            parent = parent[aPath[i]]
+        }
+
+        return parent
+    }
+
+    const loadInclude = function (includePath) {
+        try {
+            return fs.readFileSync(`${options.paths.assets.fixtures}/${includePath}`, 'UTF-8')
+        } catch (error) {
+            console.error(`Can\'t read file: ${options.paths.assets.fixtures}/${includePath}`)
+            return JSON.stringify({})
+        }
+    }
+
+    /**
+     * JSON.parse reviver function to execute jsoninclude features.
+     */
+    var executeJSONInclude = function (k, v) {
+        if (v['@->jsoninclude'] !== undefined && v['@->jsoninclude'] !== '') {
+            try {
+                //read include
+
+                let includedStringifiedJson = loadInclude(v['@->jsoninclude'])
+                //parse as JSON
+                let includeJSON = parse(includedStringifiedJson)
+                //get specified content
+                if (v['@->contentpath'] !== undefined) {
+                    includeJSON = getObjectValue(includeJSON, v['@->contentpath'])
+                }
+                if (v['@->extends'] !== undefined) {
+                    includeJSON = _.extend(includeJSON, v['@->extends'])
+                }
+
+                //override values
+                if (v['@->overrides'] !== undefined) {
+                    for (var i = 0; i < v['@->overrides'].length; i++) {
+                        if (
+                            v['@->overrides'][i]['@->contentpath'] !== undefined &&
+                            v['@->overrides'][i]['@->value'] !== undefined
+                        ) {
+                            setObjectValue(
+                                includeJSON,
+                                v['@->overrides'][i]['@->value'],
+                                v['@->overrides'][i]['@->contentpath']
+                            )
+                        }
+                    }
+                }
+                return includeJSON
+            } catch (e) {
+                console.error(
+                    "Can't parse JSONInclude! " + type(e) === '[object Object]'
+                        ? JSON.stringify(e, null, 4)
+                        : e
+                )
+                throw {
+                    orig: e,
+                    message: e.message,
+                    json: v,
+                    via: k,
+                }
+            }
+        }
+
+        //nothing to do
+        return v
+    }
+
+    /**
+     * Parse a string as JSON and transforming the value produced by parsing.
+     */
+    var parse = function (text) {
+        try {
+            return JSON.parse(JSON.minify(text), executeJSONInclude)
+        } catch (e) {
+            console.error(`Can't parse json! ${e}`)
+            throw {
+                orig: e,
+                message: e.message,
+                json: text,
+                via: 'Bla',
+            }
+        }
+    }
+
+    module.exports = {
+        /**
+         * Create jsoninclude Object to parse JSON.
+         *
+         * @param reader Callback to read include file.
+         * @returns jsoninclude Object.
+         */
+        parse: parse,
+    }
+})()

package/config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    paths: {
+        root: './',
+        assets: {
+            fixtures: 'src/assets/fixtures',
+        },
+        dist: {
+            components: 'src/stories/views/components',
+        },
+    },
+}

package/dist/assets/index.css

@@ -1554,6 +1554,12 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mt-6 {
     margin-top: 1.5rem;
 }
+.\!mt-4 {
+    margin-top: 1rem !important;
+}
+.ml-2 {
+    margin-left: 0.5rem;
+}
 .-mt-2 {
     margin-top: -0.5rem;
 }
@@ -1566,6 +1572,24 @@ Ensure the default browser behavior of the `hidden` attribute.
 .-mt-10 {
     margin-top: -2.5rem;
 }
+.mr-4 {
+    margin-right: 1rem;
+}
+.ml-4 {
+    margin-left: 1rem;
+}
+.mt-0\.5 {
+    margin-top: 0.125rem;
+}
+.mt-0 {
+    margin-top: 0px;
+}
+.mt-10 {
+    margin-top: 2.5rem;
+}
+.mb-0 {
+    margin-bottom: 0px;
+}
 .mt-2\.5 {
     margin-top: 0.625rem;
 }
@@ -1581,30 +1605,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mr-0 {
     margin-right: 0px;
 }
-.mt-0\.5 {
-    margin-top: 0.125rem;
-}
-.mt-0 {
-    margin-top: 0px;
-}
 .mt-3 {
     margin-top: 0.75rem;
 }
-.mr-4 {
-    margin-right: 1rem;
-}
-.ml-4 {
-    margin-left: 1rem;
-}
-.ml-2 {
-    margin-left: 0.5rem;
-}
-.mt-10 {
-    margin-top: 2.5rem;
-}
-.mb-0 {
-    margin-bottom: 0px;
-}
 .block {
     display: block;
 }
@@ -1684,9 +1687,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .max-h-0 {
     max-height: 0px;
 }
-.max-h-6 {
-    max-height: 1.5rem;
-}
 .max-h-10 {
     max-height: 2.5rem;
 }
@@ -1711,9 +1711,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .w-40 {
     width: 10rem;
 }
-.w-5 {
-    width: 1.25rem;
-}
 .w-12 {
     width: 3rem;
 }
@@ -1734,6 +1731,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .w-9 {
     width: 2.25rem;
 }
+.w-5 {
+    width: 1.25rem;
+}
 .max-w-full {
     max-width: 100%;
 }
@@ -1889,6 +1889,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 .gap-y-9 {
     row-gap: 2.25rem;
 }
+.gap-y-4 {
+    row-gap: 1rem;
+}
+.gap-x-5 {
+    -webkit-column-gap: 1.25rem;
+       -moz-column-gap: 1.25rem;
+            column-gap: 1.25rem;
+}
 .gap-y-5 {
     row-gap: 1.25rem;
 }
@@ -1988,6 +1996,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-border-opacity: 1;
     border-color: rgba(255, 255, 255, var(--tw-border-opacity));
 }
+.bg-red-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
+}
+.\!bg-white {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
+}
+.bg-green-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
+}
 .bg-labelMedia {
     background-color: #006dc1;
     background-color: var(--color-label-media);
@@ -2083,6 +2103,12 @@ Ensure the default browser behavior of the `hidden` attribute.
 .p-10 {
     padding: 2.5rem;
 }
+.p-4 {
+    padding: 1rem;
+}
+.\!p-4 {
+    padding: 1rem !important;
+}
 .p-2 {
     padding: 0.5rem;
 }
@@ -2264,6 +2290,15 @@ Ensure the default browser behavior of the `hidden` attribute.
 .leading-6 {
     line-height: 1.5rem;
 }
+.\!leading-6 {
+    line-height: 1.5rem !important;
+}
+.\!leading-8 {
+    line-height: 2rem !important;
+}
+.leading-5\.5 {
+    line-height: 1.375rem;
+}
 .leading-10 {
     line-height: 2.5rem;
 }
@@ -2274,18 +2309,26 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(124, 58, 237, var(--tw-text-opacity));
 }
+.\!text-red-900 {
+    --tw-text-opacity: 1 !important;
+    color: rgba(127, 29, 29, var(--tw-text-opacity)) !important;
+}
+.\!text-green-900 {
+    --tw-text-opacity: 1 !important;
+    color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
+}
 .text-white {
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-.text-blue-congress {
-    --tw-text-opacity: 1;
-    color: rgba(0, 82, 147, var(--tw-text-opacity));
-}
 .text-grey-scorpion {
     --tw-text-opacity: 1;
     color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
+.text-blue-congress {
+    --tw-text-opacity: 1;
+    color: rgba(0, 82, 147, var(--tw-text-opacity));
+}
 .text-toplineColor {
     color: #006dc1;
     color: var(--color-topline);
@@ -2509,14 +2552,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-bg-opacity: 1;
     background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:text-toplineColor:hover {
-    color: #006dc1;
-    color: var(--color-topline);
-}
 .hover\:text-white:hover {
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.hover\:text-toplineColor:hover {
+    color: #006dc1;
+    color: var(--color-topline);
+}
 .hover\:underline:hover {
     -webkit-text-decoration-line: underline;
             text-decoration-line: underline;
@@ -3047,15 +3090,15 @@ Ensure the default browser behavior of the `hidden` attribute.
     .lg\:pl-1 {
         padding-left: 0.25rem;
     }
-    .lg\:leading-5 {
-        line-height: 1.25rem;
-    }
     .lg\:leading-8 {
         line-height: 2rem;
     }
     .lg\:leading-10 {
         line-height: 2.5rem;
     }
+    .lg\:leading-5 {
+        line-height: 1.25rem;
+    }
     .lg\:text-blue-congress {
         --tw-text-opacity: 1;
         color: rgba(0, 82, 147, var(--tw-text-opacity));

package/dist/views/components/Label.hbs

@@ -1,12 +1,12 @@
-<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-6 font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
+<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
     {{text}}
 </span>
 {{~#with this.byline ~}}
-    <span class="">
-        {{#if this.bylineSsi}}
+    <span class="ml-2 text-xs text-grey-scorpion font-headingSerif ">
+        {{~#if this.bylineSsi ~}}
             {{{this.bylineSsi}}}
-        {{else}}
+        {{~else ~}}
             {{this.bylineText}}
-        {{/if}}
+        {{~/if ~}}
     </span>
 {{~/with~}}

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

@@ -0,0 +1,16 @@
+<article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 flex-row ","md:col-span-4 flex-row","md:col-span-6 flex-row","flex-row"]'}} ">
+    <figure class="{{inline-switch teasersize '["sm", "xxl"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9","basis-3/5 ar-16-9", "ar-16-9"]'}} ">
+        {{#>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}}  
+    </figure>
+    <div class="{{inline-switch teasersize '["sm", "xxl"]' '["basis-3/5 md:flex-full" , "basis-2/5"]'}} ">
+        <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            {{> components/Teaser/components/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
+        </header>
+        <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
+            {{> components/Teaser/components/teaserText text=shorttext size=teasersize }}
+            {{> components/Teaser/components/Byline}} 
+        </section>
+    </div>
+</article>

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

@@ -6,11 +6,11 @@
     </figure>
     <div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
         <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
+            {{> components/Teaser/components/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}            
         </header>
         <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
-            {{> components/Teaser/teaserText text=shorttext size=teasersize }}
-            {{> components/Teaser/Byline}} 
+            {{> components/Teaser/components/teaserText text=shorttext size=teasersize }}
+            {{> components/Teaser/components/Byline}} 
         </section>
     </div>
 </article>

package/dist/views/components/Teaser/{Byline.hbs → components/Byline.hbs}

@@ -69,6 +69,6 @@
     {{/if}}
 
     {{!--Comments--}}
-    {{> components/Teaser/Comments}}
+    {{> components/Teaser/components/Comments}}
 
 </p>

package/{src/stories/views/components/Teaser → dist/views/components/Teaser/components}/Teaser-Heading.hbs

@@ -1,13 +1,13 @@
 {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }} 
     {{#with this.content.label}}
-        <div class="max-h-6">
+        <div class="leading-5.5">
             {{> components/Label type=loca text=type}}
         </div>
     {{/with~}}    
     <{{~ ../headlineTag }} class="{{../class}}" >
         {{#with this.content.topline}}
-            {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
+            {{> components/Teaser/components/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
         {{/with}}
-        {{> components/Teaser/Title text=../this.title font=../font size=../size }}
+        {{> components/Teaser/components/Title text=../this.title font=../font size=../size }}
     </{{~ ../headlineTag }}>
 {{/components/base/link}}   

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

@@ -0,0 +1,6 @@
+<span 
+    class="leading-5.5 pt-px block text-base text-toplineColor font-heading"
+    aria-label="{{readMore}}: {{text}}"
+>
+    {{text}}
+</span>

package/gulpfile.js

@@ -1,4 +1,4 @@
-const { src, dest, series } = require('gulp')
+const { src, dest, series, watch } = require('gulp')
 const mergeStream = require('merge-stream')
 const glob = require('glob')
 const svgStore = require('gulp-svgstore')
@@ -6,6 +6,11 @@ const svgMin = require('gulp-svgmin')
 const path = require('path')
 const cheerio = require('gulp-cheerio')
 const rename = require('gulp-rename')
+const jsonTransform = require('gulp-json-transform')
+const JSONIncluder = require('./build/scripts/jsoninclude.js')
+const log = require('fancy-log')
+
+const options = require('./config.js')
 
 // css file paths
 const iconsDirRoot = 'src/assets/icons'
@@ -148,7 +153,7 @@ function minimizeSvgSrcFiles() {
                 .pipe(
                     cheerio({
                         run: function ($, file) {
-                            console.log(file.basename)
+                            log(file.basename)
                             if (
                                 file.dirname.includes('unweather') &&
                                 file.basename === 'regiomap.src.svg'
@@ -199,4 +204,33 @@ function minimizeSvgSrcFiles() {
     )
 }
 
+function parseJson() {
+    return src([
+        `${options.paths.assets.fixtures}/**/*.json`,
+        `!${options.paths.assets.fixtures}/**/*.inc.json`,
+    ])
+        .pipe(
+            jsonTransform(function (data, file) {
+                const jsonWithIncludes = JSONIncluder.parse(JSON.stringify(data))
+                return jsonWithIncludes
+            })
+        )
+        .pipe(
+            rename(function (path) {
+                return {
+                    dirname: `${path.dirname}/fixtures`,
+                    basename: path.basename,
+                    extname: path.extname,
+                }
+            })
+        )
+        .pipe(dest(options.paths.dist.components))
+}
+
+function watchForChanges() {
+    watch(`${options.paths.assets.fixtures}/**/*.json`, series(parseJson))
+    log('Watching for Changes..\n')
+}
+
 exports.default = series(createSvgMaps, createSvgMapsForBrands, minimizeSvgSrcFiles)
+exports.parseJson = series(parseJson, watchForChanges)

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.42.11",
+    "version": "0.44.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",
@@ -15,11 +15,12 @@
         "build-storybook-docs": "build-storybook --docs",
         "build-storybook-docs-with-tailwind": "npm run build:tailwind && npm run build-storybook-docs",
         "build:tailwind": "postcss src/assets/tailwind.css -o dist/assets/index.css",
-        "build": "npm run clean && npm run build:tailwind && node ./scripts/build.js",
+        "build": "npm run clean && npm run build:tailwind && node ./build/scripts/build.js",
         "chromatic": "npx chromatic --project-token 84f1628f224a",
         "clean": "rimraf  dist",
         "release": "npx auto shipit --base-branch=main",
-        "optimize-svgs": "gulp"
+        "optimize-svgs": "gulp",
+        "parseJson": "gulp parseJson"
     },
     "browserslist": [
         "last 2 versions",
@@ -48,17 +49,20 @@
         "chromatic": "^5.6.2",
         "copyfiles": "^2.4.1",
         "cross-env": "^7.0.3",
+        "fancy-log": "^2.0.0",
         "file-loader": "^6.2.0",
         "glob": "^7.1.7",
         "gulp": "^4.0.2",
         "gulp-cheerio": "^1.0.0",
         "gulp-cli": "^2.3.0",
+        "gulp-json-transform": "^0.4.8",
         "gulp-rename": "^2.0.0",
         "gulp-svgmin": "^4.0.1",
         "gulp-svgstore": "^8.0.0",
         "handlebars": "^4.7.6",
         "handlebars-loader": "^1.7.1",
         "merge-stream": "^2.0.0",
+        "node-json-minify": "^3.0.0",
         "path": "^0.12.7",
         "postcss": "^8.4.5",
         "postcss-cli": "^8.3.1",
@@ -67,7 +71,8 @@
         "rimraf": "^3.0.2",
         "storybook-conditional-toolbar-selector": "^1.0.3",
         "tailwindcss": "^3.0.23",
-        "tailwindcss-important": "^1.0.0"
+        "tailwindcss-important": "^1.0.0",
+        "underscore": "^1.13.2"
     },
     "dependencies": {
         "@alpine-collective/toolkit": "^1.0.0",

package/src/assets/fixtures/teaser/teaser_comment.json

@@ -0,0 +1,16 @@
+{
+    "commentLink": {
+        "link": {
+            "url": "/teaser1-comments",
+            "webviewUrl": "/teaser1-comments#webview",
+            "isTargetBlank": false,
+            "readMoreText": {
+                "readMoreScreenreader": "Zu den Kommentaren des Artikels"
+            },
+            "content": {
+                "commentNumber": "666",
+                "hasOneComment": false
+            }
+        }    
+    }
+}