hr-design-system-handlebars 1.11.10 → 1.11.11

package/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.storybook/main.js

@@ -1,29 +1,42 @@
+import remarkGfm from 'remark-gfm'
 const path = require('path')
 const fs = require('fs')
 const FlatContextPlugin = require('../build/webpack/feature-loader/plugin/FlatContextPlugin')
-
-module.exports = {
+const config = {
     staticDirs: ['../src/assets', '../src/assets/js'],
     stories: [
-        '../src/stories/Introduction.stories.mdx',
-        '../src/**/*.stories.mdx',
+        '../src/stories/Introduction.mdx',
+        '../src/**/*.mdx',
         '../src/**/*.stories.@(js|jsx|ts|tsx)',
     ],
     addons: [
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
         {
-            name: '@storybook/addon-postcss',
+            name: '@storybook/addon-essentials',
+            options: {
+                docs: false,
+            },
+        },
+        '@storybook/addon-a11y',
+        {
+            name: '@storybook/addon-styling',
             options: {
-                postcssLoaderOptions: {
+                postCss: {
                     implementation: require('postcss'),
                 },
             },
         },
-        '@storybook/addon-a11y',
-        'storybook-conditional-toolbar-selector',
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [remarkGfm],
+                    },
+                },
+            },
+        },
     ],
-
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
         // You can change the configuration based on that.
@@ -32,9 +45,11 @@ module.exports = {
         config.resolve.alias = {
             ...config.resolve.alias,
             scripts: path.resolve(__dirname, '../scripts'),
+            handlebars$: path.resolve(__dirname, '../node_modules/handlebars/dist/handlebars.js'),
             components: path.resolve(__dirname, '../src/stories/views/components'),
             base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
+            tailwindConfig$: path.resolve(__dirname, '../tailwind.config.js'),
             hrQuery$: path.resolve(__dirname, '../src/stories/views/generic/hrQuery.subfeature.js'),
             initializer$: path.resolve(
                 __dirname,
@@ -45,7 +60,6 @@ module.exports = {
                 '../build/webpack/feature-loader/initializer/loader.js'
             ),
         }
-
         config.module.rules.push(
             {
                 test: /\.hbs$/,
@@ -92,52 +106,12 @@ module.exports = {
                 ],
             }
         )
-
         config.plugins.push(
             new FlatContextPlugin(
                 '/feature',
                 path.resolve(__dirname, '../src/stories/views/'),
                 /\.feature\.js$/
-            ),
-            {
-                apply: (compiler) => {
-                    compiler.hooks.afterCompile.tap('UpdateTailwindPlugin', (compilation) => {
-                        if (
-                            undefined != compilation.compiler.watchFileSystem &&
-                            Object.keys(compilation.compiler.watchFileSystem.watcher.mtimes)
-                                .length > 0
-                        ) {
-                            if (
-                                !Object.keys(
-                                    compilation.compiler.watchFileSystem.watcher.mtimes
-                                ).some((value) => value.includes('tailwind.css'))
-                            ) {
-                                fs.readFile(
-                                    path.resolve(__dirname, '../src/assets/tailwind.css'),
-                                    'utf8',
-                                    (err, data) => {
-                                        if (err) {
-                                            console.error(err)
-                                            return
-                                        }
-                                        fs.writeFile(
-                                            path.resolve(__dirname, '../src/assets/tailwind.css'),
-                                            data,
-                                            (err) => {
-                                                if (err) {
-                                                    console.error(err)
-                                                    return
-                                                }
-                                                //file written successfully
-                                            }
-                                        )
-                                    }
-                                )
-                            }
-                        }
-                    })
-                },
-            }
+            )
         )
 
         config.stats = 'verbose'
@@ -145,4 +119,12 @@ module.exports = {
         // Return the altered config
         return config
     },
+    framework: {
+        name: '@storybook/html-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: true,
+    },
 }
+export default config

package/.storybook/preview-head.html

@@ -3,6 +3,9 @@
 <script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>
 <script src="vendor/modernizr/modernizr.cust.js"></script>
+<script src="vendor/js/header.alpine.js"></script>
 <!--to be sure hyphems work correctly lang Attribute needs to be "de"
 see: https://github.com/storybookjs/storybook/issues/11706 -->
-<script>document.documentElement.setAttribute('lang', 'de')</script>
+<script>
+    document.documentElement.setAttribute('lang', 'de')
+</script>

package/.storybook/preview.js

@@ -1,9 +1,9 @@
 import '!style-loader!css-loader!postcss-loader!tailwind'
 import 'tailwind'
+import { withThemeByDataAttribute } from '@storybook/addon-styling'
 
 import hrDesignsystemDark from './HRDesignsystemDark'
 import hrDesignsystemLight from './HRDesignsystemLight'
-import { withThemeDecorator } from './withThemeDecorator'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
@@ -50,10 +50,10 @@ document.addEventListener('DOMContentLoaded', function (event) {
     }
 })
 
-if (process.env.NODE_ENV !== 'production') {
+/*if (process.env.NODE_ENV !== 'production') {
     console.log(Initializer)
     console.log('Looks like we are in development mode!')
-}
+}*/
 
 const customViewports = {
     hrMin: {
@@ -145,42 +145,12 @@ export const parameters = {
     // Storybook a11y addon configuration
     a11y: {
         // the target DOM element
-        element: '#root',
+        element: '#storybook-root',
         // sets the execution mode for the addon
         manual: false,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: { expanded: true },
-    customConditionalToolbar: {
-        /** Defines the possible sets that can be shown */
-        sets: [
-            {
-                id: 'brands',
-                options: [
-                    { id: 'hr', title: 'hr.de' },
-                    { id: 'hessenschau', title: 'hessenschau.de' },
-                    { id: 'hr1', title: 'hr1.de' },
-                    { id: 'hr2', title: 'hr2.de' },
-                    { id: 'hr3', title: 'hr3.de' },
-                    { id: 'hr4', title: 'hr4.de' },
-                    { id: 'you-fm', title: 'you-fm.de' },
-                    { id: 'hr-inforadio', title: 'hr-info.de' },
-                    { id: 'hr-fernsehen', title: 'hr-fernsehen.de' },
-                    { id: 'hr-rundfunkrat', title: 'hr-rundfunkrat.de' },
-                    { id: 'hr-werbung', title: 'hr-werbung.de' },
-                    { id: 'hr-bigband', title: 'hr-bigband.de' },
-                    { id: 'hr-sinfonieorchester', title: 'hr-sinfonieorchester.de' },
-                ],
-            },
-        ],
-        default: 'brands',
-        /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: https://storybookjs.netlify.app/official-storybook/?path=/story/basics-icon--labels */
-        icon: 'globe',
-        /** title when hovering over the icon */
-        title: 'Themes',
-        /** Setting disable to true makes the addon disabled by default */
-        // disable: true,
-    },
     docs: {
         theme: hrDesignsystemLight,
     },
@@ -203,4 +173,24 @@ export const parameters = {
     },
 }
 
-export const decorators = [withThemeDecorator]
+export const decorators = [
+    withThemeByDataAttribute({
+        themes: {
+            'hessenschau': 'hessenschau',
+            'hr': 'hr',
+            'hr1': 'hr1',
+            'hr2': 'hr2',
+            'hr3': 'hr3',
+            'hr4': 'hr4',
+            'you-fm': 'you-fm',
+            'hr-inforadio': 'hr-inforadio',
+            'hr-fernsehen': 'hr-fernsehen',
+            'hr-bigband': 'hr-bigband',
+            'hr-sinfonieorchester': 'hr-sinfonieorchester',
+            'hr-werbung': 'hr-werbung',
+            'hr-rundfunkrat': 'hr-rundfunkrat',
+        },
+        defaultTheme: 'hessenschau',
+        attributeName: 'data-theme',
+    }),
+]

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v1.11.11 (Tue Apr 18 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2270 - pfeil fehlt in der navigation bei aktiven menüpunkt [#607](https://github.com/mumprod/hr-design-system-handlebars/pull/607) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### 🏠 Internal
+
+- Chore/dpe 2265 [#606](https://github.com/mumprod/hr-design-system-handlebars/pull/606) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.11.10 (Mon Apr 17 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2679,7 +2679,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1681728211612;
+  counter-reset: cnt1681830293137;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2771,6 +2771,10 @@ video {
 .col-full {
         grid-column: full;
     }
+.-currentBrand::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
 @media (min-width: 1024px) {
 
   .-currentBrand::before {
@@ -2802,6 +2806,8 @@ video {
   border-bottom-width: 8px;
   --tw-border-opacity: 1;
   border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: #ffffff;
@@ -2838,6 +2844,8 @@ video {
   border-bottom-width: 7px;
   --tw-border-opacity: 1;
   border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: #ffffff;
@@ -2909,7 +2917,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1681728211612 1;
+  counter-increment: cnt1681830293137 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2925,7 +2933,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1681728211612);
+  content: counter(cnt1681830293137);
 }
 /*! ****************************/
 /*! text-shadow                */

package/package.json

@@ -6,13 +6,13 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.11.10",
+    "version": "1.11.11",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "storybook": "start-storybook -p 6006 public",
-        "build-storybook": "build-storybook",
+        "storybook": "storybook dev -p 6006 public",
+        "build-storybook": "storybook build",
         "build-storybook-with-tailwind": "npm run build:tailwind && npm run build-storybook",
-        "build-storybook-docs": "build-storybook --docs",
+        "build-storybook-docs": "storybook build --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 ./build/scripts/build.js",
@@ -38,19 +38,23 @@
     "devDependencies": {
         "@babel/cli": "^7.13.16",
         "@babel/core": "^7.12.10",
-        "@storybook/addon-a11y": "^6.5.9",
-        "@storybook/addon-actions": "^6.5.9",
-        "@storybook/addon-essentials": "^6.5.9",
-        "@storybook/addon-links": "^6.5.9",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.5.9",
-        "@storybook/html": "^6.5.9",
-        "@storybook/theming": "^6.5.9",
+        "@babel/preset-env": "^7.21.4",
+        "@storybook/addon-a11y": "^7.0.5",
+        "@storybook/addon-actions": "^7.0.5",
+        "@storybook/addon-essentials": "^7.0.5",
+        "@storybook/addon-links": "^7.0.5",
+        "@storybook/addon-styling": "^1.0.1",
+        "@storybook/addons": "^7.0.5",
+        "@storybook/blocks": "7.0.5",
+        "@storybook/html": "^7.0.5",
+        "@storybook/html-webpack5": "7.0.5",
+        "@storybook/theming": "^7.0.5",
         "auto": "^10.26.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.2",
         "chromatic": "^5.6.2",
         "copyfiles": "^2.4.1",
+        "core-js-pure": "^3.30.1",
         "cross-env": "^7.0.3",
         "fancy-log": "^2.0.0",
         "file-loader": "^6.2.0",
@@ -82,12 +86,15 @@
         "prettier": "^2.2.1",
         "raw-loader": "^4.0.2",
         "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "remark-gfm": "^3.0.1",
         "rimraf": "^3.0.2",
-        "storybook": "^6.5.9",
+        "storybook": "^7.0.5",
         "storybook-conditional-toolbar-selector": "^1.0.3",
         "tailwindcss": "^3.0.23",
         "tailwindcss-hyphens": "^0.1.0",
         "tailwindcss-important": "^1.0.0",
+        "typescript": "^5.0.4",
         "underscore": "^1.13.2",
         "zepto-modules": "^1.0.1"
     },

package/src/assets/css/custom-utilities.css

@@ -104,13 +104,13 @@
     }
 
     .-currentBrand {
-        @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
+        @apply before:content-[''] lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
     }
     .-currentService {
-        @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
+        @apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
     }
     .-currentSection {
-        @apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
+        @apply before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
     }
     .-warnung {
         @apply text-red-600 !important;

package/src/stories/BrandColors.data.js

@@ -0,0 +1,42 @@
+import tailwindConfig from 'tailwindConfig'
+const colorVariables = Object.entries(tailwindConfig.theme.extend.colors).filter(
+    ([key, value]) => typeof value === 'string' && value.match(/^var/)
+)
+const brands = [
+    'hr',
+    'hessenschau',
+    'hr1',
+    'hr2',
+    'hr3',
+    'hr4',
+    'you-fm',
+    'hr-inforadio',
+    'hr-fernsehen',
+    'hr-rundfunkrat',
+    'hr-werbung',
+    'hr-bigband',
+    'hr-sinfonieorchester',
+]
+const shortcuts = [
+    'hr',
+    'hs',
+    'hr1',
+    'hr2',
+    'hr3',
+    'hr4',
+    'youfm',
+    'hrInfo',
+    'hr-FS',
+    'hr-RR',
+    'hr-W',
+    'hr-BB',
+    'hr-SO',
+]
+let colorsMap = {}
+colorVariables.forEach(([key, value]) => {
+    let colors = []
+    colors.push(value)
+    colorsMap[key] = colors
+})
+
+export { brands, shortcuts, colorsMap }

package/src/stories/BrandColors.mdx

@@ -0,0 +1,25 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import { colorsMap, brands, shortcuts } from './BrandColors.data.js'
+
+<Meta title="Grundlegendes/Farben/Markenfarben" />
+
+<h1>Markenfarben</h1>
+<br />
+<ColorPalette>
+    {Object.entries(colorsMap).map((token, index) => {
+        let colorsMapBrands = {}
+        for (let i = 0; i < brands.length; i++) {
+            let ele = document.querySelector(':root')
+            ele.setAttribute('data-theme', brands[i])
+            let cs = getComputedStyle(ele)
+            let cv = token[1].toString()
+            let p = cv.substring(4, cv.length - 1)
+            if (p.indexOf(',') > -1) {
+                p = p.substring(0, p.indexOf(','))
+            }
+            let hexColor = cs.getPropertyValue(p)
+            colorsMapBrands[shortcuts[i]] = hexColor
+        }
+        return <ColorItem title={token[0]} colors={colorsMapBrands} />
+    })}
+</ColorPalette>

package/src/stories/{Colors.stories.mdx → Colors.data.js}

@@ -1,5 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-const tailwindConfig = require('../../tailwind.config')
+import tailwindConfig from 'tailwindConfig'
 const colorGroups = Object.entries(tailwindConfig.theme.extend.colors).filter(
     ([key, value]) => typeof value === 'object'
 )
@@ -19,19 +18,4 @@ colorGroups.forEach(([key, value]) => {
     colorsMap[key] = colors
 })
 
-<Meta title="Grundlegendes/Farben/Gesamtpalette" />
-
-# Colors
-
-<ColorPalette>
-    {Object.entries(colorsMap).map((token, key) => {
-        return (
-            <ColorItem
-                title={token[0]}
-                colors={token[1].map((value) => {
-                    return value
-                })}
-            />
-        )
-    })}
-</ColorPalette>
+export default colorsMap

package/src/stories/Colors.mdx

@@ -0,0 +1,19 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import colorsMap from './Colors.data.js'
+
+<Meta title="Grundlegendes/Farben/Gesamtpalette" />
+
+# Colors
+
+<ColorPalette>
+    {Object.entries(colorsMap).map((token, key) => {
+        return (
+            <ColorItem
+                title={token[0]}
+                colors={token[1].map((value) => {
+                    return value
+                })}
+            />
+        )
+    })}
+</ColorPalette>

package/src/stories/Example.mdx

@@ -0,0 +1,56 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as ExampleStories from './Example.stories';
+
+import example from './example.hbs'
+
+<Meta of={ExampleStories} />
+
+export const Template = ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return example({ label, ...args })
+}
+
+# Name der Komponente
+
+## Beschreibung/Abstract
+
+Kurzer Beschreibungstext der die Komponente erklärt -> Penis
+
+<Canvas withToolbar>
+  <Story of={ExampleStories.Primary} />
+</Canvas>
+
+## Props
+
+Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
+
+<ArgsTable story="Primary" />
+
+## Usage/Verwendung
+
+ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
+
+```html
+{{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
+headlineTag=this.headlineTag label=this.label readMore=this.link.readMoreText.readMoreScreenreader
+size=this.teaserSize title=this.title topline=this.topline }}
+```
+
+## Dos/Doents
+
+<ComponentRules
+  rules={[
+       {
+           positive: {
+               component: <div>Get started</div>,
+               description:
+                   'Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces.',
+           },
+           negative: {
+               component: <div>Get started and enjoy discount!</div>,
+               description: 'Don’t use punctuation marks such as periods or exclamation points.',
+           },
+       },
+   ]}
+/>

package/src/stories/Example.stories.js

@@ -0,0 +1,57 @@
+import example from './example.hbs'
+
+const Template = ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return example({ label, ...args })
+}
+
+export default {
+    title: 'Grundlegendes/Template/Beispiel-Story',
+
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Button text',
+        },
+
+        size: {
+            control: {
+                type: 'select',
+                options: ['sm', 'md', 'lg', 'xl'],
+            },
+
+            description: 'Größe des Buttons',
+
+            table: {
+                defaultValue: {
+                    summary: 'md',
+                },
+            },
+        },
+
+        type: {
+            description: 'Typ des Buttons',
+
+            control: {
+                type: 'select',
+                options: ['primary', 'secondary'],
+            },
+
+            table: {
+                defaultValue: {
+                    summary: 'primary',
+                },
+            },
+        },
+    },
+}
+
+export const Primary = {
+    render: Template.bind({}),
+    name: 'Primary',
+
+    args: {
+        label: 'Button',
+    },
+}