@prokodo/ui 0.1.3 → 0.1.5

package/dist/components/accordion/Accordion.view.js

@@ -1,10 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isNull, isArray } from "../../helpers/validations.js";
-import styles from "./Accordion.base.module.scss.js";
-import { AccordionEffectsLoader } from "./Accordion.effects.client.js";
+import styles from "./Accordion.module.scss.js";
 import { Headline } from "../headline/Headline.js";
 import { Animated } from "../animated/Animated.js";
 import { Button } from "../button/Button.js";
@@ -21,129 +20,126 @@ function AccordionView({
   iconProps,
   ...domRest
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ...domRest,
       className: bem(void 0, { [variant]: true }, className),
-      children: [
-        /* @__PURE__ */ jsx(AccordionEffectsLoader, { useBorderShift: true }),
-        items.map((item, index) => {
-          const {
-            title,
-            renderHeader,
-            renderHeaderActions,
-            renderContent,
-            actions,
-            className: itemCls
-          } = item;
-          const accId = `${id}-${title}`;
-          const isExpanded = expandedIndex === index;
-          const accHeaderProps = {
-            "aria-controls": `${accId}-content`,
-            "aria-expanded": isExpanded,
-            role: "button",
-            tabIndex: 0,
-            onClick: onToggle ? (e) => onToggle(index, e) : void 0,
-            onKeyDown: onToggle ? (e) => {
-              if (e.key === "Enter" || e.key === " ") onToggle(index, e);
-            } : void 0
-          };
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: bem("item", { "is-expanded": isExpanded }, itemCls),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: bem("header__wrapper", { "is-expanded": isExpanded }),
-                    children: /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        ...accHeaderProps,
-                        className: bem("header__toggle", { "is-expanded": isExpanded }),
-                        id: `${accId}-header`,
-                        children: [
-                          !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
-                            Headline,
+      children: items.map((item, index) => {
+        const {
+          title,
+          renderHeader,
+          renderHeaderActions,
+          renderContent,
+          actions,
+          className: itemCls
+        } = item;
+        const accId = `${id}-${title}`;
+        const isExpanded = expandedIndex === index;
+        const accHeaderProps = {
+          "aria-controls": `${accId}-content`,
+          "aria-expanded": isExpanded,
+          role: "button",
+          tabIndex: 0,
+          onClick: onToggle ? (e) => onToggle(index, e) : void 0,
+          onKeyDown: onToggle ? (e) => {
+            if (e.key === "Enter" || e.key === " ") onToggle(index, e);
+          } : void 0
+        };
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: bem("item", { "is-expanded": isExpanded }, itemCls),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: bem("header__wrapper", { "is-expanded": isExpanded }),
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ...accHeaderProps,
+                      className: bem("header__toggle", { "is-expanded": isExpanded }),
+                      id: `${accId}-header`,
+                      children: [
+                        !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
+                          Headline,
+                          {
+                            animated: true,
+                            className: bem("title"),
+                            highlight: isExpanded,
+                            size: "xs",
+                            type: "h3",
+                            variant: isExpanded ? "primary" : "inherit",
+                            ...item.titleOptions ?? titleOptions,
+                            children: title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: bem("header__actions__wrapper"), children: [
+                          !isNull(renderHeaderActions) && // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                          /* @__PURE__ */ jsx(
+                            "div",
                             {
-                              animated: true,
-                              className: bem("title"),
-                              highlight: isExpanded,
-                              size: "xs",
-                              type: "h3",
-                              variant: isExpanded ? "primary" : "inherit",
-                              ...item.titleOptions ?? titleOptions,
-                              children: title
+                              className: bem("header__actions"),
+                              onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
+                              onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown"),
+                              onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" ? e.stopPropagation() : void 0, "onKeyDown"),
+                              children: renderHeaderActions
                             }
                           ),
-                          /* @__PURE__ */ jsxs("div", { className: bem("header__actions__wrapper"), children: [
-                            !isNull(renderHeaderActions) && // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                          /* @__PURE__ */ jsxs("div", { className: bem("header__icons"), children: [
                             /* @__PURE__ */ jsx(
-                              "div",
+                              Icon,
                               {
-                                className: bem("header__actions"),
-                                onClick: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onClick"),
-                                onMouseDown: /* @__PURE__ */ __name((e) => e.stopPropagation(), "onMouseDown"),
-                                onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" ? e.stopPropagation() : void 0, "onKeyDown"),
-                                children: renderHeaderActions
+                                className: bem("icon", { "is-hidden": isExpanded }),
+                                color: "inherit",
+                                name: "PlusSignIcon",
+                                size: "sm",
+                                ...iconProps
                               }
                             ),
-                            /* @__PURE__ */ jsxs("div", { className: bem("header__icons"), children: [
-                              /* @__PURE__ */ jsx(
-                                Icon,
-                                {
-                                  className: bem("icon", { "is-hidden": isExpanded }),
-                                  color: "inherit",
-                                  name: "PlusSignIcon",
-                                  size: "sm",
-                                  ...iconProps
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Icon,
-                                {
-                                  className: bem("icon", { "is-hidden": !isExpanded }),
-                                  color: "inherit",
-                                  name: "MinusSignIcon",
-                                  size: "sm",
-                                  ...iconProps
-                                }
-                              )
-                            ] })
+                            /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                className: bem("icon", { "is-hidden": !isExpanded }),
+                                color: "inherit",
+                                name: "MinusSignIcon",
+                                size: "sm",
+                                ...iconProps
+                              }
+                            )
                           ] })
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    "aria-labelledby": `${accId}-header`,
-                    className: bem("content", { "is-expanded": isExpanded }),
-                    hidden: !isExpanded,
-                    id: `${accId}-content`,
-                    role: "region",
-                    children: [
-                      !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
-                      isArray(actions) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          ...action
-                        },
-                        `${accId}-action-${action.id}`
-                      )) }) : null
-                    ]
-                  }
-                )
-              ]
-            },
-            accId
-          );
-        })
-      ]
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-labelledby": `${accId}-header`,
+                  className: bem("content", { "is-expanded": isExpanded }),
+                  hidden: !isExpanded,
+                  id: `${accId}-content`,
+                  role: "region",
+                  children: [
+                    !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
+                    isArray(actions) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        ...action
+                      },
+                      `${accId}-action-${action.id}`
+                    )) }) : null
+                  ]
+                }
+              )
+            ]
+          },
+          accId
+        );
+      })
     }
   );
 }

package/dist/components/animated/Animated.css

@@ -0,0 +1,158 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Animated {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms ease-out;
+  will-change: opacity, transform, visibility;
+}
+.prokodo-Animated--animate-bottom-top {
+  transform: translate(0, 20vh);
+}
+.prokodo-Animated--animate-top-bottom {
+  transform: translate(0, -20vh);
+}
+.prokodo-Animated--animate-left-right {
+  transform: translate(-20vh, 0);
+}
+.prokodo-Animated--animate-right-left {
+  transform: translate(20vh, 0);
+}
+.prokodo-Animated--is-visible {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+.prokodo-Animated--is-disabled {
+  transform: none;
+}
+.prokodo-Animated--has-fast-speed {
+  transition: opacity 500ms ease-out, transform 500ms ease-out, visibility 500ms ease-out;
+}
+.prokodo-Animated--has-slow-speed {
+  transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
+}

package/dist/components/animated/Animated.module.css

@@ -0,0 +1,158 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Animated {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms ease-out;
+  will-change: opacity, transform, visibility;
+}
+.prokodo-Animated--animate-bottom-top {
+  transform: translate(0, 20vh);
+}
+.prokodo-Animated--animate-top-bottom {
+  transform: translate(0, -20vh);
+}
+.prokodo-Animated--animate-left-right {
+  transform: translate(-20vh, 0);
+}
+.prokodo-Animated--animate-right-left {
+  transform: translate(20vh, 0);
+}
+.prokodo-Animated--is-visible {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+.prokodo-Animated--is-disabled {
+  transform: none;
+}
+.prokodo-Animated--has-fast-speed {
+  transition: opacity 500ms ease-out, transform 500ms ease-out, visibility 500ms ease-out;
+}
+.prokodo-Animated--has-slow-speed {
+  transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
+}