hr-design-system-handlebars 1.11.11 → 1.12.0

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -20,22 +20,25 @@
     >
 
     {{!-- Button --}}
-    <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
+    {{#with this}}
+        {{#> components/button/button _size="md" _disableButtonPress=true}}
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            <span x-cloak x-show="open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+            <span x-show="!open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+        {{/components/button/button}}
+        {{#*inline "html_properties"}}
+        x-ref="button" 
+        x-on:click="toggle()" 
+        :aria-expanded="open" 
+        :aria-controls="$id('dropdown-button')" 
         :class="open ? 'drop-shadow' : ''" 
-        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-text js-load"
-        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
-        <div x-cloak x-show="open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-        <div x-show="!open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-    </button>
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'
+        {{/inline}}
+    {{/with}}
 
     {{!-- Flyout --}}
     <div

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,12 +1,12 @@
 {{#if this.isSingleChannel}}
     {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
-        <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 ...  {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
+        <span class="mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
             {{~_title~}}
         </span>
     {{/decorator}}
 {{else}}
     <div class="font-title text-base mt-2.5 text-podcast-text">
-        <span class="block mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 ... {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
+        <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
             {{~_title~}}
         </span>
     </div>

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -7,7 +7,10 @@
     </div>
     {{~#if this.link~}}
         <div class="flex justify-center min-w-0 pt-8 mx-5">
-            {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink="true" _buttonText=(loca "group_tabbed_more" this.title) _buttonCss="truncate" _linkCss="flex min-w-0 ds-link" ~}}
+            {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                {{>components/button/components/button_label _label=(loca "group_tabbed_more" this.title) _css="flex-1 truncate mr-2"}}
+                {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
+            {{/components/button/link_button}}
         </div>
     {{~/if~}}
 </section>

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -1,20 +1,19 @@
 </div>
 <div 
-  x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
+  x-data="{ tab: '{{this.tabbedGroup.[0].title}}', test:true }"
   class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
 >
   <section class="px-0 col-span-full sm:px-8 md:px-0">
-    <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
+    <div class="flex flex-wrap gap-y-3 justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
-        <button :class="tab === '{{this.title}}' ? 'text-button-inverted bg-button border-button' : 'bg-button-inverted text-button-hollow border-button-inverted hover:border-button-hollow'" 
-                x-on:click.prevent="tab = '{{this.title}}'; "  
-                class="border ds-button text-base font-heading py-px px-2 m-1.5 js-load" 
-                type="button" 
-                role="tab"
-                data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'
-        >
-          {{this.title}}
-        </button>
+        {{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
+          {{> components/button/components/button_label _label=this.title}}
+        {{/components/button/button }}
+        {{#*inline "html_properties"~}} 
+          :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button-primary--dark":tab ==="{{this.title}}",
+          "{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}' 
+          x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'   
+        {{~/inline}}
       {{~/each~}}
     </div>
     {{~> components/teaser/teaser_logic/teaser_logic ~}}

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/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.11",
+    "version": "1.12.0",
     "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/page/page_pagination.json

@@ -1,19 +1,20 @@
-{
-    "isMoreThanOnePage": true,
-    "isOnlyThreePages": false,
-    "isOnlyTwoPages": false,
-    "isFirstPage": true,
-    "isSecondPage": false,
-    "isNotLastPage": false,
+{   
+    "moreThanOnePage": true,
+    "onlyThreePages": false,
+    "onlyTwoPages": false,
+    "firstPage": true,
+    "secondPage": false,
+    "notLastButOnePage": false,
+    "notLastPage": false,
     "firstPageItemUrl":"page1",
     "nextItemUrl":"page2",
     "previousItemUrl":"empty",
     "lastPageItemUrl":"page4",
     "lastButOnePageItemUrl":"page1",
     "totalPages": 4, 
-    "currentPage":"page1",
+    "currentPage": 2,
     "currentPageIndex": 0,
-    "isCurrentPageValid": true,
+    "currentPageValid": true,
     "pageEntries":[
         {   
                 "teaser_alternativ_100_serif":{
@@ -34,7 +35,7 @@
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
                 }
-             },
+            },
         {   
                 "teaser_alternativ_100_serif_download":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_download.json"
@@ -54,7 +55,7 @@
                 "teaser_alternativ_100_serif_download":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_download.json"
                 }
-             }, 
+            }, 
         {   
                 "teaser_alternativ_100_serif_audio":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_audio.json"
@@ -74,7 +75,7 @@
                 "teaser_alternativ_100_serif_audio":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_audio.json"
                 }
-             },
+            },
         {   
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
@@ -94,7 +95,7 @@
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
                 }
-             }  
+            }  
 
-             ] 
+            ] 
 }