hr-design-system-handlebars 0.43.1 → 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,15 @@
+# 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

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,9 @@ 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;
 }
@@ -1993,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);
@@ -2088,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;
 }
@@ -2269,6 +2290,12 @@ 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;
 }
@@ -2282,6 +2309,14 @@ 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));

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.43.1",
+    "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
+            }
+        }    
+    }
+}

package/src/assets/fixtures/teaser/teaser_labels.inc.json

@@ -0,0 +1,18 @@
+{
+    "ticker": {
+        "type": "Ticker",
+        "loca": "ticker",
+        "byline": {
+            "bylineSsi": "BylineText aus ssi",
+            "bylineText": "BylineText"
+        }
+    },
+    "media": {
+        "type": "Media",
+        "loca": "media",
+        "byline": {
+            "bylineSsi": "BylineText aus ssi",
+            "bylineText": "BylineText"
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "teasersize",
+            "@->value": "lg"
+        }
+    ]
+}

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

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "teasersize",
+            "@->value": "md"
+        }
+    ]
+}

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

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "teasersize",
+            "@->value": "sm"
+        }
+    ]
+}

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

@@ -0,0 +1,10 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "teasersize",
+            "@->value": "xl"
+        }
+    ]
+}

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser"
+}

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaserWithComments"
+}

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

@@ -0,0 +1,28 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser",
+    "@->overrides": [
+        {
+            "@->contentpath": "topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "link.content.topline",
+            "@->value": ""
+        },
+        {
+            "@->contentpath": "label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker"
+            }
+        },
+        {
+            "@->contentpath": "link.content.label",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                "@->contentpath": "ticker"
+            }
+        }
+    ]
+}