@synerise/ds-insight 1.1.15 → 1.1.17
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/CHANGELOG.md +8 -0
- package/README.md +2 -2
- package/dist/Insight.d.ts +2 -2
- package/dist/Insight.js +37 -35
- package/dist/Insight.styles.d.ts +8 -8
- package/dist/Insight.styles.js +25 -23
- package/dist/Insight.types.d.ts +3 -3
- package/dist/Insight.types.js +1 -1
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.16...@synerise/ds-insight@1.1.17) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-insight
|
|
9
|
+
|
|
10
|
+
## [1.1.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.15...@synerise/ds-insight@1.1.16) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-insight
|
|
13
|
+
|
|
6
14
|
## [1.1.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-insight@1.1.14...@synerise/ds-insight@1.1.15) (2026-02-19)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-insight
|
package/README.md
CHANGED
|
@@ -32,9 +32,9 @@ import Insight from '@synerise/ds-insight'
|
|
|
32
32
|
| --------------- | ------------------------------------------------------------------- | ------------------------------ | ------- |
|
|
33
33
|
| avatar | avatar component | ReactNode | - |
|
|
34
34
|
| subTitle | text under title of Insight | ReactNode | - |
|
|
35
|
-
| title | title of Insight
|
|
35
|
+
| title | title of Insight (**required**) | ReactNode | - |
|
|
36
36
|
| headerRightSide | component on right side of Insight | ReactNode | - |
|
|
37
37
|
| footer | render components in footer | ReactNode | - |
|
|
38
|
-
| onClick | The callback function that is triggered when click on outer wrapper |
|
|
38
|
+
| onClick | The callback function that is triggered when click on outer wrapper | `() => void` | - |
|
|
39
39
|
| content | render components inside Insight | ReactNode / InlineAlertProps[] | - |
|
|
40
40
|
| className | Insight className | string | - |
|
package/dist/Insight.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InsightProps } from './Insight.types';
|
|
3
3
|
declare const Insight: ({ title, subTitle, avatar, headerRightSide, content, footer, onClick, className, ...htmlAttributes }: InsightProps) => React.JSX.Element;
|
|
4
4
|
export default Insight;
|
package/dist/Insight.js
CHANGED
|
@@ -1,40 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var isInlineAlertPropsArray = function isInlineAlertPropsArray(value) {
|
|
8
|
-
return Array.isArray(value) && value.length > 0 && value.every(function (item) {
|
|
9
|
-
return typeof item === 'object' && item !== null && ! /*#__PURE__*/React.isValidElement(item) && 'message' in item && 'type' in item;
|
|
10
|
-
});
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useMemo } from "react";
|
|
3
|
+
import InlineAlert from "@synerise/ds-inline-alert";
|
|
4
|
+
import { InsightContainer, InsightHeaderBar, InsightAvatarWrapper, InsightTextWrapper, Title, SubTitle, InsightContent, InsightFooter } from "./Insight.styles.js";
|
|
5
|
+
const isInlineAlertPropsArray = (value) => {
|
|
6
|
+
return Array.isArray(value) && value.length > 0 && value.every((item) => typeof item === "object" && item !== null && !React.isValidElement(item) && "message" in item && "type" in item);
|
|
11
7
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
8
|
+
const Insight = ({
|
|
9
|
+
title,
|
|
10
|
+
subTitle,
|
|
11
|
+
avatar,
|
|
12
|
+
headerRightSide,
|
|
13
|
+
content,
|
|
14
|
+
footer,
|
|
15
|
+
onClick,
|
|
16
|
+
className,
|
|
17
|
+
...htmlAttributes
|
|
18
|
+
}) => {
|
|
19
|
+
const renderedContent = useMemo(() => {
|
|
23
20
|
if (isInlineAlertPropsArray(content)) {
|
|
24
|
-
return content.map(
|
|
25
|
-
return /*#__PURE__*/React.createElement(InlineAlert, _extends({
|
|
26
|
-
key: index
|
|
27
|
-
}, props));
|
|
28
|
-
});
|
|
21
|
+
return content.map((props, index) => /* @__PURE__ */ jsx(InlineAlert, { ...props }, index));
|
|
29
22
|
}
|
|
30
|
-
return content
|
|
23
|
+
return content ?? null;
|
|
31
24
|
}, [content]);
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
return /* @__PURE__ */ jsxs(InsightContainer, { className: `ds-insight ${className || ""}`, hasHover: !!onClick, onClick, ...htmlAttributes, children: [
|
|
26
|
+
/* @__PURE__ */ jsxs(InsightHeaderBar, { children: [
|
|
27
|
+
/* @__PURE__ */ jsxs(InsightAvatarWrapper, { children: [
|
|
28
|
+
avatar,
|
|
29
|
+
/* @__PURE__ */ jsxs(InsightTextWrapper, { avatar: !!avatar, children: [
|
|
30
|
+
/* @__PURE__ */ jsx(Title, { children: title }),
|
|
31
|
+
/* @__PURE__ */ jsx(SubTitle, { children: subTitle })
|
|
32
|
+
] })
|
|
33
|
+
] }),
|
|
34
|
+
headerRightSide
|
|
35
|
+
] }),
|
|
36
|
+
renderedContent && /* @__PURE__ */ jsx(InsightContent, { children: renderedContent }),
|
|
37
|
+
footer && /* @__PURE__ */ jsx(InsightFooter, { children: footer })
|
|
38
|
+
] });
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
Insight as default
|
|
39
42
|
};
|
|
40
|
-
export default Insight;
|
package/dist/Insight.styles.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export declare const InsightContainer: import(
|
|
1
|
+
export declare const InsightContainer: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
hasHover?: boolean;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const InsightContent: import(
|
|
5
|
-
export declare const SubTitle: import(
|
|
6
|
-
export declare const Title: import(
|
|
7
|
-
export declare const InsightHeaderBar: import(
|
|
8
|
-
export declare const InsightAvatarWrapper: import(
|
|
9
|
-
export declare const InsightTextWrapper: import(
|
|
4
|
+
export declare const InsightContent: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const SubTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const Title: import('styled-components').StyledComponent<"label", any, {}, never>;
|
|
7
|
+
export declare const InsightHeaderBar: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const InsightAvatarWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const InsightTextWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
10
10
|
avatar?: boolean;
|
|
11
11
|
}, never>;
|
|
12
|
-
export declare const InsightFooter: import(
|
|
12
|
+
export declare const InsightFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
|
package/dist/Insight.styles.js
CHANGED
|
@@ -1,43 +1,45 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const InsightContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "Insightstyles__InsightContainer",
|
|
4
4
|
componentId: "sc-4cncfc-0"
|
|
5
|
-
})(["display:flex;flex-direction:column;background-color:", ";gap:16px;padding:24px;width:100%;border-bottom:solid 1px ", ";", ";"],
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
}, function (props) {
|
|
10
|
-
return props.hasHover && "&:hover {\n background-color: " + props.theme.palette['grey-050'] + ";\n }";
|
|
11
|
-
});
|
|
12
|
-
export var InsightContent = styled.div.withConfig({
|
|
5
|
+
})(["display:flex;flex-direction:column;background-color:", ";gap:16px;padding:24px;width:100%;border-bottom:solid 1px ", ";", ";"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-200"], (props) => props.hasHover && `&:hover {
|
|
6
|
+
background-color: ${props.theme.palette["grey-050"]};
|
|
7
|
+
}`);
|
|
8
|
+
const InsightContent = /* @__PURE__ */ styled.div.withConfig({
|
|
13
9
|
displayName: "Insightstyles__InsightContent",
|
|
14
10
|
componentId: "sc-4cncfc-1"
|
|
15
11
|
})(["display:flex;flex-direction:column;justify-content:center;gap:4px;"]);
|
|
16
|
-
|
|
12
|
+
const SubTitle = /* @__PURE__ */ styled.div.withConfig({
|
|
17
13
|
displayName: "Insightstyles__SubTitle",
|
|
18
14
|
componentId: "sc-4cncfc-2"
|
|
19
15
|
})(["display:flex;"]);
|
|
20
|
-
|
|
16
|
+
const Title = /* @__PURE__ */ styled.label.withConfig({
|
|
21
17
|
displayName: "Insightstyles__Title",
|
|
22
18
|
componentId: "sc-4cncfc-3"
|
|
23
|
-
})(["color:", ";font-weight:500;display:block;font-size:14px;"],
|
|
24
|
-
|
|
25
|
-
});
|
|
26
|
-
export var InsightHeaderBar = styled.div.withConfig({
|
|
19
|
+
})(["color:", ";font-weight:500;display:block;font-size:14px;"], (props) => props.theme.palette["grey-800"]);
|
|
20
|
+
const InsightHeaderBar = /* @__PURE__ */ styled.div.withConfig({
|
|
27
21
|
displayName: "Insightstyles__InsightHeaderBar",
|
|
28
22
|
componentId: "sc-4cncfc-4"
|
|
29
23
|
})(["display:flex;justify-content:space-between;"]);
|
|
30
|
-
|
|
24
|
+
const InsightAvatarWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
31
25
|
displayName: "Insightstyles__InsightAvatarWrapper",
|
|
32
26
|
componentId: "sc-4cncfc-5"
|
|
33
27
|
})(["display:flex;justify-content:center;align-items:center;"]);
|
|
34
|
-
|
|
28
|
+
const InsightTextWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
35
29
|
displayName: "Insightstyles__InsightTextWrapper",
|
|
36
30
|
componentId: "sc-4cncfc-6"
|
|
37
|
-
})(["display:flex;flex-direction:column;margin-left:", ";"],
|
|
38
|
-
|
|
39
|
-
});
|
|
40
|
-
export var InsightFooter = styled.div.withConfig({
|
|
31
|
+
})(["display:flex;flex-direction:column;margin-left:", ";"], (props) => props.avatar ? "12px" : "0");
|
|
32
|
+
const InsightFooter = /* @__PURE__ */ styled.div.withConfig({
|
|
41
33
|
displayName: "Insightstyles__InsightFooter",
|
|
42
34
|
componentId: "sc-4cncfc-7"
|
|
43
|
-
})(["display:flex;"]);
|
|
35
|
+
})(["display:flex;"]);
|
|
36
|
+
export {
|
|
37
|
+
InsightAvatarWrapper,
|
|
38
|
+
InsightContainer,
|
|
39
|
+
InsightContent,
|
|
40
|
+
InsightFooter,
|
|
41
|
+
InsightHeaderBar,
|
|
42
|
+
InsightTextWrapper,
|
|
43
|
+
SubTitle,
|
|
44
|
+
Title
|
|
45
|
+
};
|
package/dist/Insight.types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { InlineAlertProps } from '@synerise/ds-inline-alert';
|
|
3
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
4
4
|
export type InsightProps = WithHTMLAttributes<HTMLDivElement, {
|
|
5
5
|
avatar?: ReactNode;
|
|
6
6
|
headerRightSide?: ReactNode;
|
package/dist/Insight.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-insight",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.17",
|
|
4
4
|
"description": "Insight UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"prepublish": "pnpm run build",
|
|
25
25
|
"types": "tsc --noEmit",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-inline-alert": "^1.1.
|
|
38
|
-
"@synerise/ds-utils": "^1.
|
|
37
|
+
"@synerise/ds-inline-alert": "^1.1.15",
|
|
38
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@synerise/ds-core": "*",
|
|
42
42
|
"react": ">=16.9.0 <= 18.3.1",
|
|
43
43
|
"styled-components": "^5.3.3"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
46
46
|
}
|