hr-design-system-handlebars 1.11.12 → 1.12.1

package/dist/views/components/teaser/teaser_poster.hbs

@@ -22,6 +22,10 @@
                 {{/components/teaser/components/teaser_headline}}
             {{/components/teaser/components/teaser_header}}
         {{/decorator}}
-        {{~> components/button/button_pseudo _type="hollow-white" _withLink=true _isLinkAriaHidden=true _linkCss="ds-cta absolute flex w-full h-full items-end justify-center" _buttonCss=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _buttonText=this.link.readMoreText.readMoreLong ~}} 
+        <span class="absolute flex w-full h-full items-end justify-center ds-cta">
+            {{#> components/button/link_button _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+            {{/components/button/link_button}}
+        </span>
     </div>
 </article>

package/dist/views/components/teaser/ticker/teaser_ticker.hbs

@@ -1,4 +1,4 @@
-<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+<article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
 {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
 {{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
  "
@@ -18,12 +18,12 @@
                 <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
                     {{> components/event/instant_dates}}
                 </div>
-                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
+                {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
             {{/decorator}}
         {{else}}
-            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
+            {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
         {{/if}}
     {{else}}
-        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
+        {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
     {{/if}}
 </article>

package/gulpfile.js

@@ -1,5 +1,6 @@
 const { src, dest, series, parallel, watch } = require('gulp')
 const debug = require('gulp-debug')
+const replace = require('gulp-replace')
 const fs = require('fs')
 const mergeStream = require('merge-stream')
 const glob = require('glob')
@@ -316,10 +317,17 @@ function watchFiles() {
 
 async function convertPartialsToJs() {
     src(`${options.paths.assets.views}/**/*.hbs`)
+        .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '$1'))
         .pipe(htmlToJs({ concat: 'handlebar-partials.js' }))
         .pipe(dest(options.paths.dist.handlebarPartials))
 }
 
+async function preparePartialsForDelivery() {
+    src(`${options.paths.assets.components}/**/*.hbs`)
+        .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '../../$1'))
+        .pipe(dest(options.paths.dist.dist_components))
+}
+
 function createModernizr() {
     return src(`${options.paths.assets.views}/**/*.js`)
         .pipe(modernizr(require('./build/modernizr/config.json')))
@@ -371,3 +379,4 @@ exports.parseJson = series(parseJson, watchForChanges)
 exports.createModernizrConfig = series(createModernizr, addCustomModernizrTests)
 exports.mergeLocatags = mergeLocatags
 exports.convertPartialsToJs = convertPartialsToJs
+exports.preparePartialsForDelivery = preparePartialsForDelivery

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.11.12",
+    "version": "1.12.1",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -15,7 +15,7 @@
         "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",
+        "build": "yarn clean && yarn build:tailwind && node ./build/scripts/build.js && yarn preparePartialsForDelivery",
         "chromatic": "npx chromatic --project-token 84f1628f224a",
         "clean": "rimraf  dist",
         "release": "npx auto shipit --base-branch=main",
@@ -23,6 +23,7 @@
         "optimize-svgs": "gulp optimizeSvgs",
         "parseJson": "gulp parseJson",
         "partialsToJs": "gulp convertPartialsToJs",
+        "preparePartialsForDelivery": "gulp preparePartialsForDelivery",
         "create-modernizr-config": "gulp createModernizrConfig",
         "merge-locatags": "gulp mergeLocatags"
     },
@@ -71,6 +72,7 @@
         "gulp-merge-json": "^2.1.2",
         "gulp-modernizr": "^4.0.3",
         "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.1.4",
         "gulp-svgmin": "^4.0.1",
         "gulp-svgstore": "^8.0.0",
         "handlebars": "^4.7.6",

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

@@ -42,12 +42,12 @@
     .headline-barrier:before,
     .headline-barrier:after {
         border-bottom: 1px solid;
-        content: ''; 
-        @apply pt-3.5 md:pt-5     
+        content: '';
+        @apply pt-3.5 md:pt-5;
     }
     .justifyLine.headline-barrier:before,
     .justifyLine.headline-barrier:after {
-        @apply pt-3.5      
+        @apply pt-3.5;
     }
 
     /* PODCAST SEEK SLIDER*/
@@ -77,12 +77,11 @@
     /* CONTENT NAV ACCENTED GROUP MIXED*/
 
     .group-accented .autoSuggest .mixed-input {
-        border-color: transparent!important;
+        border-color: transparent !important;
         height: 32px;
         border-bottom: none;
     }
 
-
     .ds-focus {
         @apply z-20;
         @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
@@ -111,27 +110,23 @@
     }
 
     .ds-link {
-        @apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
+        @apply focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
     }
-    
+
     .ds-link:focus:not(:focus-visible) {
         @apply shadow-none;
     }
 
-    .ds-link-clusterTeaser {
-        @apply block text-grey-scorpion focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
-    }
-
-    .ds-link-clusterTeaser:focus:not(:focus-visible) {
-        @apply shadow-none;
+    .ds-link.ds-teaser-focus {
+        @apply focus:shadow-none;
     }
 
-    .ds-link-inset  {
-        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;    
+    .ds-link-inset {
+        @apply focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state;
     }
 
     .ds-link-inset:focus:not(:focus-visible) {
-        @apply ring-0;     
+        @apply ring-0;
     }
 
     .ds-teaser-focus {
@@ -139,23 +134,23 @@
     }
 
     .ds-teaser-focus:focus::before,
-    .ds-teaser-focus:focus + .ds-cta span {
+    .ds-teaser-focus:focus + .ds-cta > * {
         @apply shadow-teaser-focus;
         @apply shadow-focus-state;
     }
 
-    .ds-teaser-focus:focus + .ds-cta span {
+    .ds-teaser-focus:focus + .ds-cta > * {
         @apply bg-button-inverted;
         @apply text-button-hollow;
         @apply border-none;
     }
 
     .ds-teaser-focus:focus:not(:focus-visible)::before,
-    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
         @apply shadow-none;
     }
 
-    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta span {
+    .ds-teaser-focus:focus:not(:focus-visible) + .ds-cta > * {
         @apply bg-transparent;
         @apply text-button-inverted;
         @apply border-solid;
@@ -164,10 +159,10 @@
     .ds-teaser-focus:focus {
         @apply outline-none;
     }
-/* ----------------Content NAV------------------ */
-/* ---------------- NAV ITEMS ------------------ */
+    /* ----------------Content NAV------------------ */
+    /* ---------------- NAV ITEMS ------------------ */
     .content-nav-item {
-        @apply h-10;    
+        @apply h-10;
         @apply text-base;
         @apply font-copy;
         @apply list-none;
@@ -180,7 +175,7 @@
         @apply hover:text-white;
         @apply hover:underline;
     }
-/* ----------------LIST - NAV ITEMS ------------------ */
+    /* ----------------LIST - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-list {
         @apply w-full;
         @apply border;
@@ -191,13 +186,13 @@
         @apply w-full;
         @apply md:w-fit;
     }
-/* ----------------FLOW - NAV ITEMS ------------------ */
+    /* ----------------FLOW - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-flow {
         @apply w-fit;
         @apply border;
         @apply hover:no-underline;
     }
-/* ----------------MIXED - NAV ITEMS ------------------ */
+    /* ----------------MIXED - NAV ITEMS ------------------ */
     .teaser-size-100 .content-nav-item.content-nav-item-mixed,
     .teaser-size-66 .content-nav-item.content-nav-item-mixed {
         @apply md:w-fit;
@@ -210,7 +205,6 @@
         @apply md:hover:text-white;
         @apply md:hover:!bg-content-nav;
         @apply md:hover:!fill-white;
-
     }
     .content-nav-item.content-nav-item-mixed {
         @apply w-full;
@@ -226,7 +220,7 @@
         @apply hover:!bg-white;
         @apply hover:!fill-content-nav;
     }
-/* ----------------DROPDOWN - NAV ITEMS ------------------ */    
+    /* ----------------DROPDOWN - NAV ITEMS ------------------ */
     .content-nav-item.content-nav-item-dropdown {
         @apply w-full;
         @apply border-gray-400;
@@ -236,21 +230,20 @@
         @apply hover:text-content-nav;
         @apply hover:!bg-white;
         @apply hover:!fill-content-nav;
-                
     }
-/* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
-    .content-nav-dropdown_dropdown.-isDropdown  {
+    /* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
+    .content-nav-dropdown_dropdown.-isDropdown {
         @apply flex;
     }
-    .content-nav-dropdown_dropdown.-isMixed  {
+    .content-nav-dropdown_dropdown.-isMixed {
         @apply flex;
     }
     .teaser-size-100 .content-nav-dropdown_dropdown.-isMixed,
-    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed  {
+    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed {
         @apply flex;
         @apply md:hidden;
     }
-/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
+    /* ---------------- NAV DROPDOWN - CONTENT ------------------ */
     .content-nav-dropdown_content.-isOpen {
         @apply z-9999;
         @apply shadow-lg;
@@ -260,12 +253,12 @@
         @apply z-10;
         @apply hidden;
     }
-/* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */    
-    .content-nav-dropdown_content.-isMixed {        
+    /* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */
+    .content-nav-dropdown_content.-isMixed {
         @apply hidden;
     }
     .teaser-size-100 .content-nav-dropdown_content.-isMixed,
-    .teaser-size-66 .content-nav-dropdown_content.-isMixed  {        
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed {
         @apply md:block;
     }
     .content-nav-dropdown_content.-isMixed.-isOpen {
@@ -281,4 +274,10 @@
         @apply hidden;
         @apply md:block;
     }
-}
+}
+
+/* ---------------------------- BUTTON ------------------------------ */
+.ds-button-label + .ds-button-icon,
+.ds-button-icon + .ds-button-label {
+    @apply ml-2;
+}

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

@@ -118,10 +118,10 @@
     }
 
     .link-focus-inset {
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50;
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-gray-scorpion/50;
     }
     .link-focus {
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50;
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-gray-scorpion/50;
     }
     .link-focus-inset-white {
         @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50;

package/src/assets/fixtures/event/calendar/event_calendar_months.inc.json

@@ -389,7 +389,11 @@
                                     "url": "https://hr.de",
                                     "isTargetBlank": true,
                                     "webviewUrl": "",
-                                    "readMoreText": ""
+                                    "readMoreText": "",
+                                    "cmsDocument": {
+                                        "title": "Tickets Finale Landeswettbewerb Jugend jazzt",
+                                        "sophoraId": "finale_landeswettbewerb_jugend_jazzt_100"
+                                    }
                                 }
                             },
                             "concertInfo": {

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

@@ -19,7 +19,7 @@
                     "date": "17.04.22",
                     "dateSeparatorTime": "17.04.22, 19:30"
                 },
-                "hasByline": false,
+                "hasByline": true,
                 "teaserInfo": {
                     "showTeaserInfo": false,
                     "showTeaserInfoSection": true,
@@ -84,7 +84,7 @@
                 "trackingForArdMediatheksLink": false,
                 "showMediatheksLink": false,
                 "showAirdate": false,
-                "showProfileInfoAsByline": false,
+                "showProfileInfoAsByline": true,
                 "obsolet_brandOfTeaser": "hessenschau",
                 "documentSection": "Gesellschaft",
                 "headlineTag": "h1",
@@ -93,7 +93,7 @@
                 "shorttext": "Hier bekommen Sie immer die neuesten Nachrichten über Eintracht Frankfurt.",
                 "hideBylineAndShorttext": false,
                 "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
-                "profiles": "",
+                "profiles": "Von Karsten Hufer",
                 "teaserLead": {
                     "avDocument": "",
                     "image": ""

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

@@ -10,7 +10,11 @@
             "@->contentpath": "logicItem.includeModel.realTeaserSize",
             "@->value": "100"
         },
-                {
+        {
+            "@->contentpath": "logicItem.includeModel.shorttext",
+            "@->value": ""
+        },
+        {
             "@->contentpath": "logicItem.includeModel.topline",
             "@->value": ""
         },