@festo-ui/react 9.0.0-dev.713 → 9.0.0-dev.714

package/lib/components/accordion/accordion-item/AccordionItemContext.js

@@ -1,3 +0,0 @@
-import { createContext } from "react";
-const AccordionContext = /*#__PURE__*/createContext({});
-export default AccordionContext;

package/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.d.ts

@@ -1,3 +0,0 @@
-import "./AccordionItemBody.scss";
-declare const AccordionItemBody: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export default AccordionItemBody;

package/lib/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js

@@ -1,70 +0,0 @@
-import cn from "classnames";
-import { forwardRef, useContext, useRef } from "react";
-import { Transition } from "react-transition-group";
-import useForkRef from "../../../../helper/useForkRef.js";
-import AccordionItemContext from "../AccordionItemContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AccordionItemBody = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref;
-  const {
-    expanded,
-    id
-  } = useContext(AccordionItemContext);
-  const innerRef = useRef(null);
-  const element = innerRef.current;
-  const combinedRef = useForkRef(ref, innerRef);
-  const initialHeight = useRef(expanded ? "auto" : 0);
-  const handleEntering = () => {
-    if (element) {
-      const itemHeight = element.scrollHeight;
-      element.style.height = `${itemHeight}px`;
-    }
-  };
-  const handleEntered = () => {
-    if (element) {
-      element.style.height = "auto";
-    }
-  };
-  const handleExit = () => {
-    if (element) {
-      const itemHeight = element.scrollHeight;
-      element.style.height = `${itemHeight}px`;
-    }
-  };
-  const handleExiting = () => {
-    setTimeout(() => {
-      if (element) {
-        element.style.height = "0px";
-      }
-    });
-  };
-  return /*#__PURE__*/_jsx(Transition, {
-    in: expanded,
-    nodeRef: innerRef,
-    timeout: 300,
-    onExit: handleExit,
-    onExiting: handleExiting,
-    onEntering: handleEntering,
-    onEntered: handleEntered,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: combinedRef,
-      role: "region",
-      id: `${id}-body`,
-      "aria-labelledby": `${id}-header`,
-      className: cn("fr-accordion-item-body", className),
-      style: {
-        height: initialHeight.current,
-        minHeight: 0
-      },
-      ...props,
-      children: [children, /*#__PURE__*/_jsx("div", {
-        className: "fr-accordion-item-body-spacer-bottom"
-      })]
-    })
-  });
-});
-export default AccordionItemBody;

package/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.d.ts

@@ -1,3 +0,0 @@
-import "./AccordionItemHeader.scss";
-declare const AccordionItemHeader: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export default AccordionItemHeader;

package/lib/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js

@@ -1,41 +0,0 @@
-import cn from "classnames";
-import { forwardRef, useContext } from "react";
-import AccordionItemContext from "../AccordionItemContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const AccordionItemHeader = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref;
-  const {
-    toggle,
-    id
-  } = useContext(AccordionItemContext);
-  function handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      toggle?.(event);
-    }
-  }
-  function handleKeyUp(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      toggle?.(event);
-    }
-  }
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    className: cn("fr-accordion-item-header", className),
-    role: "button",
-    tabIndex: 0,
-    id: `${id}-header`,
-    "aria-controls": `${id}-body`,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    onClick: toggle,
-    ...props,
-    children: children
-  });
-});
-export default AccordionItemHeader;

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

@@ -1,11 +0,0 @@
-interface BottomSheetProps {
-    children: React.ReactNode;
-    defaultExpanded?: boolean;
-    open?: boolean;
-    expandFrom?: "center" | "bottom";
-    hasBackdrop?: boolean;
-    hideCloseIcon?: boolean;
-    onOpenChange?: (value: boolean) => void;
-}
-export default function BottomSheet({ children, open, defaultExpanded, expandFrom, hasBackdrop, hideCloseIcon, onOpenChange, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,93 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import cn from "classnames";
-import { useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export default function BottomSheet(_ref) {
-  let {
-    children,
-    open,
-    defaultExpanded,
-    expandFrom = "center",
-    hasBackdrop = true,
-    hideCloseIcon,
-    onOpenChange
-  } = _ref;
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [isClosing, setClosing] = useState(false);
-  const [startY, setStartY] = useState(0);
-  const [swiping, setSwiping] = useState(false);
-  function toggleExpand() {
-    const newExpanded = !expanded;
-    setExpanded(newExpanded);
-  }
-  function closeBottomSheet() {
-    setClosing(true);
-    setExpanded(defaultExpanded);
-    setTimeout(() => {
-      setClosing(false);
-      onOpenChange?.(false);
-    }, 300);
-  }
-  const handleTouchStart = event => {
-    setStartY(event.touches[0].clientY);
-    setSwiping(true);
-  };
-  const handleTouchMove = event => {
-    if (!swiping) return;
-    const currentY = event.touches[0].clientY;
-    const deltaY = currentY - startY;
-    if (deltaY < -50 && !expanded) {
-      // swipe up to expand
-      setExpanded(true);
-      setSwiping(false);
-    } else if (deltaY > 50 && expanded) {
-      // swipe down to collapse
-      setExpanded(false);
-      setSwiping(false);
-    } else if (deltaY > 100 && !expanded) {
-      // swipe down to close
-      closeBottomSheet();
-      setSwiping(false);
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      className: cn("fwe-bottom-sheet-backdrop", {
-        "fwe-bottom-sheet-backdrop--visible": hasBackdrop && open && !isClosing
-      }),
-      onClick: closeBottomSheet
-    }), /*#__PURE__*/_jsxs("div", {
-      className: cn("fwe-bottom-sheet-container", {
-        "fwe-bottom-sheet-container--open": open,
-        "fwe-bottom-sheet-container--expanded": expanded,
-        "fwe-bottom-sheet-container--expand-from-center": expandFrom === "center",
-        "fwe-bottom-sheet-container--with-backdrop": hasBackdrop,
-        "fwe-bottom-sheet-container--closing": isClosing
-      }),
-      onTouchStart: handleTouchStart,
-      onTouchMove: handleTouchMove,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "fwe-bottom-sheet-header",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "fwe-bottom-sheet-drag-handle-container",
-          onClick: toggleExpand,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "fwe-bottom-sheet-drag-handle"
-          })
-        }), !hideCloseIcon && /*#__PURE__*/_jsx("button", {
-          type: "button",
-          className: "fwe-bottom-sheet-close-btn",
-          onClick: closeBottomSheet,
-          children: /*#__PURE__*/_jsx("span", {
-            className: "fwe-sr-only",
-            children: "Close"
-          })
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "fwe-bottom-sheet-content",
-        children: children
-      })]
-    })]
-  });
-}

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

@@ -1,9 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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/lib/components/breadcrumb/Breadcrumb.js

@@ -1,40 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

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

package/lib/components/card/Card.js

@@ -1,13 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-/* 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

@@ -1,7 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;