@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/post-teaser/PostTeaser.js

@@ -1,153 +1,157 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { memo as I, useState as S, useCallback as N } from "react";
-import { create as w } from "../../helpers/bem.js";
-import { calculateWordCount as x } from "../../helpers/calculation.js";
-import { isString as m } from "../../helpers/validations.js";
-import M from "./PostTeaser.module.scss.js";
-import { Chip as v } from "../chip/Chip.js";
-import { Card as R } from "../card/Card.js";
-import { Icon as f } from "../icon/Icon.js";
-import { Image as k } from "../image/Image.js";
-import { Headline as z } from "../headline/Headline.js";
-import { RichText as E } from "../rich-text/RichText.js";
-const a = w(M, "PostTeaser"), H = I(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostTeaser.module.scss.js";
+import { Chip } from "../chip/Chip.js";
+import { Card } from "../card/Card.js";
+import { Icon } from "../icon/Icon.js";
+import { Image } from "../image/Image.js";
+import { Headline } from "../headline/Headline.server.js";
+import { RichText } from "../rich-text/RichText.js";
+const bem = create(styles, "PostTeaser");
+const PostTeaser = memo(
   ({
-    className: P,
-    image: r,
-    readCount: l,
-    title: s,
-    date: t,
-    metaDate: _,
-    hideCategory: b,
-    category: i,
-    content: c,
-    onClick: g,
-    redirect: o,
-    ...C
+    className,
+    image,
+    readCount,
+    title,
+    date,
+    metaDate,
+    hideCategory,
+    category,
+    content,
+    onClick,
+    redirect,
+    ...props
   }) => {
-    var u;
-    const h = x(c), [p, d] = S(!1), y = N(() => {
-      d(!0);
-    }, []), T = N(() => {
-      d(!1);
+    var _a;
+    const wordCount = calculateWordCount(content);
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseEnter = useCallback(() => {
+      setIsHovered(true);
     }, []);
-    return /* @__PURE__ */ n(
+    const handleMouseLeave = useCallback(() => {
+      setIsHovered(false);
+    }, []);
+    return /* @__PURE__ */ jsxs(
       "article",
       {
-        itemScope: !0,
-        className: a(void 0, void 0, P),
+        itemScope: true,
+        className: bem(void 0, void 0, className),
         itemType: "http://schema.org/BlogPosting",
         children: [
-          /* @__PURE__ */ n(
-            R,
+          /* @__PURE__ */ jsxs(
+            Card,
             {
               variant: "white",
-              ...C,
-              className: a("card__container"),
-              contentClassName: a("card"),
-              highlight: p,
-              redirect: o,
-              onClick: g,
-              onMouseEnter: y,
-              onMouseLeave: T,
+              ...props,
+              className: bem("card__container"),
+              contentClassName: bem("card"),
+              highlight: isHovered,
+              redirect,
+              onClick,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave,
               children: [
-                /* @__PURE__ */ n("header", { children: [
-                  m(r == null ? void 0 : r.src) && /* @__PURE__ */ n("div", { className: a("image__wrapper"), children: [
-                    /* @__PURE__ */ n("div", { className: a("meta"), children: [
-                      m(i) && b === !1 && /* @__PURE__ */ e(
-                        v,
+                /* @__PURE__ */ jsxs("header", { children: [
+                  isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsxs("div", { className: bem("image__wrapper"), children: [
+                    /* @__PURE__ */ jsxs("div", { className: bem("meta"), children: [
+                      isString(category) && hideCategory === false && /* @__PURE__ */ jsx(
+                        Chip,
                         {
-                          "aria-label": `Category ${i}`,
-                          className: a("meta__category"),
+                          "aria-label": `Category ${category}`,
+                          className: bem("meta__category"),
                           color: "primary",
-                          label: i
+                          label: category
                         }
                       ),
-                      l !== void 0 && /* @__PURE__ */ e(
-                        v,
+                      readCount !== void 0 && /* @__PURE__ */ jsx(
+                        Chip,
                         {
-                          "aria-label": `Read ${l} times`,
+                          "aria-label": `Read ${readCount} times`,
                           color: "white",
-                          icon: /* @__PURE__ */ e(f, { name: "EyeIcon", size: "sm" }),
-                          label: /* @__PURE__ */ n(
+                          icon: /* @__PURE__ */ jsx(Icon, { name: "EyeIcon", size: "sm" }),
+                          label: /* @__PURE__ */ jsxs(
                             "p",
                             {
-                              itemScope: !0,
+                              itemScope: true,
                               itemProp: "interactionStatistic",
                               itemType: "https://schema.org/InteractionCounter",
                               children: [
-                                /* @__PURE__ */ e(
+                                /* @__PURE__ */ jsx(
                                   "meta",
                                   {
                                     content: "https://schema.org/ReadAction",
                                     itemProp: "interactionType"
                                   }
                                 ),
-                                /* @__PURE__ */ e("span", { itemProp: "userInteractionCount", children: l })
+                                /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
                               ]
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ e(
-                      k,
+                    /* @__PURE__ */ jsx(
+                      Image,
                       {
-                        ...r,
-                        captionClassName: a("image__caption"),
-                        className: a("image"),
-                        containerClassName: a("image")
+                        ...image,
+                        captionClassName: bem("image__caption"),
+                        className: bem("image"),
+                        containerClassName: bem("image")
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ e(
-                    z,
+                  /* @__PURE__ */ jsx(
+                    Headline,
                     {
-                      highlight: !0,
+                      highlight: true,
                       size: "md",
                       type: "h3",
-                      ...s,
-                      className: a("headline", s == null ? void 0 : s.className),
-                      variant: (s == null ? void 0 : s.variant) ?? "secondary",
-                      children: s == null ? void 0 : s.content
+                      ...title,
+                      className: bem("headline", title == null ? void 0 : title.className),
+                      variant: (title == null ? void 0 : title.variant) ?? "secondary",
+                      children: title == null ? void 0 : title.content
                     }
                   )
                 ] }),
-                m(c) && /* @__PURE__ */ e("div", { className: a("card__content"), itemProp: "articleBody", children: /* @__PURE__ */ e(E, { className: a("content"), children: c }) }),
-                /* @__PURE__ */ n("div", { className: a("card__footer"), children: [
-                  m(t) && /* @__PURE__ */ e(
+                isString(content) && /* @__PURE__ */ jsx("div", { className: bem("card__content"), itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content"), children: content }) }),
+                /* @__PURE__ */ jsxs("div", { className: bem("card__footer"), children: [
+                  isString(date) && /* @__PURE__ */ jsx(
                     "p",
                     {
-                      "aria-label": `Published at ${t}`,
-                      className: a("date"),
+                      "aria-label": `Published at ${date}`,
+                      className: bem("date"),
                       itemProp: "datePublished",
-                      children: /* @__PURE__ */ e("time", { dateTime: _, itemProp: "datePublished", children: t })
+                      children: /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
                     }
                   ),
-                  (o == null ? void 0 : o.label) !== void 0 && m(o == null ? void 0 : o.label) && /* @__PURE__ */ n(
+                  (redirect == null ? void 0 : redirect.label) !== void 0 && isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs(
                     "span",
                     {
-                      className: a("link", {
-                        "is-hovered": p
+                      className: bem("link", {
+                        "is-hovered": isHovered
                       }),
                       children: [
-                        /* @__PURE__ */ e(
-                          f,
+                        /* @__PURE__ */ jsx(
+                          Icon,
                           {
                             name: "ArrowRight01Icon",
                             size: "xs",
-                            ...o == null ? void 0 : o.icon,
+                            ...redirect == null ? void 0 : redirect.icon,
                             color: "primary",
-                            className: a(
+                            className: bem(
                               "link__icon",
                               {
-                                "is-hovered": p
+                                "is-hovered": isHovered
                               },
-                              (u = o == null ? void 0 : o.icon) == null ? void 0 : u.className
+                              (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
                             )
                           }
                         ),
-                        o.label
+                        redirect.label
                       ]
                     }
                   )
@@ -155,14 +159,14 @@ const a = w(M, "PostTeaser"), H = I(
               ]
             }
           ),
-          h > 0 && /* @__PURE__ */ e("meta", { content: String(h), itemProp: "wordCount" }),
-          m(i) && /* @__PURE__ */ e("meta", { content: i, itemProp: "articleSection" })
+          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
+          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
         ]
       }
     );
   }
 );
-H.displayName = "PostTeaser";
+PostTeaser.displayName = "PostTeaser";
 export {
-  H as PostTeaser
+  PostTeaser
 };

package/dist/components/post-teaser/PostTeaser.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-PostTeaser__card": "prokodo-PostTeaser__card",
   "prokodo-PostTeaser__card__container": "prokodo-PostTeaser__card__container",
   "prokodo-PostTeaser__card__content": "prokodo-PostTeaser__card__content",
@@ -15,11 +17,11 @@ const o = "gradientMove", e = "fadeInKeyframe", _ = {
   "prokodo-PostTeaser__link": "prokodo-PostTeaser__link",
   "prokodo-PostTeaser__link__icon": "prokodo-PostTeaser__link__icon",
   "prokodo-PostTeaser__link--is-hovered": "prokodo-PostTeaser__link--is-hovered",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/post-teaser/index.js

@@ -1,4 +1,4 @@
-import { PostTeaser as r } from "./PostTeaser.js";
+import { PostTeaser } from "./PostTeaser.js";
 export {
-  r as PostTeaser
+  PostTeaser
 };

package/dist/components/post-widget/PostWidget.js

@@ -1,147 +1,148 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { memo as f } from "react";
-import { create as y } from "../../helpers/bem.js";
-import { isString as i } from "../../helpers/validations.js";
-import _ from "./PostWidget.module.scss.js";
-import { Card as v } from "../card/Card.js";
-import { Headline as h } from "../headline/Headline.js";
-import { Link as p } from "../link/Link.js";
-import { Image as S } from "../image/Image.js";
-const r = y(_, "PostWidget"), L = f(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostWidget.module.scss.js";
+import { Card } from "../card/Card.js";
+import { Headline } from "../headline/Headline.server.js";
+import { Link } from "../link/Link.js";
+import { Image } from "../image/Image.js";
+const bem = create(styles, "PostWidget");
+const PostWidget = memo(
   ({
-    fullWidth: c,
-    className: g,
-    title: o,
-    listClassName: m,
-    contentClassName: N,
-    items: P = [],
-    ...u
-  }) => /* @__PURE__ */ e(
+    fullWidth,
+    className,
+    title,
+    listClassName,
+    contentClassName,
+    items = [],
+    ...props
+  }) => /* @__PURE__ */ jsx(
     "section",
     {
-      itemScope: !0,
-      className: r(void 0, void 0, g),
+      itemScope: true,
+      className: bem(void 0, void 0, className),
       itemType: "https://schema.org/ItemList",
-      children: /* @__PURE__ */ s(
-        v,
+      children: /* @__PURE__ */ jsxs(
+        Card,
         {
-          animated: !0,
-          enableShadow: !0,
-          ...u,
-          className: r("card__container"),
-          contentClassName: r("card", void 0, N),
+          animated: true,
+          enableShadow: true,
+          ...props,
+          className: bem("card__container"),
+          contentClassName: bem("card", void 0, contentClassName),
           children: [
-            o && /* @__PURE__ */ e(
-              h,
+            title && /* @__PURE__ */ jsx(
+              Headline,
               {
-                highlight: !0,
+                highlight: true,
                 size: "md",
                 type: "h2",
-                ...o,
-                className: r("title", o == null ? void 0 : o.className),
+                ...title,
+                className: bem("title", title == null ? void 0 : title.className),
                 itemProp: "headline",
                 variant: "secondary",
-                children: o == null ? void 0 : o.content
+                children: title == null ? void 0 : title.content
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ jsx(
               "ul",
               {
-                className: r(
+                className: bem(
                   "list",
                   {
-                    "has-fullWidth": !!c
+                    "has-fullWidth": Boolean(fullWidth)
                   },
-                  m
+                  listClassName
                 ),
-                children: P.map((a, b) => {
-                  var l, d, n, t;
-                  return /* @__PURE__ */ e(
+                children: items.map((item, i) => {
+                  var _a, _b, _c, _d;
+                  return /* @__PURE__ */ jsx(
                     "li",
                     {
-                      itemScope: !0,
+                      itemScope: true,
                       itemProp: "itemListElement",
                       itemType: "https://schema.org/ListItem",
-                      className: r("list__item", {
-                        "has-fullWidth": !!c
+                      className: bem("list__item", {
+                        "has-fullWidth": Boolean(fullWidth)
                       }),
-                      children: /* @__PURE__ */ s(
+                      children: /* @__PURE__ */ jsxs(
                         "article",
                         {
-                          itemScope: !0,
-                          className: r("list__item__content"),
+                          itemScope: true,
+                          className: bem("list__item__content"),
                           itemType: "https://schema.org/BlogPosting",
                           children: [
-                            (a == null ? void 0 : a.image) && /* @__PURE__ */ e("header", { children: /* @__PURE__ */ e(
-                              p,
+                            (item == null ? void 0 : item.image) && /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(
+                              Link,
                               {
-                                ...a == null ? void 0 : a.redirect,
-                                "aria-label": `Read more about ${a.title.content}`,
-                                className: r(
+                                ...item == null ? void 0 : item.redirect,
+                                "aria-label": `Read more about ${item.title.content}`,
+                                className: bem(
                                   "image__link",
                                   void 0,
-                                  (l = a == null ? void 0 : a.redirect) == null ? void 0 : l.className
+                                  (_a = item == null ? void 0 : item.redirect) == null ? void 0 : _a.className
                                 ),
-                                children: /* @__PURE__ */ e(
-                                  S,
+                                children: /* @__PURE__ */ jsx(
+                                  Image,
                                   {
-                                    ...a == null ? void 0 : a.image,
+                                    ...item == null ? void 0 : item.image,
                                     itemProp: "image",
-                                    className: r(
+                                    className: bem(
                                       "image",
                                       void 0,
-                                      (d = a == null ? void 0 : a.image) == null ? void 0 : d.className
+                                      (_b = item == null ? void 0 : item.image) == null ? void 0 : _b.className
                                     )
                                   }
                                 )
                               }
                             ) }),
-                            /* @__PURE__ */ s("div", { className: r("content"), children: [
-                              /* @__PURE__ */ e(
-                                p,
+                            /* @__PURE__ */ jsxs("div", { className: bem("content"), children: [
+                              /* @__PURE__ */ jsx(
+                                Link,
                                 {
-                                  ...a == null ? void 0 : a.redirect,
-                                  "aria-label": `Read more about ${a.title.content}`,
-                                  children: /* @__PURE__ */ e(
-                                    h,
+                                  ...item == null ? void 0 : item.redirect,
+                                  "aria-label": `Read more about ${item.title.content}`,
+                                  children: /* @__PURE__ */ jsx(
+                                    Headline,
                                     {
                                       size: "sm",
                                       type: "h3",
-                                      ...a.title,
-                                      className: r("headline", (n = a.title) == null ? void 0 : n.className),
+                                      ...item.title,
+                                      className: bem("headline", (_c = item.title) == null ? void 0 : _c.className),
                                       itemProp: "headline",
                                       variant: "inherit",
-                                      children: (t = a.title) == null ? void 0 : t.content
+                                      children: (_d = item.title) == null ? void 0 : _d.content
                                     }
                                   )
                                 }
                               ),
-                              i(a == null ? void 0 : a.date) && (a == null ? void 0 : a.date) !== "LL" && /* @__PURE__ */ e(
+                              isString(item == null ? void 0 : item.date) && (item == null ? void 0 : item.date) !== "LL" && /* @__PURE__ */ jsx(
                                 "p",
                                 {
-                                  "aria-label": `Published at ${a.date}`,
-                                  className: r("date"),
+                                  "aria-label": `Published at ${item.date}`,
+                                  className: bem("date"),
                                   itemProp: "datePublished",
-                                  children: /* @__PURE__ */ e(
+                                  children: /* @__PURE__ */ jsx(
                                     "time",
                                     {
-                                      "aria-label": `Published at ${a.date}`,
-                                      className: r("date"),
+                                      "aria-label": `Published at ${item.date}`,
+                                      className: bem("date"),
                                       itemProp: "datePublished",
-                                      ...a == null ? void 0 : a.dateProps,
-                                      children: a.date
+                                      ...item == null ? void 0 : item.dateProps,
+                                      children: item.date
                                     }
                                   )
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ e("meta", { content: (b + 1).toString(), itemProp: "position" }),
-                            i(a == null ? void 0 : a.category) && /* @__PURE__ */ e("meta", { content: a.category, itemProp: "articleSection" })
+                            /* @__PURE__ */ jsx("meta", { content: (i + 1).toString(), itemProp: "position" }),
+                            isString(item == null ? void 0 : item.category) && /* @__PURE__ */ jsx("meta", { content: item.category, itemProp: "articleSection" })
                           ]
                         }
                       )
                     },
-                    `post-widget-item-${a.title}`
+                    `post-widget-item-${item.title}`
                   );
                 })
               }
@@ -152,7 +153,7 @@ const r = y(_, "PostWidget"), L = f(
     }
   )
 );
-L.displayName = "PostWidget";
+PostWidget.displayName = "PostWidget";
 export {
-  L as PostWidget
+  PostWidget
 };

package/dist/components/post-widget/PostWidget.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", t = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-PostWidget__list": "prokodo-PostWidget__list",
   "prokodo-PostWidget__list--has-fullWidth": "prokodo-PostWidget__list--has-fullWidth",
   "prokodo-PostWidget__list__item": "prokodo-PostWidget__list__item",
@@ -9,11 +11,11 @@ const o = "gradientMove", t = "fadeInKeyframe", _ = {
   "prokodo-PostWidget__content": "prokodo-PostWidget__content",
   "prokodo-PostWidget__headline": "prokodo-PostWidget__headline",
   "prokodo-PostWidget__date": "prokodo-PostWidget__date",
-  gradientMove: o,
-  fadeInKeyframe: t
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  t as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/post-widget/index.js

@@ -1,4 +1,4 @@
-import { PostWidget as e } from "./PostWidget.js";
+import { PostWidget } from "./PostWidget.js";
 export {
-  e as PostWidget
+  PostWidget
 };