hr-design-system-handlebars 1.16.1 → 1.17.1

package/src/assets/fixtures/page/page_pagination.json

@@ -6,11 +6,21 @@
     "secondPage": false,
     "notLastButOnePage": false,
     "notLastPage": false,
-    "firstPageItemUrl":"page1",
-    "nextItemUrl":"page2",
-    "previousItemUrl":"empty",
-    "lastPageItemUrl":"page4",
-    "lastButOnePageItemUrl":"page1",
+    "firstPageItemLink" : {
+        "url": "firstPage"
+    },
+    "nextItemLink" : {
+        "url": "nextItem"
+    },
+    "previousItemLink" : {
+        "url": "previousItem"
+    },
+    "lastPageItemLink" : {
+        "url": "lastPage"
+    },
+    "lastButOnePageItemLink" : {
+        "url": "LastButOnePage"
+    },
     "totalPages": 4, 
     "currentPage": 2,
     "currentPageIndex": 0,

package/src/assets/fixtures/site_header/site_header_default.json

@@ -1,5 +1,6 @@
 {   
     "hasOpenSubNavigation": false,
+    "_useSticky": true,
     "brandNavigationItems": {
         "@->jsoninclude": "site_header/brandNavigation.inc.json"
     },

package/src/assets/fixtures/site_header/site_header_default_no_sticky.json

@@ -0,0 +1,9 @@
+{   
+    "@->jsoninclude": "site_header/site_header_default.json",
+    "@->overrides" : [
+        { 
+            "@->contentpath": "_useSticky",
+            "@->value": false
+        }
+    ]
+}

package/src/assets/fixtures/site_header/site_header_mit_submenu.json

@@ -1,5 +1,6 @@
 {   
     "hasOpenSubNavigation": true,
+    "_useSticky": true,
     "brandNavigationItems": {
         "@->jsoninclude": "site_header/brandNavigation.inc.json"
     },

package/src/assets/fixtures/site_header/site_header_mit_submenu_no_sticky.json

@@ -0,0 +1,9 @@
+{   
+    "@->jsoninclude": "site_header/site_header_mit_submenu.json",
+    "@->overrides" : [
+        { 
+            "@->contentpath": "_useSticky",
+            "@->value": false
+        }
+    ]
+}

package/src/assets/fixtures/site_header/site_header_mit_top_topics.json

@@ -1,5 +1,6 @@
 {   
     "hasOpenSubNavigation": false,
+    "_useSticky": true,
     "brandNavigationItems": {
         "@->jsoninclude": "site_header/brandNavigation.inc.json"
     },

package/src/assets/fixtures/site_header/site_header_mit_top_topics_no_sticky.json

@@ -0,0 +1,9 @@
+{   
+    "@->jsoninclude": "site_header/site_header_mit_top_topics.json",
+    "@->overrides" : [
+        { 
+            "@->contentpath": "_useSticky",
+            "@->value": false
+        }
+    ]
+}

package/src/assets/fixtures/site_header/site_header_mit_warnung.json

@@ -1,5 +1,6 @@
 {   
     "hasOpenSubNavigation": false,
+    "_useSticky": true,
     "brandNavigationItems": {
         "@->jsoninclude": "site_header/brandNavigation.inc.json"
     },

package/src/assets/fixtures/site_header/site_header_mit_warnung_no_sticky.json

@@ -0,0 +1,9 @@
+{   
+    "@->jsoninclude": "site_header/site_header_mit_warnung.json",
+    "@->overrides" : [
+        { 
+            "@->contentpath": "_useSticky",
+            "@->value": false
+        }
+    ]
+}

package/src/assets/tailwind.css

@@ -129,6 +129,8 @@
     --color-button--dark: theme('colors.blue.congress');
     --color-button-inverted: theme('colors.white.DEFAULT');
     --color-button-inverted--dark: theme('colors.blue.accented');
+    --color-button-disabled: theme('colors.gray.lightGray');
+    --color-button-disabled--dark: theme('colors.gray.boulder');
     /* Media-Button */
     --color-media-button: theme('colors.blue.science');
     /* States */

package/src/stories/views/components/button/button.hbs

@@ -1,6 +1,6 @@
 <button
     {{#if _id}} id="{{_id}}"{{/if}} 
-    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
+    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress _disabled=_disabled}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
     {{#if _openModal}} aria-haspopup="true"{{/if}}
     {{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
     type="{{defaultIfEmpty _type "submit"}}"

package/src/stories/views/components/button/button.mdx

@@ -53,13 +53,22 @@ unterscheidbar zu machen, sind unterschiedliche optische Varianten und Größen
     <Story of={ButtonStories.ButtonTertiary} />
 </Canvas>
 
-### Button mit Icon <a id="button-icon" />
+### Button-Arten (Deaktiviert)
+
+<Canvas>
+    <Story of={ButtonStories.ButtonPrimaryDisabled} />
+    <Story of={ButtonStories.ButtonSecondaryDisabled} />
+    <Story of={ButtonStories.ButtonTertiaryDisabled} />
+</Canvas>
+
+### Button mit Icon
 
 <Canvas>
     <Story of={ButtonStories.ButtonIconRechts} />
     <Story of={ButtonStories.ButtonIconLinks} />
 </Canvas>
 
+
 ## Verwendung
 
 Ein Button wird mit der Handlebar Komponente `button` eingebunden. Wie einleitend schon beschrieben, stellt diese

package/src/stories/views/components/button/button.stories.js

@@ -388,6 +388,71 @@ export const ButtonTertiary = {
     },
 }
 
+export const ButtonPrimaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Primary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Primary',
+        _disabled : true
+    },
+}
+
+export const ButtonSecondaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Secondary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Secondary',
+        _variant: 'secondary',
+        _disabled : true
+    },
+}
+
+export const ButtonTertiaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Tertiary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Tertiary',
+        _variant: 'tertiary',
+        _disabled : true
+    },
+}
+
 export const ButtonIconRechts = {
     render: buttonWithLabelAndIconRightTemplate.bind({}),
     name: 'Button - Icon rechts',
@@ -409,6 +474,7 @@ export const ButtonIconRechts = {
     },
 }
 
+
 export const ButtonIconLinks = {
     render: buttonWithLabelAndIconLeftTemplate.bind({}),
     name: 'Button - Icon links',

package/src/stories/views/components/button/link_button.hbs

@@ -2,5 +2,5 @@
     {{> @partial-block }}
 {{/components/base/link}}
 {{#*inline "css"~}}
-    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant-adjust_context _onBackground=_onBackground-adjust_context}} {{> components/button/utilities/button_dimension_classes _size=_size-adjust_context~}}
+    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant-adjust_context _onBackground=_onBackground-adjust_context _disableButtonPress=_disableButtonPress-adjust_context _disabled=_disabled-adjust_context}} {{> components/button/utilities/button_dimension_classes _size=_size-adjust_context~}}
 {{~/inline}}

package/src/stories/views/components/button/link_button.mdx

@@ -51,6 +51,14 @@ unterscheidbar zu machen, sind unterschiedliche optische Varianten und Größen
     <Story of={LinkButtonStories.ButtonTertiary} />
 </Canvas>
 
+### Button-Arten (Deaktiviert)
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonPrimaryDisabled} />
+    <Story of={LinkButtonStories.ButtonSecondaryDisabled} />
+    <Story of={LinkButtonStories.ButtonTertiaryDisabled} />
+</Canvas>
+
 ### Button mit Icon <a id="button-icon" />
 
 <Canvas>

package/src/stories/views/components/button/link_button.stories.js

@@ -310,6 +310,72 @@ export const ButtonTertiary = {
     },
 }
 
+export const ButtonPrimaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Primary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Primary',
+        _disabled: true
+    },
+}
+
+export const ButtonSecondaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Secondary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Secondary',
+        _variant: 'secondary',
+        _disabled: true
+    },
+}
+
+export const ButtonTertiaryDisabled = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Tertiary Deaktiviert',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Tertiary',
+        _variant: 'tertiary',
+        _disabled: true
+    },
+}
+
+
 export const ButtonIconRechts = {
     render: buttonWithLabelAndIconRightTemplate.bind({}),
     name: 'Button - Icon rechts',

package/src/stories/views/components/button/utilities/button_variation_classes.hbs

@@ -1,9 +1,17 @@
 {{#if _onBackground~}}
-    {{inline-switch
+     {{inline-switch
         _variant
         '["primary","secondary","tertiary"]'
         '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark  active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark  active:bg-button-inverted--dark "]'
     ~}}
+   {{else if _disabled~}}
+
+    {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-disabled--dark bg-button-disabled border-button-disabled "," border text-button-disabled--dark border-button-disabled  "," bg-transparent border-transparent text-button-disabled--dark "," border text-button-disabled--dark bg-button-disabled border-button-disabled "]'
+    ~}}
+    
 {{else}}
     {{~inline-switch
         _variant

package/src/stories/views/components/event/event_ticket_button.hbs

@@ -1,4 +1,4 @@
-<div class="static pl-4 pt-1 pb-3 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
+<div class="static pt-1 pb-3 pl-4 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
     {{#> components/button/button _id=(nextRandom) _size="lg"}}
         {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
         {{>components/button/components/button_label _label="Tickets"}}
@@ -7,7 +7,7 @@
         {{#> components/teaser/components/teaser_headline}}
             {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
         {{/components/teaser/components/teaser_headline}}
-        <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
+        <p class="mt-2 text-base font-copy">{{loca "ticket_modal_text"}}</p>
 
         <div class="flex flex-wrap mt-4">
             {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}