@synerise/ds-card-select 1.1.11 → 1.1.13
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/README.md
CHANGED
|
@@ -45,35 +45,34 @@ yarn add @synerise/ds-card-select
|
|
|
45
45
|
|
|
46
46
|
<iframe src="/storybook-static/iframe.html?id=components-cardselect--default"></iframe>
|
|
47
47
|
|
|
48
|
-
|
|
49
48
|
## API
|
|
50
49
|
|
|
51
|
-
| Property | Description
|
|
52
|
-
| -------------------------- |
|
|
53
|
-
| className | The className of the container
|
|
54
|
-
| size | The size of the card
|
|
55
|
-
| raised | Defines border style
|
|
56
|
-
| icon | Defines the icon
|
|
57
|
-
| iconSize | Overwrites the predefined (82px for `medium` size, 48px for `small` size) size of the icon
|
|
58
|
-
| title | Defines the title of the card
|
|
59
|
-
| description | Defines the description of the card (not available for `small` size)
|
|
60
|
-
| value | Defines if the card is selected by a user
|
|
61
|
-
| tickVisible | Defines the display of the checkbox
|
|
62
|
-
| disabled | Defines if the card is disabled (`onChange` still fires)
|
|
63
|
-
| customTickVisible | Defines if the checkbox is custom
|
|
64
|
-
| customTickVisibleComponent | Custom checkbox component
|
|
65
|
-
| stretchToFit | Aligns the height of each card
|
|
66
|
-
| theme | Palette of colors
|
|
67
|
-
| elementsPosition | Defines the position of the elements on the card
|
|
68
|
-
|
|
69
|
-
| tagProps
|
|
70
|
-
| tagTooltipProps
|
|
71
|
-
| infoTooltipProps
|
|
72
|
-
|
|
50
|
+
| Property | Description | Type | Default |
|
|
51
|
+
| -------------------------- | ------------------------------------------------------------------------------------------ | --------------------------- | -------- |
|
|
52
|
+
| className | The className of the container | string | - |
|
|
53
|
+
| size | The size of the card | `small` / `medium` | `medium` |
|
|
54
|
+
| raised | Defines border style | boolean | - |
|
|
55
|
+
| icon | Defines the icon | ReactNode | - |
|
|
56
|
+
| iconSize | Overwrites the predefined (82px for `medium` size, 48px for `small` size) size of the icon | number | - |
|
|
57
|
+
| title | Defines the title of the card | `ReactNode` | - |
|
|
58
|
+
| description | Defines the description of the card (not available for `small` size) | `ReactNode` | - |
|
|
59
|
+
| value | Defines if the card is selected by a user | boolean | `false` |
|
|
60
|
+
| tickVisible | Defines the display of the checkbox | boolean | `true` |
|
|
61
|
+
| disabled | Defines if the card is disabled (`onChange` still fires) | boolean | - |
|
|
62
|
+
| customTickVisible | Defines if the checkbox is custom | boolean | - |
|
|
63
|
+
| customTickVisibleComponent | Custom checkbox component | ReactNode | - |
|
|
64
|
+
| stretchToFit | Aligns the height of each card | boolean | - |
|
|
65
|
+
| theme | Palette of colors | string | - |
|
|
66
|
+
| elementsPosition | Defines the position of the elements on the card | `left` / `right` / `center` | `center` |
|
|
67
|
+
|
|
68
|
+
| tagProps | Defines a ribbon-style tag | `TagProps` | - |
|
|
69
|
+
| tagTooltipProps | Defines tooltip for the ribbon tag | `TooltipProps` | - |
|
|
70
|
+
| infoTooltipProps | Defines a tooltip with information about the purpose of the card | `TooltipProps` | - |
|
|
73
71
|
|
|
74
72
|
### TagProps
|
|
75
73
|
|
|
76
74
|
accepts a subset of TagProps. See @synerise/ds-tag for API
|
|
75
|
+
|
|
77
76
|
```
|
|
78
77
|
Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>
|
|
79
78
|
```
|
|
@@ -81,7 +80,7 @@ Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'
|
|
|
81
80
|
### CardSelectGroup
|
|
82
81
|
|
|
83
82
|
| Property | Description | Type | Default |
|
|
84
|
-
|
|
83
|
+
| --------- | --------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------- |
|
|
85
84
|
| className | The name of the container | string | - |
|
|
86
85
|
| columns | Defines the number of columns. Defaults to 2, set to null to render all items in a single row | number / null | - |
|
|
87
86
|
| children | Deprecated. Use items prop instead | ReactNode | - |
|
|
@@ -89,7 +88,6 @@ Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'
|
|
|
89
88
|
| width | Defines the size of the gap between items. Deprecated, use size prop | `small` / `large` | 16px for `small`, 24px for `large` size |
|
|
90
89
|
| size | The size of the CardSelect items and gap between them | `small` / `medium` | `medium` |
|
|
91
90
|
|
|
92
|
-
|
|
93
91
|
### Methods
|
|
94
92
|
|
|
95
93
|
| Property | Description | Type | Default |
|
package/dist/CardSelect.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useRef, useState } from 'react';
|
|
3
3
|
import { withTheme } from 'styled-components';
|
|
4
4
|
import Icon, { Check3M, InfoFillS } from '@synerise/ds-icon';
|
|
5
5
|
import { TagShape } from '@synerise/ds-tag';
|
|
6
|
-
import { useOnClickOutside } from '@synerise/ds-utils';
|
|
7
6
|
import Tooltip from '@synerise/ds-tooltip';
|
|
7
|
+
import { useOnClickOutside } from '@synerise/ds-utils';
|
|
8
8
|
import * as S from './CardSelect.styles';
|
|
9
9
|
import { DEFAULT_ICON_SIZE_LARGE, DEFAULT_ICON_SIZE_SMALL, DEFAULT_TICK_SIZE_LARGE, DEFAULT_TICK_SIZE_SMALL } from './constants';
|
|
10
10
|
var CardSelect = function CardSelect(_ref) {
|
|
@@ -44,7 +44,6 @@ var CardSelect = function CardSelect(_ref) {
|
|
|
44
44
|
setIsPressed(true);
|
|
45
45
|
setTimeout(function () {
|
|
46
46
|
var _tickIconRef$current;
|
|
47
|
-
// eslint-disable-next-line no-unused-expressions
|
|
48
47
|
(_tickIconRef$current = tickIconRef.current) == null || _tickIconRef$current.blur();
|
|
49
48
|
});
|
|
50
49
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ThemeProps } from '@synerise/ds-core';
|
|
3
|
-
import { CardSelectAlignType, CardSelectSizeType } from './CardSelect.types';
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import { type ThemeProps } from '@synerise/ds-core';
|
|
3
|
+
import { type CardSelectAlignType, type CardSelectSizeType } from './CardSelect.types';
|
|
4
4
|
export declare const RadioShape: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
size?: CardSelectSizeType | undefined;
|
|
6
6
|
}, never>;
|
|
@@ -19,7 +19,7 @@ export declare const IconWrapper: import("styled-components").StyledComponent<"d
|
|
|
19
19
|
export declare const Aside: import("styled-components").StyledComponent<"div", any, {
|
|
20
20
|
size?: CardSelectSizeType | undefined;
|
|
21
21
|
elementsPosition?: CardSelectAlignType | undefined;
|
|
22
|
-
tickVisible?:
|
|
22
|
+
tickVisible?: boolean | undefined;
|
|
23
23
|
}, never>;
|
|
24
24
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
25
25
|
disabled?: boolean | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CardSelectGroupProps } from './CardSelectGroup.types';
|
|
2
|
+
import { type CardSelectGroupProps } from './CardSelectGroup.types';
|
|
3
3
|
declare const CardSelectGroup: ({ className, children, items, size, width, columns, }: CardSelectGroupProps) => React.JSX.Element;
|
|
4
4
|
export default CardSelectGroup;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-card-select",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.13",
|
|
4
4
|
"description": "Card-Select UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-icon": "^1.
|
|
38
|
-
"@synerise/ds-tag": "^1.1.
|
|
39
|
-
"@synerise/ds-tooltip": "^1.1.
|
|
40
|
-
"@synerise/ds-utils": "^1.3.
|
|
37
|
+
"@synerise/ds-icon": "^1.6.0",
|
|
38
|
+
"@synerise/ds-tag": "^1.1.13",
|
|
39
|
+
"@synerise/ds-tooltip": "^1.1.13",
|
|
40
|
+
"@synerise/ds-utils": "^1.3.1",
|
|
41
41
|
"styled-is": "^1.3.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -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": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
|
|
50
50
|
}
|