@react-magma/schema-renderer 12.0.0-next.2 → 12.0.1-next.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 (3) hide show
  1. package/dist/components/SchemaRenderer/SchemaRenderer.stories.d.ts +249 -5
  2. package/package.json +3 -3
  3. package/src/components/SchemaRenderer/SchemaRenderer.stories.tsx +331 -316
package/dist/components/SchemaRenderer/SchemaRenderer.stories.d.ts CHANGED
@@ -1,10 +1,254 @@
1
1
  import React from 'react';
2
+ import { InputType } from 'react-magma-dom';
2
3
  import { SchemaRendererProps } from './SchemaRenderer';
4
+ import { componentTypes } from '../ComponentMapper';
5
+ import { templateTypes } from '../TemplateMapper';
3
6
  declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
4
7
  export default _default;
5
- export declare const Form: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
6
- export declare const FormGroups: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
7
- export declare const Basic: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
8
- export declare const Modal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
9
- export declare const Array: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
8
+ export declare const Form: {
9
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
10
+ args: {
11
+ schema: {
12
+ fields: ({
13
+ component: componentTypes;
14
+ name: string;
15
+ labelText: string;
16
+ type: InputType;
17
+ options?: undefined;
18
+ placeholder?: undefined;
19
+ isMulti?: undefined;
20
+ color?: undefined;
21
+ } | {
22
+ component: componentTypes;
23
+ name: string;
24
+ labelText: string;
25
+ options: {
26
+ label: string;
27
+ value: string;
28
+ }[];
29
+ placeholder: string;
30
+ type?: undefined;
31
+ isMulti?: undefined;
32
+ color?: undefined;
33
+ } | {
34
+ component: componentTypes;
35
+ name: string;
36
+ labelText: string;
37
+ isMulti: boolean;
38
+ options: {
39
+ label: string;
40
+ value: string;
41
+ }[];
42
+ placeholder: string;
43
+ type?: undefined;
44
+ color?: undefined;
45
+ } | {
46
+ component: componentTypes;
47
+ name: string;
48
+ labelText: string;
49
+ options: {
50
+ label: string;
51
+ value: string;
52
+ }[];
53
+ type?: undefined;
54
+ placeholder?: undefined;
55
+ isMulti?: undefined;
56
+ color?: undefined;
57
+ } | {
58
+ component: componentTypes;
59
+ name: string;
60
+ labelText: string;
61
+ isMulti: boolean;
62
+ options: {
63
+ label: string;
64
+ value: string;
65
+ }[];
66
+ type?: undefined;
67
+ placeholder?: undefined;
68
+ color?: undefined;
69
+ } | {
70
+ component: componentTypes;
71
+ name: string;
72
+ labelText: string;
73
+ color: string;
74
+ type?: undefined;
75
+ options?: undefined;
76
+ placeholder?: undefined;
77
+ isMulti?: undefined;
78
+ } | {
79
+ component: componentTypes;
80
+ name: string;
81
+ labelText: string;
82
+ options: {
83
+ labelText: string;
84
+ value: string;
85
+ }[];
86
+ type?: undefined;
87
+ placeholder?: undefined;
88
+ isMulti?: undefined;
89
+ color?: undefined;
90
+ } | {
91
+ component: componentTypes;
92
+ name: string;
93
+ labelText: string;
94
+ type?: undefined;
95
+ options?: undefined;
96
+ placeholder?: undefined;
97
+ isMulti?: undefined;
98
+ color?: undefined;
99
+ })[];
100
+ type: string;
101
+ title?: React.ReactNode;
102
+ description?: React.ReactNode;
103
+ };
104
+ };
105
+ };
106
+ export declare const FormGroups: {
107
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
108
+ args: {
109
+ schema: {
110
+ fields: ({
111
+ component: componentTypes;
112
+ labelText: string;
113
+ helperMessage: string;
114
+ name: string;
115
+ fields: {
116
+ component: componentTypes;
117
+ labelText: string;
118
+ name: string;
119
+ }[];
120
+ } | {
121
+ component: componentTypes;
122
+ labelText: string;
123
+ name: string;
124
+ fields: ({
125
+ component: componentTypes;
126
+ name: string;
127
+ labelText: string;
128
+ textPosition?: undefined;
129
+ condition?: undefined;
130
+ } | {
131
+ component: componentTypes;
132
+ name: string;
133
+ labelText: string;
134
+ textPosition: string;
135
+ condition: {
136
+ when: string;
137
+ is: boolean;
138
+ };
139
+ })[];
140
+ helperMessage?: undefined;
141
+ })[];
142
+ type: string;
143
+ title?: React.ReactNode;
144
+ description?: React.ReactNode;
145
+ };
146
+ };
147
+ };
148
+ export declare const Basic: {
149
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
150
+ args: {
151
+ schema: {
152
+ type: templateTypes;
153
+ fields: ({
154
+ component: componentTypes;
155
+ name: string;
156
+ children: string;
157
+ level?: undefined;
158
+ to?: undefined;
159
+ } | {
160
+ component: componentTypes;
161
+ level: number;
162
+ name: string;
163
+ children: string;
164
+ to?: undefined;
165
+ } | {
166
+ component: componentTypes;
167
+ name: string;
168
+ to: string;
169
+ children: string;
170
+ level?: undefined;
171
+ })[];
172
+ };
173
+ };
174
+ };
175
+ export declare const Modal: {
176
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
177
+ args: {
178
+ schema: {
179
+ type: templateTypes;
180
+ fields: ({
181
+ component: componentTypes;
182
+ name: string;
183
+ heading?: undefined;
184
+ condition?: undefined;
185
+ isOpen?: undefined;
186
+ fields?: undefined;
187
+ } | {
188
+ component: componentTypes;
189
+ name: string;
190
+ heading: string;
191
+ condition: {
192
+ when: string;
193
+ is: boolean;
194
+ then: {
195
+ set: {
196
+ isOpen: boolean;
197
+ };
198
+ };
199
+ };
200
+ isOpen: boolean;
201
+ fields: ({
202
+ component: componentTypes;
203
+ name: string;
204
+ children: string;
205
+ level?: undefined;
206
+ to?: undefined;
207
+ } | {
208
+ component: componentTypes;
209
+ level: number;
210
+ name: string;
211
+ children: string;
212
+ to?: undefined;
213
+ } | {
214
+ component: componentTypes;
215
+ name: string;
216
+ to: string;
217
+ children: string;
218
+ level?: undefined;
219
+ } | {
220
+ component: componentTypes;
221
+ name: string;
222
+ children: React.JSX.Element;
223
+ level?: undefined;
224
+ to?: undefined;
225
+ })[];
226
+ })[];
227
+ };
228
+ };
229
+ };
230
+ export declare const Array: {
231
+ render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, SchemaRendererProps>;
232
+ args: {
233
+ schema: {
234
+ title: string;
235
+ type: templateTypes;
236
+ description: string;
237
+ fields: {
238
+ component: componentTypes;
239
+ name: string;
240
+ fieldKey: string;
241
+ label: string;
242
+ description: string;
243
+ fields: {
244
+ component: componentTypes;
245
+ name: string;
246
+ label: string;
247
+ placeholder: string;
248
+ isRequired: boolean;
249
+ }[];
250
+ }[];
251
+ };
252
+ };
253
+ };
10
254
  export declare function Example(): React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-magma/schema-renderer",
3
- "version": "12.0.0-next.2",
3
+ "version": "12.0.1-next.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/react-magma-schema-renderer.esm.js",
@@ -24,7 +24,7 @@
24
24
  "react": "^17.0.2",
25
25
  "react-dom": "^17.0.2",
26
26
  "react-dropzone": "11.3.2",
27
- "react-magma-dom": "^4.10.0-next.3",
27
+ "react-magma-dom": "^4.10.1-next.0",
28
28
  "react-magma-icons": "^3.2.0",
29
29
  "tsdx": "^0.14.1",
30
30
  "uuid": "^11.1.0"
@@ -37,7 +37,7 @@
37
37
  "downshift": "^5.4.5",
38
38
  "react": "^17.0.2",
39
39
  "react-dom": "^17.0.2",
40
- "react-magma-dom": "^4.10.0-next.3",
40
+ "react-magma-dom": "^4.10.1-next.0",
41
41
  "react-magma-icons": "^3.2.0",
42
42
  "uuid": "^8.3.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
43
43
  },
package/src/components/SchemaRenderer/SchemaRenderer.stories.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { action } from '@storybook/addon-actions';
4
- import { Story, Meta } from '@storybook/react/types-6-0';
4
+ import { StoryFn, Meta } from '@storybook/react/types-6-0';
5
5
  import { Hyperlink, InputType } from 'react-magma-dom';
6
6
 
7
7
  import { Schema, SchemaRenderer, SchemaRendererProps } from './SchemaRenderer';
@@ -15,7 +15,7 @@ const baseSchema: Schema = {
15
15
  fields: [],
16
16
  };
17
17
 
18
- const Template: Story<SchemaRendererProps> = args => (
18
+ const Template: StoryFn<SchemaRendererProps> = args => (
19
19
  <SchemaRenderer
20
20
  schema={args.schema}
21
21
  onSubmit={action('on-submit')}
@@ -28,337 +28,352 @@ export default {
28
28
  component: SchemaRenderer,
29
29
  } as Meta;
30
30
 
31
- export const Form = Template.bind({});
32
- Form.args = {
33
- schema: {
34
- ...baseSchema,
35
- fields: [
36
- {
37
- component: componentTypes.INPUT,
38
- name: 'name',
39
- labelText: 'Name',
40
- type: InputType.text,
41
- },
42
- {
43
- component: componentTypes.PASSWORD_INPUT,
44
- name: 'password',
45
- labelText: 'Password',
46
- type: InputType.password,
47
- },
48
- {
49
- component: componentTypes.COMBOBOX,
50
- name: 'combobox',
51
- labelText: 'Combobox',
52
- options: [
53
- { label: 'Red', value: 'red' },
54
- { label: 'Blue', value: 'blue' },
55
- { label: 'Green', value: 'green' },
56
- ],
57
- placeholder: 'Hello',
58
- },
59
- {
60
- component: componentTypes.COMBOBOX,
61
- name: 'multi-combobox',
62
- labelText: 'Multi Combobox',
63
- isMulti: true,
64
- options: [
65
- { label: 'Red', value: 'red' },
66
- { label: 'Blue', value: 'blue' },
67
- { label: 'Green', value: 'green' },
68
- ],
69
- placeholder: 'Hello',
70
- },
71
- {
72
- component: componentTypes.SELECT,
73
- name: 'select',
74
- labelText: 'Select',
75
- options: [
76
- { label: 'Red', value: 'red' },
77
- { label: 'Blue', value: 'blue' },
78
- { label: 'Green', value: 'green' },
79
- ],
80
- },
81
- {
82
- component: componentTypes.SELECT,
83
- name: 'multi-select',
84
- labelText: 'Multi Select',
85
- isMulti: true,
86
- options: [
87
- { label: 'Red', value: 'red' },
88
- { label: 'Blue', value: 'blue' },
89
- { label: 'Green', value: 'green' },
90
- ],
91
- },
92
- {
93
- component: componentTypes.CHECKBOX,
94
- name: 'single-checkbox',
95
- labelText: 'Checkbox',
96
- color: '#bada55',
97
- },
98
- {
99
- component: componentTypes.CHECKBOX,
100
- name: 'checkbox-group',
101
- labelText: 'Checkbox Group',
102
- options: [
103
- {
104
- labelText: 'Option 1',
105
- value: '1',
106
- },
107
- {
108
- labelText: 'Option 2',
109
- value: '2',
110
- },
111
- {
112
- labelText: 'Option 3',
113
- value: '3',
114
- },
115
- ],
116
- },
117
- {
118
- component: componentTypes.RADIO,
119
- name: 'radio-group',
120
- labelText: 'Radio Group',
121
- options: [
122
- {
123
- labelText: 'Option 1',
124
- value: '1',
125
- },
126
- {
127
- labelText: 'Option 2',
128
- value: '2',
129
- },
130
- {
131
- labelText: 'Option 3',
132
- value: '3',
133
- },
134
- ],
135
- },
136
- {
137
- component: componentTypes.DATE_PICKER,
138
- name: 'datepicker',
139
- labelText: 'Date Picker',
140
- },
141
- {
142
- component: componentTypes.TIME_PICKER,
143
- name: 'timepicker',
144
- labelText: 'Time Picker',
145
- },
146
- {
147
- component: componentTypes.TOGGLE,
148
- name: 'toggle',
149
- labelText: 'Toggle',
150
- },
151
- {
152
- component: componentTypes.TEXTAREA,
153
- name: 'textarea',
154
- labelText: 'Textarea',
155
- },
156
- ],
31
+ export const Form = {
32
+ render: Template,
33
+
34
+ args: {
35
+ schema: {
36
+ ...baseSchema,
37
+ fields: [
38
+ {
39
+ component: componentTypes.INPUT,
40
+ name: 'name',
41
+ labelText: 'Name',
42
+ type: InputType.text,
43
+ },
44
+ {
45
+ component: componentTypes.PASSWORD_INPUT,
46
+ name: 'password',
47
+ labelText: 'Password',
48
+ type: InputType.password,
49
+ },
50
+ {
51
+ component: componentTypes.COMBOBOX,
52
+ name: 'combobox',
53
+ labelText: 'Combobox',
54
+ options: [
55
+ { label: 'Red', value: 'red' },
56
+ { label: 'Blue', value: 'blue' },
57
+ { label: 'Green', value: 'green' },
58
+ ],
59
+ placeholder: 'Hello',
60
+ },
61
+ {
62
+ component: componentTypes.COMBOBOX,
63
+ name: 'multi-combobox',
64
+ labelText: 'Multi Combobox',
65
+ isMulti: true,
66
+ options: [
67
+ { label: 'Red', value: 'red' },
68
+ { label: 'Blue', value: 'blue' },
69
+ { label: 'Green', value: 'green' },
70
+ ],
71
+ placeholder: 'Hello',
72
+ },
73
+ {
74
+ component: componentTypes.SELECT,
75
+ name: 'select',
76
+ labelText: 'Select',
77
+ options: [
78
+ { label: 'Red', value: 'red' },
79
+ { label: 'Blue', value: 'blue' },
80
+ { label: 'Green', value: 'green' },
81
+ ],
82
+ },
83
+ {
84
+ component: componentTypes.SELECT,
85
+ name: 'multi-select',
86
+ labelText: 'Multi Select',
87
+ isMulti: true,
88
+ options: [
89
+ { label: 'Red', value: 'red' },
90
+ { label: 'Blue', value: 'blue' },
91
+ { label: 'Green', value: 'green' },
92
+ ],
93
+ },
94
+ {
95
+ component: componentTypes.CHECKBOX,
96
+ name: 'single-checkbox',
97
+ labelText: 'Checkbox',
98
+ color: '#bada55',
99
+ },
100
+ {
101
+ component: componentTypes.CHECKBOX,
102
+ name: 'checkbox-group',
103
+ labelText: 'Checkbox Group',
104
+ options: [
105
+ {
106
+ labelText: 'Option 1',
107
+ value: '1',
108
+ },
109
+ {
110
+ labelText: 'Option 2',
111
+ value: '2',
112
+ },
113
+ {
114
+ labelText: 'Option 3',
115
+ value: '3',
116
+ },
117
+ ],
118
+ },
119
+ {
120
+ component: componentTypes.RADIO,
121
+ name: 'radio-group',
122
+ labelText: 'Radio Group',
123
+ options: [
124
+ {
125
+ labelText: 'Option 1',
126
+ value: '1',
127
+ },
128
+ {
129
+ labelText: 'Option 2',
130
+ value: '2',
131
+ },
132
+ {
133
+ labelText: 'Option 3',
134
+ value: '3',
135
+ },
136
+ ],
137
+ },
138
+ {
139
+ component: componentTypes.DATE_PICKER,
140
+ name: 'datepicker',
141
+ labelText: 'Date Picker',
142
+ },
143
+ {
144
+ component: componentTypes.TIME_PICKER,
145
+ name: 'timepicker',
146
+ labelText: 'Time Picker',
147
+ },
148
+ {
149
+ component: componentTypes.TOGGLE,
150
+ name: 'toggle',
151
+ labelText: 'Toggle',
152
+ },
153
+ {
154
+ component: componentTypes.TEXTAREA,
155
+ name: 'textarea',
156
+ labelText: 'Textarea',
157
+ },
158
+ ],
159
+ },
157
160
  },
158
161
  };
159
162
 
160
- export const FormGroups = Template.bind({});
161
- FormGroups.args = {
162
- schema: {
163
- ...baseSchema,
164
- fields: [
165
- {
166
- component: componentTypes.FORM_GROUP,
167
- labelText: 'Formgroup 1',
168
- helperMessage: 'This is a form group',
169
- name: 'formgroup1',
170
- fields: [
171
- {
172
- component: componentTypes.INPUT,
173
- labelText: 'First Name',
174
- name: 'first-name',
175
- },
176
- {
177
- component: componentTypes.INPUT,
178
- labelText: 'Middle Initial',
179
- name: 'middle-initial',
180
- },
181
- {
182
- component: componentTypes.INPUT,
183
- labelText: 'Last Name',
184
- name: 'last-name',
185
- },
186
- ],
187
- },
163
+ export const FormGroups = {
164
+ render: Template,
188
165
 
189
- {
190
- component: componentTypes.FORM_GROUP,
191
- labelText: 'How would you like to be notified',
192
- name: 'formgroup2',
193
- fields: [
194
- {
195
- component: componentTypes.CHECKBOX,
196
- name: 'consent',
197
- labelText: 'opt-in to notifications',
198
- },
199
- {
200
- component: componentTypes.TOGGLE,
201
- name: 'email',
202
- labelText: 'opt-in to emails',
203
- textPosition: 'right',
204
- condition: {
205
- when: 'consent',
206
- is: true,
166
+ args: {
167
+ schema: {
168
+ ...baseSchema,
169
+ fields: [
170
+ {
171
+ component: componentTypes.FORM_GROUP,
172
+ labelText: 'Formgroup 1',
173
+ helperMessage: 'This is a form group',
174
+ name: 'formgroup1',
175
+ fields: [
176
+ {
177
+ component: componentTypes.INPUT,
178
+ labelText: 'First Name',
179
+ name: 'first-name',
207
180
  },
208
- },
209
- {
210
- component: componentTypes.TOGGLE,
211
- name: 'SMS',
212
- labelText: 'opt-in to text messages',
213
- textPosition: 'right',
214
- condition: {
215
- when: 'consent',
216
- is: true,
181
+ {
182
+ component: componentTypes.INPUT,
183
+ labelText: 'Middle Initial',
184
+ name: 'middle-initial',
217
185
  },
218
- },
219
- ],
220
- },
221
- ],
186
+ {
187
+ component: componentTypes.INPUT,
188
+ labelText: 'Last Name',
189
+ name: 'last-name',
190
+ },
191
+ ],
192
+ },
193
+
194
+ {
195
+ component: componentTypes.FORM_GROUP,
196
+ labelText: 'How would you like to be notified',
197
+ name: 'formgroup2',
198
+ fields: [
199
+ {
200
+ component: componentTypes.CHECKBOX,
201
+ name: 'consent',
202
+ labelText: 'opt-in to notifications',
203
+ },
204
+ {
205
+ component: componentTypes.TOGGLE,
206
+ name: 'email',
207
+ labelText: 'opt-in to emails',
208
+ textPosition: 'right',
209
+ condition: {
210
+ when: 'consent',
211
+ is: true,
212
+ },
213
+ },
214
+ {
215
+ component: componentTypes.TOGGLE,
216
+ name: 'SMS',
217
+ labelText: 'opt-in to text messages',
218
+ textPosition: 'right',
219
+ condition: {
220
+ when: 'consent',
221
+ is: true,
222
+ },
223
+ },
224
+ ],
225
+ },
226
+ ],
227
+ },
222
228
  },
223
229
  };
224
230
 
225
- export const Basic = Template.bind({});
226
- Basic.args = {
227
- schema: {
228
- type: templateTypes.BASIC,
229
- fields: [
230
- {
231
- component: componentTypes.PARAGRAPH,
232
- name: 'paragraph-1',
233
- children: 'paragraph one.',
234
- },
235
- {
236
- component: componentTypes.PARAGRAPH,
237
- name: 'paragraph-2',
238
- children: 'paragraph two.',
239
- },
240
- {
241
- component: componentTypes.ALERT,
242
- name: 'ALERT',
243
- children: 'THIS IS AN ALERT',
244
- },
245
- {
246
- component: componentTypes.BANNER,
247
- name: 'BANNER',
248
- children: 'THIS IS A BANNER',
249
- },
250
- {
251
- component: componentTypes.HEADING,
252
- level: 1,
253
- name: 'HEADING',
254
- children: 'THIS IS A HEADING',
255
- },
256
- {
257
- component: componentTypes.HYPERLINK,
258
- name: 'HYPERLINK',
259
- to: 'https://react-magma.cengage.com',
260
- children: 'THIS IS A HYPERLINK',
261
- },
262
- {
263
- component: componentTypes.TOAST,
264
- name: 'TOAST',
265
- children: 'THIS IS A TOAST',
266
- },
267
- {
268
- component: componentTypes.PARAGRAPH,
269
- name: 'PARAGRAPH',
270
- children: 'THIS IS A PARAGRAPH',
271
- },
272
- ],
231
+ export const Basic = {
232
+ render: Template,
233
+
234
+ args: {
235
+ schema: {
236
+ type: templateTypes.BASIC,
237
+ fields: [
238
+ {
239
+ component: componentTypes.PARAGRAPH,
240
+ name: 'paragraph-1',
241
+ children: 'paragraph one.',
242
+ },
243
+ {
244
+ component: componentTypes.PARAGRAPH,
245
+ name: 'paragraph-2',
246
+ children: 'paragraph two.',
247
+ },
248
+ {
249
+ component: componentTypes.ALERT,
250
+ name: 'ALERT',
251
+ children: 'THIS IS AN ALERT',
252
+ },
253
+ {
254
+ component: componentTypes.BANNER,
255
+ name: 'BANNER',
256
+ children: 'THIS IS A BANNER',
257
+ },
258
+ {
259
+ component: componentTypes.HEADING,
260
+ level: 1,
261
+ name: 'HEADING',
262
+ children: 'THIS IS A HEADING',
263
+ },
264
+ {
265
+ component: componentTypes.HYPERLINK,
266
+ name: 'HYPERLINK',
267
+ to: 'https://react-magma.cengage.com',
268
+ children: 'THIS IS A HYPERLINK',
269
+ },
270
+ {
271
+ component: componentTypes.TOAST,
272
+ name: 'TOAST',
273
+ children: 'THIS IS A TOAST',
274
+ },
275
+ {
276
+ component: componentTypes.PARAGRAPH,
277
+ name: 'PARAGRAPH',
278
+ children: 'THIS IS A PARAGRAPH',
279
+ },
280
+ ],
281
+ },
273
282
  },
274
283
  };
275
284
 
276
- export const Modal = Template.bind({});
277
- Modal.args = {
278
- schema: {
279
- type: templateTypes.BASIC,
280
- fields: [
281
- {
282
- component: componentTypes.TOGGLE,
283
- name: 'modal-toggle',
284
- },
285
- {
286
- component: componentTypes.MODAL,
287
- name: 'modal',
288
- heading: 'welcome to the modal',
289
- condition: {
290
- when: 'modal-toggle',
291
- is: true,
292
- then: { set: { isOpen: true } },
285
+ export const Modal = {
286
+ render: Template,
287
+
288
+ args: {
289
+ schema: {
290
+ type: templateTypes.BASIC,
291
+ fields: [
292
+ {
293
+ component: componentTypes.TOGGLE,
294
+ name: 'modal-toggle',
293
295
  },
294
- isOpen: true,
295
- fields: [
296
- {
297
- component: componentTypes.ALERT,
298
- name: 'ALERT',
299
- children: 'THIS IS AN ALERT',
300
- },
301
- {
302
- component: componentTypes.BANNER,
303
- name: 'BANNER',
304
- children: 'THIS IS A BANNER',
296
+ {
297
+ component: componentTypes.MODAL,
298
+ name: 'modal',
299
+ heading: 'welcome to the modal',
300
+ condition: {
301
+ when: 'modal-toggle',
302
+ is: true,
303
+ then: { set: { isOpen: true } },
305
304
  },
306
- {
307
- component: componentTypes.HEADING,
308
- level: 1,
309
- name: 'HEADING',
310
- children: 'THIS IS A HEADING',
311
- },
312
- {
313
- component: componentTypes.HYPERLINK,
314
- name: 'HYPERLINK',
315
- to: 'https://react-magma.cengage.com',
316
- children: 'THIS IS A HYPERLINK',
317
- },
318
- {
319
- component: componentTypes.TOAST,
320
- name: 'TOAST',
321
- children: 'THIS IS A TOAST',
322
- },
323
- {
324
- component: componentTypes.PARAGRAPH,
325
- name: 'PARAGRAPH',
326
- children: (
327
- <>
328
- THIS IS A PARAGRAPH <Hyperlink to="#">link</Hyperlink>
329
- </>
330
- ),
331
- },
332
- ],
333
- },
334
- ],
305
+ isOpen: true,
306
+ fields: [
307
+ {
308
+ component: componentTypes.ALERT,
309
+ name: 'ALERT',
310
+ children: 'THIS IS AN ALERT',
311
+ },
312
+ {
313
+ component: componentTypes.BANNER,
314
+ name: 'BANNER',
315
+ children: 'THIS IS A BANNER',
316
+ },
317
+ {
318
+ component: componentTypes.HEADING,
319
+ level: 1,
320
+ name: 'HEADING',
321
+ children: 'THIS IS A HEADING',
322
+ },
323
+ {
324
+ component: componentTypes.HYPERLINK,
325
+ name: 'HYPERLINK',
326
+ to: 'https://react-magma.cengage.com',
327
+ children: 'THIS IS A HYPERLINK',
328
+ },
329
+ {
330
+ component: componentTypes.TOAST,
331
+ name: 'TOAST',
332
+ children: 'THIS IS A TOAST',
333
+ },
334
+ {
335
+ component: componentTypes.PARAGRAPH,
336
+ name: 'PARAGRAPH',
337
+ children: (
338
+ <>
339
+ THIS IS A PARAGRAPH <Hyperlink to="#">link</Hyperlink>
340
+ </>
341
+ ),
342
+ },
343
+ ],
344
+ },
345
+ ],
346
+ },
335
347
  },
336
348
  };
337
349
 
338
- export const Array = Template.bind({});
339
- Array.args = {
340
- schema: {
341
- title: 'TODO List',
342
- type: templateTypes.FORM,
343
- description: 'A simple todo list. The penultimate test of any UI.',
344
- fields: [
345
- {
346
- component: componentTypes.FIELD_ARRAY,
347
- name: 'tasks',
348
- fieldKey: 'field_array',
349
- label: 'Things to do',
350
- description: 'What do we need to complete for the day?',
351
- fields: [
352
- {
353
- component: componentTypes.INPUT,
354
- name: 'task',
355
- label: 'Task',
356
- placeholder: 'Task',
357
- isRequired: true,
358
- },
359
- ],
360
- },
361
- ],
350
+ export const Array = {
351
+ render: Template,
352
+
353
+ args: {
354
+ schema: {
355
+ title: 'TODO List',
356
+ type: templateTypes.FORM,
357
+ description: 'A simple todo list. The penultimate test of any UI.',
358
+ fields: [
359
+ {
360
+ component: componentTypes.FIELD_ARRAY,
361
+ name: 'tasks',
362
+ fieldKey: 'field_array',
363
+ label: 'Things to do',
364
+ description: 'What do we need to complete for the day?',
365
+ fields: [
366
+ {
367
+ component: componentTypes.INPUT,
368
+ name: 'task',
369
+ label: 'Task',
370
+ placeholder: 'Task',
371
+ isRequired: true,
372
+ },
373
+ ],
374
+ },
375
+ ],
376
+ },
362
377
  },
363
378
  };
364
379