@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.712

package/lib/components/bottom-sheet/BottomSheet.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import BottomSheet from "./BottomSheet";
+declare const meta: Meta<typeof BottomSheet>;
+export default meta;
+type Story = StoryObj<typeof BottomSheet>;
+export declare const Default: Story;
+export declare const WithoutBackdrop: Story;
+export declare const ExpandFromBottom: Story;
+export declare const WithoutCloseIcon: Story;

package/lib/components/bottom-sheet/BottomSheet.stories.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import BottomSheet from "./BottomSheet.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: BottomSheet,
+  title: "Components/Bottom Sheet",
+  decorators: [Story => /*#__PURE__*/_jsx("div", {
+    style: {
+      minHeight: 600
+    },
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
+};
+export default meta;
+export const Default = {
+  render: args => {
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "fwe-btn",
+        onClick: () => setOpen(true),
+        children: "Open"
+      }), /*#__PURE__*/_jsx(BottomSheet, {
+        ...args,
+        open: open,
+        onOpenChange: setOpen
+      })]
+    });
+  }
+};
+export const WithoutBackdrop = {
+  args: {
+    hasBackdrop: false
+  },
+  render: Default.render
+};
+export const ExpandFromBottom = {
+  args: {
+    expandFrom: "bottom"
+  },
+  render: Default.render
+};
+export const WithoutCloseIcon = {
+  args: {
+    hideCloseIcon: true
+  },
+  render: Default.render
+};

package/{dist → lib}/components/breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import React from "react";
+import { ClassNamePropsWithChildren } from "../../helper/types";
 export interface BreadcrumbProps extends ClassNamePropsWithChildren {
     locations?: {
         label: string;
@@ -10,4 +10,5 @@ export interface BreadcrumbProps extends ClassNamePropsWithChildren {
 /**
  * Breadcrumb navigation can be used on pages with multiple navigation levels.
  */
-export declare function Breadcrumb({ locations, onClick, children, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+declare function Breadcrumb({ locations, onClick, children, className }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;

package/lib/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,40 @@
+import React from "react";
+import classNames from "classnames";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Breadcrumb navigation can be used on pages with multiple navigation levels.
+ */
+function Breadcrumb(_ref) {
+  let {
+    locations,
+    onClick,
+    children,
+    className
+  } = _ref;
+  const childrenList = [];
+  React.Children.forEach(children, element => {
+    if (/*#__PURE__*/React.isValidElement(element)) {
+      childrenList.push({
+        ...element,
+        props: {
+          ...element.props,
+          className: "fr-breadcrumb-location"
+        }
+      });
+    }
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("fwe-breadcrumb", className),
+    children: locations ? locations.map(location => /*#__PURE__*/_jsx(React.Fragment, {
+      children: /*#__PURE__*/_jsx("a", {
+        className: "fr-breadcrumb-location",
+        href: location.url,
+        onClick: e => onClick ? onClick(e) : undefined,
+        children: location.label
+      })
+    }, location.url)) : childrenList.map(child => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [child, " "]
+    }, child.props.children))
+  });
+}
+export default Breadcrumb;

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

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    primary?: boolean;
+    tertiary?: boolean;
+    iconOnly?: boolean;
+    large?: boolean;
+    floating?: boolean;
+}
+declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default Button;

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

@@ -0,0 +1,49 @@
+import classNames from "classnames";
+import { forwardRef } from "react";
+import IconWrapper from "../../icon-wrapper/IconWrapper.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    type = "button",
+    disabled = false,
+    iconOnly = false,
+    large = false,
+    floating = false,
+    onClick,
+    primary = false,
+    tertiary = false,
+    className,
+    children,
+    ...props
+  } = _ref;
+  const classes = classNames("fwe-btn", "fr-button", {
+    "fwe-btn-icon": iconOnly
+  }, {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-btn-hero": primary && !tertiary
+  }, {
+    "fwe-btn-link": tertiary && !primary
+  }, {
+    "fwe-btn-lg": large
+  }, {
+    "fwe-btn-floating": floating
+  }, className);
+  return /*#__PURE__*/_jsxs("button", {
+    // ignore here because fallback will explicitly be set to type 'button'
+    // eslint-disable-next-line react/button-has-type
+    type: type,
+    onClick: onClick,
+    className: classes,
+    disabled: disabled,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: icon
+    }), !iconOnly && /*#__PURE__*/_jsx("div", {
+      children: children
+    })]
+  });
+});
+export default Button;

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import Button from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+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;
+export declare const Floating: Story;

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

@@ -0,0 +1,86 @@
+import { IconCoreRangeProduct } from "@festo-ui/react-icons";
+import Button from "./Button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: Button,
+  title: "Components/Buttons"
+};
+export default meta;
+export const Overview = {
+  render: () => /*#__PURE__*/_jsxs("div", {
+    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, {
+        large: true,
+        children: "Large"
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      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"
+      }), /*#__PURE__*/_jsx(Button, {
+        icon: /*#__PURE__*/_jsx(IconCoreRangeProduct, {}),
+        children: "Icon from react icons"
+      }), /*#__PURE__*/_jsx(Button, {
+        icon: /*#__PURE__*/_jsx(IconCoreRangeProduct, {}),
+        iconOnly: true
+      })]
+    })]
+  })
+};
+export const Primary = {
+  args: {
+    primary: true,
+    children: "Primary"
+  }
+};
+export const Secondary = {
+  args: {
+    children: "Secondary"
+  }
+};
+export const Tertiary = {
+  args: {
+    tertiary: true,
+    children: "Tertiary"
+  }
+};
+export const Sizes = {
+  args: {
+    children: "Large Button",
+    large: true
+  }
+};
+export const Icon = {
+  args: {
+    children: "With Icon",
+    icon: /*#__PURE__*/_jsx(IconCoreRangeProduct, {})
+  }
+};
+export const IconOnly = {
+  args: {
+    iconOnly: true,
+    icon: /*#__PURE__*/_jsx(IconCoreRangeProduct, {})
+  }
+};
+export const Floating = {
+  args: {
+    iconOnly: true,
+    large: true,
+    primary: true,
+    floating: true,
+    icon: /*#__PURE__*/_jsx(IconCoreRangeProduct, {})
+  }
+};

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

@@ -0,0 +1,3 @@
+import { ClassNamePropsWithChildren } from "../../helper/types";
+declare function Card({ children, className }: ClassNamePropsWithChildren): JSX.Element;
+export default Card;

package/lib/components/card/Card.js

@@ -0,0 +1,13 @@
+import classNames from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Card(_ref) {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("fwe-card", className),
+    children: children
+  });
+}
+export default Card;

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

@@ -0,0 +1,6 @@
+import { ClassNamePropsWithChildren } from "../../helper/types";
+interface CardBodyProps extends ClassNamePropsWithChildren {
+    text: string;
+}
+declare function CardBody({ children, text, className }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export default CardBody;

package/lib/components/card/CardBody.js

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function CardBody(_ref) {
+  let {
+    children,
+    text,
+    className
+  } = _ref;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames("fwe-card-body", className),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fwe-card-text",
+      children: text
+    }), children]
+  });
+}
+export default CardBody;

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

@@ -0,0 +1,9 @@
+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, image, className }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default CardHeader;

package/lib/components/card/CardHeader.js

@@ -0,0 +1,29 @@
+import classNames from "classnames";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function CardHeader(_ref) {
+  let {
+    title,
+    subtitle,
+    action,
+    image,
+    className
+  } = _ref;
+  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/components/card/CardNotification.d.ts

@@ -0,0 +1,7 @@
+import type { ClassNameProps } from "../../helper/types";
+interface CardNotificationProps extends ClassNameProps {
+    title: string;
+    message?: string;
+}
+declare function CardNotification({ className, title, message }: CardNotificationProps): import("react/jsx-runtime").JSX.Element;
+export default CardNotification;

package/lib/components/card/CardNotification.js

@@ -0,0 +1,25 @@
+import classNames from "classnames";
+import { IconWarning } from "@festo-ui/react-icons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function CardNotification(_ref) {
+  let {
+    className,
+    title,
+    message
+  } = _ref;
+  const classes = classNames("fwe-card-notification", className);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/_jsx(IconWarning, {
+      size: 24
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fwe-card-title",
+      children: [/*#__PURE__*/_jsx("h6", {
+        children: title
+      }), message && /*#__PURE__*/_jsx("p", {
+        children: message
+      })]
+    })]
+  });
+}
+export default CardNotification;

package/lib/components/chips/chip/Chip.d.ts

@@ -0,0 +1,17 @@
+import { ClassNamePropsWithChildren } from "../../../helper/types";
+export declare enum ChipType {
+    Choice = 0,
+    Category = 1,
+    Filter = 2,
+    Readonly = 3
+}
+interface ChipProps extends ClassNamePropsWithChildren {
+    type?: ChipType;
+    icon?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    large?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+declare function Chip({ type, selected, disabled, large, icon, children, onClick, className, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default Chip;

package/lib/components/chips/chip/Chip.js

@@ -0,0 +1,47 @@
+import classNames from "classnames";
+import IconWrapper from "../../icon-wrapper/IconWrapper.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export let ChipType = /*#__PURE__*/function (ChipType) {
+  ChipType[ChipType["Choice"] = 0] = "Choice";
+  ChipType[ChipType["Category"] = 1] = "Category";
+  ChipType[ChipType["Filter"] = 2] = "Filter";
+  ChipType[ChipType["Readonly"] = 3] = "Readonly";
+  return ChipType;
+}({});
+function Chip(_ref) {
+  let {
+    type = ChipType.Choice,
+    selected = false,
+    disabled = false,
+    large = false,
+    icon,
+    children,
+    onClick,
+    className
+  } = _ref;
+  const classes = classNames("fr-chip", "fwe-chip", {
+    "fwe-selected": selected
+  }, {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-chip-lg": large
+  }, {
+    "fwe-category": type === ChipType.Category
+  }, {
+    "fwe-filter": type === ChipType.Filter
+  }, {
+    "fwe-readonly": type === ChipType.Readonly
+  }, className);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    _jsxs("div", {
+      className: classes,
+      onClick: onClick,
+      children: [/*#__PURE__*/_jsx(IconWrapper, {
+        icon: icon
+      }), children]
+    })
+  );
+}
+export default Chip;

package/lib/components/chips/chip-container/ChipContainer.d.ts

@@ -0,0 +1,6 @@
+import { ClassNamePropsWithChildren } from "../../../helper/types";
+interface ChipContainerProps extends ClassNamePropsWithChildren {
+    large?: boolean;
+}
+declare function ChipContainer({ large, children, className }: ChipContainerProps): import("react/jsx-runtime").JSX.Element;
+export default ChipContainer;

package/lib/components/chips/chip-container/ChipContainer.js

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChipContainer(_ref) {
+  let {
+    large = false,
+    children,
+    className
+  } = _ref;
+  const classes = classNames("fwe-chip-container", {
+    "fwe-chip-container-lg": large
+  }, className);
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
+}
+export default ChipContainer;

package/{dist → lib}/components/icon-wrapper/IconWrapper.d.ts

@@ -1,3 +1,3 @@
-export declare function IconWrapper({ icon }: {
+export default function IconWrapper({ icon }: {
     icon: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/icon-wrapper/IconWrapper.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function IconWrapper(_ref) {
+  let {
+    icon
+  } = _ref;
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    let iconName = icon;
+    if (!icon.startsWith("fwe-icon-")) {
+      iconName = `fwe-icon-${icon}`;
+    }
+    return /*#__PURE__*/_jsx("i", {
+      className: `fwe-icon ${iconName}`
+    });
+  }
+  return icon;
+}

package/lib/components/link-button/LinkButton.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+interface LinkButtonProps extends ComponentPropsWithoutRef<"button"> {
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    iconOnly?: boolean;
+}
+declare const LinkButton: (props: LinkButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default LinkButton;

package/lib/components/link-button/LinkButton.js

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import { forwardRef } from "react";
+import IconWrapper from "../icon-wrapper/IconWrapper.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LinkButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    onClick,
+    disabled = false,
+    children,
+    iconOnly = false,
+    className,
+    ...props
+  } = _ref;
+  const classes = classNames("fwe-btn", "fwe-btn-link", {
+    "fwe-disabled": disabled
+  }, {
+    "fwe-btn-icon": iconOnly
+  }, className);
+  return /*#__PURE__*/_jsxs("button", {
+    onClick: onClick,
+    type: "button",
+    className: classes,
+    disabled: disabled,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: icon
+    }), !iconOnly && children]
+  });
+});
+export default LinkButton;

package/lib/components/loading-indicator/LoadingIndicator.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from "react";
+import "./LoadingIndicator.scss";
+interface LoadingIndicatorProps extends ComponentPropsWithRef<"div"> {
+    size: "large" | "medium" | "small";
+}
+declare const LoadingIndicator: (props: LoadingIndicatorProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default LoadingIndicator;

package/lib/components/loading-indicator/LoadingIndicator.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+import cn from "classnames";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LoadingIndicator = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = "large",
+    children,
+    className,
+    ...props
+  } = _ref;
+  const classes = cn("fwe-waiting-indicator", {
+    "fwe-waiting-indicator-md": size === "medium"
+  }, {
+    "fwe-waiting-indicator-sm": size === "small"
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn("fwe-waiting-container", {
+      "fwe-waiting-container-sm": size === "small"
+    }, className),
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classes,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-1"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-2"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-3"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fwe-waiting-circle-4"
+      })]
+    }), children && /*#__PURE__*/_jsx("div", {
+      className: "fwe-waiting-content-container",
+      children: children
+    })]
+  });
+});
+export default LoadingIndicator;

package/lib/components/mobile-flyout/MobileFlyout.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+interface MobileFlyoutProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    visible?: string[];
+    defaultVisible?: string[];
+    onOpenChange?: (value: boolean) => void;
+    onVisibleChange?: (value: string) => void;
+    back?: string;
+}
+declare const MobileFlyout: (props: MobileFlyoutProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default MobileFlyout;