@telia-ace/knowledge-widget-ui 1.0.13 → 1.0.16

package/dist/index.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useRouteData, Link, Icon, List, list, invertedHoverButton, ItemList, itemList, Drawer, Dropdown, headingElement, linkTabStyle, Text, Button, paddedBorderTabStyle, Confirm, SymbolBadge, StyledText as StyledText$1, convertToStringAttributes, useKeyPress, useContainer, useEventListener, Timestamp, DateFormats, TextLink, usePrevious, borderTabStyle, AnchorLink, WidgetLink, Lightbox } from "@telia-ace/widget-ui";
+import { useRouteData, Link, Icon, List, list, invertedHoverButton, ItemList, itemList, Drawer, Dropdown, headingElement, Text, Button, paddedBorderTabStyle, Confirm, SymbolBadge, StyledText as StyledText$1, convertToStringAttributes, useKeyPress, useContainer, useEventListener, Timestamp, DateFormats, TextLink, usePrevious, borderTabStyle, Paragraph, genericHtml, AnchorLink, WidgetLink, Lightbox } from "@telia-ace/widget-ui";
 export * from "@telia-ace/widget-ui";
 import { createParams, formatUrl, appendClassNames, htmlParentContains } from "@telia-ace/widget-utilities";
 import React, { forwardRef, useCallback, useState, useEffect, useMemo, useRef, useContext, useImperativeHandle } from "react";
@@ -135,9 +135,9 @@ const DrawerList = (_c) => {
     fullScreen,
     onToggle,
     closeButtonAriaLabel
-  }, /* @__PURE__ */ React.createElement(StyledItemList$2, __spreadValues({}, other), children));
+  }, /* @__PURE__ */ React.createElement(StyledItemList$3, __spreadValues({}, other), children));
 };
-const StyledItemList$2 = styled(ItemList)`
+const StyledItemList$3 = styled(ItemList)`
     ${itemList}
     font-family: ${(p) => {
   var _a;
@@ -255,9 +255,9 @@ const DropdownList = (_e) => {
     className: appendClassNames(className, "humany-dropdown-list"),
     closeButtonAriaLabel,
     trigger
-  }, /* @__PURE__ */ React.createElement(StyledItemList$1, __spreadValues({}, other), children));
+  }, /* @__PURE__ */ React.createElement(StyledItemList$2, __spreadValues({}, other), children));
 };
-const StyledItemList$1 = styled(ItemList)`
+const StyledItemList$2 = styled(ItemList)`
     ${itemList}
     font-family: ${(p) => {
   var _a;
@@ -391,80 +391,6 @@ const loadingOpacity = css`
         opacity: ${(p) => p["data-loading"] ? "1" : "0"};
     }
 `;
-const genericHtml = css`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    font-weight: 300;
-    line-height: 1.5em;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        word-break: break-word;
-        &:first-child {
-            margin-top: 0;
-        }
-        &:only-child {
-            margin: 0;
-        }
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    a {
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.link;
-}};
-        &:focus {
-            ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
-}};
-        }
-    }
-
-    img {
-        max-width: 100% !important;
-        height: auto !important;
-    }
-
-    p {
-        word-break: break-word;
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} 0;
-    }
-
-    p:first-child {
-        margin: 0 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-
-    p:last-child {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} 0 0;
-    }
-
-    p:only-child {
-        margin: 0;
-    }
-`;
 const SmallCaret = styled(Icon)`
     && {
         font-size: ${(p) => {
@@ -541,7 +467,7 @@ const FavoriteButton = ({
   }, [id, addFavorite]);
   const tooltip = `${isFavorite ? removeFavoriteTooltip : addFavoriteTooltip}${guideTitle ? `: "${guideTitle}"` : ""}`;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isFavorite ? /* @__PURE__ */ React.createElement(Confirm, {
-    trigger: /* @__PURE__ */ React.createElement(StyledButton, {
+    trigger: /* @__PURE__ */ React.createElement(StyledButton$1, {
       className: "humany-favorite-button",
       title: tooltip,
       "aria-label": tooltip,
@@ -557,7 +483,7 @@ const FavoriteButton = ({
     confirmLabel: removeFavoriteConfirmLabel,
     header: removeFavoriteHeader,
     text: removeFavoriteLabel
-  }) : /* @__PURE__ */ React.createElement(StyledButton, {
+  }) : /* @__PURE__ */ React.createElement(StyledButton$1, {
     className: "humany-favorite-button",
     title: tooltip,
     "aria-label": tooltip,
@@ -570,7 +496,7 @@ const FavoriteButton = ({
     symbol: { type: "Svg", content: "star-empty" }
   }), buttonLabel && /* @__PURE__ */ React.createElement(StyledText$1, null, buttonLabel)));
 };
-const StyledButton = styled(StyledListButton)`
+const StyledButton$1 = styled(StyledListButton)`
     grid-area: favorite;
 
     &:focus {
@@ -857,11 +783,11 @@ const Metadata = ({
   modified,
   published
 }) => {
-  const publishedTimestamp = showPublished && published ? /* @__PURE__ */ React.createElement(StyledTimestamp, {
+  const publishedTimestamp = showPublished && published ? /* @__PURE__ */ React.createElement(StyledTimestamp$1, {
     format,
     timestamp: published
   }) : null;
-  const modifiedTimestamp = showModified && modified ? /* @__PURE__ */ React.createElement(StyledTimestamp, {
+  const modifiedTimestamp = showModified && modified ? /* @__PURE__ */ React.createElement(StyledTimestamp$1, {
     format,
     timestamp: modified
   }) : null;
@@ -876,7 +802,7 @@ const Metadata = ({
     className: "humany-modified"
   }, publishedTimestamp && ", ", modifiedLabel, modifiedTimestamp, byLabel && modifiedBy && ` ${byLabel.replace("{{editor}}", modifiedBy)}`));
 };
-const StyledTimestamp = styled(Timestamp)`
+const StyledTimestamp$1 = styled(Timestamp)`
     &:not(:first-child) {
         margin-left: 4px;
     }
@@ -1090,7 +1016,7 @@ var guideList = forwardRef((_i, ref) => {
     }
   });
   const hasMetaData = !!Object.keys(metadata).filter((k) => typeof metadata[k] !== "undefined").length;
-  return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(StyledItemList$1, __spreadProps(__spreadValues({
     className: appendClassNames(className, "humany-guide-list"),
     "data-item-count": items.length,
     items,
@@ -1112,7 +1038,7 @@ var guideList = forwardRef((_i, ref) => {
     symbol: { type: "Svg", content: `caret-${pageCaret}` }
   })) : null, children);
 });
-const StyledItemList = styled(ItemList)`
+const StyledItemList$1 = styled(ItemList)`
     ${itemList}
     padding: ${(p) => {
   var _a;
@@ -1327,6 +1253,182 @@ const StyledMetadata = styled(Metadata)`
   return typeof p.indent === "number" && `text-indent: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small} * 2 + ${p.indent}px);`;
 }}
 `;
+const NotificationList = (_k) => {
+  var _l = _k, {
+    className,
+    showHeader,
+    notificationList,
+    loading
+  } = _l, other = __objRest(_l, [
+    "className",
+    "showHeader",
+    "notificationList",
+    "loading"
+  ]);
+  const [expanded, setExpanded] = useState(null);
+  const {
+    id,
+    title,
+    symbol,
+    notifications = [],
+    defaultHeaderOptions = { visible: true }
+  } = notificationList || {};
+  if (!notifications.length && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({}, other), {
+    "data-loading": loading,
+    "data-show-header": typeof showHeader === "boolean" ? showHeader : defaultHeaderOptions.visible,
+    className: appendClassNames(className, "humany-notification-list"),
+    "data-notification-category": id,
+    header: title,
+    symbol,
+    items: notifications,
+    renderItem: ({ id: id2, title: title2, body, modified, expandable }) => /* @__PURE__ */ React.createElement(StyledItem, {
+      key: id2,
+      "data-notification": id2,
+      "data-expanded": expandable ? expanded === id2 : true
+    }, expandable ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledButton, {
+      title: title2,
+      "aria-label": title2,
+      "aria-expanded": expanded === id2,
+      onClick: () => setExpanded(expanded === id2 ? null : id2)
+    }, /* @__PURE__ */ React.createElement("span", null, title2), /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
+      size: 11,
+      symbol: {
+        type: "Svg",
+        content: `caret-${expanded === id2 ? "up" : "down"}`
+      }
+    })), /* @__PURE__ */ React.createElement(StyledParagraph, {
+      html: body
+    }), modified && /* @__PURE__ */ React.createElement(StyledTimestamp, {
+      format: DateFormats.YYYY_MM_DD,
+      timestamp: modified
+    })) : /* @__PURE__ */ React.createElement(StyledParagraph, {
+      html: body
+    }))
+  }), /* @__PURE__ */ React.createElement(Loader, {
+    loading
+  }));
+};
+const StyledButton = styled(Button)`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    svg,
+    i {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    }
+    span {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        white-space: nowrap;
+    }
+    &:focus {
+        ${(p) => {
+  var _a, _b;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                span {
+                    color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
+                    text-decoration: underline;
+                }
+            `;
+}};
+    }
+`;
+const StyledItemList = styled(ItemList)`
+    ${loadingOpacity}
+    ${itemList}
+  overflow: hidden;
+    justify-content: flex-start;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    ${(p) => !p["data-show-header"] && css`
+            > div {
+                ${headingElement("h1", css`
+                        display: none;
+                    `)}
+            }
+        `}
+
+    @media (hover: hover) {
+        button:hover {
+            text-decoration: underline;
+        }
+    }
+`;
+const StyledParagraph = styled(Paragraph)`
+    ${genericHtml}
+    font-weight: 300;
+
+    p {
+        white-space: normal;
+    }
+`;
+const StyledItem = styled.li`
+    ${StyledParagraph} {
+        display: none;
+        &:not(:only-child) {
+            ${(p) => {
+  var _a, _b, _c;
+  return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) && ((_b = p.theme.sizes) == null ? void 0 : _b.normal) && css`
+                    margin: ${(_c = p.theme.sizes) == null ? void 0 : _c.normal} 0;
+                `;
+}}
+        }
+    }
+
+    ${(p) => p["data-expanded"] && css`
+            ${StyledParagraph} {
+                display: block;
+            }
+        `}
+
+    > span {
+        display: block;
+        font-weight: 300;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
+}};
+    }
+`;
+const StyledSymbolBadge = styled(SymbolBadge)`
+    margin: 0 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    line {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    }
+`;
+const StyledTimestamp = styled(Timestamp)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+    font-weight: 300;
+`;
 const isAnchorLink = (href) => {
   const re = new RegExp("^#", "i");
   const match = re.test(href);
@@ -1381,5 +1483,5 @@ const guideRenderInstructions = (container, dialog = []) => {
     }
   };
 };
-export { AccordionListItem, DialogLink, dialogList as DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, feedback as Feedback, guideList as GuideList, Loader, Wrapper$1 as LoaderWrapper, Metadata, SmallCaret, StyledHeaderText, StyledListButton, genericHtml, guideRenderInstructions, loadingOpacity, useArrowKeys, useDebounce, useFavorites, useHover };
+export { AccordionListItem, DialogLink, dialogList as DialogList, DrawerList, DropdownActions, DropdownList, FavoriteButton, feedback as Feedback, guideList as GuideList, Loader, Wrapper$1 as LoaderWrapper, Metadata, NotificationList, SmallCaret, StyledHeaderText, StyledListButton, guideRenderInstructions, loadingOpacity, useArrowKeys, useDebounce, useFavorites, useHover };
 //# sourceMappingURL=index.js.map