@synerise/ds-card-select 0.5.44 → 0.6.0

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 (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +11 -0
  3. package/dist/CardSelect.d.ts +270 -2
  4. package/dist/CardSelect.js +29 -29
  5. package/dist/CardSelect.styles.d.ts +11 -5
  6. package/dist/CardSelect.styles.js +36 -23
  7. package/dist/CardSelect.types.d.ts +13 -7
  8. package/dist/constants.d.ts +4 -0
  9. package/dist/constants.js +4 -0
  10. package/dist/index.d.ts +2 -0
  11. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.5.44...@synerise/ds-card-select@0.6.0) (2024-05-31)
7
+
8
+
9
+ ### Features
10
+
11
+ * **card-select:** add tag as ribbon ([9c05c78](https://github.com/Synerise/synerise-design/commit/9c05c78c2972a2c9ba096d0a30a4fe8f57e6b57e))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.5.44](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.5.43...@synerise/ds-card-select@0.5.44) (2024-05-29)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-card-select
package/README.md CHANGED
@@ -68,6 +68,17 @@ yarn add @synerise/ds-card-select
68
68
  | theme | Palette of colors | string | - |
69
69
  | elementsPosition | Defines the position of the elements on the card | string | `center` |
70
70
  | width | Defines the width of Group of cards | `large` / `small` | `large` |
71
+ | tagProps | Defines a ribbon-style tag | `TagProps` | - |
72
+ | tagTooltipProps | Defines tooltip for the ribbon tag | `TooltipProps` | - |
73
+
74
+
75
+ ### TagProps
76
+
77
+ accepts a subset of TagProps. See @synerise/ds-tags for API
78
+ ```
79
+ Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>
80
+ ```
81
+
71
82
 
72
83
  ### Methods
73
84
 
package/dist/CardSelect.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  declare const _default: React.ForwardRefExoticComponent<{
3
3
  title?: React.ReactNode;
4
4
  className?: string | undefined;
5
- children?: React.ReactNode;
6
5
  onChange?: ((value: boolean) => void) | undefined;
7
6
  onClick?: (() => void) | undefined;
8
7
  stretchToFit?: boolean | undefined;
@@ -19,6 +18,275 @@ declare const _default: React.ForwardRefExoticComponent<{
19
18
  iconSize?: number | undefined;
20
19
  tickSize?: number | undefined;
21
20
  elementsPosition?: string | undefined;
21
+ tagProps?: {
22
+ slot?: string | undefined;
23
+ style?: React.CSSProperties | undefined;
24
+ title?: string | undefined;
25
+ name?: string | undefined;
26
+ defaultChecked?: boolean | undefined;
27
+ defaultValue?: string | number | readonly string[] | undefined;
28
+ suppressContentEditableWarning?: boolean | undefined;
29
+ suppressHydrationWarning?: boolean | undefined;
30
+ accessKey?: string | undefined;
31
+ autoFocus?: boolean | undefined;
32
+ className?: string | undefined;
33
+ contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
34
+ contextMenu?: string | undefined;
35
+ dir?: string | undefined;
36
+ draggable?: (boolean | "true" | "false") | undefined;
37
+ hidden?: boolean | undefined;
38
+ id?: string | undefined;
39
+ lang?: string | undefined;
40
+ nonce?: string | undefined;
41
+ placeholder?: string | undefined;
42
+ spellCheck?: (boolean | "true" | "false") | undefined;
43
+ tabIndex?: number | undefined;
44
+ translate?: "yes" | "no" | undefined;
45
+ radioGroup?: string | undefined;
46
+ role?: React.AriaRole | undefined;
47
+ about?: string | undefined;
48
+ content?: string | undefined;
49
+ datatype?: string | undefined;
50
+ inlist?: any;
51
+ prefix?: string | undefined;
52
+ property?: string | undefined;
53
+ rel?: string | undefined;
54
+ resource?: string | undefined;
55
+ rev?: string | undefined;
56
+ typeof?: string | undefined;
57
+ vocab?: string | undefined;
58
+ autoCapitalize?: string | undefined;
59
+ autoCorrect?: string | undefined;
60
+ autoSave?: string | undefined;
61
+ color?: string | undefined;
62
+ itemProp?: string | undefined;
63
+ itemScope?: boolean | undefined;
64
+ itemType?: string | undefined;
65
+ itemID?: string | undefined;
66
+ itemRef?: string | undefined;
67
+ results?: number | undefined;
68
+ security?: string | undefined;
69
+ unselectable?: "on" | "off" | undefined;
70
+ inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
71
+ is?: string | undefined;
72
+ 'aria-activedescendant'?: string | undefined;
73
+ 'aria-atomic'?: boolean | "true" | "false" | undefined;
74
+ 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
75
+ 'aria-busy'?: boolean | "true" | "false" | undefined;
76
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
77
+ 'aria-colcount'?: number | undefined;
78
+ 'aria-colindex'?: number | undefined;
79
+ 'aria-colspan'?: number | undefined;
80
+ 'aria-controls'?: string | undefined;
81
+ 'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
82
+ 'aria-describedby'?: string | undefined;
83
+ 'aria-details'?: string | undefined;
84
+ 'aria-disabled'?: boolean | "true" | "false" | undefined;
85
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
86
+ 'aria-errormessage'?: string | undefined;
87
+ 'aria-expanded'?: boolean | "true" | "false" | undefined;
88
+ 'aria-flowto'?: string | undefined;
89
+ 'aria-grabbed'?: boolean | "true" | "false" | undefined;
90
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
91
+ 'aria-hidden'?: boolean | "true" | "false" | undefined;
92
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
93
+ 'aria-keyshortcuts'?: string | undefined;
94
+ 'aria-label'?: string | undefined;
95
+ 'aria-labelledby'?: string | undefined;
96
+ 'aria-level'?: number | undefined;
97
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
98
+ 'aria-modal'?: boolean | "true" | "false" | undefined;
99
+ 'aria-multiline'?: boolean | "true" | "false" | undefined;
100
+ 'aria-multiselectable'?: boolean | "true" | "false" | undefined;
101
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
102
+ 'aria-owns'?: string | undefined;
103
+ 'aria-placeholder'?: string | undefined;
104
+ 'aria-posinset'?: number | undefined;
105
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
106
+ 'aria-readonly'?: boolean | "true" | "false" | undefined;
107
+ 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
108
+ 'aria-required'?: boolean | "true" | "false" | undefined;
109
+ 'aria-roledescription'?: string | undefined;
110
+ 'aria-rowcount'?: number | undefined;
111
+ 'aria-rowindex'?: number | undefined;
112
+ 'aria-rowspan'?: number | undefined;
113
+ 'aria-selected'?: boolean | "true" | "false" | undefined;
114
+ 'aria-setsize'?: number | undefined;
115
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
116
+ 'aria-valuemax'?: number | undefined;
117
+ 'aria-valuemin'?: number | undefined;
118
+ 'aria-valuenow'?: number | undefined;
119
+ 'aria-valuetext'?: string | undefined;
120
+ children?: React.ReactNode;
121
+ dangerouslySetInnerHTML?: {
122
+ __html: string | TrustedHTML;
123
+ } | undefined;
124
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
125
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
126
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
127
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
128
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
129
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
130
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
131
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
132
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
133
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
134
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
135
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
136
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
137
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
138
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
139
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
140
+ onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
141
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
142
+ onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
143
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
144
+ onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
145
+ onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
146
+ onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
147
+ onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
148
+ onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
149
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
150
+ onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
151
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
152
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
153
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
154
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
155
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
156
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
157
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
158
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
159
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
160
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
161
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
162
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
163
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
164
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
165
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
166
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
167
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
168
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
169
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
170
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
171
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
172
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
173
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
174
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
175
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
176
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
177
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
178
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
179
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
180
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
181
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
182
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
183
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
184
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
185
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
186
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
187
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
188
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
189
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
190
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
191
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
192
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
193
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
194
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
195
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
196
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
197
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
198
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
199
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
200
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
201
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
202
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
203
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
204
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
205
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
206
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
207
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
208
+ onClick?: ((() => void) & React.MouseEventHandler<HTMLDivElement>) | undefined;
209
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
210
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
211
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
212
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
213
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
214
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
215
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
216
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
217
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
218
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
219
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
220
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
221
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
222
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
223
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
224
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
225
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
226
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
227
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
228
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
229
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
230
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
231
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
232
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
233
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
234
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
235
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
236
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
237
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
238
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
239
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
240
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
241
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
242
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
243
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
244
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
245
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
246
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
247
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
248
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
249
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
250
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
251
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
252
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
253
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
254
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
255
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
256
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
257
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
258
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
259
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
260
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
261
+ onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
262
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
263
+ onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
264
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
265
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
266
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
267
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
268
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
269
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
270
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
271
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
272
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
273
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
274
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
275
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
276
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
277
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
278
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
279
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
280
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
281
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
282
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
283
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
284
+ disabled?: boolean | undefined;
285
+ textColor?: string | undefined;
286
+ prefixel?: React.ReactNode;
287
+ suffixel?: React.ReactNode;
288
+ } | undefined;
289
+ tagTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
22
290
  } & {
23
291
  theme?: any;
24
292
  }>;
package/dist/CardSelect.js CHANGED
@@ -1,8 +1,13 @@
1
- import * as React from 'react';
1
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import React, { useState, useRef } from 'react';
2
4
  import { withTheme } from 'styled-components';
3
5
  import Icon, { Check3M } from '@synerise/ds-icon';
6
+ import { TagShape } from '@synerise/ds-tags';
4
7
  import { useOnClickOutside } from '@synerise/ds-utils';
8
+ import Tooltip from '@synerise/ds-tooltip';
5
9
  import * as S from './CardSelect.styles';
10
+ import { DEFAULT_ICON_SIZE_LARGE, DEFAULT_ICON_SIZE_SMALL, DEFAULT_TICK_SIZE_LARGE, DEFAULT_TICK_SIZE_SMALL } from './constants';
6
11
 
7
12
  var CardSelect = function CardSelect(_ref) {
8
13
  var title = _ref.title,
@@ -24,45 +29,44 @@ var CardSelect = function CardSelect(_ref) {
24
29
  className = _ref.className,
25
30
  onClick = _ref.onClick,
26
31
  theme = _ref.theme,
27
- error = _ref.error;
32
+ error = _ref.error,
33
+ tagProps = _ref.tagProps,
34
+ tagTooltipProps = _ref.tagTooltipProps;
28
35
 
29
- var _React$useState = React.useState(false),
30
- pressed = _React$useState[0],
31
- setPressed = _React$useState[1];
36
+ var _useState = useState(false),
37
+ isPressed = _useState[0],
38
+ setIsPressed = _useState[1];
32
39
 
33
- var wrapperRef = React.useRef(null);
34
- var tickIconRef = React.useRef(null);
40
+ var wrapperRef = useRef(null);
41
+ var tickIconRef = useRef(null);
35
42
 
36
43
  var handleClick = function handleClick() {
37
44
  onClick ? onClick() : onChange && onChange(!value);
38
- setPressed(true);
45
+ setIsPressed(true);
39
46
  setTimeout(function () {
40
47
  if (tickIconRef !== null && tickIconRef.current !== null) tickIconRef.current.blur();
41
48
  });
42
49
  };
43
50
 
44
- var realIconSize = iconSize;
45
-
46
- if (!realIconSize) {
47
- realIconSize = size === 'small' ? 48 : 96;
48
- }
49
-
50
- var realTickSize = tickSize;
51
-
52
- if (!realTickSize) {
53
- realTickSize = size === 'small' ? 24 : 30;
54
- }
55
-
51
+ var realIconSize = iconSize || (size === 'small' ? DEFAULT_ICON_SIZE_SMALL : DEFAULT_ICON_SIZE_LARGE);
52
+ var realTickSize = tickSize || (size === 'small' ? DEFAULT_TICK_SIZE_SMALL : DEFAULT_TICK_SIZE_LARGE);
53
+ var tagElement = tagProps && /*#__PURE__*/React.createElement(S.TagRibbonAnchor, null, /*#__PURE__*/React.createElement(S.TagRibbon, _extends({}, tagProps, {
54
+ shape: TagShape.DEFAULT_SQUARE,
55
+ asPill: true
56
+ })));
57
+ var tagElementWithTooltip = tagTooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tagTooltipProps, tagElement) : tagElement;
56
58
  useOnClickOutside(wrapperRef, function () {
57
- pressed && setPressed(false);
59
+ isPressed && setIsPressed(false);
58
60
  });
59
61
  return /*#__PURE__*/React.createElement(S.CardWrapper, {
62
+ size: size,
60
63
  disabled: disabled,
61
- stretchToFit: stretchToFit
62
- }, /*#__PURE__*/React.createElement(S.Container, {
64
+ stretchToFit: stretchToFit,
65
+ hasTick: tickVisible || customTickVisible
66
+ }, tagElementWithTooltip, /*#__PURE__*/React.createElement(S.Container, {
63
67
  error: !!error,
64
68
  ref: wrapperRef,
65
- pressed: pressed,
69
+ pressed: isPressed,
66
70
  raised: raised,
67
71
  disabled: disabled,
68
72
  value: value,
@@ -87,11 +91,7 @@ var CardSelect = function CardSelect(_ref) {
87
91
  component: /*#__PURE__*/React.createElement(Check3M, null)
88
92
  }) : /*#__PURE__*/React.createElement(S.RadioShape, {
89
93
  size: size
90
- }))), /*#__PURE__*/React.createElement(S.Main, {
91
- size: size,
92
- disabled: disabled,
93
- hasTick: tickVisible || customTickVisible
94
- }, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
94
+ }))), /*#__PURE__*/React.createElement(S.Main, null, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
95
95
  size: size
96
96
  }, /*#__PURE__*/React.createElement(Icon, {
97
97
  component: icon,
package/dist/CardSelect.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { ThemeProps } from '@synerise/ds-core';
2
3
  export declare const RadioShape: import("styled-components").StyledComponent<"div", any, {
3
4
  size?: string | undefined;
@@ -28,11 +29,14 @@ export declare const Container: import("styled-components").StyledComponent<"div
28
29
  stretchToFit?: boolean | undefined;
29
30
  error?: boolean | undefined;
30
31
  } & ThemeProps, never>;
31
- export declare const Main: import("styled-components").StyledComponent<"div", any, {
32
- disabled?: boolean | undefined;
33
- size?: string | undefined;
34
- hasTick?: boolean | undefined;
35
- }, never>;
32
+ export declare const TagRibbonAnchor: import("styled-components").StyledComponent<"div", any, {}, never>;
33
+ export declare const TagRibbon: import("styled-components").StyledComponent<{
34
+ ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, onMouseLeave, onMouseOver, prefixel, suffixel, texts, asPill, }: import("@synerise/ds-tags/dist/Tag/Tag.types").TagProps): React.JSX.Element;
35
+ defaultProps: {
36
+ shape: import("@synerise/ds-tags").TagShape;
37
+ };
38
+ }, any, {}, never>;
39
+ export declare const Main: import("styled-components").StyledComponent<"div", any, {}, never>;
36
40
  export declare const TickIcon: import("styled-components").StyledComponent<"div", any, {
37
41
  size?: string | undefined;
38
42
  disabled?: boolean | undefined;
@@ -40,6 +44,8 @@ export declare const TickIcon: import("styled-components").StyledComponent<"div"
40
44
  elementsPosition: string | 'left' | 'center' | 'right';
41
45
  }, never>;
42
46
  export declare const CardWrapper: import("styled-components").StyledComponent<"div", any, {
47
+ size?: string | undefined;
43
48
  disabled?: boolean | undefined;
44
49
  stretchToFit?: boolean | undefined;
50
+ hasTick?: boolean | undefined;
45
51
  }, never>;
package/dist/CardSelect.styles.js CHANGED
@@ -4,6 +4,20 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
4
4
 
5
5
  import styled, { css } from 'styled-components';
6
6
  import is, { isNot } from 'styled-is';
7
+ import { Tag } from '@synerise/ds-tags';
8
+ var TRANSITION = "\n TRANSITION-timing-function: ease-in-out;\n transition-duration: 0.2s;\n transition-property: border-color, background-color;\n";
9
+ var MAIN_PADDING = 8;
10
+ var RADIO_WIDTH = 20;
11
+ var RADIO_SMALL_WIDTH = 16;
12
+ var RADIO_BORDER_WIDTH = 1;
13
+ var TAG_LEFT_OFFSET = 32;
14
+ var TAG_LEFT_OFFSET_TICK_SMALL = 44;
15
+ var TAG_LEFT_OFFSET_TICK_LARGE = 68;
16
+ var MAP_ELEMENTS_POSITION = {
17
+ left: 'flex-start',
18
+ right: 'flex-end',
19
+ center: 'center'
20
+ };
7
21
 
8
22
  var getVar = function getVar(name) {
9
23
  return function (props) {
@@ -11,8 +25,6 @@ var getVar = function getVar(name) {
11
25
  };
12
26
  };
13
27
 
14
- var transition = "\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n transition-property: border-color, background-color;\n";
15
-
16
28
  var getTransformValues = function getTransformValues(props) {
17
29
  if (props.size === 'small') {
18
30
  return 'translate(-2px,-2px)';
@@ -25,16 +37,6 @@ var getTransformValues = function getTransformValues(props) {
25
37
  return 'translate( -3px, -3px)';
26
38
  };
27
39
 
28
- var mainPadding = 8;
29
- var radioWidth = 20;
30
- var radioSmallWidth = 16;
31
- var radioBorderWidth = 1;
32
- var mapElementsPosition = {
33
- left: 'flex-start',
34
- right: 'flex-end',
35
- center: 'center'
36
- };
37
-
38
40
  var sizeCondition = function sizeCondition(smallValue, mediumValue, props) {
39
41
  return props.size === 'small' ? smallValue : mediumValue;
40
42
  };
@@ -42,11 +44,11 @@ var sizeCondition = function sizeCondition(smallValue, mediumValue, props) {
42
44
  export var RadioShape = styled.div.withConfig({
43
45
  displayName: "CardSelectstyles__RadioShape",
44
46
  componentId: "tfmgtj-0"
45
- })(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], transition, function (props) {
46
- return sizeCondition(radioSmallWidth, radioWidth, props);
47
+ })(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], TRANSITION, function (props) {
48
+ return sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props);
47
49
  }, function (props) {
48
- return sizeCondition(radioSmallWidth, radioWidth, props);
49
- }, radioBorderWidth, getVar('grey-300'), getVar('grey-400'));
50
+ return sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props);
51
+ }, RADIO_BORDER_WIDTH, getVar('grey-300'), getVar('grey-400'));
50
52
  export var Title = styled.div.withConfig({
51
53
  displayName: "CardSelectstyles__Title",
52
54
  componentId: "tfmgtj-1"
@@ -67,7 +69,7 @@ export var IconWrapper = styled.div.withConfig({
67
69
  displayName: "CardSelectstyles__IconWrapper",
68
70
  componentId: "tfmgtj-3"
69
71
  })(["margin-bottom:", "px;text-align:center;width:100%;"], function (props) {
70
- return sizeCondition(0, mainPadding, props);
72
+ return sizeCondition(0, MAIN_PADDING, props);
71
73
  });
72
74
  export var Aside = styled.div.withConfig({
73
75
  displayName: "CardSelectstyles__Aside",
@@ -78,10 +80,10 @@ export var Aside = styled.div.withConfig({
78
80
  export var Container = styled.div.withConfig({
79
81
  displayName: "CardSelectstyles__Container",
80
82
  componentId: "tfmgtj-5"
81
- })(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{", ":", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))), transition, getVar('white'), function (props) {
83
+ })(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{", ":", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))), TRANSITION, getVar('white'), function (props) {
82
84
  return props.theme.variable('@border-radius-base');
83
85
  }, is('error')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n &&, &&:hover {\n box-shadow: 0px 0px 0px 2px ", ";\n }\n "])), getVar('red-500')), function (props) {
84
- return mapElementsPosition[props.elementsPosition];
86
+ return MAP_ELEMENTS_POSITION[props.elementsPosition];
85
87
  }, getVar('white'), function (props) {
86
88
  return props.size === 'small' ? '16px' : '24px';
87
89
  }, getVar('blue-600'), isNot('pressed') && isNot('value')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["box-shadow: 0px 0px 0px 1px ", ";"])), getVar('grey-300')), is('value')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 2px ", ";\n "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([" box-shadow: 0px 0px 0px 2px ", ";"])), getVar('blue-600')), is('value') && is('raised')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 2px ", ";\n "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([" box-shadow: 0px 0px 0px 2px ", ";"])), getVar('blue-600')), Title, Description, IconWrapper, function (props) {
@@ -99,17 +101,28 @@ export var Container = styled.div.withConfig({
99
101
  }, function (props) {
100
102
  return props.theme.variable('@box-shadow-active') || 'none';
101
103
  }))), is('disabled')(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n opacity: 0.4;\n pointer-events:none;\n\n ", "\n \n "])), isNot('raised')(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n\n ", "\n "])), isNot('value')(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 1px ", ";\n "])), getVar('grey-200')))));
104
+ export var TagRibbonAnchor = styled.div.withConfig({
105
+ displayName: "CardSelectstyles__TagRibbonAnchor",
106
+ componentId: "tfmgtj-6"
107
+ })(["display:flex;justify-content:flex-end;height:0;overflow:visible;"]);
108
+ export var TagRibbon = styled(Tag).withConfig({
109
+ displayName: "CardSelectstyles__TagRibbon",
110
+ componentId: "tfmgtj-7"
111
+ })(["position:relative;z-index:1;top:-12px;right:16px;margin:0;"]);
102
112
  export var Main = styled.div.withConfig({
103
113
  displayName: "CardSelectstyles__Main",
104
- componentId: "tfmgtj-6"
114
+ componentId: "tfmgtj-8"
105
115
  })(["display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:flex-start;"]);
106
116
  export var TickIcon = styled.div.withConfig({
107
117
  displayName: "CardSelectstyles__TickIcon",
108
- componentId: "tfmgtj-7"
118
+ componentId: "tfmgtj-9"
109
119
  })(["", " ", " ", ""], is('selected')(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n transform: ", "; \n "])), function (props) {
110
120
  return getTransformValues(props);
111
121
  }), is('disabled')(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n ", " {\n background-color: ", ";\n border-color: ", ";\n }\n "])), RadioShape, getVar('grey-050'), getVar('grey-200')), isNot('disabled')(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n ", " {\n cursor: pointer;\n }\n "])), RadioShape));
112
122
  export var CardWrapper = styled.div.withConfig({
113
123
  displayName: "CardSelectstyles__CardWrapper",
114
- componentId: "tfmgtj-8"
115
- })(["", " ", ""], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n cursor:not-allowed;\n "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))));
124
+ componentId: "tfmgtj-10"
125
+ })(["position:relative;", " ", " ", "{padding-left:", "px;}"], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n cursor:not-allowed;\n "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))), TagRibbonAnchor, function (props) {
126
+ var withTickOffset = props.size === 'small' ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
127
+ return props.hasTick ? withTickOffset : TAG_LEFT_OFFSET;
128
+ });
package/dist/CardSelect.types.d.ts CHANGED
@@ -1,9 +1,12 @@
1
- import * as React from 'react';
2
- export interface CardSelectProps {
3
- icon?: React.ReactNode;
1
+ import type { ReactNode } from 'react';
2
+ import type { TagProps } from '@synerise/ds-tags';
3
+ import type { TooltipProps } from '@synerise/ds-tooltip';
4
+ type CardSelectTagProps = Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>;
5
+ export type CardSelectProps = {
6
+ icon?: ReactNode;
4
7
  raised?: boolean;
5
- description?: string | React.ReactNode;
6
- title?: string | React.ReactNode;
8
+ description?: ReactNode;
9
+ title?: ReactNode;
7
10
  value?: boolean;
8
11
  disabled?: boolean;
9
12
  tickVisible?: boolean;
@@ -13,7 +16,9 @@ export interface CardSelectProps {
13
16
  tickSize?: number;
14
17
  stretchToFit?: boolean;
15
18
  customTickVisible?: boolean;
16
- customTickVisibleComponent?: React.ReactNode;
19
+ customTickVisibleComponent?: ReactNode;
20
+ tagProps?: CardSelectTagProps;
21
+ tagTooltipProps?: TooltipProps;
17
22
  theme: {
18
23
  [k: string]: string;
19
24
  };
@@ -21,4 +26,5 @@ export interface CardSelectProps {
21
26
  onClick?: () => void;
22
27
  elementsPosition?: string | 'left' | 'center' | 'right';
23
28
  error?: boolean;
24
- }
29
+ };
30
+ export {};
package/dist/constants.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const DEFAULT_TICK_SIZE_SMALL = 24;
2
+ export declare const DEFAULT_TICK_SIZE_LARGE = 30;
3
+ export declare const DEFAULT_ICON_SIZE_SMALL = 48;
4
+ export declare const DEFAULT_ICON_SIZE_LARGE = 96;
package/dist/constants.js ADDED
@@ -0,0 +1,4 @@
1
+ export var DEFAULT_TICK_SIZE_SMALL = 24;
2
+ export var DEFAULT_TICK_SIZE_LARGE = 30;
3
+ export var DEFAULT_ICON_SIZE_SMALL = 48;
4
+ export var DEFAULT_ICON_SIZE_LARGE = 96;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export { default } from './CardSelect';
2
2
  export { default as CardSelectGroup } from './CardSelectGroup/CardSelectGroup';
3
+ export type { CardSelectProps } from './CardSelect.types';
4
+ export type { CardSelectGroupProps } from './CardSelectGroup/CardSelectGroup.types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-select",
3
- "version": "0.5.44",
3
+ "version": "0.6.0",
4
4
  "description": "Card-Select UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,6 +34,8 @@
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
36
  "@synerise/ds-icon": "^0.62.0",
37
+ "@synerise/ds-tags": "^0.9.0",
38
+ "@synerise/ds-tooltip": "^0.14.29",
37
39
  "styled-is": "^1.3.0"
38
40
  },
39
41
  "peerDependencies": {
@@ -45,5 +47,5 @@
45
47
  "devDependencies": {
46
48
  "@synerise/ds-utils": "^0.27.0"
47
49
  },
48
- "gitHead": "6bd94c78745df68ee3b853120a863ab24fc233ef"
50
+ "gitHead": "9293cda82b432c10af1d230262afcc6f08f3dd99"
49
51
  }