@trackunit/criticality-indicator 1.24.7 → 1.24.8

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 (5) hide show
  1. package/index.cjs.js +10 -8
  2. package/index.esm.js +11 -9
  3. package/package.json +1 -1
  4. package/src/CriticalityIndicator.d.ts +1 -1
  5. package/src/useCriticality.d.ts +9 -8
package/index.cjs.js CHANGED
@@ -64,10 +64,9 @@ const assetCriticalityState = {
64
64
  * Returns the criticality indicator props.
65
65
  *
66
66
  * @param state - The criticality state.
67
- * @param size - The size of the icon.
68
67
  * @returns {UseCriticality} - The criticality indicator props.
69
68
  */
70
- const useCriticality = (state, size = "medium") => {
69
+ const useCriticality = (state, _size) => {
71
70
  const [t] = useTranslation();
72
71
  return react.useMemo(() => {
73
72
  if (!state) {
@@ -77,7 +76,7 @@ const useCriticality = (state, size = "medium") => {
77
76
  case assetCriticalityState.Critical:
78
77
  return {
79
78
  criticalityIndicator: {
80
- icon: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "indicator-icon-critical", name: "ExclamationCircle", size: size }),
79
+ iconName: "ExclamationCircle",
81
80
  label: t("indicator.critical"),
82
81
  color: "critical",
83
82
  },
@@ -85,7 +84,7 @@ const useCriticality = (state, size = "medium") => {
85
84
  case assetCriticalityState.Low:
86
85
  return {
87
86
  criticalityIndicator: {
88
- icon: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "indicator-icon-low", name: "ExclamationTriangle", size: size }),
87
+ iconName: "ExclamationTriangle",
89
88
  label: t("indicator.low"),
90
89
  color: "low",
91
90
  },
@@ -93,7 +92,7 @@ const useCriticality = (state, size = "medium") => {
93
92
  case assetCriticalityState.None:
94
93
  return {
95
94
  criticalityIndicator: {
96
- icon: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "indicator-icon-good", name: "CheckCircle", size: size }),
95
+ iconName: "CheckCircle",
97
96
  label: t("indicator.none"),
98
97
  color: "good",
99
98
  },
@@ -101,7 +100,7 @@ const useCriticality = (state, size = "medium") => {
101
100
  default:
102
101
  return { criticalityIndicator: undefined };
103
102
  }
104
- }, [state, size, t]);
103
+ }, [state, t]);
105
104
  };
106
105
 
107
106
  /**
@@ -111,8 +110,11 @@ const useCriticality = (state, size = "medium") => {
111
110
  * @returns {ReactElement | null} Criticality indicator.
112
111
  */
113
112
  const CriticalityIndicator = (props) => {
114
- const { criticalityIndicator } = useCriticality(props.state, props.size);
115
- return criticalityIndicator ? jsxRuntime.jsx(reactComponents.Indicator, { ...criticalityIndicator, ...props }) : null;
113
+ const { criticalityIndicator } = useCriticality(props.state);
114
+ if (!criticalityIndicator)
115
+ return null;
116
+ const { iconName, ...indicatorProps } = criticalityIndicator;
117
+ return (jsxRuntime.jsx(reactComponents.Indicator, { ...indicatorProps, ...props, icon: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": `indicator-icon-${indicatorProps.color}`, name: iconName, size: props.size }) }));
116
118
  };
117
119
 
118
120
  /*
package/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
3
- import { Icon, Indicator } from '@trackunit/react-components';
3
+ import { Indicator, Icon } from '@trackunit/react-components';
4
4
  import { useMemo } from 'react';
5
5
 
6
6
  var defaultTranslations = {
@@ -62,10 +62,9 @@ const assetCriticalityState = {
62
62
  * Returns the criticality indicator props.
63
63
  *
64
64
  * @param state - The criticality state.
65
- * @param size - The size of the icon.
66
65
  * @returns {UseCriticality} - The criticality indicator props.
67
66
  */
68
- const useCriticality = (state, size = "medium") => {
67
+ const useCriticality = (state, _size) => {
69
68
  const [t] = useTranslation();
70
69
  return useMemo(() => {
71
70
  if (!state) {
@@ -75,7 +74,7 @@ const useCriticality = (state, size = "medium") => {
75
74
  case assetCriticalityState.Critical:
76
75
  return {
77
76
  criticalityIndicator: {
78
- icon: jsx(Icon, { "data-testid": "indicator-icon-critical", name: "ExclamationCircle", size: size }),
77
+ iconName: "ExclamationCircle",
79
78
  label: t("indicator.critical"),
80
79
  color: "critical",
81
80
  },
@@ -83,7 +82,7 @@ const useCriticality = (state, size = "medium") => {
83
82
  case assetCriticalityState.Low:
84
83
  return {
85
84
  criticalityIndicator: {
86
- icon: jsx(Icon, { "data-testid": "indicator-icon-low", name: "ExclamationTriangle", size: size }),
85
+ iconName: "ExclamationTriangle",
87
86
  label: t("indicator.low"),
88
87
  color: "low",
89
88
  },
@@ -91,7 +90,7 @@ const useCriticality = (state, size = "medium") => {
91
90
  case assetCriticalityState.None:
92
91
  return {
93
92
  criticalityIndicator: {
94
- icon: jsx(Icon, { "data-testid": "indicator-icon-good", name: "CheckCircle", size: size }),
93
+ iconName: "CheckCircle",
95
94
  label: t("indicator.none"),
96
95
  color: "good",
97
96
  },
@@ -99,7 +98,7 @@ const useCriticality = (state, size = "medium") => {
99
98
  default:
100
99
  return { criticalityIndicator: undefined };
101
100
  }
102
- }, [state, size, t]);
101
+ }, [state, t]);
103
102
  };
104
103
 
105
104
  /**
@@ -109,8 +108,11 @@ const useCriticality = (state, size = "medium") => {
109
108
  * @returns {ReactElement | null} Criticality indicator.
110
109
  */
111
110
  const CriticalityIndicator = (props) => {
112
- const { criticalityIndicator } = useCriticality(props.state, props.size);
113
- return criticalityIndicator ? jsx(Indicator, { ...criticalityIndicator, ...props }) : null;
111
+ const { criticalityIndicator } = useCriticality(props.state);
112
+ if (!criticalityIndicator)
113
+ return null;
114
+ const { iconName, ...indicatorProps } = criticalityIndicator;
115
+ return (jsx(Indicator, { ...indicatorProps, ...props, icon: jsx(Icon, { "data-testid": `indicator-icon-${indicatorProps.color}`, name: iconName, size: props.size }) }));
114
116
  };
115
117
 
116
118
  /*
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/criticality-indicator",
3
- "version": "1.24.7",
3
+ "version": "1.24.8",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/CriticalityIndicator.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CommonProps, IndicatorProps, type Styleable } from "@trackunit/react-components";
2
- import { ReactElement } from "react";
2
+ import type { ReactElement } from "react";
3
3
  import { AssetCriticalityState } from "./types";
4
4
  export interface CriticalityIndicatorProps extends Pick<IndicatorProps, "withBackground" | "withLabel" | "ping" | "size">, CommonProps, Styleable {
5
5
  state: AssetCriticalityState;
package/src/useCriticality.d.ts CHANGED
@@ -1,18 +1,19 @@
1
1
  import { CriticalityColors } from "@trackunit/ui-design-tokens";
2
- import { ReactElement } from "react";
3
2
  import { AssetCriticalityState } from "./types";
4
- type UseCriticality = (state?: AssetCriticalityState, size?: "small" | "medium" | "large") => {
5
- criticalityIndicator?: {
6
- icon: ReactElement;
7
- label: string;
8
- color: CriticalityColors;
9
- };
3
+ declare const criticalityIndicatorIconNames: readonly ["ExclamationCircle", "ExclamationTriangle", "CheckCircle"];
4
+ type CriticalityIndicatorIconName = (typeof criticalityIndicatorIconNames)[number];
5
+ type CriticalityIndicatorMetadata = Readonly<{
6
+ iconName: CriticalityIndicatorIconName;
7
+ label: string;
8
+ color: CriticalityColors;
9
+ }>;
10
+ type UseCriticality = (state?: AssetCriticalityState, _size?: "small" | "medium" | "large") => {
11
+ criticalityIndicator?: CriticalityIndicatorMetadata;
10
12
  };
11
13
  /**
12
14
  * Returns the criticality indicator props.
13
15
  *
14
16
  * @param state - The criticality state.
15
- * @param size - The size of the icon.
16
17
  * @returns {UseCriticality} - The criticality indicator props.
17
18
  */
18
19
  export declare const useCriticality: UseCriticality;