@synerise/ds-card-select 0.5.44 → 0.7.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 (16) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +32 -12
  3. package/dist/CardSelect.d.ts +276 -7
  4. package/dist/CardSelect.js +36 -30
  5. package/dist/CardSelect.styles.d.ts +23 -14
  6. package/dist/CardSelect.styles.js +45 -24
  7. package/dist/CardSelect.types.d.ts +18 -9
  8. package/dist/CardSelectGroup/CardSelectGroup.d.ts +2 -2
  9. package/dist/CardSelectGroup/CardSelectGroup.js +21 -7
  10. package/dist/CardSelectGroup/CardSelectGroup.styles.d.ts +8 -2
  11. package/dist/CardSelectGroup/CardSelectGroup.styles.js +9 -12
  12. package/dist/CardSelectGroup/CardSelectGroup.types.d.ts +12 -5
  13. package/dist/constants.d.ts +4 -0
  14. package/dist/constants.js +4 -0
  15. package/dist/index.d.ts +2 -0
  16. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.6.0...@synerise/ds-card-select@0.7.0) (2024-06-05)
7
+
8
+
9
+ ### Features
10
+
11
+ * **card-select:** added items prop for rendering children ([838ae8d](https://github.com/Synerise/synerise-design/commit/838ae8db364a17589a7187f97e0a139c0bb673c5))
12
+
13
+
14
+
15
+
16
+
17
+ # [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)
18
+
19
+
20
+ ### Features
21
+
22
+ * **card-select:** add tag as ribbon ([9c05c78](https://github.com/Synerise/synerise-design/commit/9c05c78c2972a2c9ba096d0a30a4fe8f57e6b57e))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [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
29
 
8
30
  **Note:** Version bump only for package @synerise/ds-card-select
package/README.md CHANGED
@@ -50,24 +50,44 @@ yarn add @synerise/ds-card-select
50
50
 
51
51
  | Property | Description | Type | Default |
52
52
  | -------------------------- | -------------------------------------------------------------------- | ------------------ | ----------------------------------------------- |
53
- | className | The name of the container | string | - |
53
+ | className | The className of the container | string | - |
54
54
  | size | The size of the card | `small` / `medium` | `medium` |
55
- | raised | Defines if the component casts shadow on the background | boolean | - |
56
- | icon | Defines the URL of the icon | string | - |
57
- | iconSize | Defines the size of the icon | number | 82 px for `medium` size, 48 px for `small` size |
58
- | title | Defines the title of the card | string | - |
59
- | description | Defines the description of the card (not available for `small` size) | string | - |
60
- | value | Defines if the card is selected by a user | boolean |`false` |
61
- | tickVisible | Defines the display of the checkbox | boolean | `true` |
55
+ | raised | Defines border style | boolean | - |
56
+ | icon | Defines the icon | ReactNode | - |
57
+ | iconSize | Overwrites the predefined (82px for `medium` size, 48px for `small` size) size of the icon | number | - |
58
+ | title | Defines the title of the card | `ReactNode` | - |
59
+ | description | Defines the description of the card (not available for `small` size) | `ReactNode` | - |
60
+ | value | Defines if the card is selected by a user | boolean | `false` |
61
+ | tickVisible | Defines the display of the checkbox | boolean | `true` |
62
62
  | disabled | Defines if the card is disabled (`onChange` still fires) | boolean | - |
63
63
  | customTickVisible | Defines if the checkbox is custom | boolean | - |
64
64
  | customTickVisibleComponent | Custom checkbox component | ReactNode | - |
65
65
  | stretchToFit | Aligns the height of each card | boolean | - |
66
- | clearTooltip | Defines the title of clear icon tooltip | string | - |
67
- | thickSize | The size of the thick | `small` / `medium` | `medium` |
68
66
  | theme | Palette of colors | string | - |
69
- | elementsPosition | Defines the position of the elements on the card | string | `center` |
70
- | width | Defines the width of Group of cards | `large` / `small` | `large` |
67
+ | elementsPosition | Defines the position of the elements on the card | `left` / `right` / `center` | `center` |
68
+
69
+ | tagProps | Defines a ribbon-style tag | `TagProps` | - |
70
+ | tagTooltipProps | Defines tooltip for the ribbon tag | `TooltipProps` | - |
71
+
72
+
73
+ ### TagProps
74
+
75
+ accepts a subset of TagProps. See @synerise/ds-tags for API
76
+ ```
77
+ Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>
78
+ ```
79
+
80
+ ### CardSelectGroup
81
+
82
+ | Property | Description | Type | Default |
83
+ |-----------|-----------------------------------------------------------------------------------------------|------------------------------------------|-----------------------------------------|
84
+ | className | The name of the container | string | - |
85
+ | columns | Defines the number of columns. Defaults to 2, set to null to render all items in a single row | number / null | - |
86
+ | children | Deprecated. Use items prop instead | ReactNode | - |
87
+ | items | Array of CardSelect props to render CardSelect child elements | CardSelectProps & { key: string / numer} | - |
88
+ | width | Defines the size of the gap between items. Deprecated, use size prop | `small` / `large` | 16px for `small`, 24px for `large` size |
89
+ | size | The size of the CardSelect items and gap between them | `small` / `medium` | `medium` |
90
+
71
91
 
72
92
  ### Methods
73
93
 
package/dist/CardSelect.d.ts CHANGED
@@ -1,16 +1,16 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  declare const _default: React.ForwardRefExoticComponent<{
3
- title?: React.ReactNode;
4
3
  className?: string | undefined;
5
- children?: React.ReactNode;
6
- onChange?: ((value: boolean) => void) | undefined;
4
+ disabled?: boolean | undefined;
7
5
  onClick?: (() => void) | undefined;
6
+ title?: React.ReactNode;
7
+ onChange?: ((value: boolean) => void) | undefined;
8
+ key?: React.Key | undefined;
8
9
  stretchToFit?: boolean | undefined;
9
10
  error?: boolean | undefined;
10
11
  value?: boolean | undefined;
11
12
  raised?: boolean | undefined;
12
- size?: "small" | "medium" | undefined;
13
- disabled?: boolean | undefined;
13
+ size?: import("./CardSelect.types").CardSelectSizeType | undefined;
14
14
  description?: React.ReactNode;
15
15
  customTickVisible?: boolean | undefined;
16
16
  customTickVisibleComponent?: React.ReactNode;
@@ -18,7 +18,276 @@ declare const _default: React.ForwardRefExoticComponent<{
18
18
  icon?: React.ReactNode;
19
19
  iconSize?: number | undefined;
20
20
  tickSize?: number | undefined;
21
- elementsPosition?: string | undefined;
21
+ elementsPosition?: import("./CardSelect.types").CardSelectAlignType | undefined;
22
+ tagProps?: {
23
+ id?: string | undefined;
24
+ name?: string | undefined;
25
+ textColor?: string | undefined;
26
+ color?: string | undefined;
27
+ className?: string | undefined;
28
+ disabled?: boolean | undefined;
29
+ onClick?: ((() => void) & React.MouseEventHandler<HTMLDivElement>) | undefined;
30
+ prefixel?: React.ReactNode;
31
+ suffixel?: React.ReactNode;
32
+ defaultChecked?: boolean | undefined;
33
+ defaultValue?: string | number | readonly string[] | undefined;
34
+ suppressContentEditableWarning?: boolean | undefined;
35
+ suppressHydrationWarning?: boolean | undefined;
36
+ accessKey?: string | undefined;
37
+ autoFocus?: boolean | undefined;
38
+ contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
39
+ contextMenu?: string | undefined;
40
+ dir?: string | undefined;
41
+ draggable?: (boolean | "true" | "false") | undefined;
42
+ hidden?: boolean | undefined;
43
+ lang?: string | undefined;
44
+ nonce?: string | undefined;
45
+ placeholder?: string | undefined;
46
+ slot?: string | undefined;
47
+ spellCheck?: (boolean | "true" | "false") | undefined;
48
+ style?: React.CSSProperties | undefined;
49
+ tabIndex?: number | undefined;
50
+ title?: string | undefined;
51
+ translate?: "yes" | "no" | undefined;
52
+ radioGroup?: string | undefined;
53
+ role?: React.AriaRole | undefined;
54
+ about?: string | undefined;
55
+ content?: string | undefined;
56
+ datatype?: string | undefined;
57
+ inlist?: any;
58
+ prefix?: string | undefined;
59
+ property?: string | undefined;
60
+ rel?: string | undefined;
61
+ resource?: string | undefined;
62
+ rev?: string | undefined;
63
+ typeof?: string | undefined;
64
+ vocab?: string | undefined;
65
+ autoCapitalize?: string | undefined;
66
+ autoCorrect?: string | undefined;
67
+ autoSave?: string | undefined;
68
+ itemProp?: string | undefined;
69
+ itemScope?: boolean | undefined;
70
+ itemType?: string | undefined;
71
+ itemID?: string | undefined;
72
+ itemRef?: string | undefined;
73
+ results?: number | undefined;
74
+ security?: string | undefined;
75
+ unselectable?: "on" | "off" | undefined;
76
+ inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
77
+ is?: string | undefined;
78
+ 'aria-activedescendant'?: string | undefined;
79
+ 'aria-atomic'?: boolean | "true" | "false" | undefined;
80
+ 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
81
+ 'aria-busy'?: boolean | "true" | "false" | undefined;
82
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
83
+ 'aria-colcount'?: number | undefined;
84
+ 'aria-colindex'?: number | undefined;
85
+ 'aria-colspan'?: number | undefined;
86
+ 'aria-controls'?: string | undefined;
87
+ 'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
88
+ 'aria-describedby'?: string | undefined;
89
+ 'aria-details'?: string | undefined;
90
+ 'aria-disabled'?: boolean | "true" | "false" | undefined;
91
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
92
+ 'aria-errormessage'?: string | undefined;
93
+ 'aria-expanded'?: boolean | "true" | "false" | undefined;
94
+ 'aria-flowto'?: string | undefined;
95
+ 'aria-grabbed'?: boolean | "true" | "false" | undefined;
96
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
97
+ 'aria-hidden'?: boolean | "true" | "false" | undefined;
98
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
99
+ 'aria-keyshortcuts'?: string | undefined;
100
+ 'aria-label'?: string | undefined;
101
+ 'aria-labelledby'?: string | undefined;
102
+ 'aria-level'?: number | undefined;
103
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
104
+ 'aria-modal'?: boolean | "true" | "false" | undefined;
105
+ 'aria-multiline'?: boolean | "true" | "false" | undefined;
106
+ 'aria-multiselectable'?: boolean | "true" | "false" | undefined;
107
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
108
+ 'aria-owns'?: string | undefined;
109
+ 'aria-placeholder'?: string | undefined;
110
+ 'aria-posinset'?: number | undefined;
111
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
112
+ 'aria-readonly'?: boolean | "true" | "false" | undefined;
113
+ 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
114
+ 'aria-required'?: boolean | "true" | "false" | undefined;
115
+ 'aria-roledescription'?: string | undefined;
116
+ 'aria-rowcount'?: number | undefined;
117
+ 'aria-rowindex'?: number | undefined;
118
+ 'aria-rowspan'?: number | undefined;
119
+ 'aria-selected'?: boolean | "true" | "false" | undefined;
120
+ 'aria-setsize'?: number | undefined;
121
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
122
+ 'aria-valuemax'?: number | undefined;
123
+ 'aria-valuemin'?: number | undefined;
124
+ 'aria-valuenow'?: number | undefined;
125
+ 'aria-valuetext'?: string | undefined;
126
+ children?: React.ReactNode;
127
+ dangerouslySetInnerHTML?: {
128
+ __html: string | TrustedHTML;
129
+ } | undefined;
130
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
131
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
132
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
133
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
134
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
135
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
136
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
137
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
138
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
139
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
140
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
141
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
142
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
143
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
144
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
145
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
146
+ onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
147
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
148
+ onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
149
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
150
+ onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
151
+ onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
152
+ onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
153
+ onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
154
+ onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
155
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
156
+ onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
157
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
158
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
159
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
160
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
161
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
162
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
163
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
164
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
165
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
166
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
167
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
168
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
169
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
170
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
171
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
172
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
173
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
174
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
175
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
176
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
177
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
178
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
179
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
180
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
181
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
182
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
183
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
184
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
185
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
186
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
187
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
188
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
189
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
190
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
191
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
192
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
193
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
194
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
195
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
196
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
197
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
198
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
199
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
200
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
201
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
202
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
203
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
204
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
205
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
206
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
207
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
208
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
209
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
210
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
211
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
212
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
213
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
214
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
215
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
216
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
217
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
218
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
219
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
220
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
221
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
222
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
223
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
224
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
225
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
226
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
227
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
228
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
229
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
230
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
231
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
232
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
233
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
234
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
235
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
236
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
237
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
238
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
239
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
240
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
241
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
242
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
243
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
244
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
245
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
246
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
247
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
248
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
249
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
250
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
251
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
252
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
253
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
254
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
255
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
256
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
257
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
258
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
259
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
260
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
261
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
262
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
263
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
264
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
265
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
266
+ onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
267
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
268
+ onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
269
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
270
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
271
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
272
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
273
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
274
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
275
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
276
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
277
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
278
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
279
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
280
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
281
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
282
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
283
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
284
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
285
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
286
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
287
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
288
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
289
+ } | undefined;
290
+ tagTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
22
291
  } & {
23
292
  theme?: any;
24
293
  }>;
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,50 @@ 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
- if (tickIconRef !== null && tickIconRef.current !== null) tickIconRef.current.blur();
47
+ var _tickIconRef$current;
48
+
49
+ // eslint-disable-next-line no-unused-expressions
50
+ (_tickIconRef$current = tickIconRef.current) == null || _tickIconRef$current.blur();
41
51
  });
42
52
  };
43
53
 
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
-
54
+ var realIconSize = iconSize || (size === 'small' ? DEFAULT_ICON_SIZE_SMALL : DEFAULT_ICON_SIZE_LARGE);
55
+ var realTickSize = tickSize || (size === 'small' ? DEFAULT_TICK_SIZE_SMALL : DEFAULT_TICK_SIZE_LARGE);
56
+ var tagElement = tagProps && /*#__PURE__*/React.createElement(S.TagRibbonAnchor, null, /*#__PURE__*/React.createElement(S.TagRibbon, _extends({}, tagProps, {
57
+ shape: TagShape.DEFAULT_SQUARE,
58
+ asPill: true
59
+ })));
60
+ var tagElementWithTooltip = tagTooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tagTooltipProps, tagElement) : tagElement;
56
61
  useOnClickOutside(wrapperRef, function () {
57
- pressed && setPressed(false);
62
+ isPressed && setIsPressed(false);
58
63
  });
59
64
  return /*#__PURE__*/React.createElement(S.CardWrapper, {
65
+ size: size,
66
+ className: "ds-card-select-wrapper",
60
67
  disabled: disabled,
61
- stretchToFit: stretchToFit
62
- }, /*#__PURE__*/React.createElement(S.Container, {
68
+ stretchToFit: stretchToFit,
69
+ hasTick: tickVisible || customTickVisible,
70
+ hasIcon: !!icon,
71
+ elementsPosition: elementsPosition
72
+ }, tagElementWithTooltip, /*#__PURE__*/React.createElement(S.Container, {
63
73
  error: !!error,
64
74
  ref: wrapperRef,
65
- pressed: pressed,
75
+ pressed: isPressed,
66
76
  raised: raised,
67
77
  disabled: disabled,
68
78
  value: value,
@@ -87,11 +97,7 @@ var CardSelect = function CardSelect(_ref) {
87
97
  component: /*#__PURE__*/React.createElement(Check3M, null)
88
98
  }) : /*#__PURE__*/React.createElement(S.RadioShape, {
89
99
  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, {
100
+ }))), /*#__PURE__*/React.createElement(S.Main, null, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
95
101
  size: size
96
102
  }, /*#__PURE__*/React.createElement(Icon, {
97
103
  component: icon,
package/dist/CardSelect.styles.d.ts CHANGED
@@ -1,45 +1,54 @@
1
+ import React from 'react';
1
2
  import { ThemeProps } from '@synerise/ds-core';
3
+ import { CardSelectAlignType, CardSelectSizeType } from './CardSelect.types';
2
4
  export declare const RadioShape: import("styled-components").StyledComponent<"div", any, {
3
- size?: string | undefined;
5
+ size?: CardSelectSizeType | undefined;
4
6
  }, never>;
5
7
  export declare const Title: import("styled-components").StyledComponent<"div", any, {
6
8
  hasIcon: boolean;
7
- size?: string | undefined;
9
+ size?: CardSelectSizeType | undefined;
8
10
  }, never>;
9
11
  export declare const Description: import("styled-components").StyledComponent<"div", any, {
10
12
  hasTitle?: boolean | undefined;
11
13
  hasIcon?: boolean | undefined;
12
- size?: string | undefined;
14
+ size?: CardSelectSizeType | undefined;
13
15
  }, never>;
14
16
  export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
15
- size?: string | undefined;
17
+ size?: CardSelectSizeType | undefined;
16
18
  }, never>;
17
19
  export declare const Aside: import("styled-components").StyledComponent<"div", any, {
18
- size?: string | undefined;
20
+ size?: CardSelectSizeType | undefined;
19
21
  }, never>;
20
22
  export declare const Container: import("styled-components").StyledComponent<"div", any, {
21
23
  disabled?: boolean | undefined;
22
24
  raised?: boolean | undefined;
23
25
  value?: boolean | undefined;
24
- size?: string | undefined;
25
- elementsPosition: string | 'left' | 'center' | 'right';
26
+ size?: CardSelectSizeType | undefined;
27
+ elementsPosition: CardSelectAlignType;
26
28
  selected?: boolean | undefined;
27
29
  pressed?: boolean | undefined;
28
30
  stretchToFit?: boolean | undefined;
29
31
  error?: boolean | undefined;
30
32
  } & 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>;
33
+ export declare const TagRibbonAnchor: import("styled-components").StyledComponent<"div", any, {}, never>;
34
+ export declare const TagRibbon: import("styled-components").StyledComponent<{
35
+ ({ 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;
36
+ defaultProps: {
37
+ shape: import("@synerise/ds-tags").TagShape;
38
+ };
39
+ }, any, {}, never>;
40
+ export declare const Main: import("styled-components").StyledComponent<"div", any, {}, never>;
36
41
  export declare const TickIcon: import("styled-components").StyledComponent<"div", any, {
37
- size?: string | undefined;
42
+ size?: CardSelectSizeType | undefined;
38
43
  disabled?: boolean | undefined;
39
44
  selected?: boolean | undefined;
40
- elementsPosition: string | 'left' | 'center' | 'right';
45
+ elementsPosition: CardSelectAlignType;
41
46
  }, never>;
42
47
  export declare const CardWrapper: import("styled-components").StyledComponent<"div", any, {
48
+ size?: CardSelectSizeType | undefined;
43
49
  disabled?: boolean | undefined;
44
50
  stretchToFit?: boolean | undefined;
51
+ hasTick?: boolean | undefined;
52
+ hasIcon?: boolean | undefined;
53
+ elementsPosition?: CardSelectAlignType | undefined;
45
54
  }, 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,15 +44,15 @@ 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"
53
- })(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ";"], getVar('grey-800'), function (props) {
55
+ })(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar('grey-800'), function (props) {
54
56
  return sizeCondition('400', '500', props);
55
57
  }, function (props) {
56
58
  return sizeCondition('13px', '14px', props);
@@ -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,36 @@ 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;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;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;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n cursor:not-allowed;\n "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))), Title, function (props) {
126
+ return props.hasTick && !props.hasIcon && css(["padding:0 24px;"]);
127
+ }, TagRibbonAnchor, function (props) {
128
+ return props.elementsPosition === 'right' ? 'flex-start' : 'flex-end';
129
+ }, function (props) {
130
+ return props.elementsPosition === 'left' ? 'right' : 'left';
131
+ }, function (props) {
132
+ var withTickOffset = props.size === 'small' ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
133
+ return props.hasTick ? withTickOffset : TAG_LEFT_OFFSET;
134
+ }, TagRibbon, function (props) {
135
+ return props.elementsPosition === 'left' ? 'left' : 'right';
136
+ });
package/dist/CardSelect.types.d.ts CHANGED
@@ -1,24 +1,33 @@
1
- import * as React from 'react';
2
- export interface CardSelectProps {
3
- icon?: React.ReactNode;
1
+ import type { Key, 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 CardSelectAlignType = 'left' | 'center' | 'right';
6
+ export type CardSelectSizeType = 'small' | 'medium';
7
+ export type CardSelectProps = {
8
+ icon?: ReactNode;
9
+ key?: Key;
4
10
  raised?: boolean;
5
- description?: string | React.ReactNode;
6
- title?: string | React.ReactNode;
11
+ description?: ReactNode;
12
+ title?: ReactNode;
7
13
  value?: boolean;
8
14
  disabled?: boolean;
9
15
  tickVisible?: boolean;
10
- size?: 'small' | 'medium';
16
+ size?: CardSelectSizeType;
11
17
  className?: string;
12
18
  iconSize?: number;
13
19
  tickSize?: number;
14
20
  stretchToFit?: boolean;
15
21
  customTickVisible?: boolean;
16
- customTickVisibleComponent?: React.ReactNode;
22
+ customTickVisibleComponent?: ReactNode;
23
+ tagProps?: CardSelectTagProps;
24
+ tagTooltipProps?: TooltipProps;
17
25
  theme: {
18
26
  [k: string]: string;
19
27
  };
20
28
  onChange?: (value: boolean) => void;
21
29
  onClick?: () => void;
22
- elementsPosition?: string | 'left' | 'center' | 'right';
30
+ elementsPosition?: CardSelectAlignType;
23
31
  error?: boolean;
24
- }
32
+ };
33
+ export {};
package/dist/CardSelectGroup/CardSelectGroup.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  import { CardSelectGroupProps } from './CardSelectGroup.types';
3
- declare const CardSelectGroup: React.FC<CardSelectGroupProps>;
3
+ declare const CardSelectGroup: ({ className, children, items, size, width, columns, }: CardSelectGroupProps) => React.JSX.Element;
4
4
  export default CardSelectGroup;
package/dist/CardSelectGroup/CardSelectGroup.js CHANGED
@@ -1,18 +1,32 @@
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, { Children } from 'react';
4
+ import CardSelect from '../CardSelect';
2
5
  import * as S from './CardSelectGroup.styles';
6
+ var DEFAULT_COLUMNS = 2;
7
+ var DEFAULT_SIZE = 'large';
3
8
 
4
9
  var CardSelectGroup = function CardSelectGroup(_ref) {
5
10
  var className = _ref.className,
6
11
  children = _ref.children,
12
+ items = _ref.items,
13
+ size = _ref.size,
7
14
  _ref$width = _ref.width,
8
- width = _ref$width === void 0 ? 'large' : _ref$width,
15
+ width = _ref$width === void 0 ? DEFAULT_SIZE : _ref$width,
9
16
  _ref$columns = _ref.columns,
10
- columns = _ref$columns === void 0 ? 2 : _ref$columns;
11
- return /*#__PURE__*/React.createElement(S.CardGroup, {
17
+ columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns;
18
+ var cardsCount = (items == null ? void 0 : items.length) || Children.toArray(children).length;
19
+ return /*#__PURE__*/React.createElement(S.CardSelectGroupWrapper, {
12
20
  className: className,
13
- width: width,
14
- columns: columns
15
- }, children);
21
+ size: size || width,
22
+ columns: columns,
23
+ itemsCount: cardsCount
24
+ }, items ? items.map(function (item) {
25
+ return /*#__PURE__*/React.createElement(CardSelect, _extends({}, item, {
26
+ key: item.key,
27
+ size: size || item.size
28
+ }));
29
+ }) : children);
16
30
  };
17
31
 
18
32
  export default CardSelectGroup;
package/dist/CardSelectGroup/CardSelectGroup.styles.d.ts CHANGED
@@ -1,4 +1,10 @@
1
+ export declare const CardSelectGroupWrapper: import("styled-components").StyledComponent<"div", any, {
2
+ itemsCount?: number | undefined;
3
+ size: 'small' | 'medium' | 'large';
4
+ columns: number | null;
5
+ }, never>;
1
6
  export declare const CardGroup: import("styled-components").StyledComponent<"div", any, {
2
- width: string;
3
- columns: number;
7
+ itemsCount?: number | undefined;
8
+ size: 'small' | 'medium' | 'large';
9
+ columns: number | null;
4
10
  }, never>;
package/dist/CardSelectGroup/CardSelectGroup.styles.js CHANGED
@@ -1,14 +1,11 @@
1
- import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
2
-
3
- export var CardGroup = styled.div.withConfig({
4
- displayName: "CardSelectGroupstyles__CardGroup",
1
+ import styled from 'styled-components';
2
+ export var CardSelectGroupWrapper = styled.div.withConfig({
3
+ displayName: "CardSelectGroupstyles__CardSelectGroupWrapper",
5
4
  componentId: "sc-1xnksbf-0"
6
- })(["width:", ";background-color:white;padding:24px;display:grid;grid-template-columns:", ";column-gap:", ";row-gap:", ";.ds-card-select{width:100%;display:flex;flex:1;max-width:100%;min-width:0;}"], function (props) {
7
- return props.width === 'large' ? '588px' : '338px';
8
- }, function (props) {
9
- return new Array(props.columns).fill('1fr').join(' ');
5
+ })(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"], function (props) {
6
+ return new Array(props.columns || props.itemsCount).fill('1fr').join(' ');
10
7
  }, function (props) {
11
- return props.width === 'large' ? '24px' : '16px';
12
- }, function (props) {
13
- return props.width === 'large' ? '24px' : '16px';
14
- });
8
+ return props.size === 'small' ? '16px' : '24px';
9
+ }); // @deprecated - use CardSelectGroupWrapper instead
10
+
11
+ export var CardGroup = CardSelectGroupWrapper;
package/dist/CardSelectGroup/CardSelectGroup.types.d.ts CHANGED
@@ -1,7 +1,14 @@
1
- import * as React from 'react';
2
- export interface CardSelectGroupProps {
1
+ import type { Key, ReactNode } from 'react';
2
+ import { CardSelectProps } from '../CardSelect.types';
3
+ type CardSelectPropsWithKey = Omit<CardSelectProps, 'key'> & {
4
+ key: Key;
5
+ };
6
+ export type CardSelectGroupProps = {
7
+ children?: ReactNode;
3
8
  className?: string;
4
- children: React.ReactNode;
9
+ columns?: number | null;
10
+ items?: CardSelectPropsWithKey[];
11
+ size?: CardSelectProps['size'];
5
12
  width?: 'small' | 'large';
6
- columns?: number;
7
- }
13
+ };
14
+ 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.7.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": "81acd8bf6b5fb04a22647e43d2c9289dcceb61a2"
49
51
  }