@telia-ace/knowledge-widget-components-notification-row 1.0.23 → 1.0.24-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE.txt CHANGED
@@ -1,6 +1,6 @@
1
- Copyright © 2021, Telia Company AB. All rights reserved.
2
-
3
- THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
4
- THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
5
- AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
1
+ Copyright © 2021, Telia Company AB. All rights reserved.
2
+
3
+ THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
4
+ THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
5
+ AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
6
6
  http://www.humany.com/legal
package/README.md CHANGED
@@ -1,3 +1,3 @@
1
- # `@telia-ace/knowledge-widget-components-notification-row`
2
-
3
- Notification row component for ACE Knowledge Widgets.
1
+ # `@telia-ace/knowledge-widget-components-notification-row`
2
+
3
+ Notification row component for ACE Knowledge Widgets.
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import NotificationRowComponent from './notification-row-component';
2
- export default NotificationRowComponent;
1
+ import NotificationRowComponent from './notification-row-component';
2
+ export default NotificationRowComponent;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\r\n createEventSubscriber,\r\n extendComponent,\r\n Notification,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\ntype NotificationType = 'top' | 'middle' | 'bottom';\r\nexport type NotificationRowComponentProps = {\r\n types: NotificationType[];\r\n allowPaging?: boolean;\r\n notifications?: Notification[]; // internal\r\n expandable?: boolean;\r\n pageNextAriaLabel?: string;\r\n pagePreviousAriaLabel?: string;\r\n closeAriaLabel?: string;\r\n expandAriaLabel?: string;\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationRowComponent = (container: Container) => {\r\n const { events }: Widget = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n return createReactComponent(\r\n container,\r\n 'notification-row',\r\n import('./notification-row'),\r\n (component) => {\r\n const fetch = (params: { [key: string]: any }) => {\r\n component.writeProperties({\r\n ...component.properties<NotificationRowComponentProps>(),\r\n loading: true,\r\n error: undefined,\r\n notifications: [],\r\n });\r\n component.actions.dispatch('fetch', { params });\r\n };\r\n\r\n component.actions.create(\r\n 'fetch',\r\n ({\r\n error,\r\n topNotifications,\r\n bottomNotifications,\r\n middleNotifications,\r\n }: FetchResults) => {\r\n if (error) {\r\n return component.actions.dispatch('fetched', {\r\n error,\r\n loading: true,\r\n notifications: [],\r\n });\r\n }\r\n\r\n let newNotifications: Notification[] = [];\r\n const { notifications, types = [] } =\r\n component.properties<NotificationRowComponentProps>();\r\n if (types.length) {\r\n if (types.indexOf('top') > -1) {\r\n newNotifications = newNotifications.concat(topNotifications);\r\n }\r\n if (types.indexOf('middle') > -1) {\r\n newNotifications = newNotifications.concat(middleNotifications);\r\n }\r\n if (types.indexOf('bottom') > -1) {\r\n newNotifications = newNotifications.concat(bottomNotifications);\r\n }\r\n } else {\r\n newNotifications = topNotifications;\r\n }\r\n\r\n return component.actions.dispatch('fetched', {\r\n notifications: newNotifications.length ? newNotifications : notifications,\r\n loading: false,\r\n });\r\n }\r\n );\r\n\r\n component.actions.create('fetched', (input) => {\r\n return component.writeProperties({ ...input, loading: false });\r\n });\r\n\r\n container.getAsync('router').then((router) => {\r\n const { params } = router.getRouteData();\r\n fetch(params);\r\n });\r\n\r\n subscribe('router:changed', (event: any, { current }: any) => {\r\n fetch(current.routeData.params);\r\n });\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }\r\n )\r\n .then(() => {\r\n return extendComponent(container, 'notification-row', (component) => {\r\n component.actions.watch('notification-row.fetch', (input, next) => {\r\n return container\r\n .getAsync('dataClient')\r\n .then((dataClient: DataClient) =>\r\n dataClient.fetch(DataType.RowNotifications, {\r\n categories: [\r\n input.params.guideCategory,\r\n input.params.contactCategory,\r\n ].filter((c) => !!c),\r\n searchPhrase: input.params.phrase,\r\n })\r\n )\r\n .then(next)\r\n .catch((error) => {\r\n if (error) {\r\n return next(error);\r\n }\r\n });\r\n });\r\n });\r\n })\r\n .then(() => {\r\n unsubscribe();\r\n });\r\n};\r\n\r\nexport default NotificationRowComponent;\r\n"],"names":["NotificationRowComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","input","router","event","current","extendComponent","next","dataClient","DataType","c"],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS,GAC5C,CAACE,GAAWC,CAAW,IAAIC,EAAsBH,CAAM;AAEtD,SAAAI;AAAA,IACHL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACM,MAAc;AACL,YAAAC,IAAQ,CAACC,MAAmC;AAC9C,QAAAF,EAAU,gBAAgBG,EAAAC,EAAA,IACnBJ,EAAU,WAA0C,IADjC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,QAAA,EACnB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,aAAAF,EAAU,QAAQ;AAAA,QACd;AAAA,QACA,CAAC;AAAA,UACG,OAAAK;AAAA,UACA,kBAAAC;AAAA,UACA,qBAAAC;AAAA,UACA,qBAAAC;AAAA,QAAA,MACgB;AAChB,cAAIH;AACO,mBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,cACzC,OAAAK;AAAA,cACA,SAAS;AAAA,cACT,eAAe,CAAC;AAAA,YAAA,CACnB;AAGL,cAAII,IAAmC,CAAA;AACvC,gBAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,CAAG,EAAA,IAC9BX,EAAU;AACd,iBAAIW,EAAM,UACFA,EAAM,QAAQ,KAAK,IAAI,OACJF,IAAAA,EAAiB,OAAOH,CAAgB,IAE3DK,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOD,CAAmB,IAE9DG,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOF,CAAmB,MAG/CE,IAAAH,GAGhBN,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,eAAeS,EAAiB,SAASA,IAAmBC;AAAA,YAC5D,SAAS;AAAA,UAAA,CACZ;AAAA,QACL;AAAA,MAAA,GAGJV,EAAU,QAAQ,OAAO,WAAW,CAACY,MAC1BZ,EAAU,gBAAgBG,EAAAC,EAAA,IAAKQ,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDlB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACmB,MAAW;AAC1C,cAAM,EAAE,QAAAX,EAAA,IAAWW,EAAO,aAAa;AACvC,QAAAZ,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACkB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAd,EAAAc,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC,GAEM,MAAM;AACG,QAAAlB;MAAA;AAAA,IAEpB;AAAA,EACJ,EACK,KAAK,MACKmB,EAAgBtB,GAAW,oBAAoB,CAACM,MAAc;AACjE,IAAAA,EAAU,QAAQ,MAAM,0BAA0B,CAACY,GAAOK,MAC/CvB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACwB,MACHA,EAAW,MAAMC,EAAS,kBAAkB;AAAA,QACxC,YAAY;AAAA,UACRP,EAAM,OAAO;AAAA,UACbA,EAAM,OAAO;AAAA,UACf,OAAO,CAACQ,MAAM,CAAC,CAACA,CAAC;AAAA,QACnB,cAAcR,EAAM,OAAO;AAAA,MAAA,CAC9B;AAAA,MAEJ,KAAKK,CAAI,EACT,MAAM,CAACZ,MAAU;AACd,UAAIA;AACA,eAAOY,EAAKZ,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT;"}
1
+ {"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\n createEventSubscriber,\n extendComponent,\n Notification,\n} from '@telia-ace/knowledge-widget-core';\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container, Widget } from '@webprovisions/platform';\n\ntype NotificationType = 'top' | 'middle' | 'bottom';\nexport type NotificationRowComponentProps = {\n types: NotificationType[];\n allowPaging?: boolean;\n notifications?: Notification[]; // internal\n expandable?: boolean;\n pageNextAriaLabel?: string;\n pagePreviousAriaLabel?: string;\n closeAriaLabel?: string;\n expandAriaLabel?: string;\n};\n\ntype FetchResults = NotificationResults & { error: any };\n\nexport const NotificationRowComponent = (container: Container) => {\n const { events }: Widget = container.get('$widget');\n const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n return createReactComponent(\n container,\n 'notification-row',\n import('./notification-row'),\n (component) => {\n const fetch = (params: { [key: string]: any }) => {\n component.writeProperties({\n ...component.properties<NotificationRowComponentProps>(),\n loading: true,\n error: undefined,\n notifications: [],\n });\n component.actions.dispatch('fetch', { params });\n };\n\n component.actions.create(\n 'fetch',\n ({\n error,\n topNotifications,\n bottomNotifications,\n middleNotifications,\n }: FetchResults) => {\n if (error) {\n return component.actions.dispatch('fetched', {\n error,\n loading: true,\n notifications: [],\n });\n }\n\n let newNotifications: Notification[] = [];\n const { notifications, types = [] } =\n component.properties<NotificationRowComponentProps>();\n if (types.length) {\n if (types.indexOf('top') > -1) {\n newNotifications = newNotifications.concat(topNotifications);\n }\n if (types.indexOf('middle') > -1) {\n newNotifications = newNotifications.concat(middleNotifications);\n }\n if (types.indexOf('bottom') > -1) {\n newNotifications = newNotifications.concat(bottomNotifications);\n }\n } else {\n newNotifications = topNotifications;\n }\n\n return component.actions.dispatch('fetched', {\n notifications: newNotifications.length ? newNotifications : notifications,\n loading: false,\n });\n }\n );\n\n component.actions.create('fetched', (input) => {\n return component.writeProperties({ ...input, loading: false });\n });\n\n container.getAsync('router').then((router) => {\n const { params } = router.getRouteData();\n fetch(params);\n });\n\n subscribe('router:changed', (event: any, { current }: any) => {\n fetch(current.routeData.params);\n });\n\n return () => {\n unsubscribe();\n };\n }\n )\n .then(() => {\n return extendComponent(container, 'notification-row', (component) => {\n component.actions.watch('notification-row.fetch', (input, next) => {\n return container\n .getAsync('dataClient')\n .then((dataClient: DataClient) =>\n dataClient.fetch(DataType.RowNotifications, {\n categories: [\n input.params.guideCategory,\n input.params.contactCategory,\n ].filter((c) => !!c),\n searchPhrase: input.params.phrase,\n })\n )\n .then(next)\n .catch((error) => {\n if (error) {\n return next(error);\n }\n });\n });\n });\n })\n .then(() => {\n unsubscribe();\n });\n};\n\nexport default NotificationRowComponent;\n"],"names":["NotificationRowComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","input","router","event","current","extendComponent","next","dataClient","DataType","c"],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS,GAC5C,CAACE,GAAWC,CAAW,IAAIC,EAAsBH,CAAM;AAEtD,SAAAI;AAAA,IACHL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACM,MAAc;AACL,YAAAC,IAAQ,CAACC,MAAmC;AAC9C,QAAAF,EAAU,gBAAgBG,EAAAC,EAAA,IACnBJ,EAAU,WAA0C,IADjC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,QAAA,EACnB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,aAAAF,EAAU,QAAQ;AAAA,QACd;AAAA,QACA,CAAC;AAAA,UACG,OAAAK;AAAA,UACA,kBAAAC;AAAA,UACA,qBAAAC;AAAA,UACA,qBAAAC;AAAA,QAAA,MACgB;AAChB,cAAIH;AACO,mBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,cACzC,OAAAK;AAAA,cACA,SAAS;AAAA,cACT,eAAe,CAAC;AAAA,YAAA,CACnB;AAGL,cAAII,IAAmC,CAAA;AACvC,gBAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,CAAG,EAAA,IAC9BX,EAAU;AACd,iBAAIW,EAAM,UACFA,EAAM,QAAQ,KAAK,IAAI,OACJF,IAAAA,EAAiB,OAAOH,CAAgB,IAE3DK,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOD,CAAmB,IAE9DG,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOF,CAAmB,MAG/CE,IAAAH,GAGhBN,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,eAAeS,EAAiB,SAASA,IAAmBC;AAAA,YAC5D,SAAS;AAAA,UAAA,CACZ;AAAA,QACL;AAAA,MAAA,GAGJV,EAAU,QAAQ,OAAO,WAAW,CAACY,MAC1BZ,EAAU,gBAAgBG,EAAAC,EAAA,IAAKQ,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDlB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACmB,MAAW;AAC1C,cAAM,EAAE,QAAAX,EAAA,IAAWW,EAAO,aAAa;AACvC,QAAAZ,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACkB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAd,EAAAc,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC,GAEM,MAAM;AACG,QAAAlB;MAAA;AAAA,IAEpB;AAAA,EACJ,EACK,KAAK,MACKmB,EAAgBtB,GAAW,oBAAoB,CAACM,MAAc;AACjE,IAAAA,EAAU,QAAQ,MAAM,0BAA0B,CAACY,GAAOK,MAC/CvB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACwB,MACHA,EAAW,MAAMC,EAAS,kBAAkB;AAAA,QACxC,YAAY;AAAA,UACRP,EAAM,OAAO;AAAA,UACbA,EAAM,OAAO;AAAA,UACf,OAAO,CAACQ,MAAM,CAAC,CAACA,CAAC;AAAA,QACnB,cAAcR,EAAM,OAAO;AAAA,MAAA,CAC9B;AAAA,MAEJ,KAAKK,CAAI,EACT,MAAM,CAACZ,MAAU;AACd,UAAIA;AACA,eAAOY,EAAKZ,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT;"}
@@ -1,15 +1,15 @@
1
- import { Notification } from '@telia-ace/knowledge-widget-core';
2
- import { Container } from '@webprovisions/platform';
3
- declare type NotificationType = 'top' | 'middle' | 'bottom';
4
- export declare type NotificationRowComponentProps = {
5
- types: NotificationType[];
6
- allowPaging?: boolean;
7
- notifications?: Notification[];
8
- expandable?: boolean;
9
- pageNextAriaLabel?: string;
10
- pagePreviousAriaLabel?: string;
11
- closeAriaLabel?: string;
12
- expandAriaLabel?: string;
13
- };
14
- export declare const NotificationRowComponent: (container: Container) => Promise<void>;
15
- export default NotificationRowComponent;
1
+ import { Notification } from '@telia-ace/knowledge-widget-core';
2
+ import { Container } from '@webprovisions/platform';
3
+ declare type NotificationType = 'top' | 'middle' | 'bottom';
4
+ export declare type NotificationRowComponentProps = {
5
+ types: NotificationType[];
6
+ allowPaging?: boolean;
7
+ notifications?: Notification[];
8
+ expandable?: boolean;
9
+ pageNextAriaLabel?: string;
10
+ pagePreviousAriaLabel?: string;
11
+ closeAriaLabel?: string;
12
+ expandAriaLabel?: string;
13
+ };
14
+ export declare const NotificationRowComponent: (container: Container) => Promise<void>;
15
+ export default NotificationRowComponent;
@@ -1 +1 @@
1
- {"version":3,"file":"notification-row.7efcaf9d.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n Button,\r\n createEmptyComponent,\r\n genericHtml,\r\n Html,\r\n linkTabStyle,\r\n SymbolBadge,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport {\r\n createStorageWriter,\r\n readStorage,\r\n StorageCategory,\r\n StorageMedium,\r\n StorageWriter,\r\n} from '@telia-ace/widget-services';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationRowComponentProps } from './notification-row-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst STORAGE_KEY = 'closed-notifications';\r\n\r\nconst infocusableHtml = {\r\n transform: {\r\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\r\n <a {...props} tabIndex={-1}>\r\n {children}\r\n </a>\r\n ),\r\n },\r\n};\r\n\r\nconst NotificationRow: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n types = [],\r\n allowPaging = true,\r\n notifications = [],\r\n expandable = false,\r\n closeAriaLabel = '',\r\n pageNextAriaLabel = '',\r\n pagePreviousAriaLabel = '',\r\n expandAriaLabel = '',\r\n } = useProperties<NotificationRowComponentProps>();\r\n const [expanded, setExpanded] = useState(false);\r\n const [closed, setClosed] = useState<string[]>([]);\r\n const [index, setIndex] = useState(0);\r\n\r\n const container = useContainer();\r\n const [write, setWriter] = useState<StorageWriter | undefined>();\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (closed = []) => setClosed(closed)\r\n );\r\n\r\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\r\n setWriter(() => writer)\r\n );\r\n }\r\n }, [container]);\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (storedClosed = []) => {\r\n closed.forEach(\r\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\r\n );\r\n if (write) {\r\n write(storedClosed);\r\n }\r\n }\r\n );\r\n }\r\n }, [closed, container, write]);\r\n\r\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\r\n\r\n const { length } = filtered;\r\n\r\n if (!filtered.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n if (allowPaging) {\r\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\r\n\r\n if (!notification) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n const { id, body } = notification || {};\r\n const toggleExpand = () => setExpanded(!expanded);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n aria-expanded={expandable ? expanded : true}\r\n aria-label={expandAriaLabel}\r\n tabIndex={expandable ? 0 : -1}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={length > 1}\r\n data-types={types}\r\n data-allow-paging={allowPaging}\r\n data-expandable={expandable}\r\n onKeyDown={(e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n toggleExpand();\r\n }\r\n }}\r\n onClick={toggleExpand}\r\n >\r\n <CloseButton\r\n aria-label={closeAriaLabel}\r\n onClick={() => {\r\n setIndex(filtered.indexOf(notification));\r\n setClosed([...closed, id]);\r\n }}\r\n >\r\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\r\n </CloseButton>\r\n <StyledHtml\r\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\r\n data-pageable={length > 1}\r\n data-notification={id}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n html={body}\r\n />\r\n {length > 1 && (\r\n <Pager>\r\n <StyledButton\r\n aria-label={pagePreviousAriaLabel}\r\n data-disabled={index === 0}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-left' }}\r\n />\r\n </StyledButton>\r\n <span>\r\n {index + 1}/{length}\r\n </span>\r\n <StyledButton\r\n aria-label={pageNextAriaLabel}\r\n data-disabled={index + 1 >= length}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index < length - 1) {\r\n setIndex(index + 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-right' }}\r\n />\r\n </StyledButton>\r\n </Pager>\r\n )}\r\n </Wrapper>\r\n );\r\n }\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={false}\r\n data-types={types}\r\n data-allow-paging={false}\r\n >\r\n {filtered.map((notification) => {\r\n if (!notification) {\r\n return null;\r\n }\r\n\r\n const { id, body } = notification;\r\n\r\n return (\r\n <StyledHtml\r\n key={id}\r\n data-pageable={false}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n data-notification={id}\r\n html={body}\r\n />\r\n );\r\n })}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\r\n ${genericHtml}\r\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\r\n background-color: ${(p) => {\r\n if (p['data-types'].length) {\r\n if (p['data-types'].indexOf('top') > -1) {\r\n return p.theme.colors?.warning;\r\n }\r\n if (p['data-types'].indexOf('bottom') > -1) {\r\n return 'transparent';\r\n }\r\n\r\n return p.theme.colors?.primary;\r\n }\r\n return p.theme.colors?.warning;\r\n }};\r\n color: ${(p) => p.theme.colors?.text};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\r\n overflow: hidden;\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n\r\n a {\r\n color: ${(p) => p.theme.colors?.link};\r\n &:focus-visible {\r\n ${linkTabStyle}\r\n }\r\n }\r\n\r\n ${(p) =>\r\n !p['data-allow-paging'] &&\r\n css`\r\n flex-wrap: wrap;\r\n\r\n > div {\r\n min-width: 100%;\r\n margin: ${p.theme.sizes?.cardinal * 2}px;\r\n }\r\n `};\r\n\r\n ${(p) =>\r\n css`\r\n &:focus-visible {\r\n ${StyledHtml} {\r\n ${borderTabStyle}\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<{\r\n 'data-pageable': boolean;\r\n 'data-expandable': boolean;\r\n 'data-expanded': boolean;\r\n}>`\r\n flex: 1;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n\r\n ${(p) =>\r\n p['data-expandable'] &&\r\n !p['data-expanded'] &&\r\n css`\r\n max-width: 100%;\r\n\r\n p {\r\n display: none;\r\n &:first-child {\r\n display: block;\r\n margin-bottom: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst Pager = styled.div`\r\n text-align: center;\r\n width: 100%;\r\n span {\r\n font-size: ${(p) => p.theme.fonts?.small};\r\n display: inline-block;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 200ms ease-out;\r\n justify-self: flex-end;\r\n align-self: flex-start;\r\n padding: ${(p) => p.theme.sizes?.small} svg {\r\n display: block;\r\n }\r\n\r\n &:focus-visible {\r\n ${borderTabStyle}\r\n }\r\n\r\n ${(p) =>\r\n p['data-disabled']\r\n ? css`\r\n opacity: 0.8;\r\n `\r\n : css`\r\n @media (hover) {\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst CloseButton = styled(StyledButton)`\r\n position: absolute;\r\n top: 7.5px;\r\n right: 7.5px;\r\n width: 25px;\r\n height: auto;\r\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\r\n svg {\r\n vertical-align: middle;\r\n line,\r\n path {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n line {\r\n stroke: #ffffff;\r\n }\r\n`;\r\n\r\nconst Empty = styled.div`\r\n display: none;\r\n`;\r\n\r\nexport default NotificationRow;\r\n"],"names":["STORAGE_KEY","infocusableHtml","_a","_b","children","props","__objRest","React","__spreadProps","__spreadValues","NotificationRow","className","other","types","allowPaging","notifications","expandable","closeAriaLabel","pageNextAriaLabel","pagePreviousAriaLabel","expandAriaLabel","useProperties","expanded","setExpanded","useState","closed","setClosed","index","setIndex","container","useContainer","write","setWriter","useEffect","readStorage","StorageMedium","createStorageWriter","StorageCategory","writer","storedClosed","id","filtered","length","createEmptyComponent","appendClassNames","notification","body","toggleExpand","Wrapper","e","CloseButton","SymbolBadge","StyledHtml","Pager","StyledButton","StyledSymbolBadge","styled","genericHtml","p","_c","linkTabStyle","css","borderTabStyle","Html","Button"],"mappings":"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"}
1
+ {"version":3,"file":"notification-row.7efcaf9d.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\n borderTabStyle,\n Button,\n createEmptyComponent,\n genericHtml,\n Html,\n linkTabStyle,\n SymbolBadge,\n useContainer,\n useProperties,\n} from '@telia-ace/knowledge-widget-ui';\nimport {\n createStorageWriter,\n readStorage,\n StorageCategory,\n StorageMedium,\n StorageWriter,\n} from '@telia-ace/widget-services';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { NotificationRowComponentProps } from './notification-row-component';\n\ntype Props = {\n className: string;\n};\n\nconst STORAGE_KEY = 'closed-notifications';\n\nconst infocusableHtml = {\n transform: {\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\n <a {...props} tabIndex={-1}>\n {children}\n </a>\n ),\n },\n};\n\nconst NotificationRow: React.FC<Props> = ({ className, ...other }) => {\n const {\n types = [],\n allowPaging = true,\n notifications = [],\n expandable = false,\n closeAriaLabel = '',\n pageNextAriaLabel = '',\n pagePreviousAriaLabel = '',\n expandAriaLabel = '',\n } = useProperties<NotificationRowComponentProps>();\n const [expanded, setExpanded] = useState(false);\n const [closed, setClosed] = useState<string[]>([]);\n const [index, setIndex] = useState(0);\n\n const container = useContainer();\n const [write, setWriter] = useState<StorageWriter | undefined>();\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (closed = []) => setClosed(closed)\n );\n\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\n setWriter(() => writer)\n );\n }\n }, [container]);\n\n useEffect(() => {\n if (container) {\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n (storedClosed = []) => {\n closed.forEach(\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\n );\n if (write) {\n write(storedClosed);\n }\n }\n );\n }\n }, [closed, container, write]);\n\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\n\n const { length } = filtered;\n\n if (!filtered.length) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n if (allowPaging) {\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\n\n if (!notification) {\n return createEmptyComponent(container, {\n ...other,\n className: appendClassNames(className, 'humany-notification-row'),\n });\n }\n\n const { id, body } = notification || {};\n const toggleExpand = () => setExpanded(!expanded);\n\n return (\n <Wrapper\n {...other}\n aria-expanded={expandable ? expanded : true}\n aria-label={expandAriaLabel}\n tabIndex={expandable ? 0 : -1}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={length > 1}\n data-types={types}\n data-allow-paging={allowPaging}\n data-expandable={expandable}\n onKeyDown={(e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n toggleExpand();\n }\n }}\n onClick={toggleExpand}\n >\n <CloseButton\n aria-label={closeAriaLabel}\n onClick={() => {\n setIndex(filtered.indexOf(notification));\n setClosed([...closed, id]);\n }}\n >\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\n </CloseButton>\n <StyledHtml\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\n data-pageable={length > 1}\n data-notification={id}\n data-expandable={expandable}\n data-expanded={expanded}\n html={body}\n />\n {length > 1 && (\n <Pager>\n <StyledButton\n aria-label={pagePreviousAriaLabel}\n data-disabled={index === 0}\n onClick={(e) => {\n e.stopPropagation();\n if (index > 0) {\n setIndex(index - 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-left' }}\n />\n </StyledButton>\n <span>\n {index + 1}/{length}\n </span>\n <StyledButton\n aria-label={pageNextAriaLabel}\n data-disabled={index + 1 >= length}\n onClick={(e) => {\n e.stopPropagation();\n if (index < length - 1) {\n setIndex(index + 1);\n }\n }}\n >\n <StyledSymbolBadge\n size={10}\n symbol={{ type: 'Svg', content: 'caret-right' }}\n />\n </StyledButton>\n </Pager>\n )}\n </Wrapper>\n );\n }\n\n return (\n <Wrapper\n {...other}\n className={appendClassNames(className, 'humany-notification-row')}\n data-pageable={false}\n data-types={types}\n data-allow-paging={false}\n >\n {filtered.map((notification) => {\n if (!notification) {\n return null;\n }\n\n const { id, body } = notification;\n\n return (\n <StyledHtml\n key={id}\n data-pageable={false}\n data-expandable={expandable}\n data-expanded={expanded}\n data-notification={id}\n html={body}\n />\n );\n })}\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\n ${genericHtml}\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\n background-color: ${(p) => {\n if (p['data-types'].length) {\n if (p['data-types'].indexOf('top') > -1) {\n return p.theme.colors?.warning;\n }\n if (p['data-types'].indexOf('bottom') > -1) {\n return 'transparent';\n }\n\n return p.theme.colors?.primary;\n }\n return p.theme.colors?.warning;\n }};\n color: ${(p) => p.theme.colors?.text};\n border-radius: ${(p) => p.theme.borderRadius};\n text-align: center;\n display: flex;\n flex-direction: column;\n position: relative;\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\n overflow: hidden;\n\n i {\n color: ${(p) => p.theme.colors?.text};\n }\n\n a {\n color: ${(p) => p.theme.colors?.link};\n &:focus-visible {\n ${linkTabStyle}\n }\n }\n\n ${(p) =>\n !p['data-allow-paging'] &&\n css`\n flex-wrap: wrap;\n\n > div {\n min-width: 100%;\n margin: ${p.theme.sizes?.cardinal * 2}px;\n }\n `};\n\n ${(p) =>\n css`\n &:focus-visible {\n ${StyledHtml} {\n ${borderTabStyle}\n }\n }\n `}\n`;\n\nconst StyledHtml = styled(Html)<{\n 'data-pageable': boolean;\n 'data-expandable': boolean;\n 'data-expanded': boolean;\n}>`\n flex: 1;\n font-size: ${(p) => p.theme.fonts?.normal};\n line-height: 1.6em;\n font-weight: 300;\n\n ${(p) =>\n p['data-expandable'] &&\n !p['data-expanded'] &&\n css`\n max-width: 100%;\n\n p {\n display: none;\n &:first-child {\n display: block;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n `}\n`;\n\nconst Pager = styled.div`\n text-align: center;\n width: 100%;\n span {\n font-size: ${(p) => p.theme.fonts?.small};\n display: inline-block;\n width: 30px;\n text-align: center;\n }\n`;\n\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: opacity 200ms ease-out;\n justify-self: flex-end;\n align-self: flex-start;\n padding: ${(p) => p.theme.sizes?.small} svg {\n display: block;\n }\n\n &:focus-visible {\n ${borderTabStyle}\n }\n\n ${(p) =>\n p['data-disabled']\n ? css`\n opacity: 0.8;\n `\n : css`\n @media (hover) {\n &:hover {\n opacity: 0.5;\n }\n }\n `}\n`;\n\nconst CloseButton = styled(StyledButton)`\n position: absolute;\n top: 7.5px;\n right: 7.5px;\n width: 25px;\n height: auto;\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\n svg {\n vertical-align: middle;\n line,\n path {\n stroke: ${(p) => p.theme.colors?.text};\n }\n }\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)`\n line {\n stroke: #ffffff;\n }\n`;\n\nconst Empty = styled.div`\n display: none;\n`;\n\nexport default NotificationRow;\n"],"names":["STORAGE_KEY","infocusableHtml","_a","_b","children","props","__objRest","React","__spreadProps","__spreadValues","NotificationRow","className","other","types","allowPaging","notifications","expandable","closeAriaLabel","pageNextAriaLabel","pagePreviousAriaLabel","expandAriaLabel","useProperties","expanded","setExpanded","useState","closed","setClosed","index","setIndex","container","useContainer","write","setWriter","useEffect","readStorage","StorageMedium","createStorageWriter","StorageCategory","writer","storedClosed","id","filtered","length","createEmptyComponent","appendClassNames","notification","body","toggleExpand","Wrapper","e","CloseButton","SymbolBadge","StyledHtml","Pager","StyledButton","StyledSymbolBadge","styled","genericHtml","p","_c","linkTabStyle","css","borderTabStyle","Html","Button"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
- import React from 'react';
2
- declare type Props = {
3
- className: string;
4
- };
5
- declare const NotificationRow: React.SFC<Props>;
6
- export default NotificationRow;
1
+ import React from 'react';
2
+ declare type Props = {
3
+ className: string;
4
+ };
5
+ declare const NotificationRow: React.FC<Props>;
6
+ export default NotificationRow;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/knowledge-widget-components-notification-row",
3
- "version": "1.0.23",
3
+ "version": "1.0.24-next.0",
4
4
  "description": "Notification row component for ACE Knowledge Widgets.",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "Telia Company AB",
@@ -26,22 +26,22 @@
26
26
  },
27
27
  "sideEffects": false,
28
28
  "dependencies": {
29
- "@telia-ace/knowledge-widget-core": "^1.0.19",
30
- "@telia-ace/knowledge-widget-types-grid": "^1.0.30",
31
- "@telia-ace/knowledge-widget-ui": "^1.0.25",
32
- "@telia-ace/widget-services": "^1.0.15",
33
- "@telia-ace/widget-utilities": "^1.0.4",
29
+ "@telia-ace/knowledge-widget-core": "^1.0.20-next.1",
30
+ "@telia-ace/knowledge-widget-types-grid": "^1.0.31-next.1",
31
+ "@telia-ace/knowledge-widget-ui": "^1.0.26-next.1",
32
+ "@telia-ace/widget-services": "^1.0.16-next.2",
33
+ "@telia-ace/widget-utilities": "^1.0.5-next.1",
34
34
  "@webprovisions/platform": "^1.1.2"
35
35
  },
36
36
  "peerDependencies": {
37
- "react": "^16.8.0",
38
- "react-dom": "^16.8.0",
39
- "styled-components": "^4.3.2"
37
+ "react": "^18.2.0",
38
+ "react-dom": "^18.2.0",
39
+ "styled-components": "^5.3.6"
40
40
  },
41
41
  "devDependencies": {
42
- "@types/react": "^16.8.0",
43
- "@types/react-dom": "^16.8.0",
44
- "@types/styled-components": "^5.1.7"
42
+ "@types/react": "^18.0.21",
43
+ "@types/react-dom": "^18.0.6",
44
+ "@types/styled-components": "^5.1.26"
45
45
  },
46
- "gitHead": "db190a67f912245c4145c037972fac2039bda698"
46
+ "gitHead": "a81b35116f1f922623477a03097a1435db43a5ff"
47
47
  }