@stack-spot/portal-components 1.3.0-rc → 1.3.2-rc

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.
Files changed (31) hide show
  1. package/dist/components/AsyncContent.d.ts +7 -0
  2. package/dist/components/AsyncContent.d.ts.map +1 -1
  3. package/dist/components/AsyncContent.js +7 -0
  4. package/dist/components/AsyncContent.js.map +1 -1
  5. package/dist/components/InfiniteScroll.d.ts +8 -0
  6. package/dist/components/InfiniteScroll.d.ts.map +1 -1
  7. package/dist/components/InfiniteScroll.js +8 -0
  8. package/dist/components/InfiniteScroll.js.map +1 -1
  9. package/dist/components/Notifications/NotificationComponent.d.ts +2 -2
  10. package/dist/components/Notifications/NotificationComponent.d.ts.map +1 -1
  11. package/dist/components/Notifications/NotificationComponent.js +5 -5
  12. package/dist/components/Notifications/NotificationComponent.js.map +1 -1
  13. package/dist/components/Notifications/NotificationItem.d.ts +2 -2
  14. package/dist/components/Notifications/NotificationItem.d.ts.map +1 -1
  15. package/dist/components/Notifications/NotificationItem.js +14 -6
  16. package/dist/components/Notifications/NotificationItem.js.map +1 -1
  17. package/dist/components/ScrollView.d.ts +5 -0
  18. package/dist/components/ScrollView.d.ts.map +1 -1
  19. package/dist/components/ScrollView.js +5 -0
  20. package/dist/components/ScrollView.js.map +1 -1
  21. package/dist/components/StatusCircle.d.ts +12 -0
  22. package/dist/components/StatusCircle.d.ts.map +1 -1
  23. package/dist/components/StatusCircle.js +20 -0
  24. package/dist/components/StatusCircle.js.map +1 -1
  25. package/package.json +1 -1
  26. package/src/components/AsyncContent.tsx +8 -0
  27. package/src/components/InfiniteScroll.tsx +8 -0
  28. package/src/components/Notifications/NotificationComponent.tsx +7 -7
  29. package/src/components/Notifications/NotificationItem.tsx +31 -21
  30. package/src/components/ScrollView.tsx +6 -0
  31. package/src/components/StatusCircle.tsx +25 -0
package/dist/components/AsyncContent.d.ts CHANGED
@@ -34,6 +34,13 @@ interface Props {
34
34
  */
35
35
  errorDetails: ErrorProps;
36
36
  }
37
+ /**
38
+ * Renders a component that provides user feedback on async requests.
39
+ * It renders either a loading component, an error component (which is received as prop)
40
+ * or the received children props.
41
+ *
42
+ * @param options the props for rendering the component: {@link Props}.
43
+ */
37
44
  export declare const AsyncContent: ({ loading, error, autofocus, children, errorDetails }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
38
45
  export {};
39
46
  //# sourceMappingURL=AsyncContent.d.ts.map
package/dist/components/AsyncContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,cAAc,EAAG,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;MAEE;IACF,YAAY,EAAE,UAAU,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,0DAA2D,KAAK,iIA8BxF,CAAA"}
1
+ {"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,cAAc,EAAG,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC1C;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;MAEE;IACF,YAAY,EAAE,UAAU,CAAC;CAC1B;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,0DAA2D,KAAK,iIA8BxF,CAAA"}
package/dist/components/AsyncContent.js CHANGED
@@ -2,6 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Flex } from '@citric/core';
3
3
  import { LoadingCircular } from '@citric/ui';
4
4
  import { useEffect, useLayoutEffect } from 'react';
5
+ /**
6
+ * Renders a component that provides user feedback on async requests.
7
+ * It renders either a loading component, an error component (which is received as prop)
8
+ * or the received children props.
9
+ *
10
+ * @param options the props for rendering the component: {@link Props}.
11
+ */
5
12
  export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }) => {
6
13
  const ErrorComponent = errorDetails.errorComponent;
7
14
  useEffect(() => {
package/dist/components/AsyncContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqCpE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC/B,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAiB,SAAS,YAC7G,KAAC,eAAe,KAAG,GACd,CACR,CAAA;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IACzC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
1
+ {"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqCpE;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC/B,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAiB,SAAS,YAC7G,KAAC,eAAe,KAAG,GACd,CACR,CAAA;IACH,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IACzC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
package/dist/components/InfiniteScroll.d.ts CHANGED
@@ -1,3 +1,11 @@
1
1
  import { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component';
2
+ /**
3
+ * Renders a component that provides infinite scroll.
4
+ *
5
+ * The component wraps around the ReactInfiniteScroll component.
6
+ * It provides a loading indicator using citric loading circular and custom styles.
7
+ *
8
+ * By default, it adds the scrollable target as page and overflow hidden.
9
+ */
2
10
  export declare const InfiniteScroll: ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => import("react/jsx-runtime").JSX.Element;
3
11
  //# sourceMappingURL=InfiniteScroll.d.ts.map
package/dist/components/InfiniteScroll.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":"AACA,OAA4B,EAAE,KAAK,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAExG,eAAO,MAAM,cAAc,oDAAqD,KAAK,wBAAwB,EAAE,QAAQ,CAAC,4CASvH,CAAA"}
1
+ {"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":"AACA,OAA4B,EAAE,KAAK,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,oDAAqD,KAAK,wBAAwB,EAAE,QAAQ,CAAC,4CASvH,CAAA"}
package/dist/components/InfiniteScroll.js CHANGED
@@ -1,5 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { LoadingCircular } from '@citric/ui';
3
3
  import ReactInfiniteScroll from 'react-infinite-scroll-component';
4
+ /**
5
+ * Renders a component that provides infinite scroll.
6
+ *
7
+ * The component wraps around the ReactInfiniteScroll component.
8
+ * It provides a loading indicator using citric loading circular and custom styles.
9
+ *
10
+ * By default, it adds the scrollable target as page and overflow hidden.
11
+ */
4
12
  export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }) => (_jsx(ReactInfiniteScroll, { loader: _jsx(LoadingCircular, {}), scrollableTarget: scrollableTarget || 'page', style: { overflow: 'hidden', ...style }, ...props, children: children }));
5
13
  //# sourceMappingURL=InfiniteScroll.js.map
package/dist/components/InfiniteScroll.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,mBAA0D,MAAM,iCAAiC,CAAA;AAExG,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAA4C,EAAE,EAAE,CAAC,CAC3H,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAC,eAAe,KAAG,EAC3B,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KACnC,KAAK,YAER,QAAQ,GACW,CACvB,CAAA"}
1
+ {"version":3,"file":"InfiniteScroll.js","sourceRoot":"","sources":["../../src/components/InfiniteScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,mBAA0D,MAAM,iCAAiC,CAAA;AAExG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAA4C,EAAE,EAAE,CAAC,CAC3H,KAAC,mBAAmB,IAClB,MAAM,EAAE,KAAC,eAAe,KAAG,EAC3B,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,EAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KACnC,KAAK,YAER,QAAQ,GACW,CACvB,CAAA"}
package/dist/components/Notifications/NotificationComponent.d.ts CHANGED
@@ -5,7 +5,7 @@ interface Props {
5
5
  hasUnreadNotification?: boolean;
6
6
  }
7
7
  interface Props {
8
- onMarkAsRead: (notificationId: string) => void;
8
+ onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void;
9
9
  notifications?: StackspotNotification[];
10
10
  isLoading: boolean;
11
11
  error?: any;
@@ -19,6 +19,6 @@ interface Props {
19
19
  placeholderComponent: ReactElement;
20
20
  isSummary: boolean;
21
21
  }
22
- export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime").JSX.Element;
23
23
  export {};
24
24
  //# sourceMappingURL=NotificationComponent.d.ts.map
package/dist/components/Notifications/NotificationComponent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkHD,UAAU,KAAK;IACb,YAAY,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,uNAK/B,KAAK,4CAkFP,CAAA"}
1
+ {"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkHD,UAAU,KAAK;IACb,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IACnG,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,6NAK/B,KAAK,4CAkFP,CAAA"}
package/dist/components/Notifications/NotificationComponent.js CHANGED
@@ -18,7 +18,7 @@ const NotificationsComponent = styled(Flex) `
18
18
  z-index: 1;
19
19
  visibility: hidden;
20
20
  position: absolute;
21
- top: calc(var(--header-height) - 2px);
21
+ top: calc(var(--header-height) + 6px);
22
22
  right: -270%;
23
23
  width: 400px;
24
24
 
@@ -41,11 +41,11 @@ const NotificationsComponent = styled(Flex) `
41
41
  &::after {
42
42
  content: '';
43
43
  position: absolute;
44
- border-width: 10px;
44
+ border-width: 9px 19px;
45
45
  border-style: solid;
46
46
  border-color: transparent;
47
47
  bottom: 100%;
48
- left: 74%;
48
+ left: 71%;
49
49
  margin-left: -5px;
50
50
  transform: rotate(180deg);
51
51
  border-top-color: ${theme.color.light[400]};
@@ -65,7 +65,7 @@ const NotificationsFilter = ({ type, onChangeFilterType }) => {
65
65
  const t = useTranslate(dictionary);
66
66
  return (_jsxs(Flex, { alignItems: "center", sx: { gap: '4px' }, my: "5", children: [_jsx(Button, { "aria-pressed": !type, appearance: "text", role: "button", "aria-label": t.filterAll, onClick: () => onChangeFilterType(), sx: { borderColor: !type ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: t.all }) }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterUnread, label: t.unread, enumType: UnreadType.Unread }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterHigh, label: t.high, enumType: NotificationType.High }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterMedium, label: t.medium, enumType: NotificationType.Medium }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterLow, label: t.low, enumType: NotificationType.Low })] }));
67
67
  };
68
- export const NotificationComponent = ({ hasUnreadNotification, onMarkAsRead, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
68
+ export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
69
69
  const t = useTranslate(dictionary);
70
70
  const [visible, setVisible] = useState(false);
71
71
  const updateType = (updatedType) => {
@@ -74,7 +74,7 @@ export const NotificationComponent = ({ hasUnreadNotification, onMarkAsRead, not
74
74
  return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconBox, { size: "md", sx: { cursor: 'pointer' }, onClick: () => {
75
75
  onClickViewNotifications();
76
76
  setVisible(true);
77
- }, className: "notificationsTour", children: _jsx(Bell, {}) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, children: _jsx(StatusCircle, { status: 'danger' }) }), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconBox, { appearance: "circle", onClick: () => setVisible(false), sx: { border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }, children: _jsx(TimesMini, {}) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkRead: () => onMarkAsRead(item.id) }, item.id))) }) }) }) })
77
+ }, className: "notificationsTour", children: _jsx(Bell, {}) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, children: _jsx(StatusCircle, { status: 'danger' }) }), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconBox, { appearance: "circle", onClick: () => setVisible(false), sx: { border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }, children: _jsx(TimesMini, {}) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
78
78
  :
79
79
  _jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
80
80
  setVisible(false);
package/dist/components/Notifications/NotificationComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAc,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAkD,UAAU,EAAE,MAAM,SAAS,CAAA;AAMtG,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;AAEnF,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB;;;;;;;;;;;;kBAYjD,qBAAqB;;;;;wBAKf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;+BACf,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;wBACtC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;kBAC5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;kBAE5C,qBAAqB,mBAAmB,qBAAqB,GAAG,IAAI;;;;;;;;;;;;;wBAa9D,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;CAE7C,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAK5B,CAAA;AAaD,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IACxE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACtE,OAAO,CAAC,KAAC,MAAM,IACb,UAAU,EAAC,MAAM,EACjB,IAAI,EAAC,QAAQ,gBACD,SAAS,kBACP,IAAI,KAAK,QAAQ,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAC3C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,YAElE,KAAC,IAAI,IAAC,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,YAChD,KAAK,GACD,GACA,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAA4B,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,CAAC,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,EAAC,GAAG,aAC1D,KAAC,MAAM,oBACS,CAAC,IAAI,EACnB,UAAU,EAAC,MAAM,EACjB,IAAI,EAAC,QAAQ,gBACD,CAAC,CAAC,SAAS,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,EACnC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,YAEtD,KAAC,IAAI,IAAC,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,YAChD,CAAC,CAAC,GAAG,GACD,GACA,EACT,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,MAAM,GACvE,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,GACvE,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,CAAC,MAAM,GAC7E,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,gBAAgB,CAAC,GAAG,GACpE,IACG,CAAC,CAAA;AACV,CAAC,CAAA;AAkBD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,qBAAqB,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EACpE,IAAI,EAAE,YAAY,EAClB,wBAAwB,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAClF,oBAAoB,EAAE,SAAS,GAAC,KAAK,GAC/B,EAAE,EAAE;IACV,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,UAAU,GAAG,CAAC,WAAqC,EAAE,EAAE;QAC3D,YAAY,CAAC,WAAW,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CAAC,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aACxC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC1C,OAAO,EAAE,GAAG,EAAE;oBACZ,wBAAwB,EAAE,CAAA;oBAC1B,UAAU,CAAC,IAAI,CAAC,CAAA;gBAClB,CAAC,EAAE,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,KAAG,GACA,EACT,qBAAqB,IAAI,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YACvE,KAAC,YAAY,IAAC,MAAM,EAAE,QAAQ,GAAI,GAC9B,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,WAAW,CAAC,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,aAClE,IAAI,iBACA,CAAC,OAAO,YAErB,MAAC,IAAI,IAAC,SAAS,EAAC,SAAS,EAAC,CAAC,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,aACnF,MAAC,IAAI,eACH,MAAC,IAAI,IAAC,cAAc,EAAC,eAAe,EAAC,CAAC,EAAC,MAAM,aAC3C,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,YAClB,CAAC,CAAC,aAAa,GACX,EACP,KAAC,OAAO,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAC3D,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YACxE,KAAC,SAAS,KAAG,GACL,IACL,EAEP,KAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,GAAI,EAEnE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,YACvE,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,cACjC,KAAC,cAAc,IACb,UAAU,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,EACtC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,WAAW,YAEpB,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,YAC5D,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,EAAC,GAAG,YAC7B,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,KAAC,gBAAgB,IAAe,YAAY,EAAE,IAAI,EAChD,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAD7C,IAAI,CAAC,EAAE,CAC0C,CACzE,CAAC,GACG,GACI,GACE,GACP;wCACV,CAAC;4CACD,4BACG,oBAAoB,GACpB,GAEQ,IACV,EAEP,KAAC,IAAI,IAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC,YAClB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAC9D,OAAO,EAAE,GAAG,EAAE;oCACZ,UAAU,CAAC,KAAK,CAAC,CAAA;oCACjB,cAAc,EAAE,CAAA;gCAClB,CAAC,YACD,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAC1B,CAAC,CAAC,MAAM,GACJ,GACA,GACJ,IACF,GAGgB,IACpB,CAAC,CAAA;AACV,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,aAAa,EAAE,eAAe;QAC9B,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,0BAA0B;QACrC,YAAY,EAAE,6BAA6B;QAC3C,UAAU,EAAE,2BAA2B;QACvC,YAAY,EAAE,6BAA6B;QAC3C,SAAS,EAAE,0BAA0B;QACrC,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,QAAQ;QAChB,GAAG,EAAE,KAAK;QACV,MAAM,EAAE,uBAAuB;KAChC;IACD,EAAE,EAAE;QACF,aAAa,EAAE,cAAc;QAC7B,GAAG,EAAE,OAAO;QACZ,SAAS,EAAE,gCAAgC;QAC3C,YAAY,EAAE,gCAAgC;QAC9C,UAAU,EAAE,uCAAuC;QACnD,YAAY,EAAE,wCAAwC;QACtD,SAAS,EAAE,wCAAwC;QACnD,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO;QACf,GAAG,EAAE,OAAO;QACZ,MAAM,EAAE,2BAA2B;KACpC;CACmB,CAAA"}
1
+ {"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"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"}
package/dist/components/Notifications/NotificationItem.d.ts CHANGED
@@ -4,8 +4,8 @@ interface Props {
4
4
  isSummary: boolean;
5
5
  }
6
6
  interface NotificationItemProps extends Props {
7
- onClickMarkRead: () => void;
7
+ onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void;
8
8
  }
9
- export declare const NotificationItem: ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const NotificationItem: ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
10
10
  export {};
11
11
  //# sourceMappingURL=NotificationItem.d.ts.map
package/dist/components/Notifications/NotificationItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AA8ED,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,iDAAkD,qBAAqB,4CAQnG,CAAA"}
1
+ {"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AAmFD,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/E;AAED,eAAO,MAAM,gBAAgB,uDAAwD,qBAAqB,4CAQzG,CAAA"}
package/dist/components/Notifications/NotificationItem.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Button, Flex, IconBox, Text } from '@citric/core';
3
3
  import { Envelope, EnvelopeOpen } from '@citric/icons';
4
+ import { Tooltip } from '@citric/ui';
4
5
  import { theme } from '@stack-spot/portal-theme';
5
6
  import { useTranslate } from '@stack-spot/portal-translate';
6
7
  import { differenceInDays, parseISO } from 'date-fns';
@@ -18,9 +19,12 @@ const statusToColor = {
18
19
  MEDIUM: 'warning.500',
19
20
  HIGH: 'danger.500',
20
21
  };
21
- const NotificationHeader = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { justifyContent: "space-between", mb: 2, children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', children: notification.title }), _jsx(IconBox, { appearance: "circle", onClick: () => {
22
- !notification.committed && onClickMarkRead();
23
- }, sx: { border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) })] }));
22
+ const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }) => {
23
+ const t = useTranslate(dictionary);
24
+ return (_jsxs(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '344px' : '100%' }, flexWrap: "nowrap", children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: notification.title }), _jsx(Tooltip, { text: notification.committed ? t.markAsRead : t.markAsUnread, position: "left", children: _jsx(IconBox, { appearance: "circle", onClick: () => {
25
+ onClickMarkReadUnread(!notification.committed, 'icon');
26
+ }, sx: { border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) })] }));
27
+ };
24
28
  const getDaysAgo = (dateString) => {
25
29
  const givenDate = parseISO(dateString);
26
30
  const today = new Date();
@@ -32,12 +36,12 @@ const NotificationContent = ({ notification, isSummary }) => {
32
36
  const daysAgo = getDaysAgo(notification.trigger_at);
33
37
  return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: notification.description }) }), _jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && _jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: formatDate(notification.created_at) }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" })] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today })] })] }));
34
38
  };
35
- const NotificationFooter = ({ call_to_action, onClickMarkRead }) => {
39
+ const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }) => {
36
40
  const t = useTranslate(dictionary);
37
41
  const Link = useAnchorTag();
38
- return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: onClickMarkRead, children: _jsx(Link, { href: call_to_action, children: _jsx(Text, { colorScheme: 'inverse.contrastText', children: t.takeMeThere }) }) }) }));
42
+ return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkReadUnread('callToAction'), children: _jsx(Link, { href: call_to_action, children: _jsx(Text, { colorScheme: 'inverse.contrastText', children: t.takeMeThere }) }) }) }));
39
43
  };
40
- export const NotificationItem = ({ notification, isSummary, onClickMarkRead }) => (_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkRead: onClickMarkRead }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkRead: onClickMarkRead })] }));
44
+ export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }) => (_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkReadUnread: onClickMarkReadUnread }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkReadUnread: (type) => onClickMarkReadUnread(!notification.committed, type) })] }));
41
45
  const dictionary = {
42
46
  en: {
43
47
  takeMeThere: 'Take me there',
@@ -46,6 +50,8 @@ const dictionary = {
46
50
  STUDIO: 'Studio',
47
51
  daysAgo: 'days ago',
48
52
  today: 'today',
53
+ markAsRead: 'Mark as read',
54
+ markAsUnread: 'Mark as unread',
49
55
  },
50
56
  pt: {
51
57
  takeMeThere: 'Leve-me para lá',
@@ -54,6 +60,8 @@ const dictionary = {
54
60
  STUDIO: 'Estúdio',
55
61
  daysAgo: 'dias atrás',
56
62
  today: 'hoje',
63
+ markAsRead: 'Marcar como lido',
64
+ markAsUnread: 'Marcar como não lido',
57
65
  },
58
66
  };
59
67
  //# sourceMappingURL=NotificationItem.js.map
package/dist/components/Notifications/NotificationItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
package/dist/components/ScrollView.d.ts CHANGED
@@ -22,6 +22,11 @@ interface Props {
22
22
  */
23
23
  scrollType?: 'auto' | 'scroll';
24
24
  }
25
+ /**
26
+ * Renders a component that provides scrolling.
27
+ *
28
+ * @param options the props for rendering the component: {@link Props}.
29
+ */
25
30
  export declare const ScrollView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
26
31
  export {};
27
32
  //# sourceMappingURL=ScrollView.d.ts.map
package/dist/components/ScrollView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAIvF,KAAK,KAAK,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;AAEtE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAQD,eAAO,MAAM,UAAU,0OAgBtB,CAAA"}
1
+ {"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AAIvF,KAAK,KAAK,GAAG,6BAA6B,GAAG,yBAAyB,CAAA;AAEtE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAQD;;;;GAIG;AAEH,eAAO,MAAM,UAAU,0OAgBtB,CAAA"}
package/dist/components/ScrollView.js CHANGED
@@ -5,6 +5,11 @@ function getDirectionStyle({ direction = 'both', scrollType = 'auto' }) {
5
5
  const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : '';
6
6
  return `${x}${y}`;
7
7
  }
8
+ /**
9
+ * Renders a component that provides scrolling.
10
+ *
11
+ * @param options the props for rendering the component: {@link Props}.
12
+ */
8
13
  export const ScrollView = styled.div `
9
14
  ${getDirectionStyle}
10
15
  &::-webkit-scrollbar {
package/dist/components/ScrollView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA0B1C,SAAS,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,UAAU,GAAG,MAAM,EAAS;IAC3E,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAChG,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9F,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,CAAA;AACnB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAO;IACvC,iBAAiB;;;;;;kBAMH,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;;;;kBAMpE,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;CAGrF,CAAA"}
1
+ {"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../src/components/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AA0B1C,SAAS,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,UAAU,GAAG,MAAM,EAAS;IAC3E,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAChG,MAAM,CAAC,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9F,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,CAAA;AACnB,CAAC;AAED;;;;GAIG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAO;IACvC,iBAAiB;;;;;;kBAMH,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;;;;kBAMpE,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;;;CAGrF,CAAA"}
package/dist/components/StatusCircle.d.ts CHANGED
@@ -1,14 +1,26 @@
1
1
  /// <reference types="react" />
2
2
  export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress';
3
3
  interface Props {
4
+ /** The status of the component which determines its color */
4
5
  status?: Status;
6
+ /** Tooltip text to be displayed on hover */
5
7
  tooltip?: string;
6
8
  }
7
9
  interface WithTooltip {
10
+ /** Tooltip text to be displayed on hover */
8
11
  tooltip?: string;
12
+ /** Additional class names for the component */
9
13
  className?: string;
14
+ /** Inline styles for the component */
10
15
  style?: React.CSSProperties;
11
16
  }
17
+ /**
18
+ * StatusCircle component that displays a colored circle based on the status.
19
+ * It also supports an optional tooltip.
20
+ *
21
+ * @param {Props} props - The props for the StatusCircle component.
22
+ * @returns {JSX.Element} The StatusCircle component.
23
+ */
12
24
  export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
13
25
  export {};
14
26
  //# sourceMappingURL=StatusCircle.d.ts.map
package/dist/components/StatusCircle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAOD,eAAO,MAAM,YAAY,4LALiC,WAAW,4FAUpE,CAAA"}
1
+ {"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAaD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4LAZiC,WAAW,4FAiBpE,CAAA"}
package/dist/components/StatusCircle.js CHANGED
@@ -9,14 +9,34 @@ const statusToColor = {
9
9
  progress: 'secondary.500',
10
10
  unknown: 'light.contrastText',
11
11
  };
12
+ /**
13
+ * Get the color corresponding to the status.
14
+ *
15
+ * @param {Theme} theme - The theme object.
16
+ * @param {Status} [status] - The status of the component.
17
+ * @returns {string} The color corresponding to the status.
18
+ */
12
19
  function getColorFromStatus(theme, status) {
13
20
  const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown;
14
21
  return getColor(theme, colorName);
15
22
  }
23
+ /**
24
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
25
+ *
26
+ * @param {WithTooltip} props - The props for the CircleWithTooltip component.
27
+ * @returns {JSX.Element} The CircleWithTooltip component.
28
+ */
16
29
  const CircleWithTooltip = ({ tooltip, className, style }) => {
17
30
  const circle = _jsx("div", { style: style, className: className });
18
31
  return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
19
32
  };
33
+ /**
34
+ * StatusCircle component that displays a colored circle based on the status.
35
+ * It also supports an optional tooltip.
36
+ *
37
+ * @param {Props} props - The props for the StatusCircle component.
38
+ * @returns {JSX.Element} The StatusCircle component.
39
+ */
20
40
  export const StatusCircle = styled(CircleWithTooltip) `
21
41
  background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
22
42
  width: 12px;
package/dist/components/StatusCircle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAWtC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAQD,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}
1
+ {"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/portal-components",
3
- "version": "1.3.0-rc",
3
+ "version": "1.3.2-rc",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/AsyncContent.tsx CHANGED
@@ -37,6 +37,14 @@ interface Props {
37
37
  errorDetails: ErrorProps,
38
38
  }
39
39
 
40
+ /**
41
+ * Renders a component that provides user feedback on async requests.
42
+ * It renders either a loading component, an error component (which is received as prop)
43
+ * or the received children props.
44
+ *
45
+ * @param options the props for rendering the component: {@link Props}.
46
+ */
47
+
40
48
  export const AsyncContent = ({ loading, error, autofocus, children, errorDetails }: Props) => {
41
49
  const ErrorComponent = errorDetails.errorComponent
42
50
 
package/src/components/InfiniteScroll.tsx CHANGED
@@ -1,6 +1,14 @@
1
1
  import { LoadingCircular } from '@citric/ui'
2
2
  import ReactInfiniteScroll, { Props as ReactInfiniteScrollProps } from 'react-infinite-scroll-component'
3
3
 
4
+ /**
5
+ * Renders a component that provides infinite scroll.
6
+ *
7
+ * The component wraps around the ReactInfiniteScroll component.
8
+ * It provides a loading indicator using citric loading circular and custom styles.
9
+ *
10
+ * By default, it adds the scrollable target as page and overflow hidden.
11
+ */
4
12
  export const InfiniteScroll = ({ style, children, scrollableTarget, ...props }: Omit<ReactInfiniteScrollProps, 'loader'>) => (
5
13
  <ReactInfiniteScroll
6
14
  loader={<LoadingCircular />}
package/src/components/Notifications/NotificationComponent.tsx CHANGED
@@ -23,7 +23,7 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
23
23
  z-index: 1;
24
24
  visibility: hidden;
25
25
  position: absolute;
26
- top: calc(var(--header-height) - 2px);
26
+ top: calc(var(--header-height) + 6px);
27
27
  right: -270%;
28
28
  width: 400px;
29
29
 
@@ -46,11 +46,11 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
46
46
  &::after {
47
47
  content: '';
48
48
  position: absolute;
49
- border-width: 10px;
49
+ border-width: 9px 19px;
50
50
  border-style: solid;
51
51
  border-color: transparent;
52
52
  bottom: 100%;
53
- left: 74%;
53
+ left: 71%;
54
54
  margin-left: -5px;
55
55
  transform: rotate(180deg);
56
56
  border-top-color: ${theme.color.light[400]};
@@ -128,7 +128,7 @@ const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterPr
128
128
  }
129
129
 
130
130
  interface Props {
131
- onMarkAsRead: (notificationId: string) => void,
131
+ onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void,
132
132
  notifications?: StackspotNotification[],
133
133
  isLoading: boolean,
134
134
  error?: any,
@@ -144,7 +144,7 @@ interface Props {
144
144
  }
145
145
 
146
146
  export const NotificationComponent = ({
147
- hasUnreadNotification, onMarkAsRead, notifications, isLoading, error,
147
+ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error,
148
148
  type, onUpdateType,
149
149
  onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage,
150
150
  placeholderComponent, isSummary=false,
@@ -174,7 +174,7 @@ export const NotificationComponent = ({
174
174
  aria-hidden={!visible}
175
175
  >
176
176
  <Flex className="content" p={5} flexDirection="column" justifyContent="space-between">
177
- <Flex>
177
+ <Flex w="100%">
178
178
  <Flex justifyContent="space-between" w="100%" >
179
179
  <Text appearance="h4">
180
180
  {t.notifications}
@@ -198,7 +198,7 @@ export const NotificationComponent = ({
198
198
  <Flex sx={{ gap: '4px' }} mr="3">
199
199
  {notifications?.map((item) => (
200
200
  <NotificationItem key={item.id} notification={item}
201
- isSummary={isSummary} onClickMarkRead={() => onMarkAsRead(item.id)} />
201
+ isSummary={isSummary} onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)} />
202
202
  ))}
203
203
  </Flex>
204
204
  </ScrollView>
package/src/components/Notifications/NotificationItem.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, SxProp, Text } from '@citric/core'
2
2
  import { Envelope, EnvelopeOpen } from '@citric/icons'
3
+ import { Tooltip } from '@citric/ui'
3
4
  import { theme } from '@stack-spot/portal-theme'
4
5
  import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
5
6
  import { differenceInDays, parseISO } from 'date-fns'
@@ -26,20 +27,25 @@ interface Props {
26
27
  isSummary: boolean,
27
28
  }
28
29
 
29
- const NotificationHeader = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
30
- <Flex justifyContent="space-between" mb={2}>
31
- <Text appearance={isSummary ? 'body2' : 'body1'}>
32
- {notification.title}
33
- </Text>
34
- <IconBox appearance="circle"
35
- onClick={() => {
36
- !notification.committed && onClickMarkRead()
37
- }}
38
- sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: notification.committed ? 'default' : 'pointer' }}>
39
- {notification.committed ? <Envelope /> : <EnvelopeOpen />}
40
- </IconBox>
41
- </Flex>
42
- )
30
+ const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
31
+ const t = useTranslate(dictionary)
32
+ return (
33
+ <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '344px' : '100%' }} flexWrap="nowrap">
34
+ <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
35
+ {notification.title}
36
+ </Text>
37
+ <Tooltip text={notification.committed ? t.markAsRead : t.markAsUnread} position="left">
38
+ <IconBox appearance="circle"
39
+ onClick={() => {
40
+ onClickMarkReadUnread(!notification.committed, 'icon')
41
+ }}
42
+ sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }}>
43
+ {notification.committed ? <Envelope /> : <EnvelopeOpen />}
44
+ </IconBox>
45
+ </Tooltip>
46
+ </Flex>
47
+ )
48
+ }
43
49
 
44
50
  const getDaysAgo = (dateString: string): number => {
45
51
  const givenDate = parseISO(dateString)
@@ -82,16 +88,16 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
82
88
  }
83
89
  interface NotificationFooterProps {
84
90
  call_to_action: string,
85
- onClickMarkRead: () => void,
91
+ onClickMarkReadUnread: (type: 'callToAction' | 'icon') => void,
86
92
  }
87
93
 
88
- const NotificationFooter = ({ call_to_action, onClickMarkRead }: NotificationFooterProps) => {
94
+ const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }: NotificationFooterProps) => {
89
95
  const t = useTranslate(dictionary)
90
96
  const Link = useAnchorTag()
91
97
 
92
98
  return (
93
99
  <Flex mt="5">
94
- <Button size="sm" colorScheme="inverse" onClick={onClickMarkRead}>
100
+ <Button size="sm" colorScheme="inverse" onClick={() => onClickMarkReadUnread('callToAction')}>
95
101
  <Link href={call_to_action}>
96
102
  <Text colorScheme={'inverse.contrastText'}>
97
103
  {t.takeMeThere}
@@ -103,16 +109,16 @@ const NotificationFooter = ({ call_to_action, onClickMarkRead }: NotificationFoo
103
109
  }
104
110
 
105
111
  interface NotificationItemProps extends Props {
106
- onClickMarkRead: () => void,
112
+ onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void,
107
113
  }
108
114
 
109
- export const NotificationItem = ({ notification, isSummary, onClickMarkRead }: NotificationItemProps) => (
115
+ export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => (
110
116
  <Flex bg="light.400" p="3 3 3 5" r="xs"
111
117
  flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
112
- <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkRead={onClickMarkRead}/>
118
+ <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
113
119
  <NotificationContent notification={notification} isSummary={isSummary} />
114
120
  {notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action}
115
- onClickMarkRead={onClickMarkRead} />}
121
+ onClickMarkReadUnread={(type) => onClickMarkReadUnread(!notification.committed, type)} />}
116
122
  </Flex>
117
123
  )
118
124
 
@@ -124,6 +130,8 @@ const dictionary = {
124
130
  STUDIO: 'Studio',
125
131
  daysAgo: 'days ago',
126
132
  today: 'today',
133
+ markAsRead: 'Mark as read',
134
+ markAsUnread: 'Mark as unread',
127
135
  },
128
136
  pt: {
129
137
  takeMeThere: 'Leve-me para lá',
@@ -132,5 +140,7 @@ const dictionary = {
132
140
  STUDIO: 'Estúdio',
133
141
  daysAgo: 'dias atrás',
134
142
  today: 'hoje',
143
+ markAsRead: 'Marcar como lido',
144
+ markAsUnread: 'Marcar como não lido',
135
145
  },
136
146
  } satisfies Dictionary
package/src/components/ScrollView.tsx CHANGED
@@ -32,6 +32,12 @@ function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
32
32
  return `${x}${y}`
33
33
  }
34
34
 
35
+ /**
36
+ * Renders a component that provides scrolling.
37
+ *
38
+ * @param options the props for rendering the component: {@link Props}.
39
+ */
40
+
35
41
  export const ScrollView = styled.div<Props>`
36
42
  ${getDirectionStyle}
37
43
  &::-webkit-scrollbar {
package/src/components/StatusCircle.tsx CHANGED
@@ -8,7 +8,9 @@ type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
8
8
  export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress'
9
9
 
10
10
  interface Props {
11
+ /** The status of the component which determines its color */
11
12
  status?: Status,
13
+ /** Tooltip text to be displayed on hover */
12
14
  tooltip?: string,
13
15
  }
14
16
 
@@ -20,22 +22,45 @@ const statusToColor: Record<Status, Color> = {
20
22
  unknown: 'light.contrastText',
21
23
  }
22
24
 
25
+ /**
26
+ * Get the color corresponding to the status.
27
+ *
28
+ * @param {Theme} theme - The theme object.
29
+ * @param {Status} [status] - The status of the component.
30
+ * @returns {string} The color corresponding to the status.
31
+ */
23
32
  function getColorFromStatus(theme: Theme, status?: Status) {
24
33
  const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown
25
34
  return getColor(theme, colorName)
26
35
  }
27
36
 
28
37
  interface WithTooltip {
38
+ /** Tooltip text to be displayed on hover */
29
39
  tooltip?: string,
40
+ /** Additional class names for the component */
30
41
  className?: string,
42
+ /** Inline styles for the component */
31
43
  style?: React.CSSProperties,
32
44
  }
33
45
 
46
+ /**
47
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
48
+ *
49
+ * @param {WithTooltip} props - The props for the CircleWithTooltip component.
50
+ * @returns {JSX.Element} The CircleWithTooltip component.
51
+ */
34
52
  const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
35
53
  const circle = <div style={style} className={className}></div>
36
54
  return tooltip && tooltip.length ? <Tooltip text={tooltip}>{circle}</Tooltip> : circle
37
55
  }
38
56
 
57
+ /**
58
+ * StatusCircle component that displays a colored circle based on the status.
59
+ * It also supports an optional tooltip.
60
+ *
61
+ * @param {Props} props - The props for the StatusCircle component.
62
+ * @returns {JSX.Element} The StatusCircle component.
63
+ */
39
64
  export const StatusCircle = styled(CircleWithTooltip)<Props>`
40
65
  background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};
41
66
  width: 12px;