@nascentdigital/funnel-ui 4.4.21 → 4.5.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 (88) hide show
  1. package/dist/Tailwind.d.ts +5 -1
  2. package/dist/Tailwind.js +9 -0
  3. package/dist/server/blocks/Block.d.ts +42 -2
  4. package/dist/server/blocks/Block.js +88 -0
  5. package/dist/server/blocks/Clients.d.ts +20 -29
  6. package/dist/server/blocks/Clients.js +13 -57
  7. package/dist/server/blocks/MediaLayout.d.ts +10 -5
  8. package/dist/server/blocks/MediaLayout.js +41 -22
  9. package/dist/server/blocks/Message.d.ts +9 -67
  10. package/dist/server/blocks/Message.js +15 -292
  11. package/dist/server/blocks/Outcome.d.ts +22 -82
  12. package/dist/server/blocks/Outcome.js +20 -474
  13. package/dist/server/blocks/Testimonial.d.ts +81 -16
  14. package/dist/server/blocks/Testimonial.js +59 -27
  15. package/dist/server/blocks/Testimonials.d.ts +41 -0
  16. package/dist/server/blocks/Testimonials.js +90 -0
  17. package/dist/server/blocks/ValueProp.d.ts +19 -38
  18. package/dist/server/blocks/ValueProp.js +14 -100
  19. package/dist/server/blocks/index.d.ts +1 -0
  20. package/dist/server/blocks/index.js +1 -0
  21. package/dist/server/blocks/summary/Statement.d.ts +304 -0
  22. package/dist/server/blocks/summary/Statement.js +52 -0
  23. package/dist/server/blocks/summary/Summary.d.ts +18 -0
  24. package/dist/server/blocks/summary/Summary.js +34 -0
  25. package/dist/server/blocks/summary/index.d.ts +1 -0
  26. package/dist/server/blocks/summary/index.js +17 -0
  27. package/dist/server/entities/Person.d.ts +27 -2
  28. package/dist/server/entities/Person.js +55 -5
  29. package/dist/server/layouts/BrickLayout.d.ts +290 -0
  30. package/dist/server/layouts/BrickLayout.js +25 -0
  31. package/dist/server/layouts/CardLayout.d.ts +291 -0
  32. package/dist/server/layouts/CardLayout.js +25 -0
  33. package/dist/server/layouts/FlexWrapLayout.d.ts +290 -0
  34. package/dist/server/layouts/FlexWrapLayout.js +41 -0
  35. package/dist/server/layouts/StackLayout.d.ts +290 -0
  36. package/dist/server/layouts/StackLayout.js +25 -0
  37. package/dist/server/layouts/grid/GridItem.d.ts +8 -0
  38. package/dist/server/layouts/grid/GridItem.js +9 -0
  39. package/dist/server/layouts/grid/GridLayout.d.ts +293 -0
  40. package/dist/server/layouts/grid/GridLayout.js +25 -0
  41. package/dist/server/layouts/grid/index.d.ts +2 -0
  42. package/dist/server/layouts/grid/index.js +18 -0
  43. package/dist/server/layouts/index.d.ts +5 -0
  44. package/dist/server/layouts/index.js +21 -0
  45. package/dist/server/panels/BlockPanel.d.ts +80 -1
  46. package/dist/server/panels/BlockPanel.js +831 -0
  47. package/dist/server/panels/ListPanel.d.ts +62 -0
  48. package/dist/server/panels/ListPanel.js +137 -0
  49. package/dist/server/panels/MessagePanel.d.ts +69 -5
  50. package/dist/server/panels/MessagePanel.js +128 -5
  51. package/dist/server/panels/TestimonialPanel.d.ts +47 -0
  52. package/dist/server/panels/TestimonialPanel.js +71 -0
  53. package/dist/server/panels/VisualPanel.d.ts +45 -13
  54. package/dist/server/panels/VisualPanel.js +75 -16
  55. package/dist/server/panels/index.d.ts +2 -0
  56. package/dist/server/panels/index.js +2 -0
  57. package/dist/server/schema/BlockConfig.d.ts +3 -1
  58. package/dist/server/schema/BlockConfig.js +2 -1
  59. package/dist/server/schema/ItemAlignment.d.ts +2 -0
  60. package/dist/server/schema/ItemPosition.d.ts +1 -0
  61. package/dist/server/schema/ItemSize.d.ts +2 -1
  62. package/dist/server/schema/ItemSize.js +2 -1
  63. package/dist/server/schema/ListPanelLayout.d.ts +34 -0
  64. package/dist/server/schema/ListPanelLayout.js +24 -0
  65. package/dist/server/schema/PanelLayout.d.ts +14 -0
  66. package/dist/server/schema/PanelLayout.js +70 -0
  67. package/dist/server/schema/SlotVariation.d.ts +9 -0
  68. package/dist/server/schema/SlotVariation.js +48 -0
  69. package/dist/server/schema/TextAlignment.d.ts +1 -0
  70. package/dist/server/schema/index.d.ts +3 -0
  71. package/dist/server/schema/index.js +3 -0
  72. package/dist/styles/blocks/Clients.css +0 -1
  73. package/dist/styles/blocks/Message.css +0 -343
  74. package/dist/styles/blocks/Outcome.css +13 -50
  75. package/dist/styles/blocks/Summary.css +15 -0
  76. package/dist/styles/blocks/Testimonial.css +1 -318
  77. package/dist/styles/blocks/ValueProp.css +0 -126
  78. package/dist/styles/blocks/_index.css +1 -0
  79. package/dist/styles/layouts/BrickLayout.css +43 -0
  80. package/dist/styles/layouts/CardLayout.css +46 -0
  81. package/dist/styles/layouts/FlexWrapLayout.css +38 -0
  82. package/dist/styles/layouts/GridLayout.css +25 -0
  83. package/dist/styles/layouts/StackLayout.css +46 -0
  84. package/dist/styles/layouts/_index.css +6 -1
  85. package/dist/styles/panels/ListPanel.css +3 -0
  86. package/dist/styles/panels/TestimonialPanel.css +64 -0
  87. package/dist/styles/panels/_index.css +2 -0
  88. package/package.json +3 -2
@@ -1,489 +1,35 @@
1
1
  "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
2
  Object.defineProperty(exports, "__esModule", { value: true });
17
3
  exports.Outcome = Outcome;
18
4
  const jsx_runtime_1 = require("react/jsx-runtime");
19
5
  const funnel_core_1 = require("@nascentdigital/funnel-core");
20
- const classnames_1 = __importDefault(require("classnames"));
21
- const react_1 = require("react");
22
- const fields_1 = require("../fields");
23
- const panels_1 = require("../panels");
24
- const schema_1 = require("../schema");
25
6
  const Block_1 = require("./Block");
26
7
  const OutcomeDetail_1 = require("./OutcomeDetail");
27
8
  // component
28
- function Outcome(_a) {
29
- var _b, _c, _d;
30
- var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', detailsTag = 'ul', detailTag = 'li', outcome, visualLoading } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "detailsTag", "detailTag", "outcome", "visualLoading"]);
31
- // don't render if missing model
32
- if (!outcome) {
33
- console.warn('[Outcome] attempted to render without outcome model');
34
- return null;
35
- }
36
- // destructure props
37
- const config = (_b = outcome.config) !== null && _b !== void 0 ? _b : {};
38
- const fields = (_c = outcome.fields) !== null && _c !== void 0 ? _c : {};
39
- const { title: titleRaw, headline: headlineRaw, caption: captionRaw, link: linkRaw, visual: visualRaw, details: detailsRaw } = fields;
40
- const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
41
- const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
42
- const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
43
- const link = linkRaw === null || linkRaw === void 0 ? void 0 : linkRaw.value;
44
- const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
45
- const details = ((_d = detailsRaw === null || detailsRaw === void 0 ? void 0 : detailsRaw.value) !== null && _d !== void 0 ? _d : []);
46
- // panel layout
47
- const layout = getOutcomeLayout({ fields, config });
48
- const getPanel = ({ className, panel }) => {
49
- var _a;
50
- switch (panel.type) {
51
- case 'message':
52
- return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-message'), panel: panel, title: title, titleTag: titleTag, headline: headline, headlineTag: headlineTag, caption: caption, captionTag: captionTag, ctas: link }));
53
- case 'visual':
54
- return visual
55
- ?
56
- (0, jsx_runtime_1.jsx)(panels_1.VisualPanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center', visualLoading: visualLoading })
57
- : undefined;
58
- case 'list':
59
- return renderDetails({
60
- className,
61
- panel,
62
- details,
63
- detailsTag,
64
- detailTag
65
- });
66
- }
67
- };
68
- // render block
69
- return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: (0, classnames_1.default)("nd-Outcome", className), config: outcome.config, layout: layout, renderPanel: getPanel }, props)));
9
+ function Outcome(props) {
10
+ return (0, jsx_runtime_1.jsx)(Outcome.Component, Object.assign({}, props));
70
11
  }
71
12
  // extension
72
13
  (function (Outcome) {
73
- let IntroPosition;
74
- (function (IntroPosition) {
75
- // schema
76
- IntroPosition.Enum = {
77
- left: { name: 'Top-Left', hint: 'Place headline on top-left of the block.' },
78
- center: { name: 'Top-Center', hint: 'Place headline on top-center of the block.' },
79
- right: { name: 'Top-Right', hint: 'Place headline on top-right of the block.' },
80
- inline: { name: 'Inline', hint: 'Place headline beside the visual.' },
81
- };
82
- IntroPosition.schema = funnel_core_1.Schema.Field.enumeration({
83
- name: 'Intro Position',
84
- semantics: 'dropdown',
85
- hint: 'Set position',
86
- description: 'Control the positioning of the intro.',
87
- options: IntroPosition.Enum,
88
- defaultOption: 'inline'
89
- });
90
- // helpers
91
- function getClassName(position) {
92
- switch (position) {
93
- case 'inline':
94
- return 'nd-Block-intro-inline';
95
- case 'left':
96
- return 'nd-Block-intro-left';
97
- case 'center':
98
- return 'nd-Block-intro-center';
99
- case 'right':
100
- return 'nd-Block-intro-right';
101
- default:
102
- console.warn('[Outcome] unrecognized intro position: ', position);
103
- return 'nd-Block-intro-inline';
104
- }
105
- }
106
- IntroPosition.getClassName = getClassName;
107
- })(IntroPosition = Outcome.IntroPosition || (Outcome.IntroPosition = {}));
108
- // schema
109
- Outcome.configSchema = Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), { introPosition: IntroPosition.schema.optional(), introTextAlignment: schema_1.TextAlignment.schema.rename('Intro Text Alignment').optional(), introWidth: schema_1.ItemSize.schema
110
- .modify({ semantics: 'segmented', name: 'Intro Width' })
111
- .keepOptions('md', 'lg')
112
- .setDefault('md')
113
- .optional(), detailsWidth: schema_1.ItemSize.schema
114
- .modify({ semantics: 'segmented', name: 'Details Width' })
115
- .keepOptions('sm', 'md', 'lg')
116
- .setDefault('md')
117
- .optional(), detailsPosition: schema_1.ItemAlignment.Horizontal.schema.rename('Details Position').optional(), visualPosition: schema_1.ItemPosition.schema
118
- .modify({ name: 'Visual Position' })
119
- .keepOptions('left', 'right', 'top', 'bottom')
120
- .setDefault('left')
121
- .optional(), visualAspect: schema_1.AspectRatio.schema
122
- .rename('Visual Aspect')
123
- .optional(), visualAnchor: schema_1.Anchor.schema
124
- .rename('Visual Anchor')
125
- .optional(), contentAlignment: schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional() });
126
- const fieldsSchema = {
127
- visual: fields_1.Visual.schema.modify({
128
- tags: ['lifestyle', 'person', 'product', 'brand']
129
- }).optional(),
130
- title: fields_1.Title.schema.optional(),
131
- headline: fields_1.Headline.schema,
132
- caption: fields_1.Caption.schema.optional(),
133
- link: funnel_core_1.Schema.Field.link({ name: 'Link' }).optional(),
134
- details: funnel_core_1.Schema.Field.list({
135
- name: 'Outcome Details',
136
- itemTypes: {
137
- detail: OutcomeDetail_1.OutcomeDetail.schema
138
- },
139
- min: 1,
140
- max: 3
141
- }).optional()
142
- };
143
- Outcome.schema = funnel_core_1.Schema.Block.create({
14
+ var _a;
15
+ // factory
16
+ _a = Block_1.Block.create({
144
17
  id: '_nd-outcome',
145
18
  name: 'Outcome',
146
19
  version: 1,
147
- config: Outcome.configSchema,
148
- fields: fieldsSchema,
149
- getConfig: getOutcomeConfig,
150
- getLayout: getOutcomeLayout
151
- });
152
- })(Outcome || (exports.Outcome = Outcome = {}));
153
- // helpers
154
- function getOutcomeConfig(args) {
155
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
156
- // parse args
157
- const { configSchema, config, fields } = args;
158
- // current config helpers
159
- const visual = fields === null || fields === void 0 ? void 0 : fields.visual;
160
- const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
161
- const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
162
- const visualConfig = panels_1.VisualPanel.getConfig({ visual, config, aspectKey: 'visualAspect', anchorKey: 'visualAnchor' });
163
- const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), introPosition: funnel_core_1.Schema.EnumField.Value.toData('left'), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData('left'), introWidth: funnel_core_1.Schema.EnumField.Value.toData('md'), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData('start'), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData('sm'), visualPosition: funnel_core_1.Schema.EnumField.Value.toData('left') }), visualConfig.defaultConfig), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData('start') });
164
- // current values or fallback to a valid value
165
- const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : (_e = defaultConfig.introPosition) === null || _e === void 0 ? void 0 : _e.value;
166
- const introTextAlignment = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _f !== void 0 ? _f : (_g = defaultConfig.introTextAlignment) === null || _g === void 0 ? void 0 : _g.value;
167
- const introWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _h !== void 0 ? _h : (_j = defaultConfig.introWidth) === null || _j === void 0 ? void 0 : _j.value;
168
- const detailsPosition = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _k !== void 0 ? _k : (_l = defaultConfig.detailsPosition) === null || _l === void 0 ? void 0 : _l.value;
169
- const detailsWidth = (_m = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _m !== void 0 ? _m : (_o = defaultConfig.detailsWidth) === null || _o === void 0 ? void 0 : _o.value;
170
- const visualPosition = (_p = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _p !== void 0 ? _p : (_q = defaultConfig.visualPosition) === null || _q === void 0 ? void 0 : _q.value;
171
- const contentAlignment = (_r = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _r !== void 0 ? _r : (_s = defaultConfig.contentAlignment) === null || _s === void 0 ? void 0 : _s.value;
172
- // has details and has visual
173
- if (hasDetails && hasVisual) {
174
- const updatedConfigSchema = Object.assign(Object.assign({}, configSchema), visualConfig.configSchema);
175
- let newVisualPosition = visualPosition;
176
- // if intro is inline, drop introTextAlignment, introWidth and reduce visual position options
177
- if (introPosition === 'inline') {
178
- delete updatedConfigSchema.introTextAlignment;
179
- delete updatedConfigSchema.introWidth;
180
- const newVisualPositionOptions = {
181
- left: { name: 'Left', hint: 'Aligns the item to the left.' },
182
- right: { name: 'Right', hint: 'Aligns the item to the right.' },
183
- };
184
- // use the current visual position as the new one if it's valid. otherwise, fallback to left
185
- newVisualPosition =
186
- Object.keys(newVisualPositionOptions).includes(visualPosition) ? visualPosition : 'left';
187
- updatedConfigSchema.visualPosition = configSchema.visualPosition.modify({
188
- semantics: 'segmented',
189
- options: newVisualPositionOptions
190
- });
191
- }
192
- if (newVisualPosition === 'left' || newVisualPosition === 'right') {
193
- delete updatedConfigSchema.detailsWidth;
194
- delete updatedConfigSchema.detailsPosition;
20
+ className: 'nd-Outcome',
21
+ message: true,
22
+ visual: true,
23
+ list: {
24
+ schema: funnel_core_1.Schema.Field.list({
25
+ name: 'Outcome Details',
26
+ itemTypes: {
27
+ detail: OutcomeDetail_1.OutcomeDetail.schema
28
+ },
29
+ min: 1,
30
+ max: 3
31
+ }),
32
+ itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, Object.assign({ as: "li", className: "nd-Outcome-detail", detail: item }, itemProps)))
195
33
  }
196
- // return configuration
197
- return {
198
- updatedConfigSchema,
199
- updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(introPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData(detailsWidth), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData(detailsPosition), visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
200
- defaultConfig
201
- };
202
- }
203
- // has only visual
204
- else if (hasVisual) {
205
- const newVisualPositionOptions = {
206
- left: { name: 'Left', hint: 'Aligns the item to the left.' },
207
- right: { name: 'Right', hint: 'Aligns the item to the right.' },
208
- };
209
- // use the current visual position as the new one if it's valid. otherwise, fallback to left
210
- const newVisualPosition = Object.keys(newVisualPositionOptions).includes(introPosition) ? visualPosition : 'left';
211
- return {
212
- updatedConfigSchema: Object.assign(Object.assign({ theme: configSchema.theme, visualPosition: configSchema.visualPosition.modify({
213
- semantics: 'segmented',
214
- options: newVisualPositionOptions
215
- }) }, visualConfig.configSchema), { contentAlignment: configSchema.contentAlignment }),
216
- updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
217
- defaultConfig
218
- };
219
- }
220
- // has only details
221
- else if (hasDetails) {
222
- // use the current intro position as the new one if it's valid. otherwise, fallback to left
223
- const newIntroPositionOptions = {
224
- left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
225
- right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
226
- };
227
- const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
228
- // return configuration
229
- return {
230
- updatedConfigSchema: {
231
- theme: configSchema.theme,
232
- introPosition: configSchema.introPosition.modify({
233
- semantics: 'segmented',
234
- options: newIntroPositionOptions
235
- }),
236
- contentAlignment: configSchema.contentAlignment
237
- },
238
- updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
239
- defaultConfig
240
- };
241
- }
242
- // has only intro
243
- else {
244
- // define new intro position options
245
- const newIntroPositionOptions = {
246
- left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
247
- center: { name: 'Center', hint: 'Align all the text inside the intro to center.' },
248
- right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
249
- };
250
- // use the current intro position as the new one if it's valid. otherwise, fallback to left
251
- const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
252
- return {
253
- updatedConfigSchema: {
254
- theme: configSchema.theme,
255
- introPosition: configSchema.introPosition.modify({
256
- semantics: 'segmented',
257
- options: newIntroPositionOptions
258
- }),
259
- introTextAlignment: configSchema.introTextAlignment,
260
- introWidth: configSchema.introWidth
261
- },
262
- updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth) }),
263
- defaultConfig
264
- };
265
- }
266
- }
267
- function getOutcomeLayout(args) {
268
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
269
- // parse args
270
- const { config, fields } = args;
271
- const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
272
- const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
273
- const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : 'left';
274
- const introAlign = introPosition === 'center'
275
- ? 'center'
276
- : introPosition === 'right'
277
- ? 'end'
278
- : 'start';
279
- const introTextAlign = (_e = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _e !== void 0 ? _e : 'left';
280
- const introWidth = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _f !== void 0 ? _f : 'md';
281
- const visualPosition = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _g !== void 0 ? _g : 'left';
282
- const detailsWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _h !== void 0 ? _h : 'md';
283
- const detailsPosition = (_j = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _j !== void 0 ? _j : 'start';
284
- const visualAspect = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAspect)) !== null && _k !== void 0 ? _k : 'auto';
285
- const contentAlign = (_l = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _l !== void 0 ? _l : 'start';
286
- // create layout with all parts
287
- let layout;
288
- if (hasDetails && hasVisual) {
289
- layout = introPosition === 'inline'
290
- // inline message
291
- ? visualPosition === 'left'
292
- // language=XML (visual left)
293
- ? `
294
- <block
295
- xmlns="nd:block"
296
- name="Inline, Visual-Left"
297
- >
298
- <row alignY="${contentAlign}">
299
- <visual aspect="${visualAspect}" mobileOrder="last" />
300
- <col>
301
- <message textAlign="${introTextAlign}" />
302
- <list itemType="message" />
303
- </col>
304
- </row>
305
- </block>
306
- `
307
- // language=XML (visual right)
308
- : `
309
- <block
310
- xmlns="nd:block"
311
- name="Inline, Visual-Right"
312
- >
313
- <row alignY="${contentAlign}">
314
- <col>
315
- <message textAlign="${introTextAlign}" />
316
- <list itemType="message" />
317
- </col>
318
- <visual aspect="${visualAspect}" />
319
- </row>
320
- </block>
321
- `
322
- // top message
323
- : visualPosition === 'left'
324
- // language=XML (visual left)
325
- ? `
326
- <block
327
- xmlns="nd:block"
328
- name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Left"
329
- >
330
- <col>
331
- <message
332
- size="${introWidth}"
333
- alignX="${introAlign}"
334
- textAlign="${introTextAlign}"
335
- />
336
- <row alignY="${contentAlign}">
337
- <visual aspect="${visualAspect}" mobileOrder="last" />
338
- <list itemType="message" />
339
- </row>
340
- </col>
341
- </block>
342
- `
343
- : visualPosition === 'right' ?
344
- // language=XML (visual right)
345
- `
346
- <block
347
- xmlns="nd:block"
348
- name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Right"
349
- >
350
- <col>
351
- <message
352
- size="${introWidth}"
353
- alignX="${introAlign}"
354
- textAlign="${introTextAlign}"
355
- />
356
- <row alignY="${contentAlign}">
357
- <list itemType="message" />
358
- <visual aspect="${visualAspect}" mobileOrder="first" />
359
- </row>
360
- </col>
361
- </block>
362
- `
363
- : visualPosition === 'top' ?
364
- // language=XML (visual top)
365
- `
366
- <block
367
- xmlns="nd:block"
368
- name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Top"
369
- >
370
- <col>
371
- <message
372
- size="${introWidth}"
373
- alignX="${introAlign}"
374
- textAlign="${introTextAlign}"
375
- />
376
- <visual aspect="${visualAspect}" />
377
- <list
378
- itemType="message"
379
- size="${detailsWidth}"
380
- alignX="${detailsPosition}" />
381
- </col>
382
- </block>
383
- `
384
- // language=XML (visual bottom)
385
- : `
386
- <block
387
- xmlns="nd:block"
388
- name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Bottom"
389
- >
390
- <col>
391
- <message
392
- size="${introWidth}"
393
- alignX="${introAlign}"
394
- textAlign="${introTextAlign}"
395
- />
396
- <list
397
- itemType="message"
398
- size="${detailsWidth}"
399
- alignX="${detailsPosition}" />
400
- <visual aspect="${visualAspect}" />
401
- </col>
402
- </block>
403
- `;
404
- }
405
- // or layout with only visual
406
- else if (hasVisual) {
407
- layout = visualPosition === 'left'
408
- // language=XML (visual left)
409
- ? `
410
- <block
411
- xmlns="nd:block"
412
- name="Visual-Left"
413
- >
414
- <row alignY="${contentAlign}">
415
- <visual aspect="${visualAspect}" />
416
- <message textAlign="${introTextAlign}" mobileOrder="first" />
417
- </row>
418
- </block>
419
- `
420
- // language=XML (visual right)
421
- : `
422
- <block
423
- xmlns="nd:block"
424
- name="Visual-Left"
425
- >
426
- <row alignY="${contentAlign}">
427
- <message textAlign="${introTextAlign}" />
428
- <visual aspect="${visualAspect}" />
429
- </row>
430
- </block>
431
- `;
432
- }
433
- // or layout with only details
434
- else if (hasDetails) {
435
- layout = introPosition === 'left'
436
- // language=XML (visual message left)
437
- ? `
438
- <block
439
- xmlns="nd:block"
440
- name="Intro-Left"
441
- >
442
- <row alignY="${contentAlign}">
443
- <message textAlign="${introTextAlign}" />
444
- <list itemType="message" />
445
- </row>
446
- </block>
447
- `
448
- // language=XML (visual right)
449
- : `
450
- <block
451
- xmlns="nd:block"
452
- name="Intro-Left"
453
- >
454
- <row alignY="${contentAlign}">
455
- <list itemType="message" />
456
- <message textAlign="${introTextAlign}" mobileOrder="first" />
457
- </row>
458
- </block>
459
- `;
460
- }
461
- // or with only intro
462
- else {
463
- // language=XML
464
- layout = `
465
- <block
466
- xmlns="nd:block"
467
- name="Intro-only, ${funnel_core_1.StringUtils.capitalize(introPosition)}"
468
- >
469
- <col>
470
- <message
471
- size="${introWidth}"
472
- alignX="${introAlign}"
473
- textAlign="${introTextAlign}"
474
- />
475
- </col>
476
- </block>
477
- `;
478
- }
479
- // return skeleton
480
- return funnel_core_1.BlockLayout.parse(layout);
481
- }
482
- function renderDetails({ className, panel, details, detailsTag, detailTag }) {
483
- // skip if there's no details
484
- if (details.length === 0) {
485
- return undefined;
486
- }
487
- // render details
488
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, panels_1.BlockPanel.getClassNames({ panel }), 'nd-Outcome-detailsWrap'), children: (0, react_1.createElement)(detailsTag, { className: 'nd-BlockPanel-content nd-Outcome-details' }, details.map(detail => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, { as: detailTag, detail: detail }, detail.id)))) }));
489
- }
34
+ }), Outcome.Component = _a.Component, Outcome.schema = _a.schema;
35
+ })(Outcome || (exports.Outcome = Outcome = {}));
@@ -1,30 +1,95 @@
1
1
  import { Schema } from '@nascentdigital/funnel-core';
2
2
  import { HTMLBlockElement } from '../../types';
3
- import { Quote, Title } from '../fields';
4
- import { BlockConfig } from '../schema';
5
- export declare function Testimonial({ className, titleTag, quoteTag, testimonial, ...props }: Testimonial.Props): import("react/jsx-runtime").JSX.Element | null;
3
+ import { BlockPanel, TestimonialPanel, VisualPanel } from '../panels';
4
+ export declare function Testimonial({ className, testimonial, testimonialPanelProps, visualPanelProps, ...props }: Testimonial.Props): import("react/jsx-runtime").JSX.Element | null;
6
5
  export declare namespace Testimonial {
7
- const schema: Schema.Block<"_nd-testimonial", {
6
+ const fieldsSchema: {
8
7
  visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
9
8
  title: Schema.Optional<Schema.TextField>;
10
9
  quote: Schema.RichTextField;
11
10
  author: Schema.CollectionField<Schema.Collection<{
12
11
  title: Schema.Optional<Schema.TextField>;
13
- company: Schema.Optional<Schema.TextField>;
12
+ company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
13
+ division: Schema.Optional<Schema.TextField>;
14
+ location: Schema.Optional<Schema.TextField>;
15
+ logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
16
+ badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
17
+ badgeText: Schema.Optional<Schema.TextField>;
18
+ }>>>;
14
19
  location: Schema.Optional<Schema.TextField>;
15
20
  picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
16
21
  }>>;
17
- link: Schema.Optional<Schema.LinkField>;
18
- }, {
19
- theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
20
- visualLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.VisualLayout>>;
21
- copyLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.CopyLayout>>;
22
- fullbleed: Schema.BooleanField;
23
- }>;
24
- type Props = HTMLBlockElement<'div'> & {
25
- titleTag?: Title.Tag;
26
- quoteTag?: Quote.Tag;
22
+ ctas: Schema.Optional<Schema.ListField<{
23
+ cta: Schema.LinkField;
24
+ }>>;
25
+ };
26
+ const configSchema: BlockPanel.GetConfigSchema.Result<{
27
+ visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
28
+ title: Schema.Optional<Schema.TextField>;
29
+ quote: Schema.RichTextField;
30
+ author: Schema.CollectionField<Schema.Collection<{
31
+ title: Schema.Optional<Schema.TextField>;
32
+ company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
33
+ division: Schema.Optional<Schema.TextField>;
34
+ location: Schema.Optional<Schema.TextField>;
35
+ logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
36
+ badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
37
+ badgeText: Schema.Optional<Schema.TextField>;
38
+ }>>>;
39
+ location: Schema.Optional<Schema.TextField>;
40
+ picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
41
+ }>>;
42
+ ctas: Schema.Optional<Schema.ListField<{
43
+ cta: Schema.LinkField;
44
+ }>>;
45
+ }, "message", "visual", undefined, Schema.Block.Config>;
46
+ export const schema: Schema.Block<"_nd-testimonial", {
47
+ visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
48
+ title: Schema.Optional<Schema.TextField>;
49
+ quote: Schema.RichTextField;
50
+ author: Schema.CollectionField<Schema.Collection<{
51
+ title: Schema.Optional<Schema.TextField>;
52
+ company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
53
+ division: Schema.Optional<Schema.TextField>;
54
+ location: Schema.Optional<Schema.TextField>;
55
+ logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
56
+ badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
57
+ badgeText: Schema.Optional<Schema.TextField>;
58
+ }>>>;
59
+ location: Schema.Optional<Schema.TextField>;
60
+ picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
61
+ }>>;
62
+ ctas: Schema.Optional<Schema.ListField<{
63
+ cta: Schema.LinkField;
64
+ }>>;
65
+ }, BlockPanel.GetConfigSchema.Result<{
66
+ visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
67
+ title: Schema.Optional<Schema.TextField>;
68
+ quote: Schema.RichTextField;
69
+ author: Schema.CollectionField<Schema.Collection<{
70
+ title: Schema.Optional<Schema.TextField>;
71
+ company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
72
+ division: Schema.Optional<Schema.TextField>;
73
+ location: Schema.Optional<Schema.TextField>;
74
+ logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
75
+ badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
76
+ badgeText: Schema.Optional<Schema.TextField>;
77
+ }>>>;
78
+ location: Schema.Optional<Schema.TextField>;
79
+ picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
80
+ }>>;
81
+ ctas: Schema.Optional<Schema.ListField<{
82
+ cta: Schema.LinkField;
83
+ }>>;
84
+ }, "message", "visual", undefined, Schema.Block.Config>>;
85
+ export type Props = HTMLBlockElement<'div'> & {
27
86
  testimonial: Model;
87
+ testimonialPanelProps?: TestimonialPanel.Props.Configuration;
88
+ visualPanelProps?: VisualPanel.Props.Configuration;
28
89
  };
29
- type Model = Schema.Block.LinkedData<typeof schema>;
90
+ export type GetConfigArgs = Schema.Block.GetConfig.Args<typeof configSchema, typeof fieldsSchema>;
91
+ export type GetConfigResult = Schema.Block.GetConfig.Result<typeof configSchema>;
92
+ export type GetLayoutArgs = Schema.Block.GetLayout.Args<typeof configSchema, typeof fieldsSchema>;
93
+ export type Model = Schema.Block.LinkedData<typeof schema>;
94
+ export {};
30
95
  }