@pingux/astro 2.9.0-alpha.3 → 2.9.0-alpha.5
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/lib/cjs/components/ArrayField/ArrayField.stories.js +6 -4
- package/lib/cjs/components/Avatar/Avatar.stories.js +4 -2
- package/lib/cjs/components/Badge/Badge.stories.js +4 -2
- package/lib/cjs/components/Box/Box.stories.js +8 -6
- package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +3 -1
- package/lib/cjs/components/Button/Button.stories.js +4 -0
- package/lib/cjs/components/Button/buttonAttributes.js +0 -2
- package/lib/cjs/components/Calendar/Calendar.stories.js +13 -11
- package/lib/cjs/components/Card/Card.stories.js +3 -1
- package/lib/cjs/components/CheckboxField/CheckboxField.stories.js +5 -3
- package/lib/cjs/components/CodeView/CodeView.stories.js +3 -1
- package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.stories.js +8 -9
- package/lib/cjs/components/ColorField/ColorField.stories.js +11 -9
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +9 -9
- package/lib/cjs/components/DataTable/DataTable.stories.js +7 -5
- package/lib/cjs/components/DatePicker/DatePicker.stories.js +16 -14
- package/lib/cjs/components/FileInputField/FileInputField.stories.js +5 -3
- package/lib/cjs/components/HelpHint/HelpHint.stories.js +3 -1
- package/lib/cjs/components/Icon/Icon.stories.js +5 -3
- package/lib/cjs/components/IconButton/IconButton.stories.js +2 -1
- package/lib/cjs/components/IconButton/iconButtonAttributes.js +8 -5
- package/lib/cjs/components/Image/Image.stories.js +6 -4
- package/lib/cjs/components/ImageUploadField/ImageUploadField.stories.js +11 -9
- package/lib/cjs/components/Input/Input.stories.js +4 -3
- package/lib/cjs/components/Label/Label.stories.js +4 -2
- package/lib/cjs/components/Link/Link.stories.js +8 -6
- package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js +5 -3
- package/lib/cjs/components/ListView/ListView.stories.js +7 -6
- package/lib/cjs/components/Loader/Loader.stories.js +4 -2
- package/lib/cjs/components/Modal/Modal.stories.js +6 -5
- package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js +8 -10
- package/lib/cjs/components/NumberField/NumberField.stories.js +13 -11
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +4 -2
- package/lib/cjs/components/RadioGroupField/RadioGroupField.stories.js +7 -6
- package/lib/cjs/components/RequirementsList/RequirementsList.stories.js +15 -13
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -3
- package/lib/cjs/components/ScrollBox/ScrollBox.stories.js +4 -2
- package/lib/cjs/components/SearchField/SearchField.stories.js +5 -4
- package/lib/cjs/components/SelectField/SelectField.stories.js +7 -5
- package/lib/cjs/components/Stepper/Stepper.stories.js +8 -9
- package/lib/cjs/components/SwitchField/SwitchField.stories.js +2 -1
- package/lib/cjs/components/SwitchField/switchFieldAttributes.js +7 -4
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +7 -5
- package/lib/cjs/components/TextField/TextField.stories.js +5 -3
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +2 -1
- package/lib/cjs/experimental/ListViewItem/controls/ListViewItemSwitchField.stories.js +4 -1
- package/lib/cjs/recipes/LinkedListView.stories.js +7 -6
- package/lib/cjs/recipes/MaskedValue.stories.js +6 -4
- package/lib/components/ArrayField/ArrayField.stories.js +6 -4
- package/lib/components/Avatar/Avatar.stories.js +4 -2
- package/lib/components/Badge/Badge.stories.js +4 -2
- package/lib/components/Box/Box.stories.js +8 -6
- package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +3 -1
- package/lib/components/Button/Button.stories.js +4 -0
- package/lib/components/Button/buttonAttributes.js +0 -2
- package/lib/components/Calendar/Calendar.stories.js +13 -11
- package/lib/components/Card/Card.stories.js +3 -1
- package/lib/components/CheckboxField/CheckboxField.stories.js +5 -3
- package/lib/components/CodeView/CodeView.stories.js +3 -1
- package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js +8 -9
- package/lib/components/ColorField/ColorField.stories.js +11 -9
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +9 -9
- package/lib/components/DataTable/DataTable.stories.js +7 -5
- package/lib/components/DatePicker/DatePicker.stories.js +16 -14
- package/lib/components/FileInputField/FileInputField.stories.js +5 -3
- package/lib/components/HelpHint/HelpHint.stories.js +3 -1
- package/lib/components/Icon/Icon.stories.js +5 -3
- package/lib/components/IconButton/IconButton.stories.js +3 -2
- package/lib/components/IconButton/iconButtonAttributes.js +6 -4
- package/lib/components/Image/Image.stories.js +6 -4
- package/lib/components/ImageUploadField/ImageUploadField.stories.js +11 -9
- package/lib/components/Input/Input.stories.js +4 -3
- package/lib/components/Label/Label.stories.js +4 -2
- package/lib/components/Link/Link.stories.js +8 -6
- package/lib/components/LinkSelectField/LinkSelectField.stories.js +5 -3
- package/lib/components/ListView/ListView.stories.js +7 -6
- package/lib/components/Loader/Loader.stories.js +4 -2
- package/lib/components/Modal/Modal.stories.js +6 -5
- package/lib/components/MultivaluesField/MultivaluesField.stories.js +8 -10
- package/lib/components/NumberField/NumberField.stories.js +13 -11
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +4 -2
- package/lib/components/RadioGroupField/RadioGroupField.stories.js +7 -6
- package/lib/components/RequirementsList/RequirementsList.stories.js +15 -13
- package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -3
- package/lib/components/ScrollBox/ScrollBox.stories.js +4 -2
- package/lib/components/SearchField/SearchField.stories.js +5 -4
- package/lib/components/SelectField/SelectField.stories.js +7 -5
- package/lib/components/Stepper/Stepper.stories.js +8 -9
- package/lib/components/SwitchField/SwitchField.stories.js +3 -2
- package/lib/components/SwitchField/switchFieldAttributes.js +5 -3
- package/lib/components/TextAreaField/TextAreaField.stories.js +7 -5
- package/lib/components/TextField/TextField.stories.js +5 -3
- package/lib/experimental/ListViewItem/controls/ListViewItemEditButton.stories.js +3 -2
- package/lib/experimental/ListViewItem/controls/ListViewItemSwitchField.stories.js +5 -2
- package/lib/recipes/LinkedListView.stories.js +7 -6
- package/lib/recipes/MaskedValue.stories.js +6 -4
- package/package.json +19 -16
@@ -39,19 +39,16 @@ export default {
|
|
39
39
|
},
|
40
40
|
argTypes: _objectSpread({
|
41
41
|
label: {
|
42
|
-
defaultValue: 'Array field label',
|
43
42
|
control: {
|
44
43
|
type: 'text'
|
45
44
|
}
|
46
45
|
},
|
47
46
|
helperText: {
|
48
|
-
defaultValue: 'Helper text info...',
|
49
47
|
control: {
|
50
48
|
type: 'text'
|
51
49
|
}
|
52
50
|
},
|
53
51
|
addButtonLabel: {
|
54
|
-
defaultValue: '+ Add field',
|
55
52
|
control: {
|
56
53
|
type: 'text'
|
57
54
|
}
|
@@ -66,7 +63,12 @@ export default {
|
|
66
63
|
type: 'text'
|
67
64
|
}
|
68
65
|
}
|
69
|
-
}, ariaAttributeBaseArgTypes)
|
66
|
+
}, ariaAttributeBaseArgTypes),
|
67
|
+
args: {
|
68
|
+
label: 'Array field label',
|
69
|
+
helperText: 'Helper text info...',
|
70
|
+
addButtonLabel: '+ Add field'
|
71
|
+
}
|
70
72
|
};
|
71
73
|
var defaultData = [{
|
72
74
|
id: uuid(),
|
@@ -39,18 +39,20 @@ export default {
|
|
39
39
|
}
|
40
40
|
},
|
41
41
|
label: {
|
42
|
-
defaultValue: 'Label',
|
43
42
|
control: {
|
44
43
|
type: 'text'
|
45
44
|
}
|
46
45
|
},
|
47
46
|
isUppercase: {
|
48
|
-
defaultValue: false,
|
49
47
|
control: {
|
50
48
|
type: 'boolean'
|
51
49
|
}
|
52
50
|
}
|
53
51
|
},
|
52
|
+
args: {
|
53
|
+
label: 'Label',
|
54
|
+
isUppercase: false
|
55
|
+
},
|
54
56
|
parameters: {
|
55
57
|
docs: {
|
56
58
|
source: {
|
@@ -32,23 +32,25 @@ export default {
|
|
32
32
|
colorName = _ref2[0];
|
33
33
|
return colorName;
|
34
34
|
})
|
35
|
-
}
|
36
|
-
defaultValue: 'active'
|
35
|
+
}
|
37
36
|
},
|
38
37
|
gap: {
|
39
38
|
control: {
|
40
39
|
type: 'text'
|
41
40
|
},
|
42
|
-
description: 'Gap between items, whether in a row or column. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
|
43
|
-
defaultValue: '10px'
|
41
|
+
description: 'Gap between items, whether in a row or column. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
|
44
42
|
},
|
45
43
|
as: {
|
46
44
|
control: {
|
47
45
|
type: 'select',
|
48
46
|
options: htmlElements
|
49
|
-
}
|
50
|
-
defaultValue: 'div'
|
47
|
+
}
|
51
48
|
}
|
49
|
+
},
|
50
|
+
args: {
|
51
|
+
bg: 'active',
|
52
|
+
gap: '10px',
|
53
|
+
as: 'div'
|
52
54
|
}
|
53
55
|
};
|
54
56
|
export var Default = function Default(_ref3) {
|
@@ -28,7 +28,6 @@ export default {
|
|
28
28
|
control: {
|
29
29
|
type: 'none'
|
30
30
|
},
|
31
|
-
defaultValue: ChevronRightIcon,
|
32
31
|
description: 'The icon to render. List of icons at https://materialdesignicons.com/'
|
33
32
|
},
|
34
33
|
iconProps: {
|
@@ -36,6 +35,9 @@ export default {
|
|
36
35
|
type: 'none'
|
37
36
|
}
|
38
37
|
}
|
38
|
+
},
|
39
|
+
args: {
|
40
|
+
icon: ChevronRightIcon
|
39
41
|
}
|
40
42
|
};
|
41
43
|
export var Default = function Default(args) {
|
@@ -37,11 +37,9 @@ export var buttonArgTypes = _objectSpread(_objectSpread({
|
|
37
37
|
type: 'select',
|
38
38
|
options: variantOptions
|
39
39
|
},
|
40
|
-
defaultValue: 'default',
|
41
40
|
description: descriptions.variant
|
42
41
|
},
|
43
42
|
children: {
|
44
|
-
defaultValue: 'Button Text',
|
45
43
|
table: {
|
46
44
|
type: {
|
47
45
|
summary: 'string'
|
@@ -57,8 +57,7 @@ export default {
|
|
57
57
|
hasAutoFocus: {
|
58
58
|
control: {
|
59
59
|
type: 'boolean'
|
60
|
-
}
|
61
|
-
defaultValue: false
|
60
|
+
}
|
62
61
|
},
|
63
62
|
id: {
|
64
63
|
control: {
|
@@ -68,20 +67,17 @@ export default {
|
|
68
67
|
isDisabled: {
|
69
68
|
control: {
|
70
69
|
type: 'boolean'
|
71
|
-
}
|
72
|
-
defaultValue: false
|
70
|
+
}
|
73
71
|
},
|
74
72
|
isReadOnly: {
|
75
73
|
control: {
|
76
74
|
type: 'boolean'
|
77
|
-
}
|
78
|
-
defaultValue: false
|
75
|
+
}
|
79
76
|
},
|
80
77
|
isRequired: {
|
81
78
|
control: {
|
82
79
|
type: 'boolean'
|
83
|
-
}
|
84
|
-
defaultValue: false
|
80
|
+
}
|
85
81
|
},
|
86
82
|
maxValue: {
|
87
83
|
control: {
|
@@ -97,17 +93,23 @@ export default {
|
|
97
93
|
control: {
|
98
94
|
type: 'func'
|
99
95
|
},
|
100
|
-
defaultValue: null,
|
101
96
|
action: 'change'
|
102
97
|
},
|
103
98
|
onFocusChange: {
|
104
99
|
control: {
|
105
100
|
type: 'func'
|
106
101
|
},
|
107
|
-
defaultValue: null,
|
108
102
|
action: 'focus change'
|
109
103
|
}
|
110
|
-
}, ariaAttributeBaseArgTypes)
|
104
|
+
}, ariaAttributeBaseArgTypes),
|
105
|
+
args: {
|
106
|
+
hasAutoFocus: false,
|
107
|
+
isDisabled: false,
|
108
|
+
isReadOnly: false,
|
109
|
+
isRequired: false,
|
110
|
+
onChange: null,
|
111
|
+
onFocusChange: null
|
112
|
+
}
|
111
113
|
};
|
112
114
|
export var Default = function Default(args) {
|
113
115
|
return ___EmotionJSX(Calendar, _extends({}, args, {
|
@@ -20,7 +20,6 @@ export default {
|
|
20
20
|
argTypes: {
|
21
21
|
children: {
|
22
22
|
description: 'Card content.',
|
23
|
-
defaultValue: 'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at enim nunc. Cras congue consequat odio, ac sodales lacus imperdiet quis. In id ex eu lorem sollicitudin hendrerit feugiat ultrices elit. Curabitur imperdiet libero vitae luctus blandit. Ut ac dignissim tortor. Pellentesque convallis eu metus vitae mollis. Donec sapien felis, laoreet eu egestas eu, blandit quis tellus. Donec luctus suscipit nibh, et tincidunt nisl facilisis ut. Mauris molestie purus at lectus venenatis, ac ultrices felis ultrices.',
|
24
23
|
table: {
|
25
24
|
type: {}
|
26
25
|
},
|
@@ -28,6 +27,9 @@ export default {
|
|
28
27
|
type: 'text'
|
29
28
|
}
|
30
29
|
}
|
30
|
+
},
|
31
|
+
args: {
|
32
|
+
children: 'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at enim nunc. Cras congue consequat odio, ac sodales lacus imperdiet quis. In id ex eu lorem sollicitudin hendrerit feugiat ultrices elit. Curabitur imperdiet libero vitae luctus blandit. Ut ac dignissim tortor. Pellentesque convallis eu metus vitae mollis. Donec sapien felis, laoreet eu egestas eu, blandit quis tellus. Donec luctus suscipit nibh, et tincidunt nisl facilisis ut. Mauris molestie purus at lectus venenatis, ac ultrices felis ultrices.'
|
31
33
|
}
|
32
34
|
};
|
33
35
|
export var Default = function Default(args) {
|
@@ -37,8 +37,7 @@ export default {
|
|
37
37
|
label: {
|
38
38
|
control: {
|
39
39
|
type: 'text'
|
40
|
-
}
|
41
|
-
defaultValue: 'Click me!'
|
40
|
+
}
|
42
41
|
},
|
43
42
|
helperText: {
|
44
43
|
control: {
|
@@ -64,7 +63,10 @@ export default {
|
|
64
63
|
isIndeterminate: {},
|
65
64
|
isDefaultSelected: {},
|
66
65
|
isSelected: {}
|
67
|
-
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
66
|
+
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
|
67
|
+
args: {
|
68
|
+
label: 'Click me!'
|
69
|
+
}
|
68
70
|
};
|
69
71
|
export var Default = function Default(args) {
|
70
72
|
return ___EmotionJSX(CheckboxField, args);
|
@@ -15,7 +15,6 @@ export default {
|
|
15
15
|
decorators: [withDesign],
|
16
16
|
argTypes: {
|
17
17
|
children: {
|
18
|
-
defaultValue: code,
|
19
18
|
table: {
|
20
19
|
type: {}
|
21
20
|
},
|
@@ -27,6 +26,9 @@ export default {
|
|
27
26
|
control: 'none'
|
28
27
|
}
|
29
28
|
},
|
29
|
+
args: {
|
30
|
+
children: code
|
31
|
+
},
|
30
32
|
parameters: {
|
31
33
|
docs: {
|
32
34
|
page: function page() {
|
@@ -20,15 +20,9 @@ export default {
|
|
20
20
|
}
|
21
21
|
},
|
22
22
|
argTypes: {
|
23
|
-
listTitle: {
|
24
|
-
|
25
|
-
},
|
26
|
-
openAriaLabel: {
|
27
|
-
defaultValue: 'Open filter menu?'
|
28
|
-
},
|
29
|
-
closeAriaLabel: {
|
30
|
-
defaultValue: 'Close filter menu?'
|
31
|
-
},
|
23
|
+
listTitle: {},
|
24
|
+
openAriaLabel: {},
|
25
|
+
closeAriaLabel: {},
|
32
26
|
isDefaultOpen: {},
|
33
27
|
isOpen: {
|
34
28
|
onClick: {
|
@@ -38,6 +32,11 @@ export default {
|
|
38
32
|
type: 'none'
|
39
33
|
}
|
40
34
|
}
|
35
|
+
},
|
36
|
+
args: {
|
37
|
+
listTitle: 'Selected Groups',
|
38
|
+
openAriaLabel: 'Open filter menu?',
|
39
|
+
closeAriaLabel: 'Close filter menu?'
|
41
40
|
}
|
42
41
|
};
|
43
42
|
export var Default = function Default(args) {
|
@@ -42,8 +42,7 @@ export default {
|
|
42
42
|
label: {
|
43
43
|
control: {
|
44
44
|
type: 'text'
|
45
|
-
}
|
46
|
-
defaultValue: 'Color Field'
|
45
|
+
}
|
47
46
|
},
|
48
47
|
helperText: {
|
49
48
|
control: {
|
@@ -53,12 +52,6 @@ export default {
|
|
53
52
|
buttonProps: {
|
54
53
|
control: {
|
55
54
|
type: 'none'
|
56
|
-
},
|
57
|
-
defaultValue: {
|
58
|
-
sx: {
|
59
|
-
width: 40,
|
60
|
-
height: 30
|
61
|
-
}
|
62
55
|
}
|
63
56
|
},
|
64
57
|
containerProps: {
|
@@ -66,7 +59,16 @@ export default {
|
|
66
59
|
type: 'none'
|
67
60
|
}
|
68
61
|
}
|
69
|
-
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
62
|
+
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
|
63
|
+
args: {
|
64
|
+
label: 'Color Field',
|
65
|
+
buttonProps: {
|
66
|
+
sx: {
|
67
|
+
width: 40,
|
68
|
+
height: 30
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
70
72
|
};
|
71
73
|
export var Default = function Default(args) {
|
72
74
|
var _useState = useState('rgba(127, 0, 127, 1)'),
|
@@ -147,19 +147,14 @@ export default {
|
|
147
147
|
label: {
|
148
148
|
control: {
|
149
149
|
type: 'text'
|
150
|
-
}
|
151
|
-
defaultValue: 'Example label'
|
150
|
+
}
|
152
151
|
},
|
153
152
|
placeholder: {},
|
154
153
|
id: {},
|
155
|
-
defaultItems: {
|
156
|
-
defaultValue: items
|
157
|
-
},
|
154
|
+
defaultItems: {},
|
158
155
|
defaultSelectedKey: {},
|
159
156
|
defaultInputValue: {},
|
160
|
-
disabledKeys: {
|
161
|
-
defaultValue: ['Snake']
|
162
|
-
},
|
157
|
+
disabledKeys: {},
|
163
158
|
direction: {},
|
164
159
|
menuTrigger: {},
|
165
160
|
isRequired: {},
|
@@ -196,7 +191,12 @@ export default {
|
|
196
191
|
type: 'none'
|
197
192
|
}
|
198
193
|
}
|
199
|
-
}, ariaAttributeBaseArgTypes)
|
194
|
+
}, ariaAttributeBaseArgTypes),
|
195
|
+
args: {
|
196
|
+
label: 'Example label',
|
197
|
+
defaultItems: items,
|
198
|
+
disableKeys: ['Snake']
|
199
|
+
}
|
200
200
|
};
|
201
201
|
export var Default = function Default(args) {
|
202
202
|
return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, args), function (item) {
|
@@ -55,14 +55,12 @@ export default {
|
|
55
55
|
density: {
|
56
56
|
control: {
|
57
57
|
disable: true
|
58
|
-
}
|
59
|
-
defaultValue: 'spacious'
|
58
|
+
}
|
60
59
|
},
|
61
60
|
overflowMode: {
|
62
61
|
control: {
|
63
62
|
disable: true
|
64
|
-
}
|
65
|
-
defaultValue: 'truncate'
|
63
|
+
}
|
66
64
|
},
|
67
65
|
width: {
|
68
66
|
description: 'Sets the width of the data table.',
|
@@ -112,7 +110,11 @@ export default {
|
|
112
110
|
},
|
113
111
|
description: 'The list of DataTable items.'
|
114
112
|
}
|
115
|
-
}, ariaAttributeBaseArgTypes)
|
113
|
+
}, ariaAttributeBaseArgTypes),
|
114
|
+
args: {
|
115
|
+
density: 'spacious',
|
116
|
+
overflowMode: 'truncate'
|
117
|
+
}
|
116
118
|
};
|
117
119
|
export var Default = function Default(args) {
|
118
120
|
var columns = [{
|
@@ -48,38 +48,32 @@ export default {
|
|
48
48
|
hasAutoFocus: {
|
49
49
|
control: {
|
50
50
|
type: 'boolean'
|
51
|
-
}
|
52
|
-
defaultValue: false
|
51
|
+
}
|
53
52
|
},
|
54
53
|
hasFormatHelpText: {
|
55
54
|
control: {
|
56
55
|
type: 'boolean'
|
57
|
-
}
|
58
|
-
defaultValue: false
|
56
|
+
}
|
59
57
|
},
|
60
58
|
isDisabled: {
|
61
59
|
control: {
|
62
60
|
type: 'boolean'
|
63
|
-
}
|
64
|
-
defaultValue: false
|
61
|
+
}
|
65
62
|
},
|
66
63
|
isReadOnly: {
|
67
64
|
control: {
|
68
65
|
type: 'boolean'
|
69
|
-
}
|
70
|
-
defaultValue: false
|
66
|
+
}
|
71
67
|
},
|
72
68
|
isRequired: {
|
73
69
|
control: {
|
74
70
|
type: 'boolean'
|
75
|
-
}
|
76
|
-
defaultValue: false
|
71
|
+
}
|
77
72
|
},
|
78
73
|
label: {
|
79
74
|
control: {
|
80
75
|
type: 'text'
|
81
|
-
}
|
82
|
-
defaultValue: 'Example label'
|
76
|
+
}
|
83
77
|
},
|
84
78
|
maxValue: {
|
85
79
|
control: {
|
@@ -92,10 +86,18 @@ export default {
|
|
92
86
|
}
|
93
87
|
},
|
94
88
|
onChange: {
|
95
|
-
defaultValue: null,
|
96
89
|
action: 'handleChange'
|
97
90
|
}
|
98
|
-
}, ariaAttributeBaseArgTypes)
|
91
|
+
}, ariaAttributeBaseArgTypes),
|
92
|
+
args: {
|
93
|
+
hasAutoFocus: false,
|
94
|
+
hasFormatHelpText: false,
|
95
|
+
isDisabled: false,
|
96
|
+
isReadOnly: false,
|
97
|
+
isRequired: false,
|
98
|
+
label: 'Example label',
|
99
|
+
onChange: null
|
100
|
+
}
|
99
101
|
};
|
100
102
|
export var Default = function Default(args) {
|
101
103
|
return ___EmotionJSX(DatePicker, args);
|
@@ -38,8 +38,7 @@ export default {
|
|
38
38
|
label: {
|
39
39
|
control: {
|
40
40
|
type: 'text'
|
41
|
-
}
|
42
|
-
defaultValue: 'Field Label'
|
41
|
+
}
|
43
42
|
},
|
44
43
|
helperText: {
|
45
44
|
control: {
|
@@ -81,7 +80,10 @@ export default {
|
|
81
80
|
type: 'none'
|
82
81
|
}
|
83
82
|
}
|
84
|
-
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
83
|
+
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
|
84
|
+
args: {
|
85
|
+
label: 'Field Label'
|
86
|
+
}
|
85
87
|
};
|
86
88
|
var fitContentWidthSx = {
|
87
89
|
width: 'fit-content'
|
@@ -19,11 +19,13 @@ export default {
|
|
19
19
|
argTypes: {
|
20
20
|
children: {
|
21
21
|
description: 'Tooltip content',
|
22
|
-
defaultValue: 'Text of the tooltip right here...',
|
23
22
|
control: {
|
24
23
|
type: 'text'
|
25
24
|
}
|
26
25
|
}
|
26
|
+
},
|
27
|
+
args: {
|
28
|
+
children: 'Text of the tooltip right here...'
|
27
29
|
}
|
28
30
|
};
|
29
31
|
export var Default = function Default(args) {
|
@@ -36,7 +36,6 @@ export default {
|
|
36
36
|
control: {
|
37
37
|
type: 'none'
|
38
38
|
},
|
39
|
-
defaultValue: SearchIcon,
|
40
39
|
description: 'The icon to render. List of icons at https://materialdesignicons.com/'
|
41
40
|
},
|
42
41
|
size: {
|
@@ -54,9 +53,12 @@ export default {
|
|
54
53
|
colorName = _ref2[0];
|
55
54
|
return colorName;
|
56
55
|
})
|
57
|
-
}
|
58
|
-
defaultValue: 'active'
|
56
|
+
}
|
59
57
|
}
|
58
|
+
},
|
59
|
+
args: {
|
60
|
+
icon: SearchIcon,
|
61
|
+
color: 'active'
|
60
62
|
}
|
61
63
|
};
|
62
64
|
export var Default = function Default(args) {
|
@@ -10,7 +10,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
|
10
10
|
import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
|
11
11
|
import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
|
12
12
|
import IconButtonReadme from './IconButton.mdx';
|
13
|
-
import { iconButtonArgTypes } from './iconButtonAttributes';
|
13
|
+
import { iconButtonArgs, iconButtonArgTypes } from './iconButtonAttributes';
|
14
14
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
15
15
|
export default {
|
16
16
|
title: 'Components/IconButton',
|
@@ -26,7 +26,8 @@ export default {
|
|
26
26
|
}
|
27
27
|
}
|
28
28
|
},
|
29
|
-
argTypes: iconButtonArgTypes
|
29
|
+
argTypes: iconButtonArgTypes,
|
30
|
+
args: iconButtonArgs
|
30
31
|
};
|
31
32
|
export var Default = function Default(args) {
|
32
33
|
return ___EmotionJSX(IconButton, _extends({
|
@@ -29,7 +29,6 @@ export var iconButtonArgTypes = {
|
|
29
29
|
control: {
|
30
30
|
type: 'none'
|
31
31
|
},
|
32
|
-
defaultValue: CreateIcon,
|
33
32
|
description: descriptions.icon
|
34
33
|
},
|
35
34
|
title: {
|
@@ -52,15 +51,13 @@ export var iconButtonArgTypes = {
|
|
52
51
|
type: 'select',
|
53
52
|
options: ['base', 'inverted', 'invertedSquare', 'square']
|
54
53
|
},
|
55
|
-
defaultValue: 'base',
|
56
54
|
description: descriptions.variant
|
57
55
|
},
|
58
56
|
size: {
|
59
57
|
control: {
|
60
58
|
type: 'select',
|
61
59
|
options: ['xs', 'sm', 'md']
|
62
|
-
}
|
63
|
-
defaultValue: 'sm'
|
60
|
+
}
|
64
61
|
},
|
65
62
|
onPress: _objectSpread({
|
66
63
|
description: descriptions.onPress
|
@@ -78,6 +75,11 @@ export var iconButtonArgTypes = {
|
|
78
75
|
description: descriptions.onPressUp
|
79
76
|
}, funcArg)
|
80
77
|
};
|
78
|
+
export var iconButtonArgs = {
|
79
|
+
icon: CreateIcon,
|
80
|
+
variant: 'base',
|
81
|
+
size: 'sm'
|
82
|
+
};
|
81
83
|
export var iconButtonPropTypes = {
|
82
84
|
variant: PropTypes.string,
|
83
85
|
'aria-label': PropTypes.string,
|
@@ -30,15 +30,17 @@ export default {
|
|
30
30
|
control: {
|
31
31
|
type: 'none',
|
32
32
|
options: htmlElements
|
33
|
-
}
|
34
|
-
defaultValue: 'img'
|
33
|
+
}
|
35
34
|
},
|
36
35
|
src: {
|
37
36
|
control: {
|
38
37
|
type: 'none'
|
39
|
-
}
|
40
|
-
defaultValue: pingImg
|
38
|
+
}
|
41
39
|
}
|
40
|
+
},
|
41
|
+
args: {
|
42
|
+
as: 'img',
|
43
|
+
src: pingImg
|
42
44
|
}
|
43
45
|
};
|
44
46
|
export var Default = function Default(_ref) {
|
@@ -56,8 +56,7 @@ export default {
|
|
56
56
|
fileTypes: {
|
57
57
|
control: {
|
58
58
|
type: 'array'
|
59
|
-
}
|
60
|
-
defaultValue: ['image']
|
59
|
+
}
|
61
60
|
},
|
62
61
|
helperText: {
|
63
62
|
control: {
|
@@ -67,8 +66,7 @@ export default {
|
|
67
66
|
label: {
|
68
67
|
control: {
|
69
68
|
type: 'text'
|
70
|
-
}
|
71
|
-
defaultValue: 'Upload Image'
|
69
|
+
}
|
72
70
|
},
|
73
71
|
onChange: {
|
74
72
|
control: {
|
@@ -83,16 +81,20 @@ export default {
|
|
83
81
|
previewHeight: {
|
84
82
|
control: {
|
85
83
|
type: 'number'
|
86
|
-
}
|
87
|
-
defaultValue: 50
|
84
|
+
}
|
88
85
|
},
|
89
86
|
previewWidth: {
|
90
87
|
control: {
|
91
88
|
type: 'number'
|
92
|
-
}
|
93
|
-
defaultValue: 50
|
89
|
+
}
|
94
90
|
}
|
95
|
-
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
|
91
|
+
}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
|
92
|
+
args: {
|
93
|
+
fileTypes: ['image'],
|
94
|
+
label: 'Upload Image',
|
95
|
+
previewHeight: 50,
|
96
|
+
previewWidth: 50
|
97
|
+
}
|
96
98
|
};
|
97
99
|
export var Default = function Default(args) {
|
98
100
|
return (
|
@@ -6,12 +6,13 @@ export default {
|
|
6
6
|
title: 'Form/Base Components/Input',
|
7
7
|
component: Input,
|
8
8
|
argTypes: {
|
9
|
-
placeholder: {
|
10
|
-
defaultValue: 'This is a basic input'
|
11
|
-
},
|
9
|
+
placeholder: {},
|
12
10
|
type: {},
|
13
11
|
name: {},
|
14
12
|
id: {}
|
13
|
+
},
|
14
|
+
args: {
|
15
|
+
placeholder: 'This is a basic input'
|
15
16
|
}
|
16
17
|
};
|
17
18
|
export var Default = function Default(args) {
|