hr-design-system-handlebars 1.11.12 → 1.12.0

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

@@ -0,0 +1,508 @@
+const handlebars = require('hrHandlebars')
+
+const buttonWithLabelTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/button}}
+        {{> components/button/components/button_label}}
+    {{/components/button/button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelTemplateOnBackground = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    <div class="bg-primary p-4">
+        {{#> components/button/button}}
+            {{> components/button/components/button_label }}
+        {{/components/button/button}}
+    </div>
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelAndIconRightTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/button}}
+        {{> components/button/components/button_label }}
+        {{> components/button/components/button_icon }}
+    {{/components/button/button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const buttonWithLabelAndIconLeftTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/button/button~}}
+        {{> components/button/components/button_icon }}
+        {{> components/button/components/button_label }}
+    {{~/components/button/button}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Buttons/Button',
+
+    argTypes: {
+        '_alpineClick': {
+            description:
+                'Erlaubt es Javascript bei einem Klick auf den Button auszuführen. Mehr Details unter [https://alpinejs.dev/directives/on](https://alpinejs.dev/directives/on)',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_ariaLabel': {
+            description: 'Label',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_id': {
+            control: 'text',
+            description: 'Eindeutige ID',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_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',
+            },
+        },
+
+        '_name': {
+            description:
+                'Legt den Namen des Buttons fest. Wird benötigt, wenn der Button als Submit Button innerhalb eines Formulars genutzt wird.',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_title': {
+            description: 'Optionaler erläuternder Text, der als Tooltip angezeigt wird.',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_value': {
+            description:
+                'Dieser Wert wird zusammen mit dem Namen bei einem Submit innerhalb eines Formulars an den Server übertragen.',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_noFocus': {
+            description:
+                'Legt fest, ob der Button mit einem `Tab` angesprungen werden kann oder nicht. ',
+            control: 'boolean',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: false,
+                },
+            },
+        },
+
+        '_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,
+                },
+            },
+        },
+
+        '_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',
+                },
+            },
+        },
+
+        '_type': {
+            options: ['button', 'submit', 'reset'],
+            control: {
+                type: 'select',
+            },
+
+            description:
+                'Setzt das Attribut type des HTML Button Elements. Erlaubte Werte sind `button`, `submit` oder `reset`',
+
+            table: {
+                category: 'Button',
+
+                defaultValue: {
+                    summary: 'submit',
+                },
+            },
+        },
+
+        '_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',
+                },
+            },
+        },
+
+        '_x-show': {
+            description:
+                'Setzt die Alpine.js Direktive `x-show` und erlaubt so den Button auf Basis des Wertes einer boolschen Variable ein- oder auszublenden. Mehr dazu unter [https://alpinejs.dev/directives/show](https://alpinejs.dev/directives/show)',
+            control: 'text',
+
+            table: {
+                category: 'Button',
+            },
+        },
+
+        '_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',
+            },
+        },
+    },
+
+    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,
+        },
+        _label: {
+            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/components/button_icon.hbs

@@ -1 +1,2 @@
-{{> components/base/image/icon _addClass=(appendToDefault _css "w-4 h-4 fill-inherit") _icon=_icon _iconmap=_iconmap}}
+{{> components/base/image/icon _addClass=(appendToDefault _css "ds-button-icon w-4 h-4 fill-current") _icon=_icon _iconmap=_iconmap}}
+{{#*inline "css"}}{{/inline}}

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

@@ -0,0 +1,25 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as ButtonIconStories from './button_icon.stories'
+
+<Meta of={ButtonIconStories} />
+
+# Button-Icon
+
+Die Komponente erzeugt das Icon für die [Button-Komponente](?path=/docs/komponenten-buttons-button--spielplatz). Sie darf in einem Template
+ausschließlich als Subkomponente der Button-Komponente eingebunden werden.
+
+## Eigenschaften
+
+<ArgsTable story="Icon" />
+
+## Verwendung
+
+Die Komponente wird wie in folgendem Codebeispiel gezeigt in einem Handlebar Template eingebunden.
+
+```handlebars
+{{> components/button/components/button_icon _icon="calendar"}}
+```
+
+<Canvas withToolbar>
+    <Story of={ButtonIconStories.Icon} />
+</Canvas>

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

@@ -0,0 +1,44 @@
+const handlebars = require('hrHandlebars')
+
+const buttonIconTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+        {{>components/button/components/button_icon }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Buttons/Komponenten/Icon',
+
+    argTypes: {
+        _css: {
+            control: 'text',
+            description: 'Hierüber können dem Icon zusätzliche CSS Klassen zugewiesen werden.',
+        },
+
+        _icon: {
+            control: 'text',
+            description: 'Der Name des Icons in der Iconmap',
+        },
+
+        _iconMap: {
+            control: 'text',
+            description: 'Der Name der zu verwendenden Iconmap',
+
+            table: {
+                defaultValue: {
+                    summary: 'icons',
+                },
+            },
+        },
+    },
+}
+
+export const Icon = {
+    render: buttonIconTemplate.bind({}),
+    name: 'Icon',
+
+    args: {
+        _icon: 'calendar',
+    },
+}

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

@@ -1 +1 @@
-<span class="{{#if _css}} {{_css}}{{/if}}">{{_label}}</span>
+<span class='ds-button-label {{defaultIfEmpty _css "hallo"}}'>{{_label}}</span>

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

@@ -0,0 +1,25 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as ButtonLabelStories from './button_label.stories'
+
+<Meta of={ButtonLabelStories} />
+
+# Button-Label
+
+Die Komponente erzeugt den Text für die [Button-Komponente](?path=/docs/komponenten-buttons-button--spielplatz). Sie darf in einem Template
+ausschließlich als Subkomponente der Button-Komponente eingebunden werden.
+
+## Eigenschaften
+
+<ArgsTable story="Label" />
+
+## Verwendung
+
+Die Komponente wird wie in folgendem Codebeispiel gezeigt in einem Handlebar Template eingebunden.
+
+```handlebars
+{{> components/button/components/button_label _label="Button"}}
+```
+
+<Canvas withToolbar>
+    <Story of={ButtonLabelStories.Label} />
+</Canvas>

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

@@ -0,0 +1,33 @@
+const handlebars = require('hrHandlebars')
+
+const buttonLabelTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+        {{>components/button/components/button_label }}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Buttons/Komponenten/Label',
+
+    argTypes: {
+        _label: {
+            control: 'text',
+            description: 'Text des Labels',
+        },
+
+        _css: {
+            control: 'text',
+            description: 'Hierüber können dem Label zusätzliche CSS Klassen zugewiesen werden.',
+        },
+    },
+}
+
+export const Label = {
+    render: buttonLabelTemplate.bind({}),
+    name: 'Label',
+
+    args: {
+        _label: 'Button',
+    },
+}

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

@@ -0,0 +1,6 @@
+{{#> components/base/link_v2 _css=_css _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }}
+{{/components/base/link_v2}}
+{{#*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~}}
+{{~/inline}}