@prokodo/ui 0.1.10 → 0.1.11

package/dist/components/chip/Chip.view.js

@@ -48,7 +48,7 @@ function ChipView({
               [color]: true
             }),
             ...buttonProps,
-            children: /* @__PURE__ */ jsx(Icon, { name: "Delete01Icon" })
+            children: /* @__PURE__ */ jsx(Icon, { color: "error", name: "Delete01Icon" })
           }
         )
       ]

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

@@ -32,6 +32,7 @@ function InputView({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxRows,
   type = "text",
+  renderNode,
   ...rest
 }) {
   rest == null ? true : delete rest.onValidate;
@@ -43,6 +44,11 @@ function InputView({
   const errorId = isError ? `${name}-error` : void 0;
   const helperId = !isError && hasHelperText ? `${name}-helper` : void 0;
   const describedBy = [errorId, helperId].filter(Boolean).join(" ") || void 0;
+  const nodeClassName = bem(
+    "input__node",
+    { multiline: Boolean(multiline) },
+    inputClassName
+  );
   return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
     /* @__PURE__ */ jsxs("div", { className: bem("inner"), children: [
       typeof label === "string" && /* @__PURE__ */ jsx(
@@ -75,7 +81,17 @@ function InputView({
             },
             inputContainerClassName
           ),
-          children: Boolean(multiline) ? /* @__PURE__ */ jsx(
+          children: typeof renderNode === "function" ? renderNode({
+            id: name,
+            name,
+            disabled,
+            required,
+            readOnly: rest == null ? void 0 : rest.readOnly,
+            placeholder,
+            isError,
+            describedBy,
+            nodeClassName
+          }) : Boolean(multiline) ? /* @__PURE__ */ jsx(
             "textarea",
             {
               ...rest,
@@ -83,18 +99,14 @@ function InputView({
               "aria-describedby": describedBy,
               "aria-invalid": isError,
               "aria-required": required,
+              className: nodeClassName,
               disabled,
               id: name,
               name,
               placeholder,
               required: Boolean(required),
               rows,
-              value: value ?? "",
-              className: bem(
-                "input__node",
-                { multiline: true },
-                inputClassName
-              )
+              value: value ?? ""
             }
           ) : /* @__PURE__ */ jsx(
             "input",
@@ -104,18 +116,14 @@ function InputView({
               "aria-describedby": describedBy,
               "aria-invalid": isError,
               "aria-required": required,
+              className: nodeClassName,
               disabled,
               id: name,
               name,
               placeholder,
               required: Boolean(required),
               type,
-              value: value ?? "",
-              className: bem(
-                "input__node",
-                { multiline: false },
-                inputClassName
-              )
+              value: value ?? ""
             }
           )
         }

package/dist/components/rich-text/RichText.client.js

@@ -9,6 +9,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./RichText.module.scss.js";
 import { Icon } from "../icon/Icon.js";
+import { Image } from "../image/Image.js";
 import { Link } from "../link/Link.js";
 import { Headline } from "../headline/Headline.js";
 import { AnimatedText } from "../animatedText/AnimatedText.js";
@@ -86,6 +87,7 @@ function RichTextClient({
   className,
   overrideParagraph,
   codeTheme,
+  linkPolicy = "trusted",
   ...props
 }) {
   const containerRef = useRef(null);
@@ -250,6 +252,19 @@ function RichTextClient({
         const href = elem.getAttribute("href") ?? "#";
         const title = elem.getAttribute("title") ?? void 0;
         const linkText = normalize(keyedChildren.map(renderAnimation));
+        const isHttp = /^https?:\/\//i.test(href);
+        const isExternalHttp = isHttp;
+        let target = void 0;
+        let rel = void 0;
+        if (linkPolicy === "ugc") {
+          rel = isExternalHttp ? "ugc nofollow noopener" : "ugc nofollow";
+          target = isExternalHttp ? "_blank" : void 0;
+        } else {
+          const htmlTarget = elem.getAttribute("target") ?? void 0;
+          const wantsBlank = htmlTarget === "_blank";
+          target = wantsBlank ? "_blank" : void 0;
+          rel = wantsBlank ? "noopener" : void 0;
+        }
         return /* @__PURE__ */ jsx(
           Link,
           {
@@ -258,6 +273,8 @@ function RichTextClient({
             className: cls,
             href,
             linkComponent,
+            rel,
+            target,
             title,
             variant: "primary",
             children: linkText
@@ -282,6 +299,20 @@ function RichTextClient({
           }
         );
       }
+      case "img": {
+        const existing = elem.getAttribute("class");
+        const src2 = elem.getAttribute("src");
+        const alt = elem.getAttribute("alt");
+        return /* @__PURE__ */ jsx("span", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            fill: true,
+            alt: alt ?? "",
+            className: [bem("image"), existing].filter(Boolean).join(" "),
+            src: src2 ?? ""
+          }
+        ) });
+      }
       case "ul": {
         const cls = bem("ul");
         return /* @__PURE__ */ jsx("ul", { className: cls, children: keyedChildren });

package/dist/components/rich-text/RichText.css

@@ -189,7 +189,6 @@ html[data-theme=dark] .prokodo-RichText__p {
   text-align: inherit;
 }
 html[data-theme=dark] .prokodo-RichText__pre {
-  color: var(--color-grey-300);
   background-color: var(--color-grey-50);
 }
 .prokodo-RichText__blockquote {
@@ -198,6 +197,19 @@ html[data-theme=dark] .prokodo-RichText__pre {
   padding: 1px 1rem;
   margin: 0;
 }
+.prokodo-RichText__image {
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 13px;
+}
+.prokodo-RichText__image__wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 13px;
+}
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;

package/dist/components/rich-text/RichText.module.css

@@ -189,7 +189,6 @@ html[data-theme=dark] .prokodo-RichText__p {
   text-align: inherit;
 }
 html[data-theme=dark] .prokodo-RichText__pre {
-  color: var(--color-grey-300);
   background-color: var(--color-grey-50);
 }
 .prokodo-RichText__blockquote {
@@ -198,6 +197,19 @@ html[data-theme=dark] .prokodo-RichText__pre {
   padding: 1px 1rem;
   margin: 0;
 }
+.prokodo-RichText__image {
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 13px;
+}
+.prokodo-RichText__image__wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 13px;
+}
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;

package/dist/components/rich-text/RichText.module.scss.js

@@ -3,6 +3,8 @@ const styles = {
   "prokodo-RichText__p": "prokodo-RichText__p",
   "prokodo-RichText__pre": "prokodo-RichText__pre",
   "prokodo-RichText__blockquote": "prokodo-RichText__blockquote",
+  "prokodo-RichText__image": "prokodo-RichText__image",
+  "prokodo-RichText__image__wrapper": "prokodo-RichText__image__wrapper",
   "prokodo-RichText__ul": "prokodo-RichText__ul",
   "prokodo-RichText__ol": "prokodo-RichText__ol",
   "prokodo-RichText__li": "prokodo-RichText__li",

package/dist/components/rich-text/RichText.server.js

@@ -18,6 +18,7 @@ function RichTextServer(props) {
     overrideParagraph,
     linkComponent: _linkComp,
     // omit on server (don’t pass to DOM)
+    linkPolicy: _linkPolicy,
     ...restProps
   } = props;
   const rawHtml = md.render(children ?? "");

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.1.10";
+const PROKODO_UI_VERSION = "0.1.11";
 export {
   PROKODO_UI_VERSION
 };

package/dist/index.js

@@ -37,6 +37,7 @@ import { ProgressBar } from "./components/progressBar/ProgressBar.js";
 import { Quote } from "./components/quote/Quote.js";
 import { Rating } from "./components/rating/Rating.js";
 import { RichText } from "./components/rich-text/RichText.js";
+import { RTE } from "./components/RTE/RTE.js";
 import { Select } from "./components/select/Select.js";
 import { SideNav } from "./components/sidenav/SideNav.js";
 import { Skeleton } from "./components/skeleton/Skeleton.js";
@@ -83,6 +84,7 @@ export {
   PostWidgetCarousel,
   ProgressBar,
   Quote,
+  RTE,
   Rating,
   RichText,
   Select,