@synerise/ds-description 1.1.7 → 1.1.9

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 (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +2 -2
  3. package/dist/Description.js +1 -1
  4. package/dist/Description.styles.js +7 -19
  5. package/dist/Description.types.d.ts +2 -2
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-description@1.1.8...@synerise/ds-description@1.1.9) (2025-09-05)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **description:** refactor description ([3f32923](https://github.com/Synerise/synerise-design/commit/3f32923ed7f33e01e5fe79bb3da1ac01e10274da))
12
+
13
+
14
+
15
+
16
+
17
+ ## [1.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-description@1.1.7...@synerise/ds-description@1.1.8) (2025-08-28)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-description
20
+
21
+
22
+
23
+
24
+
6
25
  ## [1.1.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-description@1.1.6...@synerise/ds-description@1.1.7) (2025-08-14)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-description
package/README.md CHANGED
@@ -34,8 +34,8 @@ import Description, {DescriptionRow} from '@synerise/ds-description';
34
34
 
35
35
  | Property | Description | Type | Default |
36
36
  | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------- |
37
- | type | Type of description: `table` - description will looks like vertical table, `inline` - value will aligns to label, `dotted-list` - list with dots as prefix, without label, `numbered-list` - counted list, without labels | `table`/ `inline`/ `dotted-list`/ `numbered-list` | `table` |
38
- | ratio | Define size of column if type='table' | `20-80`/ `30-70`/ `40-60`/ `50-50`/ `60-40`/ `70-30`/ `80-20` | `30-70` |
37
+ | type | Type of description: `table` - description will looks like vertical table, `inline` - value will aligns to label, `corner` - label and value have space-between them | `table`/ `inline`/ `corner` | `table` |
38
+ | ratio | Define size of column if type='table' | `50-50`/ `25-75` | `50-50` |
39
39
 
40
40
  ### DescriptionRow
41
41
 
package/dist/Description.js CHANGED
@@ -6,7 +6,7 @@ var Description = function Description(_ref) {
6
6
  type = _ref$type === void 0 ? 'table' : _ref$type,
7
7
  children = _ref.children,
8
8
  _ref$ratio = _ref.ratio,
9
- ratio = _ref$ratio === void 0 ? '30-70' : _ref$ratio;
9
+ ratio = _ref$ratio === void 0 ? '50-50' : _ref$ratio;
10
10
  var hasSingleChild = React.useMemo(function () {
11
11
  return !Array.isArray(children);
12
12
  }, [children]);
package/dist/Description.styles.js CHANGED
@@ -5,13 +5,8 @@ var getColumnsWidth = function getColumnsWidth(ratio) {
5
5
  ratio = null;
6
6
  }
7
7
  var mapRatioToWidth = {
8
- '20-80': '2fr 8fr',
9
- '30-70': '3fr 7fr',
10
- '40-60': '4fr 6fr',
11
- '50-50': '5fr 5fr',
12
- '60-40': '6fr 4fr',
13
- '70-30': '7fr 3fr',
14
- '80-20': '8fr 2fr',
8
+ '25-75': '25% 75%',
9
+ '50-50': '50% 50%',
15
10
  auto: 'auto auto'
16
11
  };
17
12
  return ratio !== null && mapRatioToWidth[ratio] ? mapRatioToWidth[ratio] : '1fr auto';
@@ -22,11 +17,8 @@ var tableStyles = function tableStyles(ratio) {
22
17
  var inlineStyles = function inlineStyles() {
23
18
  return css(["", "{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin-right:8px;}", "{display:-webkit-box;flex:1;overflow-x:visible;}}"], RowWrapper, RowLabel, RowValue);
24
19
  };
25
- var dottedListStyles = function dottedListStyles(theme) {
26
- return css(["", ";", "{", "{display:none;}&::before{position:relative;width:14px;height:24px;display:flex;align-items:center;justify-content:center;content:'\xB7';color:", ";margin-right:8px;}}"], inlineStyles(), RowWrapper, RowLabel, theme.palette['grey-600']);
27
- };
28
- var numberedListStyles = function numberedListStyles(theme) {
29
- return css(["", ";counter-reset:count-description-rows;", "{", "{display:none;}counter-increment:count-description-rows;&::before{position:relative;height:24px;display:flex;align-items:center;justify-content:center;content:counter(count-description-rows,decimal-leading-zero) ':';color:", ";margin-right:8px;}}"], inlineStyles(), RowWrapper, RowLabel, theme.palette['grey-600']);
20
+ var cornerStyles = function cornerStyles() {
21
+ return css(["", "{display:flex;align-items:center;justify-content:space-between;}"], RowWrapper);
30
22
  };
31
23
  export var Description = styled.div.withConfig({
32
24
  displayName: "Descriptionstyles__Description",
@@ -43,15 +35,11 @@ export var Description = styled.div.withConfig({
43
35
  {
44
36
  return inlineStyles();
45
37
  }
46
- case 'dotted-list':
47
- {
48
- return dottedListStyles(props.theme);
49
- }
50
- case 'numbered-list':
38
+ case 'corner':
51
39
  {
52
- return numberedListStyles(props.theme);
40
+ return cornerStyles();
53
41
  }
54
42
  default:
55
- return false;
43
+ return inlineStyles();
56
44
  }
57
45
  });
package/dist/Description.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export type DescriptionType = 'inline' | 'table' | 'dotted-list' | 'numbered-list';
2
- export type DescriptionRatio = '20-80' | '30-70' | '40-60' | '50-50' | '60-40' | '70-30' | '80-20';
1
+ export type DescriptionType = 'inline' | 'table' | 'corner' | 'numbered-list';
2
+ export type DescriptionRatio = '50-50' | '25-75';
3
3
  export interface DescriptionProps {
4
4
  type?: DescriptionType;
5
5
  ratio?: DescriptionRatio;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-description",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "description": "Description UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-icon": "^1.7.0",
38
- "@synerise/ds-tooltip": "^1.1.16",
39
- "@synerise/ds-utils": "^1.4.0",
37
+ "@synerise/ds-icon": "^1.7.1",
38
+ "@synerise/ds-tooltip": "^1.1.17",
39
+ "@synerise/ds-utils": "^1.4.1",
40
40
  "classnames": "^2.5.1"
41
41
  },
42
42
  "peerDependencies": {
@@ -46,5 +46,5 @@
46
46
  "react-intl": ">=3.12.0 <= 6.8",
47
47
  "styled-components": "^5.3.3"
48
48
  },
49
- "gitHead": "408d73cc145b6c8c61f3e70dce05badf3ad1ffde"
49
+ "gitHead": "7f119fa17e645f1d800aea95c313fe22f348439c"
50
50
  }