hr-design-system-handlebars 1.11.12 → 1.12.0

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

@@ -0,0 +1,137 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as LinkButtonStories from './link_button.stories'
+
+<Meta of={LinkButtonStories} />
+
+# Link-Button
+
+-   [Übersicht](#übersicht)
+-   [Eigenschaften](#eigenschaften)
+-   [Varianten](#varianten)
+-   [Verwendung](#verwendung)
+
+## Übersicht
+
+Der Link-Button erlaubt es einen HTML-Link optisch wie einen Button aussehen zu lassen. Die Komponente sollte immer
+dann eingesetzt werden, wenn beim Klick auf die Schaltfläche eine neue Seite geöffnet werden soll.
+Beispiele hierfür sind die Schaltfläche am unteren Rand einer Tab-Box, die es
+ermöglicht auf eine Seite mit weiteren Inhalten zu kommen, die Schaltfläche innerhalb eines Cluster-Teasers, die auf eine Seite mit weiteren Beiträgen verlinkt
+oder die Schaltfläche innerhalb eines Poster-Teasers, die auf den konkreten Inhalt verlinkt.
+
+Die Link-Button-Komponente als solches ist sehr einfach gehalten. Sie stellt nur ein Grundgerüst (ein gestyltes HTML-Link Element) zur Verfügung.
+Alle Inhalte des Buttons, wie das [Label](?path=/docs/komponenten-buttons-komponenten-label--label) oder ein mögliches
+[Icon](?path=/docs/komponenten-buttons-komponenten-icon--icon), können flexibel durch Subkomponenten hinzugefügt werden.
+
+<Canvas>
+    <Story of={LinkButtonStories.Spielplatz} />
+</Canvas>
+
+## Eigenschaften
+
+<ArgsTable story="Spielplatz" />
+
+## Varianten
+
+Auf einer Inhaltsseite kann mehr als ein Button platziert werden. Um wichtige von weniger wichtigen Aktionen
+unterscheidbar zu machen, sind unterschiedliche optische Varianten und Größen von Buttons zu verwenden.
+
+### Größen
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonLg} />
+    <Story of={LinkButtonStories.ButtonMd} />
+    <Story of={LinkButtonStories.ButtonSm} />
+</Canvas>
+
+### Button-Arten
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonPrimary} />
+    <Story of={LinkButtonStories.ButtonSecondary} />
+    <Story of={LinkButtonStories.ButtonTertiary} />
+</Canvas>
+
+### Button mit Icon <a id="button-icon" />
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonIconRechts} />
+    <Story of={LinkButtonStories.ButtonIconLinks} />
+</Canvas>
+
+## Verwendung
+
+Ein Link-Button wird mit der Handlebar Komponente `link_button` eingebunden. Wie einleitend schon beschrieben, stellt diese
+Komponente lediglich das Grundgerüst eines Buttons dar. Die Beschriftung und/oder ein Icon müssen mit Subkomponenten hinzugefügt
+werden.
+
+<div class="bg-blue-200 !mt-4 p-4">
+  <h4 class="!text-stone-950 font-bold">Hinweis</h4>
+
+  <p>
+    Sowohl die Link-Button-Komponente als auch die Subkomponenten Button-Label und Button-Icon
+    sind standardmäßig bereits gestyled. Das setzen von zusätzlichen Style Klassen über den
+    Parameter <pre class="inline">\_css</pre> ist zwar bei jeder Komponente möglich, sollte aber
+    nur dann gemacht werden, wenn es gar nicht anders geht.
+  </p>
+</div>
+
+### Button mit Text
+
+Ein Button der Ausprägung `primary` mit Beschriftung wird, wie in folgendem Codebeispiel gezeigt, gebaut.
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonPrimary} />
+</Canvas>
+
+```handlebars
+{{#> components/button/link_button _size="lg"}}
+    {{> components/button/components/button_label _label="Primary"}}
+{{/components/button/link_button}}
+```
+
+### Button mit Text und Icon
+
+Ein Button der Ausprägung `primary` mit einem Label und einem rechts daneben stehenden Icon wird, wie in folgendem Codebeispiel gezeigt, gebaut.
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonIconRechts} />
+</Canvas>
+
+```handlebars
+{{#> components/button/link_button _size="lg"}}
+    {{> components/button/components/button_label _label="Icon rechts"}}
+    {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons"}}
+{{/components/button/link_button}}
+```
+
+Soll das Icon links vom Label stehen, muss der Aufruf der Subkomponenten einfach vertauscht werden.
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonIconLinks} />
+</Canvas>
+
+```handlebars
+{{#> components/button/link_button _size="lg"}}
+    {{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons"}}
+    {{> components/button/components/button_label _label="Icon links"}}
+{{/components/button/link_button}}
+```
+
+Der passende Abstand zwischen Icon und Label wird automatisch per CSS gesetzt.
+
+### Button auf farbigem Hintergund
+
+Soll ein Link-Button auf einem farbigen Hintergrund (bietet sich vor allem bei dunklen Hintergründen an) genutzt werden, kann durch setzen des Parameters
+`_onBackground` eine auf dunkle Hintergründe abgestimmte kontrastreichere optische Variante der Button aktiviert werden.
+
+<Canvas>
+    <Story of={LinkButtonStories.ButtonPrimaryAufFarbigemHintergrund} />
+    <Story of={LinkButtonStories.ButtonSecondaryAufFarbigemHintergrund} />
+    <Story of={LinkButtonStories.ButtonTertiaryAufFarbigemHintergrund} />
+</Canvas>
+
+```handlebars
+{{#> components/button/link_button _size="lg" _onBackground}}
+    {{> components/button/components/button_label _label="Primary"}}
+{{/components/button/link_button}}
+```

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

@@ -0,0 +1,420 @@
+const handlebars = require('hrHandlebars')
+
+const buttonWithLabelTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/link_button}}
+        {{> components/button/components/button_label}}
+    {{/components/button/link_button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelTemplateOnBackground = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    <div class="bg-primary p-4">
+        {{#> components/button/link_button}}
+            {{> components/button/components/button_label}}
+        {{/components/button/link_button}}
+    </div>
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelAndIconRightTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/link_button}}
+        {{> components/button/components/button_label}}
+        {{> components/button/components/button_icon }}
+    {{/components/button/link_button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelAndIconLeftTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/link_button~}}
+        {{> components/button/components/button_icon }}
+        {{> components/button/components/button_label}}
+    {{~/components/button/link_button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Buttons/Link-Button',
+
+    argTypes: {
+        _css: {
+            description: 'Erlaubt die Angabe zusätzlicher CSS Klassen für den Button',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        _label: {
+            description: 'Label des Buttons',
+            control: 'text',
+
+            table: {
+                category: 'Label',
+            },
+        },
+
+        _icon: {
+            description: 'Der Name des Icons in der Iconmap',
+            control: 'text',
+
+            table: {
+                category: 'Icon',
+            },
+        },
+
+        _iconMap: {
+            control: 'text',
+            description: 'Der Name der zu verwendenden Iconmap',
+
+            table: {
+                defaultValue: {
+                    summary: 'icons',
+                },
+
+                category: 'Icon',
+            },
+        },
+
+        _size: {
+            options: ['sm', 'md', 'lg'],
+            control: {
+                type: 'select',
+            },
+
+            description: 'Bestimmt die Größe des Buttons. Erlaubte Werte sind `sm`, `md` und `lg`',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: 'md',
+                },
+            },
+        },
+
+        _variant: {
+            description:
+                'In welcher Variante soll der Button dargestellt werden. Erlaubte Varianten sind `primary`, `secondary`, `tertiary`',
+
+            options: ['primary', 'secondary', 'tertiary'],
+            control: {
+                type: 'select',
+            },
+
+            table: {
+                category: 'Button',
+                defaultValue: {
+                    summary: 'primary',
+                },
+            },
+        },
+
+        _onBackground: {
+            description:
+                'Wird dieser Wert gesetzt, wird der Button in einem auf einen farbigen Hintergrund abgestimmtes Farbschema angezeigt. ',
+            control: 'boolean',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: false,
+                },
+            },
+        },
+
+        _disableButtonPress: {
+            description:
+                'Durch setzen dieses Wertes, kann deaktiviert werden, dass der Druck auf den Button optisch angezeigt wird.',
+            control: 'boolean',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: false,
+                },
+            },
+        },
+
+        _isAriaHidden: {
+            description:
+                'Ermöglicht es den Button von der Nutzung mit assistiven Geräten auszuschließen. Setzt die Eigenschaft aria-hidden auf true und den tabindex auf -1.',
+            control: 'boolean',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: false,
+                },
+            },
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+    },
+}
+
+export const Spielplatz = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Spielplatz',
+
+    args: {
+        _size: 'md',
+        _label: 'Button',
+    },
+}
+
+export const ButtonLg = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - lg',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Large',
+    },
+}
+
+export const ButtonMd = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - md',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'md',
+        _label: 'Medium',
+    },
+}
+
+export const ButtonSm = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - sm',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'sm',
+        _label: 'Small',
+    },
+}
+
+export const ButtonPrimary = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Primary',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Primary',
+    },
+}
+
+export const ButtonSecondary = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Secondary',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Secondary',
+        _variant: 'secondary',
+    },
+}
+
+export const ButtonTertiary = {
+    render: buttonWithLabelTemplate.bind({}),
+    name: 'Button - Tertiary',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Tertiary',
+        _variant: 'tertiary',
+    },
+}
+
+export const ButtonIconRechts = {
+    render: buttonWithLabelAndIconRightTemplate.bind({}),
+    name: 'Button - Icon rechts',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Icon rechts',
+        _icon: 'arrow-right',
+    },
+}
+
+export const ButtonIconLinks = {
+    render: buttonWithLabelAndIconLeftTemplate.bind({}),
+    name: 'Button - Icon links',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Icon links',
+        _icon: 'arrow-left',
+    },
+}
+
+export const ButtonPrimaryAufFarbigemHintergrund = {
+    render: buttonWithLabelTemplateOnBackground.bind({}),
+    name: 'Button - Primary auf farbigem Hintergrund',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+
+        _onBackground_: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Primary',
+        _onBackground: true,
+    },
+}
+
+export const ButtonSecondaryAufFarbigemHintergrund = {
+    render: buttonWithLabelTemplateOnBackground.bind({}),
+    name: 'Button - Secondary auf farbigem Hintergrund',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+
+        _onBackground_: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Secondary',
+        _variant: 'secondary',
+        _onBackground: true,
+    },
+}
+
+export const ButtonTertiaryAufFarbigemHintergrund = {
+    render: buttonWithLabelTemplateOnBackground.bind({}),
+    name: 'Button - Tertiary auf farbigem Hintergrund',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+
+        _onBackground_: {
+            control: false,
+        },
+    },
+
+    args: {
+        _size: 'lg',
+        _label: 'Tertiary',
+        _variant: 'tertiary',
+        _onBackground: true,
+    },
+}

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

@@ -0,0 +1 @@
+inline-flex items-center font-heading

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

@@ -0,0 +1 @@
+{{~inline-switch _size '["sm","md","lg"]' '[" px-2 py-0.5"," p-2"," px-4 py-2.5",""]'~}}

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

@@ -0,0 +1,39 @@
+absolute bottom-0 right-0
+{{~#switch _teaserType~}}
+    {{~#case 'standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4"]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4 "]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+{{~/switch~}}

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

@@ -0,0 +1,14 @@
+{{#if _onBackground~}}
+    {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"," border text-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark hover:text-button-primary active:text-button-primary active:bg-button-primary--inverted-dark"," bg-transparent border-transparent text-button-inverted hover:bg-button-primary--inverted-dark hover:text-button-primary hover:border-button-primary--inverted-dark active:text-button-primary active:bg-button-primary--inverted-dark"," border text-button-primary bg-button-primary--inverted border-button-primary--inverted hover:bg-button-primary--inverted-dark active:bg-button-primary--inverted-dark"]'
+    ~}}
+{{else}}
+    {{~inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark hover:border-button-primary--dark active:bg-button-primary--dark"," border text-button-secondary border-button-primary hover:bg-button-primary--inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button-primary hover:bg-button-primary--inverted hover:border-button-primary active:bg-button-primary--inverted"," border text-button-primary--inverted bg-button-primary border-button-primary hover:bg-button-primary--dark  hover:border-button-primary--dark active:bg-button-primary--dark"]'
+    ~}}
+{{/if}}
+{{~#unless _disableButtonPress}} active:scale-95{{/unless}}

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-grey-alabaster text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/src/stories/views/components/content_nav/content_nav_item.hbs

@@ -10,7 +10,7 @@
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex ds-link-inset items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
+        _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
     }}

package/src/stories/views/components/event/calendar/event_calendar_footer.hbs

@@ -1,7 +1,7 @@
 <footer class='bg-event-calendar-primary text-center'>
     {{#decorator
         'components/base/link'
-        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3 ds-link'
+        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
     }}
         {{loca 'event_calendar_monthly_overview_link'}}
     {{/decorator}}

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

@@ -1,8 +1,8 @@
 <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">
-    {{#> components/button/button_v2 _id=(nextRandom) _type="inverted"}}
+    {{#> 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"}}
-    {{/components/button/button_v2}}
+    {{/components/button/button}}
     {{#> components/modal/modal _trigger=(getRandom)}}
         {{#> components/teaser/components/teaser_headline}}
             {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
@@ -10,8 +10,12 @@
         <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
 
         <div class="flex flex-wrap mt-4">
-            {{> components/button/button_pseudo _linkCss="js-ticket-ok-button mr-4 mt-4 ds-button js-modal-close" _buttonText="Zum Ticketshop" _withLink="true"}}
-            <button class="mt-4 ds-button" value="cancel">Abbrechen</button>
+            {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mr-4 mt-4"}}
+                {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
+            {{/components/button/link_button}}
+            {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mt-4"}}
+                {{>components/button/components/button_label _label="Abbrechen" _css=""}}
+            {{/components/button/button}}
         </div>
     {{/components/modal/modal}}
     <noscript>
@@ -20,11 +24,9 @@
                 display:none;
             }
         </style>
-        {{#> components/button/components/button_pseudo_link}}
-            {{#> components/button/button_pseudo_v2 _type="inverted"}}
-                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+            {{#> components/button/link_button _size="lg"}}
+                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
                 {{>components/button/components/button_label _label="Tickets"}}
-            {{/components/button/button_pseudo_v2}}
-        {{/components/button/components/button_pseudo_link}}
+            {{/components/button/link_button}}
     </noscript>
 </div>