@telia-ace/knowledge-widget-components-guide 0.0.1

package/answer-version-picker.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { AvailablePerspectives, GuideProps } from './guide-component';
+
+type Props = {
+    className?: string;
+    defaultAnswerVersionLabel: string;
+    availablePerspectives?: AvailablePerspectives[];
+    guide: GuideProps;
+};
+declare const AnswerVersionPicker: React.FC<Props>;
+export default AnswerVersionPicker;

package/categories.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { GuideProps, ToolbarProps } from './guide-component';
+
+type Props = {
+    guide: GuideProps;
+    toolbar: ToolbarProps;
+};
+declare const Categories: React.FC<Props>;
+export default Categories;

package/feedback.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+type Props = {
+    backButtonShown?: boolean;
+    accordion?: boolean;
+};
+declare const Feedback: React.FC<Props>;
+export default Feedback;

package/functions.d.ts

@@ -0,0 +1,30 @@
+import { PickerTypes } from '../../../knowledge/core/src/index.ts';
+import { DispatchAction } from '../../../knowledge/ui/src/index.ts';
+import { default as React } from 'react';
+import { GuideProps } from './guide-component';
+
+export type FunctionListItem = {
+    type: string;
+    child: React.ReactNode;
+};
+type Props = {
+    header?: string;
+    tooltip?: string;
+    printActionLabel?: string;
+    copyActionLabel?: string;
+    addFavoriteTooltip?: string;
+    removeFavoriteCancelLabel?: string;
+    removeFavoriteConfirmLabel?: string;
+    removeFavoriteHeader?: string;
+    removeFavoriteLabel?: string;
+    removeFavoriteTooltip?: string;
+    toolbarFunctionsCloseButtonAriaLabel?: string;
+    guide: GuideProps;
+    allowCopy?: boolean;
+    allowPrint?: boolean;
+    showFavoriteToggle?: boolean;
+    picker?: PickerTypes;
+    dispatch: DispatchAction;
+};
+declare const Functions: React.FC<Props>;
+export default Functions;

package/guide-9d79906b.js

@@ -0,0 +1,196 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),E=require("@emotion/react"),r=require("@emotion/styled"),W=require("@telia-ace/knowledge-widget-adapters"),a=require("@telia-ace/knowledge-widget-ui"),V=require("@telia-ace/widget-types-grid"),D=require("@telia-ace/widget-utilities"),j=require("react"),$=require("@telia-ace/knowledge-widget-core"),Q=({className:e,defaultAnswerVersionLabel:t,guide:{perspective:n,perspectives:i},availablePerspectives:m=[]})=>{const{name:l,params:c}=a.useRouteData(),h=j.useMemo(()=>!i||!m.length?[]:m.filter(({name:d})=>!!i[d]).map(({name:d,title:g})=>({label:g,connection:i[d]})),[i,m]);return s.jsx(X,{className:D.appendClassNames(e,"humany-guide-answer-version-picker"),items:h,renderItem:d=>{const g=d.label==="Default"?t:d.label,y=n===d.connection,u=y&&(!c.connection||n===c.connection);return s.jsx("li",{"data-version":d.connection,children:s.jsx(Y,{as:u?"span":void 0,text:g,routeName:l,selected:y,"aria-label":g,title:g,params:{...c,connection:d.connection}},d.connection)},d.connection)}})},X=r(a.List)`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li:not(:last-child) {
+    margin: 0 calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} * 2) 0 0;
+  }
+
+  li > span {
+    cursor: default;
+  }
+`,Y=r(a.TextLink)`
+  font-weight: 300;
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  text-decoration: none;
+
+  ${e=>e.selected&&E.css`
+      font-weight: bold;
+      text-decoration: underline;
+    `}
+
+  &:focus-visible {
+    ${a.paddedBorderTabStyle};
+  }
+`,Z=r(W.ContactList)`
+  border-top: ${e=>e.theme.border};
+  ${e=>e.backButtonShown==="true"&&`border-bottom: ${e.theme.border};`}
+`,_=r(a.Feedback)`
+  ${e=>{var t,n;return`padding: ${(t=e.theme.sizes)==null?void 0:t.large} ${(n=e.theme.sizes)==null?void 0:n.large};`}}
+`,ee=r(a.StyledHeaderText)`
+  ${e=>{var t,n;return`padding: ${(t=e.theme.sizes)==null?void 0:t.large} ${(n=e.theme.sizes)==null?void 0:n.large};`}}
+
+  display: block;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  font-weight: bold;
+`,te=({backButtonShown:e=!1,accordion:t=!1})=>{const n=a.useDispatch(),{loading:i=!1,dialog:m=[],guide:l,handoverContactMethods:c=[],contactHeader:h,showFeedback:d,feedbackDirection:g="horizontal",feedbackRecognitionLabel:y,feedbackGiven:u,feedbackHeader:p,positiveFeedbackLabel:b,negativeFeedbackLabel:B,contactFeedbackLabel:f}=a.useProperties(),[x,o]=j.useState(!1);return j.useEffect(()=>{u||o(!1)},[u]),!d||!l||!l.allowFeedback||i&&!u||m.length?null:u&&y&&!c.length&&!i?s.jsx(ee,{accordion:t?"true":"false",tabindex:-1,ref:k=>{!x&&k&&(o(!0),k.focus())},children:y}):l.hasHandover&&c.length?s.jsx(Z,{backButtonShown:e?"true":"false",accordion:t?"true":"false",header:h,contactMethods:c,dispatch:n}):s.jsx(_,{accordion:t?"true":"false",positive:b,negative:l.hasHandover?f:B,header:p,selected:u,onFeedback:k=>n("feedback",k),direction:g})},se=({guide:{categories:e=[]},toolbar:{picker:t=$.PickerTypes.NONE}})=>{const[n,i]=j.useState([]),m=a.useContainer();return j.useEffect(()=>{D.buildCategoryTrail("index",e.map(l=>l.toString()),m).then(l=>{i(l)})},[e]),n.length?s.jsx(a.Tooltip,{className:"humany-guide-category-tooltip",sticky:t===$.PickerTypes.DRAWER,content:s.jsx(s.Fragment,{children:n.map(l=>s.jsx(ne,{className:"humany-guide-category-trail",children:l.map((c,h)=>s.jsxs(a.Text,{className:"humany-guide-category-trail-segment",children:[c.symbol&&h===0&&s.jsx(a.SymbolBadge,{size:14,symbol:c.symbol}),c.title,h!==l.length-1&&s.jsx(ae,{className:"humany-category-separator",children:"/"})]},c.id))},l.map(c=>c.id).join(".")))}),children:t===$.PickerTypes.DRAWER?s.jsx(a.StyledListButton,{className:"humany-guide-category-tooltip-button","data-has-label":"false","data-has-symbol":"true",children:s.jsx(A,{size:19,symbol:{type:"Svg",content:"information"}})}):s.jsx(A,{size:19,symbol:{type:"Svg",content:"information"}})}):null},ne=r.div`
+  i,
+  svg {
+    margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
+  }
+
+  &:not(:last-child) {
+    margin: 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+  }
+`,ae=r(a.Text)`
+  margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+`,A=r(a.SymbolBadge)`
+  display: block;
+`,oe=({header:e,tooltip:t,printActionLabel:n,copyActionLabel:i,addFavoriteTooltip:m,removeFavoriteCancelLabel:l,removeFavoriteConfirmLabel:c,removeFavoriteHeader:h,removeFavoriteLabel:d,removeFavoriteTooltip:g,toolbarFunctionsCloseButtonAriaLabel:y,allowCopy:u=!1,allowPrint:p=!1,showFavoriteToggle:b=!1,picker:B=$.PickerTypes.NONE,guide:f,dispatch:x})=>{const[o,k]=a.useFavorites(),v=j.useCallback(z=>{f&&x("copy",f)},[f,x]),C=j.useCallback(()=>{f&&x("print")},[f,x]),w=j.useMemo(()=>{const{id:z,title:P}=f,N=[];if(u&&N.push({type:"copy",child:s.jsxs(a.StyledListButton,{"data-has-label":i?"true":"false","data-has-symbol":"true",title:i,"aria-label":n,onClick:v,children:[s.jsx(I,{size:16,symbol:{type:"Svg",content:"copy"}}),i&&s.jsx(a.StyledText,{children:i})]})}),p&&N.push({type:"print",child:s.jsxs(a.StyledListButton,{"data-has-label":n?"true":"false","data-has-symbol":"true",title:n,"aria-label":n,onClick:C,children:[s.jsx(I,{size:16,symbol:{type:"Svg",content:"print"}}),n&&s.jsx(a.StyledText,{children:n})]})}),b){const R=o.indexOf(z)>-1;N.push({type:"favorite",child:s.jsx(a.FavoriteButton,{id:z,guideTitle:P,isFavorite:R,buttonLabel:R?g:m,addFavoriteTooltip:m,removeFavoriteCancelLabel:l,removeFavoriteConfirmLabel:c,removeFavoriteHeader:h,removeFavoriteLabel:d,removeFavoriteTooltip:g,actions:k})})}return N},[o,f,u,p,b,n,i,m,l,c,h,d,g]);if(!w.length)return null;const T=s.jsx(le,{tabIndex:0,title:t,"data-has-symbol":"true","data-has-label":"false",children:s.jsx(I,{symbol:{type:"Svg",content:"options"},size:18})}),S=({type:z,child:P})=>s.jsx("li",{"data-function-type":z,children:P},z);return B===$.PickerTypes.DROPDOWN?s.jsx(ie,{className:"humany-guide-functions-dropdown-list",header:e,items:w,trigger:T,renderItem:S,closeButtonAriaLabel:y}):B===$.PickerTypes.DRAWER?s.jsx(a.DrawerList,{className:"humany-guide-functions-drawer-list",animation:{type:a.DrawerAnimationType.SlideInBottom},header:e,items:w,trigger:T,renderItem:S,closeButtonAriaLabel:y}):null},I=r(a.SymbolBadge)`
+  circle {
+    fill: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+
+  line,
+  path,
+  rect {
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+`,ie=r(a.DropdownList)`
+  display: block;
+  min-height: auto;
+`,le=r(a.StyledListButton)`
+  padding: calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} * 2) 0;
+`,re=(e,t)=>{var n;return((n=t.find(i=>i.id===e.id))==null?void 0:n.label)||""},ce=({header:e,tooltip:t,picker:n=$.PickerTypes.NONE,guide:i,...m})=>{const{name:l,params:c}=a.useRouteData(),h=j.useMemo(()=>Object.keys(i.translations||{}).reduce((u,p)=>{const b={};return b.key=p,b.id=(i.translations||{})[p],b.label=m[`${p}LanguageLabel`],(b.id||b.label)&&u.push(b),u},[]),[i,m]);if(!h.length)return null;const d=re(i,h),g=s.jsxs(de,{tabIndex:0,title:t,"data-has-symbol":"true","data-has-label":n===$.PickerTypes.DROPDOWN&&d?"true":"false",children:[n===$.PickerTypes.DROPDOWN&&s.jsxs(s.Fragment,{children:[d&&s.jsx(ue,{children:d}),s.jsx(he,{symbol:{type:"Svg",content:"caret-down"},size:11})]}),n===$.PickerTypes.DRAWER&&s.jsx(me,{symbol:{type:"Svg",content:"language"},size:20})]}),y=({label:u,key:p,id:b})=>s.jsx("li",{"data-language":p,children:s.jsx(be,{tabIndex:0,text:u,routeName:l,selected:i.id===b,params:D.createParams({...c,connection:void 0,guide:b})})},p);return n===$.PickerTypes.DROPDOWN?s.jsx(ge,{className:"humany-guide-languages-dropdown-list",header:e,items:h,trigger:g,renderItem:y}):n===$.PickerTypes.DRAWER?s.jsx(a.DrawerList,{className:"humany-guide-languages-drawer-list",animation:{type:a.DrawerAnimationType.SlideInBottom},header:e,items:h,trigger:g,renderItem:y}):null},de=r(a.StyledListButton)`
+  &&& {
+    margin: 0 ${e=>{var t;return`calc(${(t=e.theme.sizes)==null?void 0:t.small} * 2)`}} 0 0;
+  }
+`,me=r(a.SymbolBadge)`
+  circle {
+    fill: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+
+  line,
+  path,
+  rect {
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+`,ue=r(a.Text)`
+  margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+`,he=r(a.SymbolBadge)`
+  align-self: flex-end;
+  stroke-width: 2px;
+  stroke-linecap: round;
+
+  && {
+    width: 0.6em;
+    height: 1em;
+  }
+  line {
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+`,ge=r(a.DropdownList)`
+  display: block;
+  min-height: auto;
+`,be=r(a.TextLink)`
+  color: ${e=>{var t,n;return e.selected?(t=e.theme.colors)==null?void 0:t.primary:(n=e.theme.colors)==null?void 0:n.text}};
+  ${e=>e.selected&&"font-weight: bold;"}
+
+  outline: none;
+  &:focus-visible {
+    ${a.paddedBorderTabStyle}
+    text-decoration: underline;
+  }
+`,fe=e=>{const{allowCopy:t=!1,allowPrint:n=!1,guideCategories:i=!1,language:m=!1,showFavoriteToggle:l=!1,picker:c=$.PickerTypes.NONE}=e;return!t&&!n&&!m&&!l&&!i||c===$.PickerTypes.NONE},ye=({className:e="",dispatch:t})=>{const{toolbarLanguageHeader:n,toolbarFunctionsHeader:i,toolbarLanguageTooltip:m,toolbarFunctionsTooltip:l,toolbarFunctionsCloseButtonAriaLabel:c,printActionLabel:h,copyActionLabel:d,addFavoriteTooltip:g,removeFavoriteCancelLabel:y,removeFavoriteConfirmLabel:u,removeFavoriteHeader:p,removeFavoriteLabel:b,removeFavoriteTooltip:B,guide:f,toolbar:x,...o}=a.useProperties();if(!f||!x||fe(x))return null;const{language:k,guideCategories:v,allowCopy:C,allowPrint:w,showFavoriteToggle:T,picker:S}=x;return s.jsxs(pe,{className:D.appendClassNames("humany-guide-toolbar",e),children:[k&&Object.keys(f.translations||{}).length>1&&s.jsx(ce,{guide:f,header:n,tooltip:m,picker:S,...o}),v&&s.jsx(se,{guide:f,toolbar:x}),(C||w||T)&&s.jsx(oe,{guide:f,header:i,tooltip:l,printActionLabel:h,copyActionLabel:d,addFavoriteTooltip:g,removeFavoriteCancelLabel:y,removeFavoriteConfirmLabel:u,removeFavoriteHeader:p,removeFavoriteLabel:b,removeFavoriteTooltip:B,toolbarFunctionsCloseButtonAriaLabel:c,allowCopy:C,allowPrint:w,showFavoriteToggle:T,picker:S,dispatch:t})]})},pe=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 0 auto;
+
+  > :not(:last-child) {
+    margin: 0 calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} * 2) 0 0;
+  }
+`,xe=j.forwardRef(({className:e,accordion:t=!1,...n},i)=>{const{loading:m=!1,dialog:l=[],contactMethods:c=[],showHeader:h=!0,showAnswerVersions:d=!1,defaultAnswerVersionLabel:g="Default",backButtonLabel:y,metadataByLabel:u,metadataModifiedLabel:p,metadataPublishedLabel:b,availablePerspectives:B,metadata:f,toolbar:x,guide:o,error:k}=a.useProperties(),{params:{connection:v,guide:C}}=a.useRouteData(),w=a.useContainer(),T=a.useChildren(),S=a.useDispatch(),z=j.useMemo(()=>({transform:{img:L=>s.jsx(a.Lightbox,{attrs:L,htmlBody:(o==null?void 0:o.body)||""}),a:L=>{const{children:U,...J}=L,q=J["data-target"];if(q&&l.length){const H=l.find(({connection:K})=>K===q);if(H)return s.jsx(a.DialogLink,{...H,children:U})}return a.embeddedLinkMapper(w)(L)}}}),[o,w,l]),P=j.useCallback(()=>{S("back")},[S]);if(!o&&!k&&!m)return a.createEmptyComponent(w,{...n,className:D.appendClassNames(e,"humany-guide")});const{id:N="",title:R="",body:O="",translations:M={}}=o||{};if(k&&k.status===404)return s.jsx(V.NotFound,{showSearch:!1});const F=!!t&&!!v,G=Object.keys(M).find(L=>M[L]===`${N}`);return s.jsxs($e,{ref:i,...n,"data-loading":m,className:D.appendClassNames(e,"humany-guide"),children:[s.jsxs(Le,{"data-loading":m,accordion:t?"true":"false",className:"humany-guide-content",children:[(d&&o||!!x)&&s.jsxs(Se,{className:"humany-guide-top",children:[d&&o&&s.jsx(Q,{defaultAnswerVersionLabel:g,availablePerspectives:B,guide:o}),!!x&&s.jsx(ye,{dispatch:S})]}),!!(R||O)&&s.jsx(ke,{className:"humany-guide-body",accordion:t?"true":"false",header:h&&R||void 0,html:O,htmlParseInstruction:z,lang:G}),l&&O.indexOf("h-option-link")===-1&&s.jsx(we,{dialog:l}),s.jsx(je,{backButtonShown:F?"true":"false",contactMethods:c,dispatch:S,guideId:o&&o.id}),!c.length&&C===(o==null?void 0:o.id)&&s.jsx(te,{backButtonShown:F,accordion:t}),F&&s.jsxs(Te,{"aria-label":y,onClick:P,children:[s.jsxs(Ce,{width:"7",height:"13",viewBox:"0 0 7 13",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("line",{x1:"6.64645",y1:"12.5513",x2:"0.648357",y2:"6.55319"}),s.jsx("line",{x1:"0.646447",y1:"6.64455",x2:"6.64454",y2:"0.646465"})]}),y&&s.jsx("span",{children:y})]}),f&&s.jsx(Be,{...f,modified:o==null?void 0:o.modified,published:o==null?void 0:o.published,modifiedBy:o==null?void 0:o.modifiedBy,publishedBy:o==null?void 0:o.publishedBy,byLabel:u,modifiedLabel:p,publishedLabel:b}),T.map(L=>s.jsx(ze,{id:L.id,branch:"default",embedded:!0},L.id))]}),s.jsx(a.Loader,{loading:m})]})}),$e=r.div`
+  ${a.loadingOpacity}
+  min-width: 0;
+`,ke=r(a.Paragraph)`
+  ${a.genericHtml}
+  ${e=>{var t;return`padding: ${(t=e.theme.sizes)==null?void 0:t.large};`}}
+  display: block;
+  line-height: 1.6em;
+
+  ${e=>{var t,n;return a.headingElement(e)("h1",E.css`
+        font-size: ${(t=e.theme.fonts)==null?void 0:t.large};
+        font-weight: normal;
+        line-height: 1.6em;
+        line-height: 1.6em;
+        margin: 0 0 ${(n=e.theme.sizes)==null?void 0:n.small};
+      `)}}
+
+  p {
+    font-weight: 300;
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    a {
+      display: inline;
+    }
+  }
+`,je=r(W.ContactList)`
+  border-top: ${e=>e.theme.border};
+  ${e=>e.backButtonShown==="true"&&`border-bottom: ${e.theme.border};`}
+`,we=r(a.DialogList)`
+  ${e=>{var t,n;return`padding: 0 ${(t=e.theme.sizes)==null?void 0:t.large} ${(n=e.theme.sizes)==null?void 0:n.large};`}}
+  display: block;
+`,Se=r.div`
+  ${e=>{var t,n;return`padding: calc(${(t=e.theme.sizes)==null?void 0:t.normal}*2) ${(n=e.theme.sizes)==null?void 0:n.large};`}}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: ${e=>e.theme.border};
+  border-radius: ${e=>`${e.theme.borderRadius} ${e.theme.borderRadius}`} 0 0;
+  background-color: #ffffff;
+`,Le=r.div`
+  ${a.contentBox}
+  display: block;
+  > a {
+    ${W.contactLink}
+  }
+
+  ${e=>e.accordion==="true"&&E.css`
+      white-space: normal;
+      box-shadow: none;
+      background-color: #fafafa;
+    `}
+`,Be=r(a.Metadata)`
+  display: block;
+  ${e=>{var t,n;return`padding: calc(${(t=e.theme.sizes)==null?void 0:t.normal}*2) ${(n=e.theme.sizes)==null?void 0:n.large};`}}
+  font-weight: 300;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  border-top: ${e=>e.theme.border};
+`,ze=r(V.Component)`
+  border-top: ${e=>e.theme.border};
+`,Te=r(a.Button)`
+  ${e=>{var t,n;return`padding: ${(t=e.theme.sizes)==null?void 0:t.normal} calc(${(n=e.theme.sizes)==null?void 0:n.normal} * 2);`}}
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+  text-decoration: underline;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  span {
+    font-weight: 300;
+  }
+  &:focus-visible {
+    ${a.linkTabStyle}
+    padding: ${e=>{var t,n;return`calc(${(t=e.theme.sizes)==null?void 0:t.small} / 2) ${(n=e.theme.sizes)==null?void 0:n.small}`}};
+  }
+`,Ce=r.svg`
+  margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+  line {
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+  }
+`;exports.default=xe;