@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/image/Image.module.css

@@ -132,14 +132,15 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-Image__caption {
   position: absolute;
   width: 100%;
-  bottom: -1rem;
+  bottom: calc(-1 * var(--pk-space-lg));
   left: 0;
-  opacity: 0.5;
+  opacity: 0.6;
+  color: var(--pk-color-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/image/Image.server.js

@@ -64,7 +64,8 @@ const ImageServer = /* @__PURE__ */ __name(({
   const renderImage = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
     CustomImage,
     {
-      alt: alt ?? "",
+      alt: alt ?? /* istanbul ignore next */
+      "",
       className: bem("image", void 0, className),
       ...imgProps
     }

package/dist/components/image-text/ImageText.css

@@ -124,23 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-ImageText__grid {
-  position: relative;
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid {
-    flex-direction: row !important;
+@keyframes ImageText_borderFlowDown {
+  from {
+    background-position: 0 -100%;
+  }
+  to {
+    background-position: 0 100%;
   }
 }
-.prokodo-ImageText__grid--is-reverse {
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid--is-reverse {
-    flex-direction: row-reverse !important;
+@keyframes ImageText_borderFlowUp {
+  from {
+    background-position: 0 100%;
+  }
+  to {
+    background-position: 0 -100%;
   }
 }
+.prokodo-ImageText__grid {
+  position: relative;
+}
 .prokodo-ImageText__sub__headline {
   text-transform: uppercase;
 }
@@ -174,7 +176,7 @@
   }
 }
 .prokodo-ImageText__content__paragraph {
-  color: var(--color-grey-300);
+  color: var(--pk-image-text-content-color);
 }
 .prokodo-ImageText__animated__container {
   width: 100%;
@@ -189,6 +191,33 @@
   align-items: center;
   align-self: end;
 }
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image {
+    order: -1;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image--is-reverse {
+    order: 1;
+  }
+}
 .prokodo-ImageText__image__src {
   width: 100%;
+}
+.prokodo-ImageText__animated-border {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: var(--pk-space-xl) 0;
+}
+.prokodo-ImageText__animated-border__line {
+  width: 3px;
+  border-radius: var(--pk-radius-pill);
+  background: linear-gradient(to bottom, transparent 0%, var(--pk-color-brand) 40%, var(--pk-color-accent) 60%, transparent 100%);
+  background-size: 100% 200%;
+  background-position: 0 -100%;
+  animation: ImageText_borderFlowDown 2.5s ease-in-out infinite;
+}
+.prokodo-ImageText__animated-border__line--bottom-to-top {
+  animation: ImageText_borderFlowUp 2.5s ease-in-out infinite;
 }

package/dist/components/image-text/ImageText.js

@@ -26,60 +26,78 @@ const ImageText = /* @__PURE__ */ __name(({
   button
 }) => {
   const leftColumnMd = image ? animatedBorder ? 4 : 6 : animatedBorder ? 10 : 12;
-  return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      className: bem("grid", {
-        "is-reverse": Boolean(reverse)
-      }),
-      children: [
-        /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
-          isString(subTitle) && /* @__PURE__ */ jsx(
-            Headline,
-            {
-              highlight: true,
-              size: "sm",
-              type: "h3",
-              variant: "primary",
-              ...subTitleProps,
-              className: bem(
-                "sub__headline",
-                void 0,
-                subTitleProps == null ? void 0 : subTitleProps.className
-              ),
-              children: subTitle
-            }
+  return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), children: [
+    /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
+      isString(subTitle) && /* @__PURE__ */ jsx(
+        Headline,
+        {
+          highlight: true,
+          color: "primary",
+          size: "sm",
+          type: "h3",
+          ...subTitleProps,
+          className: bem(
+            "sub__headline",
+            void 0,
+            /* istanbul ignore next */
+            subTitleProps == null ? void 0 : subTitleProps.className
           ),
-          /* @__PURE__ */ jsx(
-            Headline,
-            {
-              size: "lg",
-              type: "h2",
-              ...titleProps,
-              className: bem("headline", void 0, titleProps == null ? void 0 : titleProps.className),
-              children: title
-            }
+          children: subTitle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Headline,
+        {
+          size: "lg",
+          type: "h2",
+          ...titleProps,
+          className: bem(
+            "headline",
+            void 0,
+            /* istanbul ignore next */
+            titleProps == null ? void 0 : titleProps.className
           ),
-          isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
-          button && /* @__PURE__ */ jsx(
-            Button,
+          children: title
+        }
+      ),
+      isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
+      button && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          ...button,
+          className: bem("button", void 0, button == null ? void 0 : button.className)
+        }
+      )
+    ] }) }),
+    image && /* @__PURE__ */ jsx(
+      GridRow,
+      {
+        className: bem("image", { "is-reverse": Boolean(reverse) }),
+        md: 6,
+        xs: 10,
+        children: /* @__PURE__ */ jsx(Animated, {
+          className: bem("animated__container"),
+          /* istanbul ignore next */
+          children: isString(animation) ? /* @__PURE__ */ jsx(
+            Lottie,
             {
-              variant: "outlined",
-              ...button,
-              className: bem("button", void 0, button == null ? void 0 : button.className)
+              animation,
+              className: bem("animation")
             }
-          )
-        ] }) }),
-        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(Animated, { className: bem("animated__container"), children: isString(animation) ? /* @__PURE__ */ jsx(
-          Lottie,
-          {
-            animation,
-            className: bem("animation")
-          }
-        ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image }) }) })
-      ]
-    }
-  ) });
+          ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image })
+        })
+      }
+    ),
+    animatedBorder && /* @__PURE__ */ jsx(GridRow, { className: bem("animated-border"), md: 2, xs: 12, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: bem("animated-border__line", {
+          "bottom-to-top": animatedBorder.direction === "bottom-to-top"
+        })
+      }
+    ) })
+  ] }) });
 }, "ImageText");
 export {
   ImageText

package/dist/components/image-text/ImageText.module.css

@@ -124,23 +124,25 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-ImageText__grid {
-  position: relative;
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid {
-    flex-direction: row !important;
+@keyframes ImageText_borderFlowDown {
+  from {
+    background-position: 0 -100%;
+  }
+  to {
+    background-position: 0 100%;
   }
 }
-.prokodo-ImageText__grid--is-reverse {
-  flex-direction: column-reverse !important;
-}
-@media screen and (min-width: 960px) {
-  .prokodo-ImageText__grid--is-reverse {
-    flex-direction: row-reverse !important;
+@keyframes ImageText_borderFlowUp {
+  from {
+    background-position: 0 100%;
+  }
+  to {
+    background-position: 0 -100%;
   }
 }
+.prokodo-ImageText__grid {
+  position: relative;
+}
 .prokodo-ImageText__sub__headline {
   text-transform: uppercase;
 }
@@ -174,7 +176,7 @@
   }
 }
 .prokodo-ImageText__content__paragraph {
-  color: var(--color-grey-300);
+  color: var(--pk-image-text-content-color);
 }
 .prokodo-ImageText__animated__container {
   width: 100%;
@@ -189,6 +191,33 @@
   align-items: center;
   align-self: end;
 }
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image {
+    order: -1;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-ImageText__image--is-reverse {
+    order: 1;
+  }
+}
 .prokodo-ImageText__image__src {
   width: 100%;
+}
+.prokodo-ImageText__animated-border {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: var(--pk-space-xl) 0;
+}
+.prokodo-ImageText__animated-border__line {
+  width: 3px;
+  border-radius: var(--pk-radius-pill);
+  background: linear-gradient(to bottom, transparent 0%, var(--pk-color-brand) 40%, var(--pk-color-accent) 60%, transparent 100%);
+  background-size: 100% 200%;
+  background-position: 0 -100%;
+  animation: ImageText_borderFlowDown 2.5s ease-in-out infinite;
+}
+.prokodo-ImageText__animated-border__line--bottom-to-top {
+  animation: ImageText_borderFlowUp 2.5s ease-in-out infinite;
 }

package/dist/components/image-text/ImageText.module.scss.js

@@ -1,14 +1,23 @@
+const ImageText_borderFlowDown = "ImageText_borderFlowDown";
+const ImageText_borderFlowUp = "ImageText_borderFlowUp";
 const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
-  "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
   "prokodo-ImageText__sub__headline": "prokodo-ImageText__sub__headline",
   "prokodo-ImageText__content": "prokodo-ImageText__content",
   "prokodo-ImageText__content__paragraph": "prokodo-ImageText__content__paragraph",
   "prokodo-ImageText__animated__container": "prokodo-ImageText__animated__container",
   "prokodo-ImageText__animation": "prokodo-ImageText__animation",
   "prokodo-ImageText__image": "prokodo-ImageText__image",
-  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src"
+  "prokodo-ImageText__image--is-reverse": "prokodo-ImageText__image--is-reverse",
+  "prokodo-ImageText__image__src": "prokodo-ImageText__image__src",
+  "prokodo-ImageText__animated-border": "prokodo-ImageText__animated-border",
+  "prokodo-ImageText__animated-border__line": "prokodo-ImageText__animated-border__line",
+  ImageText_borderFlowDown,
+  "prokodo-ImageText__animated-border__line--bottom-to-top": "prokodo-ImageText__animated-border__line--bottom-to-top",
+  ImageText_borderFlowUp
 };
 export {
+  ImageText_borderFlowDown,
+  ImageText_borderFlowUp,
   styles as default
 };

package/dist/components/input/Input.client.js

@@ -37,9 +37,22 @@ function InputClient({
       const v = e.target.value;
       if (isNumber(maxLength) && v.length > maxLength) return;
       setVal(v);
-      const minInt = rawType === "number" ? min : void 0;
-      const maxInt = rawType === "number" ? max : void 0;
+      const minInt = (
+        /* istanbul ignore next */
+        rawType === "number" ? (
+          /* istanbul ignore next */
+          min
+        ) : void 0
+      );
+      const maxInt = (
+        /* istanbul ignore next */
+        rawType === "number" ? (
+          /* istanbul ignore next */
+          max
+        ) : void 0
+      );
       handleValidation(
+        /* istanbul ignore next */
         Boolean(multiline) ? "text" : rawType,
         name,
         v,