@synerise/ds-divider 1.3.1 → 1.3.2
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 +4 -0
- package/dist/Divider.d.ts +2 -2
- package/dist/Divider.js +20 -17
- package/dist/Divider.styles.d.ts +1 -1
- package/dist/Divider.styles.js +9 -7
- package/dist/Divider.types.d.ts +2 -2
- package/dist/Divider.types.js +1 -1
- package/dist/components/Line.const.d.ts +2 -2
- package/dist/components/Line.const.js +17 -14
- package/dist/components/Line.d.ts +2 -2
- package/dist/components/Line.js +18 -33
- package/dist/components/Line.styles.d.ts +2 -2
- package/dist/components/Line.styles.js +10 -19
- 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,10 @@
|
|
|
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.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-divider@1.3.1...@synerise/ds-divider@1.3.2) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-divider
|
|
9
|
+
|
|
6
10
|
## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-divider@1.3.0...@synerise/ds-divider@1.3.1) (2026-03-20)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-divider
|
package/dist/Divider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { DividerProps } from './Divider.types';
|
|
3
3
|
declare const Divider: (props: DividerProps) => React.JSX.Element;
|
|
4
4
|
export default Divider;
|
package/dist/Divider.js
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { Line } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
hiddenLine =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Label } from "./Divider.styles.js";
|
|
3
|
+
import { Line } from "./components/Line.js";
|
|
4
|
+
const Divider = (props) => {
|
|
5
|
+
const {
|
|
6
|
+
labelAbove,
|
|
7
|
+
labelBelow,
|
|
8
|
+
hiddenLine = false
|
|
9
|
+
} = props;
|
|
10
|
+
const contentAbove = labelAbove && /* @__PURE__ */ jsx(Label, { level: 7, children: labelAbove });
|
|
11
|
+
const contentBelow = labelBelow && /* @__PURE__ */ jsx(Label, { level: 7, children: labelBelow });
|
|
12
|
+
const line = !hiddenLine && /* @__PURE__ */ jsx(Line, { ...props });
|
|
13
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
14
|
+
contentAbove,
|
|
15
|
+
line,
|
|
16
|
+
contentBelow
|
|
17
|
+
] });
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
Divider as default
|
|
17
21
|
};
|
|
18
|
-
export default Divider;
|
package/dist/Divider.styles.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Label: import(
|
|
1
|
+
export declare const Label: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
|
package/dist/Divider.styles.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import { Title } from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { Title } from "@synerise/ds-typography";
|
|
3
|
+
const Label = /* @__PURE__ */ styled(Title).withConfig({
|
|
4
4
|
displayName: "Dividerstyles__Label",
|
|
5
5
|
componentId: "sc-1euulm7-0"
|
|
6
|
-
})(["text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"],
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
})(["text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], ({
|
|
7
|
+
theme
|
|
8
|
+
}) => theme.palette["grey-500"]);
|
|
9
|
+
export {
|
|
10
|
+
Label
|
|
11
|
+
};
|
package/dist/Divider.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
3
3
|
export type DividerType = 'vertical' | 'horizontal';
|
|
4
4
|
export type DividerProps = WithHTMLAttributes<HTMLDivElement, {
|
|
5
5
|
marginTop?: number;
|
package/dist/Divider.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { SVGAttributes } from 'react';
|
|
2
|
+
import { DividerType } from '../Divider.types';
|
|
3
3
|
export declare const SVG_PROPS: Record<DividerType, {
|
|
4
4
|
svgAttributes: SVGAttributes<SVGElement>;
|
|
5
5
|
lineAttributes: SVGAttributes<SVGLineElement>;
|
|
@@ -1,26 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
const SVG_PROPS = {
|
|
2
2
|
horizontal: {
|
|
3
3
|
svgAttributes: {
|
|
4
|
-
viewBox:
|
|
5
|
-
width:
|
|
4
|
+
viewBox: "0 0 1 1",
|
|
5
|
+
width: "100%"
|
|
6
6
|
},
|
|
7
7
|
lineAttributes: {
|
|
8
|
-
x1:
|
|
9
|
-
y1:
|
|
10
|
-
x2:
|
|
11
|
-
y2:
|
|
8
|
+
x1: "0",
|
|
9
|
+
y1: "0",
|
|
10
|
+
x2: "1",
|
|
11
|
+
y2: "0"
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
vertical: {
|
|
15
15
|
svgAttributes: {
|
|
16
|
-
viewBox:
|
|
17
|
-
height:
|
|
16
|
+
viewBox: "0 0 1 1",
|
|
17
|
+
height: "100%"
|
|
18
18
|
},
|
|
19
19
|
lineAttributes: {
|
|
20
|
-
x1:
|
|
21
|
-
y1:
|
|
22
|
-
x2:
|
|
23
|
-
y2:
|
|
20
|
+
x1: "0",
|
|
21
|
+
y1: "0",
|
|
22
|
+
x2: "0",
|
|
23
|
+
y2: "1"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
};
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
SVG_PROPS
|
|
29
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { DividerProps } from '../Divider.types';
|
|
3
3
|
export declare const Line: ({ marginBottom, marginTop, type, dashed, withSideMargin, className, ...htmlAttributes }: DividerProps) => React.JSX.Element;
|
package/dist/components/Line.js
CHANGED
|
@@ -1,33 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
role: "separator",
|
|
20
|
-
marginTop: marginTop,
|
|
21
|
-
marginBottom: marginBottom,
|
|
22
|
-
withSideMargin: withSideMargin,
|
|
23
|
-
type: type,
|
|
24
|
-
dashed: dashed
|
|
25
|
-
}, htmlAttributes), /*#__PURE__*/React.createElement("svg", _extends({}, svgProps.svgAttributes, {
|
|
26
|
-
preserveAspectRatio: "none"
|
|
27
|
-
}), /*#__PURE__*/React.createElement("line", _extends({}, svgProps.lineAttributes, {
|
|
28
|
-
strokeWidth: 2,
|
|
29
|
-
vectorEffect: "non-scaling-stroke",
|
|
30
|
-
stroke: "currentColor",
|
|
31
|
-
strokeDasharray: "" + (dashed ? '1 2' : '')
|
|
32
|
-
}))));
|
|
33
|
-
};
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { SVG_PROPS } from "./Line.const.js";
|
|
3
|
+
import { Line as Line$1 } from "./Line.styles.js";
|
|
4
|
+
const Line = ({
|
|
5
|
+
marginBottom,
|
|
6
|
+
marginTop,
|
|
7
|
+
type = "horizontal",
|
|
8
|
+
dashed,
|
|
9
|
+
withSideMargin,
|
|
10
|
+
className,
|
|
11
|
+
...htmlAttributes
|
|
12
|
+
}) => {
|
|
13
|
+
const svgProps = SVG_PROPS[type];
|
|
14
|
+
return /* @__PURE__ */ jsx(Line$1, { className: `ds-divider-line ds-divider-${type} ds-divider-${dashed ? "dashed" : "solid"} ${className}`, role: "separator", marginTop, marginBottom, withSideMargin, type, dashed, ...htmlAttributes, children: /* @__PURE__ */ jsx("svg", { ...svgProps.svgAttributes, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx("line", { ...svgProps.lineAttributes, strokeWidth: 2, vectorEffect: "non-scaling-stroke", stroke: "currentColor", strokeDasharray: `${dashed ? "1 2" : ""}` }) }) });
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
Line
|
|
18
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Line: import(
|
|
1
|
+
import { DividerType } from '../Divider.types';
|
|
2
|
+
export declare const Line: import('styled-components').StyledComponent<"div", any, {
|
|
3
3
|
marginTop?: number;
|
|
4
4
|
marginBottom?: number;
|
|
5
5
|
withSideMargin?: boolean;
|
|
@@ -1,21 +1,12 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const Line = /* @__PURE__ */ styled.div.withConfig({
|
|
3
3
|
displayName: "Linestyles__Line",
|
|
4
4
|
componentId: "sc-1fokvnj-0"
|
|
5
|
-
})(["display:", ";vertical-align:", ";", " margin-bottom:", "px;margin-top:", "px;width:", ";height:", ";overflow:hidden;color:", ";"],
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, function (props) {
|
|
14
|
-
return props.marginTop || 0;
|
|
15
|
-
}, function (props) {
|
|
16
|
-
return props.type === 'horizontal' ? 'auto' : '1px';
|
|
17
|
-
}, function (props) {
|
|
18
|
-
return props.type === 'vertical' ? '0.9em' : '1px';
|
|
19
|
-
}, function (props) {
|
|
20
|
-
return props.dashed ? props.theme.palette['grey-400'] : props.theme.palette['grey-300'];
|
|
21
|
-
});
|
|
5
|
+
})(["display:", ";vertical-align:", ";", " margin-bottom:", "px;margin-top:", "px;width:", ";height:", ";overflow:hidden;color:", ";"], (props) => props.type === "vertical" ? "inline-block" : "block", (props) => props.type === "vertical" ? "middle" : void 0, (props) => props.type === "vertical" ? `
|
|
6
|
+
margin: 0 8px;
|
|
7
|
+
` : `
|
|
8
|
+
margin: 0 ${props.withSideMargin ? "12px" : "0px"};
|
|
9
|
+
`, (props) => props.marginBottom || 0, (props) => props.marginTop || 0, (props) => props.type === "horizontal" ? "auto" : "1px", (props) => props.type === "vertical" ? "0.9em" : "1px", (props) => props.dashed ? props.theme.palette["grey-400"] : props.theme.palette["grey-300"]);
|
|
10
|
+
export {
|
|
11
|
+
Line
|
|
12
|
+
};
|
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-divider",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Divider 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
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-typography": "^1.1.
|
|
39
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-typography": "^1.1.13",
|
|
39
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"vitest": "4"
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"react": ">=16.9.0 <= 18.3.1",
|
|
47
47
|
"styled-components": "^5.3.3"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
50
50
|
}
|