@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/loading/Loading.view.js

@@ -1,6 +1,19 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
+const colorToCSS = {
+  // "inherit" explicitly targets the adaptive foreground token so the spinner
+  // stays visible regardless of light/dark mode instead of blindly inheriting
+  // a parent color that may match the background.
+  inherit: "var(--pk-color-fg)",
+  primary: "var(--pk-color-brand)",
+  secondary: "var(--pk-color-accent)",
+  success: "var(--pk-color-success)",
+  error: "var(--pk-color-error)",
+  info: "var(--pk-color-fg)",
+  warning: "var(--pk-color-warning)",
+  white: "var(--pk-palette-white)"
+};
 const PX = {
   xs: 16,
   sm: 24,
@@ -11,9 +24,18 @@ const PX = {
 const SpinnerView = /* @__PURE__ */ __name(({
   className,
   style,
-  size = "sm",
-  ariaLabel = "Loading",
-  reducedMotion
+  /* istanbul ignore next */
+  size = (
+    /* istanbul ignore next */
+    "sm"
+  ),
+  /* istanbul ignore next */
+  ariaLabel = (
+    /* istanbul ignore next */
+    "Loading"
+  ),
+  reducedMotion,
+  color
 }) => {
   const s = PX[size];
   const r = s / 2;
@@ -31,6 +53,10 @@ const SpinnerView = /* @__PURE__ */ __name(({
       width: s,
       style: {
         display: "inline-block",
+        ...color ? {
+          "--pk-loading-color": colorToCSS[color],
+          color: colorToCSS[color]
+        } : void 0,
         ...style
       },
       children: [
@@ -89,13 +115,26 @@ const SpinnerView = /* @__PURE__ */ __name(({
 const OverlayView = /* @__PURE__ */ __name(({
   className,
   style,
-  size = "xl",
-  ariaLabel = "Loading",
-  show = true,
+  /* istanbul ignore next */
+  size = (
+    /* istanbul ignore next */
+    "xl"
+  ),
+  /* istanbul ignore next */
+  ariaLabel = (
+    /* istanbul ignore next */
+    "Loading"
+  ),
+  /* istanbul ignore next */
+  show = (
+    /* istanbul ignore next */
+    true
+  ),
   blur = 0,
   zIndex = 9999,
   reducedMotion,
-  resolvedBackdrop
+  resolvedBackdrop,
+  color
 }) => {
   if (!show) return null;
   const bg = resolvedBackdrop === "dark" ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.5)";
@@ -122,6 +161,7 @@ const OverlayView = /* @__PURE__ */ __name(({
         SpinnerView,
         {
           ariaLabel,
+          color,
           reducedMotion,
           size
         }

package/dist/components/lottie/Lottie.css

@@ -126,4 +126,20 @@
  */
 .prokodo-Lottie__container {
   position: relative;
+  width: 100%;
+}
+.prokodo-Lottie__placeholder {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: var(--pk-radius-md);
+  background-color: var(--pk-color-surface-subtle);
+  animation: pulse var(--pk-timing-slow) ease-in-out infinite alternate;
+}
+@keyframes pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.4;
+  }
 }

package/dist/components/lottie/Lottie.js

@@ -4,6 +4,7 @@ import { create } from "../../helpers/bem.js";
 import styles from "./Lottie.module.scss.js";
 const bem = create(styles, "Lottie");
 const DotLottieReact = lazy(
+  /* istanbul ignore next */
   () => import("@lottiefiles/dotlottie-react").then((mod) => ({
     default: mod.DotLottieReact
   }))
@@ -13,12 +14,15 @@ const Lottie = memo(
     const [isInView, setIsInView] = useState(false);
     const containerRef = useRef(null);
     useEffect(() => {
-      const observer = new IntersectionObserver(([entry]) => {
-        if ((entry == null ? void 0 : entry.isIntersecting) === true) {
-          setIsInView(true);
-          observer.disconnect();
+      const observer = new IntersectionObserver(
+        /* istanbul ignore next */
+        ([entry]) => {
+          if ((entry == null ? void 0 : entry.isIntersecting) === true) {
+            setIsInView(true);
+            observer.disconnect();
+          }
         }
-      });
+      );
       const el = containerRef.current;
       if (el) observer.observe(el);
       return () => observer.disconnect();

package/dist/components/lottie/Lottie.module.css

@@ -126,4 +126,20 @@
  */
 .prokodo-Lottie__container {
   position: relative;
+  width: 100%;
+}
+.prokodo-Lottie__placeholder {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: var(--pk-radius-md);
+  background-color: var(--pk-color-surface-subtle);
+  animation: pulse var(--pk-timing-slow) ease-in-out infinite alternate;
+}
+@keyframes pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.4;
+  }
 }

package/dist/components/lottie/Lottie.module.scss.js

@@ -1,6 +1,10 @@
+const pulse = "pulse";
 const styles = {
-  "prokodo-Lottie__container": "prokodo-Lottie__container"
+  "prokodo-Lottie__container": "prokodo-Lottie__container",
+  "prokodo-Lottie__placeholder": "prokodo-Lottie__placeholder",
+  pulse
 };
 export {
-  styles as default
+  styles as default,
+  pulse
 };

package/dist/components/map/Map.css

@@ -0,0 +1,130 @@
+/* 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-Map__container {
+  width: 100%;
+  height: var(--pk-map-height, 500px);
+}

package/dist/components/map/Map.js

@@ -1,65 +1,86 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { create } from "../../helpers/bem.js";
 import { isString, isArray } from "../../helpers/validations.js";
 import { useGoogleMaps } from "../../hooks/useGoogleMaps.js";
+import styles from "./Map.module.scss.js";
 import { Skeleton } from "../skeleton/Skeleton.js";
+const bem = create(styles, "Map");
 const Map = memo(
   ({ apiKey, mapId, center, marker, zoom = 8 }) => {
     const mapRef = useRef(null);
     const mapInstanceRef = useRef(null);
     const [isDark, setIsDark] = useState(
-      typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") === "dark" : false
+      typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") === "dark" : (
+        /* istanbul ignore next */
+        false
+      )
     );
-    const initMap = useCallback(() => {
-      if (!(mapRef == null ? void 0 : mapRef.current)) return;
-      const options = {
-        center,
-        zoom,
-        mapId: isString(mapId) ? mapId : isDark === true ? "c3c70a1ea4c4b0b8" : "e5921eca3f70ade2",
-        disableDefaultUI: true,
-        mapTypeControl: false,
-        fullscreenControl: false,
-        streetViewControl: false,
-        zoomControl: true
-      };
-      const map = new google.maps.Map(mapRef.current, options);
-      mapInstanceRef.current = map;
-      if (!isArray(marker)) return;
-      marker.forEach((place) => {
-        var _a, _b;
-        if (typeof ((_a = place == null ? void 0 : place.position) == null ? void 0 : _a.lat) === "number" || typeof ((_b = place == null ? void 0 : place.position) == null ? void 0 : _b.lng) === "number")
-          return;
-        const content = document.createElement("img");
-        content.src = "/images/prokodo-map-marker.webp";
-        new google.maps.marker.AdvancedMarkerElement({
-          map,
-          content,
-          ...place
+    const initMap = useCallback(
+      /* istanbul ignore next */
+      () => {
+        if (!(mapRef == null ? void 0 : mapRef.current)) return;
+        const options = {
+          center,
+          zoom,
+          mapId: isString(mapId) ? mapId : isDark === true ? "c3c70a1ea4c4b0b8" : "e5921eca3f70ade2",
+          disableDefaultUI: true,
+          mapTypeControl: false,
+          fullscreenControl: false,
+          streetViewControl: false,
+          zoomControl: true
+        };
+        const map = new google.maps.Map(mapRef.current, options);
+        mapInstanceRef.current = map;
+        if (!isArray(marker)) return;
+        marker.forEach((place) => {
+          var _a, _b;
+          if (typeof ((_a = place == null ? void 0 : place.position) == null ? void 0 : _a.lat) === "number" || typeof ((_b = place == null ? void 0 : place.position) == null ? void 0 : _b.lng) === "number")
+            return;
+          const content = document.createElement("img");
+          content.src = "/images/prokodo-map-marker.webp";
+          new google.maps.marker.AdvancedMarkerElement({
+            map,
+            content,
+            ...place
+          });
         });
-      });
-    }, [isDark, mapId, center, marker, zoom]);
+      },
+      [isDark, mapId, center, marker, zoom]
+    );
     const loaded = useGoogleMaps(apiKey, isDark);
-    useEffect(() => {
-      if (!loaded || mapInstanceRef.current) return;
-      initMap();
-    }, [loaded, initMap]);
-    useEffect(() => {
-      const observer = new MutationObserver(() => {
-        const theme = document.documentElement.getAttribute("data-theme");
-        setIsDark(theme === "dark");
-        mapInstanceRef.current = null;
+    useEffect(
+      /* istanbul ignore next */
+      () => {
+        if (!loaded || mapInstanceRef.current) return;
         initMap();
-      });
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["data-theme"]
-      });
-      return () => observer.disconnect();
-    }, [initMap]);
+      },
+      [loaded, initMap]
+    );
+    useEffect(
+      /* istanbul ignore next */
+      () => {
+        const observer = new MutationObserver(
+          /* istanbul ignore next */
+          () => {
+            const theme = document.documentElement.getAttribute("data-theme");
+            setIsDark(theme === "dark");
+            mapInstanceRef.current = null;
+            initMap();
+          }
+        );
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["data-theme"]
+        });
+        return () => observer.disconnect();
+      },
+      [initMap]
+    );
     if (!loaded) {
-      return /* @__PURE__ */ jsx(Skeleton, { height: "500px", width: "100%" });
+      return /* @__PURE__ */ jsx(Skeleton, { className: bem("container") });
     }
-    return /* @__PURE__ */ jsx("div", { ref: mapRef, style: { width: "100%", height: "500px" } });
+    return /* @__PURE__ */ jsx("div", { ref: mapRef, className: bem("container") });
   }
 );
 Map.displayName = "Map";

package/dist/components/map/Map.module.css

@@ -0,0 +1,130 @@
+/* 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-Map__container {
+  width: 100%;
+  height: var(--pk-map-height, 500px);
+}

package/dist/components/map/Map.module.scss.js

@@ -0,0 +1,6 @@
+const styles = {
+  "prokodo-Map__container": "prokodo-Map__container"
+};
+export {
+  styles as default
+};