Enhance BlnButton component and stories: implement new retroDesign property, introduce additional variants, and update styles with Tailwind CSS refinements. Refactor BlnHeader to include BlnButton and apply shadow-header class.

Lukas Gundermann · Lukas Gundermann · commit 2a49009ee146 · 2025-09-04T14:10:16.000+02:00
diff --git a/src/components/BlnButton.stories.ts b/src/components/BlnButton.stories.ts
@@ -21,6 +21,7 @@ const meta = {
                 ?disabled=${args.disabled === true}
                 ?with-stripes=${ifDefined(args.withStripes)}
                 ${args.withArrow ? 'with-arrow' : ''}
+                retro-design=${ifDefined(args.retroDesign)}
                 .onClick=${args.onClick}
         >${ifDefined(args.label)}
         </bln-button>`,
@@ -29,11 +30,12 @@ const meta = {
         class: {description: 'Additional CSS classes to apply to the button', type: {name: 'string'}},
         withArrow: {control: 'boolean', description: 'Whether to show an arrow icon', type: {name: 'boolean'}},
         withStripes: {control: 'boolean', description: 'Whether to show stripes', type: {name: 'boolean'}},
+        retroDesign: {control: 'boolean', description: 'Whether to use the retro design', type: {name: 'boolean'}},
         variant: {
             description: 'Variant of the button',
             type: {name: 'string'},
             control: {type: 'select'},
-            options: ['primary', 'link', 'secondary'],
+            options: ['solid', 'link', 'outline', 'ghost', 'soft'],
         },
         size: {
             description: 'Size of the button',
@@ -42,43 +44,100 @@ const meta = {
             options: ['small', 'medium', 'large'],
         },
     },
-    args: {label: 'BlnButton', onClick: fn()},
+    args: {label: 'Button', onClick: fn()},
 } satisfies Meta<BlnButtonProps>;
 
 export default meta;
 type Story = StoryObj<BlnButtonProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
+export const Solid: Story = {
     args: {
-        label: 'BlnButton',
+        variant: 'solid',
     },
 };
 
-export const PrimaryArrow: Story = {
+export const Outline: Story = {
     args: {
-        withArrow: true,
-        label: 'BlnButton',
+        variant: 'outline',
     },
 };
 
-export const PrimaryStripes: Story = {
+export const Ghost: Story = {
     args: {
-        withStripes: true,
-        label: 'BlnButton',
+        variant: 'ghost',
+    },
+};
+
+export const Soft: Story = {
+    args: {
+        variant: 'soft',
     },
 };
 
 export const Link: Story = {
     args: {
-        label: 'BlnButton',
         variant: 'link',
     },
 };
 
+export const Arrow: Story = {
+    args: {
+        variant: 'arrow',
+    },
+};
+
+export const ArrowRed: Story = {
+    args: {
+        variant: 'arrow-red',
+    },
+};
+
+export const Retro: Story = {
+    args: {
+        retroDesign: true,
+    },
+};
+
+export const RetroLink: Story = {
+    args: {
+        variant: 'link',
+        retroDesign: true,
+    },
+};
+
+export const RetroArrow: Story = {
+    args: {
+        variant: 'arrow',
+        retroDesign: true,
+    },
+};
+
+export const RetroArrowRed: Story = {
+    args: {
+        variant: 'arrow-red',
+        retroDesign: true,
+    },
+};
+
+export const Stripes: Story = {
+    args: {
+        withStripes: true,
+        variant: 'solid',
+        retroDesign: true,
+        size: 'small'
+    },
+};
+
 export const Disabled: Story = {
     args: {
-        label: 'BlnButton',
         disabled: true,
     },
+};
+
+export const DisabledRetro: Story = {
+    args: {
+        disabled: true,
+        retroDesign: true,
+    },
 };
diff --git a/src/components/BlnButton.ts b/src/components/BlnButton.ts
@@ -3,21 +3,22 @@ import {html, LitElement, PropertyValues} from "lit";
 import tailwindCss from '../styles/tailwind.min.css?raw';
 import TailwindElement from "../app/TailwindElement";
 
+import './LucideIcon';
+
 export interface BlnButtonProps {
-    variant?: 'primary' | 'link';
+    variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'link' | 'arrow' | 'arrow-red';
     withArrow: boolean,
     withStripes: boolean,
     size?: 'small' | 'medium' | 'large';
     label: string;
     onClick?: () => void;
     disabled?: boolean;
     class?: string;
+    retroDesign: boolean;
 }
 
 @customElement('bln-button')
 export class BlnButton extends TailwindElement {
-    // Cache für geladene Tailwind-CSS (einmal pro Seite)
-
     /**
      * Represents an HTML button element type.
      *
@@ -43,17 +44,14 @@ export class BlnButton extends TailwindElement {
      *
      * Possible value: "primary"
      */
-    @property({type: String}) variant = "primary";
+    @property({type: String}) variant = "solid";
 
 
     /**
-     * Represents the size of an object or entity.
-     *
-     * This variable is typically used to define or adjust configurations,
-     * properties, or appearances where size is a consideration.
-     *
-     * Possible values may include descriptive size terms such as
-     * "small", "medium", "large", or custom definitions based on context.
+     * Represents the size of an item or element.
+     * This variable holds a string value indicating the size classification.
+     * Commonly used to define or adjust dimensions, layouts, or options.
+     * Possible values might include "small", "medium", "large", etc.
      */
     @property({type: String}) size = "medium";
 
@@ -74,13 +72,10 @@ export class BlnButton extends TailwindElement {
      */
     @property({type: Boolean, reflect: true}) disabled = false;
 
-
     /**
      * This variable indicates whether a striped effect is applied or not.
      * It is a boolean value that defaults to false, implying that the striped effect
      * is disabled unless explicitly set to true.
-     *
-     * @type {boolean}
      */
     @property({type: Boolean, attribute: "with-stripes"}) withStripes = false;
 
@@ -100,71 +95,80 @@ export class BlnButton extends TailwindElement {
      */
     @property({attribute: false}) onClick?: (e: MouseEvent) => void;
 
-    protected firstUpdated(_changedProperties: PropertyValues) {
-        super.firstUpdated(_changedProperties);
-
-    }
-
-
-
-
     /**
      * Renders a button with customizable styles and behaviors based on properties such as size, variant, arrow inclusion, and disabled state.
      * The method dynamically constructs the button's classes, applies relevant styles, and optionally renders a right arrow icon based on button configuration.
      */
     renderButton() {
-        // Button types
-        const isLink = this.variant === 'link';
-
-        // Classes
-        const base = isLink
-            ? "border-2 border-[#e40422] bg-white font-bold"
-            : "border-2 border-black bg-white";
-        const size = this.size === 'small' ? 'text-sm' : this.size === 'large' ? 'text-lg' : '';
-        const padding = isLink
-            ? this.size === 'small'
-                ? 'py-2 px-3'
-                : 'py-3 px-4'
-            : this.withArrow
-                ? ''
-                : this.size === 'small'
-                    ? 'py-1 px-3'
-                    : 'py-2 px-5';
-        const hover = !this.disabled && !isLink ? 'hover:bg-gray-200' : isLink ? 'hover:underline' : '';
-        const disabled = this.disabled ? 'opacity-50 cursor-not-allowed' : '';
-        const spanClasses = this.withArrow
-            ? this.size === 'small'
-                ? 'py-1 px-3 border-r-2 border-black'
-                : 'py-2 px-5 border-r-2 border-black'
-            : '';
-        const buttonClasses = [
-            'transition duration-700 flex items-stretch',
-            base,
-            disabled,
-            size,
-            padding,
-            hover,
-            this.class, // zusätzliche Host-übergebene Klassen
-        ].filter(Boolean).join(' ');
-
-        const arrayBGColor = this.variant === 'secondary' ?  "black" : "#e40422";
-
-        // Render
         return html`
-            <!-- Tailwind aus Storybook Static Dir -->
-<!--            <link rel="stylesheet" href="/tailwind.css"/>-->
-
-            <button class="${buttonClasses}"
+            <button class="${this.cn(
+                    'transition duration-700 disabled:pointer-events-none',
+                    [
+                        this.retroDesign
+                                ? 'inline-flex border-2 font-semibold border-black bg-white  hover:bg-gray-200'
+                                : 'inline-flex items-center gap-x-2 text-sm font-medium rounded border focus:outline-hidden',
+                        this.disabled
+                                ? 'disabled:cursor-not-allowed disabled:opacity-50'
+                                : '',
+                        (this.variant === 'solid' || this.variant === null) && !this.retroDesign
+                                ? 'bg-blue-500 text-white hover:bg-blue-600 focus:bg-blue-600 border-transparent'
+                                : '',
+                        this.variant === 'outline' && !this.retroDesign
+                                ? 'border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600'
+                                : '',
+                        this.variant === 'ghost' && !this.retroDesign
+                                ? 'border-transparent text-blue-500 hover:bg-blue-100 hover:text-blue-800 focus:bg-blue-100 focus:text-blue-800'
+                                : '',
+                        this.variant === 'soft' && !this.retroDesign
+                                ? 'border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 focus:bg-blue-200'
+                                : '',
+                        this.variant === 'link'
+                                ? this.retroDesign
+                                        ? 'border-2 !border-[#e40422] bg-white font-bold hover:!bg-transparent hover:underline'
+                                        : 'border-transparent text-blue-500 hover:text-blue-700 focus:text-blue-700'
+                                : '',
+                        (this.variant === 'arrow' || this.variant === 'arrow-red') && !this.retroDesign
+                                ? 'border-transparent hover:text-gray-400 transition duration-700'
+                                : ''
+                    ]
+            )}"
                     ?disabled=${this.disabled}
                     @click=${(e: MouseEvent) => this.onClick?.(e)}>
-                <span class="${spanClasses}"><slot></slot></span>
-                ${this.withArrow
+                <span class="${this.cn([
+                    this.size === 'large'
+                            ? 'p-4 sm:p-5'
+                            : this.size === 'small'
+                                    ? 'py-2 px-3'
+                                    : 'py-3 px-4',
+                    this.variant === 'arrow' || this.variant === 'arrow-red'
+                            ? this.retroDesign
+                                    ? 'border-r-2 border-black'
+                                    : 'pr-1'
+                            : '',
+                    this.retroDesign
+                            ? ''
+                            : 'border-transparent',
+                ])}"><slot></slot></span>
+                ${this.variant === 'arrow' || this.variant === 'arrow-red'
                         ? html`
-                            <div class="px-3 flex items-center" style="background: ${arrayBGColor};">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" fill="white">
-                                    <!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
-                                    <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
-                                </svg>
+                            <div class="${this.cn([
+                                'w-full flex items-center justify-center',
+                                this.variant === 'arrow'
+                                        ? this.retroDesign
+                                                ? 'bg-black px-3'
+                                                : 'bg-gray-600 rounded-full p-2'
+                                        : this.retroDesign
+                                                ? 'bg-police-red px-3'
+                                                : 'bg-police-red rounded-full p-2',
+                            ])}">
+                                <lucide-icon name="ArrowRight"
+                                             cls="${this.cn([
+                                                 'text-white',
+                                                 this.retroDesign
+                                                         ? 'w-6 h-6'
+                                                         : 'w-4 h-4',
+                                             ])}">
+                                </lucide-icon>
                             </div>`
                         : ""}
             </button>`;
diff --git a/src/components/BlnHeader.ts b/src/components/BlnHeader.ts
@@ -5,6 +5,8 @@ import {booleanStringFalseConverter} from "../utils/converters";
 
 
 import './LucideIcon';
+import './BlnButton';
+import {BlnButton} from "./BlnButton";
 
 export interface BlnHeaderProps {
     class: string;
@@ -62,14 +64,17 @@ export class BlnHeader extends TailwindElement {
                     </a>
                 </div>
             </section>
-            <nav class="flex items-center justify-between shadow-md py-4 px-6">
+            <nav class="flex items-center justify-between shadow-header py-4 px-6">
                 <div class="min-w-80 max-w-[24vw] overflow-visible">
                     <a href="${this.titleUrl}">
                         <small class="block">${this.subTitle}</small>
                         <span class="block">${this.title}</span>
                     </a>
                 </div>
                 <div class="order-10 grow-0 flex items-end ml-[2vw]">
+                    <bln-button>
+                        test
+                    </bln-button>
                     <button type="button"
                             aria-haspopup="true"
                             aria-expanded="false">
diff --git a/src/components/BlnInput.ts b/src/components/BlnInput.ts
@@ -3,7 +3,6 @@ import TailwindElement from "../app/TailwindElement";
 import {html} from "lit";
 import {booleanStringFalseConverter} from "../utils/converters";
 
-
 import './LucideIcon';
 
 export interface BlnInputProps {
diff --git a/src/settings.json b/src/settings.json
@@ -0,0 +1,7 @@
+{
+  "sonarlint.rules": {
+    "typescript:S3358": {
+      "level": "off"
+    }
+  }
+}
diff --git a/src/styles/tailwind.min.css b/src/styles/tailwind.min.css
diff --git a/tailwind.config.js b/tailwind.config.js
