@qoretechnologies/reqore 0.38.2 → 0.38.4
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/__tests__/tree.test.tsx +0 -16
- package/dist/components/Button/index.d.ts +2 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +5 -5
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Dropdown/list.d.ts.map +1 -1
- package/dist/components/Dropdown/list.js +4 -3
- package/dist/components/Dropdown/list.js.map +1 -1
- package/dist/components/Icon/index.d.ts +2 -0
- package/dist/components/Icon/index.d.ts.map +1 -1
- package/dist/components/Icon/index.js +13 -6
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +3 -2
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Tabs/item.d.ts.map +1 -1
- package/dist/components/Tabs/item.js +4 -3
- package/dist/components/Tabs/item.js.map +1 -1
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +3 -1
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/components/Tree/index.d.ts.map +1 -1
- package/dist/components/Tree/index.js +25 -18
- package/dist/components/Tree/index.js.map +1 -1
- package/dist/constants/colors.js +1 -1
- package/package.json +1 -1
- package/src/components/Button/index.tsx +12 -5
- package/src/components/Dropdown/list.tsx +8 -3
- package/src/components/Icon/index.tsx +10 -3
- package/src/components/Paragraph/index.tsx +3 -1
- package/src/components/Tabs/item.tsx +7 -5
- package/src/components/Textarea/index.tsx +3 -0
- package/src/components/Tree/index.tsx +51 -31
- package/src/constants/colors.ts +1 -1
- package/src/stories/Button/Button.stories.tsx +7 -0
- package/src/stories/Tabs/Tabs.stories.tsx +27 -0
- package/src/stories/TextArea/TextAreaTests.stories.tsx +7 -2
- package/tests.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAuD;AACvD,+BAA0C;AAC1C,wEAAuC;AACvC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tree/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/constants/colors.js
CHANGED
package/package.json
CHANGED
|
@@ -283,9 +283,10 @@ export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
|
|
|
283
283
|
content?: TReqoreBadge | TReqoreBadge[];
|
|
284
284
|
wrap?: boolean;
|
|
285
285
|
wrapGroup?: boolean;
|
|
286
|
+
compact?: boolean;
|
|
286
287
|
}
|
|
287
288
|
|
|
288
|
-
export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProps) => {
|
|
289
|
+
export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButtonBadgeProps) => {
|
|
289
290
|
const renderTag = useCallback(
|
|
290
291
|
({ size, color, theme, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
|
|
291
292
|
<ReqoreTag
|
|
@@ -309,7 +310,7 @@ export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProp
|
|
|
309
310
|
return (
|
|
310
311
|
<>
|
|
311
312
|
<ReqoreSpacer
|
|
312
|
-
width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
|
|
313
|
+
width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
|
|
313
314
|
height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
|
|
314
315
|
/>
|
|
315
316
|
<ReqoreTagGroup wrap={wrapGroup}>
|
|
@@ -363,6 +364,7 @@ const ReqoreButton = memo(
|
|
|
363
364
|
leftIconProps,
|
|
364
365
|
rightIconProps,
|
|
365
366
|
label,
|
|
367
|
+
compact,
|
|
366
368
|
as,
|
|
367
369
|
...rest
|
|
368
370
|
}: IReqoreButtonProps,
|
|
@@ -418,6 +420,7 @@ const ReqoreButton = memo(
|
|
|
418
420
|
wrap={wrap}
|
|
419
421
|
description={description}
|
|
420
422
|
className={`${className || ''} reqore-control reqore-button`}
|
|
423
|
+
compact={compact}
|
|
421
424
|
>
|
|
422
425
|
<StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
|
|
423
426
|
{hasLeftIcon ? (
|
|
@@ -426,6 +429,7 @@ const ReqoreButton = memo(
|
|
|
426
429
|
icon={icon}
|
|
427
430
|
size={size}
|
|
428
431
|
color={leftIconColor || iconColor}
|
|
432
|
+
compact={compact}
|
|
429
433
|
{...leftIconProps}
|
|
430
434
|
style={
|
|
431
435
|
textAlign !== 'left' || iconsAlign === 'center'
|
|
@@ -440,7 +444,7 @@ const ReqoreButton = memo(
|
|
|
440
444
|
}
|
|
441
445
|
/>
|
|
442
446
|
{_children || hasRightIcon ? (
|
|
443
|
-
<ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
|
|
447
|
+
<ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
|
|
444
448
|
) : null}
|
|
445
449
|
</>
|
|
446
450
|
) : _children ? (
|
|
@@ -471,7 +475,7 @@ const ReqoreButton = memo(
|
|
|
471
475
|
</StyledAnimatedTextWrapper>
|
|
472
476
|
)}
|
|
473
477
|
{(badge || badge === 0) && !wrap ? (
|
|
474
|
-
<ButtonBadge content={badge} size={size} theme={theme} />
|
|
478
|
+
<ButtonBadge content={badge} size={size} theme={theme} compact={compact} />
|
|
475
479
|
) : null}
|
|
476
480
|
{!hasRightIcon ? (
|
|
477
481
|
_children ? (
|
|
@@ -482,11 +486,14 @@ const ReqoreButton = memo(
|
|
|
482
486
|
) : null
|
|
483
487
|
) : (
|
|
484
488
|
<>
|
|
485
|
-
{_children || badge ?
|
|
489
|
+
{_children || badge ? (
|
|
490
|
+
<ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
|
|
491
|
+
) : null}
|
|
486
492
|
<ReqoreIcon
|
|
487
493
|
icon={rightIcon}
|
|
488
494
|
size={size}
|
|
489
495
|
color={rightIconColor || iconColor}
|
|
496
|
+
compact={compact}
|
|
490
497
|
{...rightIconProps}
|
|
491
498
|
style={
|
|
492
499
|
textAlign !== 'right' || iconsAlign === 'center'
|
|
@@ -81,7 +81,7 @@ const ReqoreDropdownList = memo(
|
|
|
81
81
|
|
|
82
82
|
return _items.filter((item) => {
|
|
83
83
|
if (item.divider) {
|
|
84
|
-
return
|
|
84
|
+
return true;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
const text: string | undefined = item.label || item.value || item.children;
|
|
@@ -153,7 +153,8 @@ const ReqoreDropdownList = memo(
|
|
|
153
153
|
{_onBackClick && (
|
|
154
154
|
<ReqoreButton
|
|
155
155
|
icon='ArrowLeftSLine'
|
|
156
|
-
fluid
|
|
156
|
+
fluid={!filterable}
|
|
157
|
+
fixed={filterable}
|
|
157
158
|
onClick={_onBackClick}
|
|
158
159
|
className='reqore-dropdown-back-button'
|
|
159
160
|
/>
|
|
@@ -163,7 +164,10 @@ const ReqoreDropdownList = memo(
|
|
|
163
164
|
value={onFilterChange ? filter : query}
|
|
164
165
|
icon='SearchLine'
|
|
165
166
|
onChange={handleQueryChange}
|
|
166
|
-
placeholder={
|
|
167
|
+
placeholder={
|
|
168
|
+
filterPlaceholder ||
|
|
169
|
+
`Search ${size(_items.filter((item) => !item.divider))} items...`
|
|
170
|
+
}
|
|
167
171
|
onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
|
|
168
172
|
{...inputProps}
|
|
169
173
|
/>
|
|
@@ -195,6 +199,7 @@ const ReqoreDropdownList = memo(
|
|
|
195
199
|
<ReqoreDropdownItem
|
|
196
200
|
key={item.label || item.value || index}
|
|
197
201
|
{...item}
|
|
202
|
+
disabled={'items' in item && !size(item.items) ? true : item.disabled}
|
|
198
203
|
onItemClick={handleItemClick}
|
|
199
204
|
scrollIntoView={scrollToSelected && item.selected && !multiSelect}
|
|
200
205
|
/>
|
|
@@ -29,6 +29,8 @@ export interface IReqoreIconProps
|
|
|
29
29
|
rounded?: boolean;
|
|
30
30
|
rotation?: number;
|
|
31
31
|
animation?: 'spin' | 'heartbeat';
|
|
32
|
+
interactive?: boolean;
|
|
33
|
+
compact?: boolean;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
const SpinKeyframes = keyframes`
|
|
@@ -51,18 +53,23 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
|
|
|
51
53
|
|
|
52
54
|
border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
|
|
53
55
|
rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
|
|
56
|
+
cursor: ${({ interactive }) => (interactive ? 'pointer' : undefined)};
|
|
54
57
|
|
|
55
|
-
${({ margin, size }) =>
|
|
58
|
+
${({ margin, size, compact }) =>
|
|
56
59
|
margin &&
|
|
57
60
|
css`
|
|
58
61
|
margin-left: ${margin === 'left' || margin === 'both'
|
|
59
62
|
? isStringSize(size)
|
|
60
|
-
? `${PADDING_FROM_SIZE[size]}px`
|
|
63
|
+
? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
|
|
64
|
+
: compact
|
|
65
|
+
? '3px'
|
|
61
66
|
: '10px'
|
|
62
67
|
: undefined};
|
|
63
68
|
margin-right: ${margin === 'right' || margin === 'both'
|
|
64
69
|
? isStringSize(size)
|
|
65
|
-
? `${PADDING_FROM_SIZE[size]}px`
|
|
70
|
+
? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
|
|
71
|
+
: compact
|
|
72
|
+
? '3px'
|
|
66
73
|
: '10px'
|
|
67
74
|
: undefined};
|
|
68
75
|
`}
|
|
@@ -17,7 +17,8 @@ export interface IReqoreParagraphProps
|
|
|
17
17
|
export const StyledParagraph = styled(StyledTextEffect)`
|
|
18
18
|
padding: 0;
|
|
19
19
|
margin: 0;
|
|
20
|
-
color: ${({ theme, intent }) =>
|
|
20
|
+
color: ${({ theme, intent }) =>
|
|
21
|
+
intent ? theme.intents[intent] : theme.text?.color || 'inherit'};
|
|
21
22
|
font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
|
|
22
23
|
`;
|
|
23
24
|
|
|
@@ -29,6 +30,7 @@ export const ReqoreP = memo(
|
|
|
29
30
|
<StyledParagraph
|
|
30
31
|
as='p'
|
|
31
32
|
theme={theme}
|
|
33
|
+
color={theme.text.color}
|
|
32
34
|
intent={intent}
|
|
33
35
|
{...props}
|
|
34
36
|
_size={size}
|
|
@@ -29,7 +29,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
|
|
32
|
-
${({ disabled, vertical, fill, padded }: IReqoreTabListItemStyle) => {
|
|
32
|
+
${({ disabled, vertical, fill, fixed, padded }: IReqoreTabListItemStyle) => {
|
|
33
33
|
return css`
|
|
34
34
|
display: flex;
|
|
35
35
|
flex-shrink: 0;
|
|
@@ -80,10 +80,11 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
|
|
|
80
80
|
`}
|
|
81
81
|
`}
|
|
82
82
|
|
|
83
|
-
${fill &&
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
${fill && !fixed
|
|
84
|
+
? css`
|
|
85
|
+
flex: 1 0 auto;
|
|
86
|
+
`
|
|
87
|
+
: undefined}
|
|
87
88
|
|
|
88
89
|
${disabled &&
|
|
89
90
|
css`
|
|
@@ -148,6 +149,7 @@ const ReqoreTabsListItem = memo(
|
|
|
148
149
|
vertical={vertical}
|
|
149
150
|
theme={theme}
|
|
150
151
|
fill={fill}
|
|
152
|
+
fixed={rest.fixed}
|
|
151
153
|
padded={padded}
|
|
152
154
|
>
|
|
153
155
|
{label || icon ? (
|
|
@@ -188,6 +188,8 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
|
|
|
188
188
|
)}`;
|
|
189
189
|
|
|
190
190
|
setValue(value);
|
|
191
|
+
// Trigger the onChange event
|
|
192
|
+
onChange?.({ target: { value } } as any);
|
|
191
193
|
},
|
|
192
194
|
[inputRef, _value]
|
|
193
195
|
);
|
|
@@ -232,6 +234,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
|
|
|
232
234
|
component={StyledTextareaWrapper}
|
|
233
235
|
className={`${className || ''} reqore-control-wrapper`}
|
|
234
236
|
width={width}
|
|
237
|
+
filterable
|
|
235
238
|
height={height}
|
|
236
239
|
fluid={fluid}
|
|
237
240
|
fixed={fixed}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { cloneDeep, size as lodashSize } from 'lodash';
|
|
2
2
|
import { useMemo, useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import {
|
|
4
|
+
import { ReqoreHorizontalSpacer, ReqoreIcon, ReqoreP, ReqorePanel, useReqoreProperty } from '../..';
|
|
5
5
|
import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
|
|
6
6
|
import { IReqoreTheme } from '../../constants/theme';
|
|
7
|
-
import { getTypeFromValue } from '../../helpers/utils';
|
|
7
|
+
import { getOneLessSize, getTypeFromValue } from '../../helpers/utils';
|
|
8
8
|
import { IWithReqoreSize } from '../../types/global';
|
|
9
|
-
import ReqoreButton from '../Button';
|
|
9
|
+
import ReqoreButton, { IReqoreButtonProps } from '../Button';
|
|
10
10
|
import ReqoreControlGroup from '../ControlGroup';
|
|
11
11
|
import { ReqoreExportModal } from '../ExportModal';
|
|
12
12
|
import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
|
|
13
13
|
import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
|
|
14
|
-
import ReqoreTag from '../Tag';
|
|
15
14
|
|
|
16
15
|
export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
|
|
17
16
|
data: Record<string, unknown> | Array<any>;
|
|
@@ -33,8 +32,10 @@ export interface ITreeStyle {
|
|
|
33
32
|
size?: TSizes;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
export const StyledTreeLabel = styled(
|
|
35
|
+
export const StyledTreeLabel = styled(ReqoreP)`
|
|
37
36
|
flex-shrink: 1;
|
|
37
|
+
|
|
38
|
+
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
|
|
38
39
|
`;
|
|
39
40
|
|
|
40
41
|
export const StyledTreeWrapper = styled.div<ITreeStyle>`
|
|
@@ -107,49 +108,68 @@ export const ReqoreTree = ({
|
|
|
107
108
|
isExpandable = false;
|
|
108
109
|
}
|
|
109
110
|
|
|
111
|
+
const badges: IReqoreButtonProps['badge'] = [`{...} ${lodashSize(data[key])} items`];
|
|
112
|
+
|
|
113
|
+
if (_showTypes) {
|
|
114
|
+
badges.push({
|
|
115
|
+
icon: 'CodeBoxFill',
|
|
116
|
+
label: dataType,
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
110
120
|
return (
|
|
111
121
|
<StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
|
|
112
122
|
{isObject ? (
|
|
113
123
|
<ReqoreControlGroup size={zoomToSize[zoom]}>
|
|
124
|
+
{level !== 1 && <ReqoreHorizontalSpacer width={5} />}
|
|
114
125
|
<ReqoreButton
|
|
126
|
+
compact
|
|
127
|
+
minimal
|
|
115
128
|
className='reqore-tree-toggle'
|
|
116
129
|
icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
|
|
117
130
|
intent={isExpandable ? 'info' : undefined}
|
|
118
131
|
onClick={() => handleItemClick(stateKey, isExpandable)}
|
|
119
|
-
flat
|
|
132
|
+
flat={false}
|
|
133
|
+
badge={badges}
|
|
120
134
|
>
|
|
121
135
|
{displayKey}
|
|
122
136
|
</ReqoreButton>
|
|
123
|
-
{_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
|
|
124
137
|
</ReqoreControlGroup>
|
|
125
138
|
) : (
|
|
126
|
-
<ReqoreControlGroup
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
139
|
+
<ReqoreControlGroup verticalAlign='flex-start'>
|
|
140
|
+
{level !== 1 && <ReqoreHorizontalSpacer width={5} />}
|
|
141
|
+
<ReqoreP
|
|
142
|
+
customTheme={{ text: { color: 'info:lighten' } }}
|
|
143
|
+
style={{ flexShrink: 0 }}
|
|
144
|
+
size={zoomToSize[zoom]}
|
|
145
|
+
>
|
|
146
|
+
{displayKey}:
|
|
147
|
+
</ReqoreP>
|
|
148
|
+
{withLabelCopy && (
|
|
149
|
+
<ReqoreIcon
|
|
150
|
+
interactive
|
|
151
|
+
icon='ClipboardLine'
|
|
152
|
+
size={getOneLessSize(zoomToSize[zoom])}
|
|
153
|
+
onClick={() => {
|
|
154
|
+
try {
|
|
155
|
+
navigator.clipboard.writeText(JSON.stringify(data[key]));
|
|
156
|
+
addNotification({
|
|
157
|
+
content: 'Successfuly copied to clipboard',
|
|
158
|
+
id: Date.now().toString(),
|
|
159
|
+
type: 'success',
|
|
160
|
+
duration: 3000,
|
|
161
|
+
});
|
|
162
|
+
} catch (e) {
|
|
163
|
+
console.error(e);
|
|
164
|
+
}
|
|
165
|
+
}}
|
|
166
|
+
/>
|
|
167
|
+
)}
|
|
149
168
|
<StyledTreeLabel
|
|
150
169
|
flat
|
|
151
|
-
onClick={() => onItemClick(data[key], [...path, key])}
|
|
170
|
+
onClick={() => onItemClick?.(data[key], [...path, key])}
|
|
152
171
|
className='reqore-tree-label'
|
|
172
|
+
size={zoomToSize[zoom]}
|
|
153
173
|
>
|
|
154
174
|
{JSON.stringify(data[key])}
|
|
155
175
|
</StyledTreeLabel>
|
package/src/constants/colors.ts
CHANGED
|
@@ -53,6 +53,13 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
|
|
|
53
53
|
</ReqoreButton>
|
|
54
54
|
<ReqoreButton {...buttonProps} rightIcon={undefined} compact />
|
|
55
55
|
<ReqoreButton {...buttonProps} compact />
|
|
56
|
+
<ReqoreButton
|
|
57
|
+
{...buttonProps}
|
|
58
|
+
compact
|
|
59
|
+
icon='AirplayLine'
|
|
60
|
+
rightIcon='Building3Fill'
|
|
61
|
+
label='Compact'
|
|
62
|
+
/>
|
|
56
63
|
<ReqoreButton {...buttonProps} readOnly onClick={alert}>
|
|
57
64
|
Read only
|
|
58
65
|
</ReqoreButton>
|
|
@@ -247,6 +247,33 @@ export const Fill: Story = {
|
|
|
247
247
|
},
|
|
248
248
|
};
|
|
249
249
|
|
|
250
|
+
export const FillWithFixedItem: Story = {
|
|
251
|
+
render: () => {
|
|
252
|
+
return (
|
|
253
|
+
<ReqoreTabs
|
|
254
|
+
fill
|
|
255
|
+
tabs={[
|
|
256
|
+
{ id: 'tab1', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
|
|
257
|
+
{ id: 'tab2', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
|
|
258
|
+
{ id: 'tab3', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
|
|
259
|
+
{ id: 'tab4', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
|
|
260
|
+
]}
|
|
261
|
+
>
|
|
262
|
+
<ReqoreTabsContent tabId='tab1'>
|
|
263
|
+
<ReqoreH3>Tab 1</ReqoreH3>
|
|
264
|
+
</ReqoreTabsContent>
|
|
265
|
+
<ReqoreTabsContent tabId='tab2'>
|
|
266
|
+
<ReqoreH3>Tab 2</ReqoreH3>
|
|
267
|
+
</ReqoreTabsContent>
|
|
268
|
+
</ReqoreTabs>
|
|
269
|
+
);
|
|
270
|
+
},
|
|
271
|
+
|
|
272
|
+
args: {
|
|
273
|
+
fill: true,
|
|
274
|
+
},
|
|
275
|
+
};
|
|
276
|
+
|
|
250
277
|
export const CustomActiveIntent: Story = {
|
|
251
278
|
render: Template,
|
|
252
279
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { expect } from '@storybook/jest';
|
|
1
|
+
import { expect, jest } from '@storybook/jest';
|
|
2
2
|
import { StoryObj } from '@storybook/react';
|
|
3
3
|
import { fireEvent, waitFor, within } from '@storybook/testing-library';
|
|
4
4
|
import { IReqoreTextareaProps } from '../../components/Textarea';
|
|
@@ -16,6 +16,7 @@ const meta = {
|
|
|
16
16
|
scaleWithContent: true,
|
|
17
17
|
fluid: undefined,
|
|
18
18
|
placeholder: 'Placeholder',
|
|
19
|
+
onChange: jest.fn(),
|
|
19
20
|
},
|
|
20
21
|
argTypes: {
|
|
21
22
|
...MinimalArg(),
|
|
@@ -77,12 +78,13 @@ export const ItemCanBeSelected: Story = {
|
|
|
77
78
|
label: 'New event in Google Calendar',
|
|
78
79
|
icon: 'Calendar2Fill',
|
|
79
80
|
description: 'When a new event is created in Google Calendar',
|
|
81
|
+
items: [],
|
|
80
82
|
},
|
|
81
83
|
],
|
|
82
84
|
},
|
|
83
85
|
},
|
|
84
86
|
|
|
85
|
-
play: async ({ canvasElement }) => {
|
|
87
|
+
play: async ({ canvasElement, args }) => {
|
|
86
88
|
const canvas = within(canvasElement);
|
|
87
89
|
|
|
88
90
|
await sleep(200);
|
|
@@ -99,5 +101,8 @@ export const ItemCanBeSelected: Story = {
|
|
|
99
101
|
await fireEvent.click(canvas.getAllByText('Author')[0]);
|
|
100
102
|
|
|
101
103
|
await expect(canvas.getAllByText('$state:{1.field.author}')[0]).toBeTruthy();
|
|
104
|
+
await expect(args.onChange).toHaveBeenCalledWith({
|
|
105
|
+
target: { value: '$state:{1.field.author}' },
|
|
106
|
+
});
|
|
102
107
|
},
|
|
103
108
|
};
|