@festo-ui/react 7.3.0-dev.540 → 7.3.0-dev.551

package/lib/components/buttons/button/Button.d.ts

@@ -3,6 +3,7 @@ export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     icon?: React.ReactNode;
     disabled?: boolean;
     primary?: boolean;
+    tertiary?: boolean;
     iconOnly?: boolean;
     large?: boolean;
     floating?: boolean;

package/lib/components/buttons/button/Button.js

@@ -13,6 +13,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     floating = false,
     onClick,
     primary = false,
+    tertiary = false,
     className,
     children,
     ...props
@@ -22,7 +23,9 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, {
     'fwe-disabled': disabled
   }, {
-    'fwe-btn-hero': primary
+    'fwe-btn-hero': primary && !tertiary
+  }, {
+    'fwe-btn-link': tertiary && !primary
   }, {
     'fwe-btn-lg': large
   }, {

package/lib/components/buttons/button/Button.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Button>;
 export declare const Overview: Story;
 export declare const Primary: Story;
 export declare const Secondary: Story;
+export declare const Tertiary: Story;
 export declare const Sizes: Story;
 export declare const Icon: Story;
 export declare const IconOnly: Story;

package/lib/components/buttons/button/Button.stories.js

@@ -12,19 +12,22 @@ export const Overview = {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
       children: [/*#__PURE__*/_jsx(Button, {
+        primary: true,
+        children: "Hero"
+      }), /*#__PURE__*/_jsx(Button, {
         children: "Secondary"
+      }), /*#__PURE__*/_jsx(Button, {
+        tertiary: true,
+        children: "Tertiary"
       }), /*#__PURE__*/_jsx(Button, {
         disabled: true,
         children: "Disabled"
-      }), /*#__PURE__*/_jsx(Button, {
-        primary: true,
-        children: "Hero"
       }), /*#__PURE__*/_jsx(Button, {
         large: true,
         children: "Large"
       })]
     }), /*#__PURE__*/_jsxs("div", {
-      className: "fwe-mt-m fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
+      className: "fwe-mt-m fwe-mb-l fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
       children: [/*#__PURE__*/_jsx(Button, {
         icon: "ecommerce-core-range-product",
         children: "Icon from iconfont"
@@ -49,6 +52,12 @@ export const Secondary = {
     children: 'Secondary'
   }
 };
+export const Tertiary = {
+  args: {
+    tertiary: true,
+    children: 'Tertiary'
+  }
+};
 export const Sizes = {
   args: {
     children: 'Large Button',

package/lib/components/card/CardHeader.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { ClassNameProps } from '../../helper/types';
+import { Image, ClassNameProps } from '../../helper/types';
 interface CardHeaderProps extends ClassNameProps {
     title: string;
     subtitle?: string;
     action?: React.ReactNode;
+    image?: Image;
 }
-declare function CardHeader({ title, subtitle, action, className }: CardHeaderProps): JSX.Element;
+declare function CardHeader({ title, subtitle, action, image, className }: CardHeaderProps): JSX.Element;
 export default CardHeader;

package/lib/components/card/CardHeader.js

@@ -1,23 +1,31 @@
 import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function CardHeader(_ref) {
   let {
     title,
     subtitle,
     action,
+    image,
     className
   } = _ref;
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames('fwe-card-header', className),
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "fwe-card-title",
-      children: [/*#__PURE__*/_jsx("h5", {
-        children: title
-      }), subtitle && /*#__PURE__*/_jsx("p", {
-        children: subtitle
-      })]
-    }), action]
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [image ? /*#__PURE__*/_jsx("img", {
+      alt: image.alt,
+      className: `fwe-card-img-${image.aspectRatio === '3/2' ? '32' : '169'}`,
+      src: image.src
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      className: classNames('fwe-card-header', className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-card-title",
+        children: [/*#__PURE__*/_jsx("h5", {
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx("p", {
+          children: subtitle
+        })]
+      }), action]
+    })]
   });
 }
 export default CardHeader;

package/lib/components/card/CardHeader.stories.helper.d.ts

@@ -0,0 +1,3 @@
+import { Image } from '../../helper/types';
+declare const cardImage: Image;
+export default cardImage;

package/lib/components/card/CardHeader.stories.helper.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+import Asset from "../../../../../web-essentials/stories/assets/gallery-01.webp.js";
+const cardImage = {
+  src: Asset,
+  alt: 'Asset',
+  aspectRatio: '16/9'
+};
+export default cardImage;

package/lib/helper/types.d.ts

@@ -5,6 +5,11 @@ export interface ClassNameProps {
 export interface ClassNamePropsWithChildren extends ClassNameProps {
     children?: React.ReactNode;
 }
+export interface Image {
+    src: string;
+    alt: string;
+    aspectRatio: '3/2' | '16/9';
+}
 export interface SelectConfiguration {
     hideLabel?: boolean;
     contentWidth?: string;

package/node/lib/components/buttons/button/Button.js

@@ -19,6 +19,7 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     floating = false,
     onClick,
     primary = false,
+    tertiary = false,
     className,
     children,
     ...props
@@ -28,7 +29,9 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, {
     'fwe-disabled': disabled
   }, {
-    'fwe-btn-hero': primary
+    'fwe-btn-hero': primary && !tertiary
+  }, {
+    'fwe-btn-link': tertiary && !primary
   }, {
     'fwe-btn-lg': large
   }, {

package/node/lib/components/buttons/button/Button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Sizes = exports.Secondary = exports.Primary = exports.Overview = exports.IconOnly = exports.Icon = exports.Floating = void 0;
+exports.default = exports.Tertiary = exports.Sizes = exports.Secondary = exports.Primary = exports.Overview = exports.IconOnly = exports.Icon = exports.Floating = void 0;
 var _reactIcons = require("@festo-ui/react-icons");
 var _Button = _interopRequireDefault(require("./Button.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,19 +18,22 @@ const Overview = exports.Overview = {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        primary: true,
+        children: "Hero"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         children: "Secondary"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        tertiary: true,
+        children: "Tertiary"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         disabled: true,
         children: "Disabled"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        primary: true,
-        children: "Hero"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         large: true,
         children: "Large"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-mt-m fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
+      className: "fwe-mt-m fwe-mb-l fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         icon: "ecommerce-core-range-product",
         children: "Icon from iconfont"
@@ -55,6 +58,12 @@ const Secondary = exports.Secondary = {
     children: 'Secondary'
   }
 };
+const Tertiary = exports.Tertiary = {
+  args: {
+    tertiary: true,
+    children: 'Tertiary'
+  }
+};
 const Sizes = exports.Sizes = {
   args: {
     children: 'Large Button',

package/node/lib/components/card/CardHeader.js

@@ -12,18 +12,25 @@ function CardHeader(_ref) {
     title,
     subtitle,
     action,
+    image,
     className
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('fwe-card-header', className),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-card-title",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-        children: title
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: subtitle
-      })]
-    }), action]
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      alt: image.alt,
+      className: `fwe-card-img-${image.aspectRatio === '3/2' ? '32' : '169'}`,
+      src: image.src
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('fwe-card-header', className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-card-title",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: title
+        }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: subtitle
+        })]
+      }), action]
+    })]
   });
 }
 var _default = exports.default = CardHeader;

package/node/lib/components/card/CardHeader.stories.helper.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _gallery01Webp = _interopRequireDefault(require("../../../../../web-essentials/stories/assets/gallery-01.webp.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+
+const cardImage = {
+  src: _gallery01Webp.default,
+  alt: 'Asset',
+  aspectRatio: '16/9'
+};
+var _default = exports.default = cardImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "7.3.0-dev.540",
+  "version": "7.3.0-dev.551",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",