@nascentdigital/funnel-ui 4.4.21 → 4.5.1

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 (91) 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 -28
  6. package/dist/server/blocks/Clients.js +13 -57
  7. package/dist/server/blocks/MediaLayout.d.ts +11 -302
  8. package/dist/server/blocks/MediaLayout.js +19 -65
  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 -81
  12. package/dist/server/blocks/Outcome.js +20 -474
  13. package/dist/server/blocks/OutcomeDetail.d.ts +5 -2
  14. package/dist/server/blocks/Testimonial.d.ts +81 -16
  15. package/dist/server/blocks/Testimonial.js +59 -27
  16. package/dist/server/blocks/Testimonials.d.ts +41 -0
  17. package/dist/server/blocks/Testimonials.js +90 -0
  18. package/dist/server/blocks/ValueProp.d.ts +19 -37
  19. package/dist/server/blocks/ValueProp.js +14 -100
  20. package/dist/server/blocks/index.d.ts +1 -0
  21. package/dist/server/blocks/index.js +1 -0
  22. package/dist/server/blocks/summary/Statement.d.ts +304 -0
  23. package/dist/server/blocks/summary/Statement.js +52 -0
  24. package/dist/server/blocks/summary/Summary.d.ts +19 -0
  25. package/dist/server/blocks/summary/Summary.js +34 -0
  26. package/dist/server/blocks/summary/index.d.ts +1 -0
  27. package/dist/server/blocks/summary/index.js +17 -0
  28. package/dist/server/entities/Client.d.ts +1 -1
  29. package/dist/server/entities/Person.d.ts +27 -2
  30. package/dist/server/entities/Person.js +55 -5
  31. package/dist/server/entities/UniqueSellingPoint.d.ts +1 -1
  32. package/dist/server/layouts/BrickLayout.d.ts +290 -0
  33. package/dist/server/layouts/BrickLayout.js +25 -0
  34. package/dist/server/layouts/CardLayout.d.ts +291 -0
  35. package/dist/server/layouts/CardLayout.js +25 -0
  36. package/dist/server/layouts/FlexWrapLayout.d.ts +290 -0
  37. package/dist/server/layouts/FlexWrapLayout.js +41 -0
  38. package/dist/server/layouts/StackLayout.d.ts +290 -0
  39. package/dist/server/layouts/StackLayout.js +25 -0
  40. package/dist/server/layouts/grid/GridItem.d.ts +8 -0
  41. package/dist/server/layouts/grid/GridItem.js +9 -0
  42. package/dist/server/layouts/grid/GridLayout.d.ts +293 -0
  43. package/dist/server/layouts/grid/GridLayout.js +25 -0
  44. package/dist/server/layouts/grid/index.d.ts +2 -0
  45. package/dist/server/layouts/grid/index.js +18 -0
  46. package/dist/server/layouts/index.d.ts +5 -0
  47. package/dist/server/layouts/index.js +21 -0
  48. package/dist/server/panels/BlockPanel.d.ts +96 -1
  49. package/dist/server/panels/BlockPanel.js +856 -0
  50. package/dist/server/panels/ListPanel.d.ts +63 -0
  51. package/dist/server/panels/ListPanel.js +147 -0
  52. package/dist/server/panels/MessagePanel.d.ts +71 -5
  53. package/dist/server/panels/MessagePanel.js +158 -6
  54. package/dist/server/panels/TestimonialPanel.d.ts +47 -0
  55. package/dist/server/panels/TestimonialPanel.js +71 -0
  56. package/dist/server/panels/VisualPanel.d.ts +46 -13
  57. package/dist/server/panels/VisualPanel.js +85 -17
  58. package/dist/server/panels/index.d.ts +2 -0
  59. package/dist/server/panels/index.js +2 -0
  60. package/dist/server/schema/BlockConfig.d.ts +3 -1
  61. package/dist/server/schema/BlockConfig.js +2 -1
  62. package/dist/server/schema/ItemAlignment.d.ts +2 -0
  63. package/dist/server/schema/ItemPosition.d.ts +1 -0
  64. package/dist/server/schema/ItemSize.d.ts +2 -1
  65. package/dist/server/schema/ItemSize.js +2 -1
  66. package/dist/server/schema/ListPanelLayout.d.ts +34 -0
  67. package/dist/server/schema/ListPanelLayout.js +24 -0
  68. package/dist/server/schema/PanelLayout.d.ts +14 -0
  69. package/dist/server/schema/PanelLayout.js +70 -0
  70. package/dist/server/schema/SlotVariation.d.ts +9 -0
  71. package/dist/server/schema/SlotVariation.js +48 -0
  72. package/dist/server/schema/TextAlignment.d.ts +1 -0
  73. package/dist/server/schema/index.d.ts +3 -0
  74. package/dist/server/schema/index.js +3 -0
  75. package/dist/styles/blocks/Clients.css +0 -1
  76. package/dist/styles/blocks/Message.css +0 -343
  77. package/dist/styles/blocks/Outcome.css +13 -50
  78. package/dist/styles/blocks/Summary.css +15 -0
  79. package/dist/styles/blocks/Testimonial.css +1 -318
  80. package/dist/styles/blocks/ValueProp.css +0 -126
  81. package/dist/styles/blocks/_index.css +1 -0
  82. package/dist/styles/layouts/BrickLayout.css +43 -0
  83. package/dist/styles/layouts/CardLayout.css +46 -0
  84. package/dist/styles/layouts/FlexWrapLayout.css +38 -0
  85. package/dist/styles/layouts/GridLayout.css +25 -0
  86. package/dist/styles/layouts/StackLayout.css +46 -0
  87. package/dist/styles/layouts/_index.css +6 -1
  88. package/dist/styles/panels/ListPanel.css +3 -0
  89. package/dist/styles/panels/TestimonialPanel.css +64 -0
  90. package/dist/styles/panels/_index.css +2 -0
  91. package/package.json +3 -2
package/dist/styles/blocks/Message.css CHANGED
@@ -2,352 +2,9 @@
2
2
 
3
3
  /* variables */
4
4
  :root {
5
- --nd-message-copy-padding: unset;
6
- --nd-message-copy-gap: theme('spacing.l8');
7
- --nd-message-title-margin: unset;
8
- --nd-message-headline-margin: unset;
9
- --nd-message-caption-margin: unset;
10
- --nd-message-ctas-margin: unset;
11
- --nd-message-ctas-gap: theme('spacing.l8');
12
-
13
- --nd-message-visual-rounding: 0px;
14
- --nd-message-visual-gap-x: theme('spacing.l5');
15
- --nd-message-visual-gap-y: theme('spacing.l11');
16
- --nd-message-visual-padding: theme('spacing.l15');
17
-
18
- @media screen(sm) {
19
- --nd-message-visual-gap-x: theme('spacing.l8');
20
- --nd-message-visual-gap-y: theme('spacing.l11');
21
- --nd-message-visual-padding: theme('spacing.l15');
22
- }
23
- @media screen(md) {
24
- --nd-message-visual-gap-x: theme('spacing.l12');
25
- --nd-message-visual-gap-y: theme('spacing.l13');
26
- --nd-message-visual-padding: theme('spacing.l18');
27
- }
28
- @media screen(lg) {
29
- --nd-message-visual-gap-x: theme('spacing.l15');
30
- --nd-message-visual-gap-y: theme('spacing.l13');
31
- --nd-message-visual-padding: theme('spacing.l18');
32
- }
33
5
  }
34
6
 
35
7
  /* base */
36
8
  .nd-Message {
37
- @apply flex items-center;
38
-
39
- .nd-Message-content {
40
- @apply w-full;
41
- }
42
- .nd-Message-visualWrap {
43
- @apply relative;
44
- }
45
- .nd-Message-visual {
46
- @apply block;
47
- }
48
- .nd-Message-copyWrap {
49
- @apply relative p-[var(--nd-message-copy-padding)];
50
- }
51
- .nd-Message-copy {
52
- @apply flex flex-col gap-[var(--nd-message-copy-gap)];
53
- }
54
- .nd-Message-title {
55
- margin: var(--nd-message-title-margin);
56
- }
57
- .nd-Message-headline {
58
- margin: var(--nd-message-headline-margin);
59
- }
60
- .nd-Message-caption {
61
- margin: var(--nd-message-caption-margin);
62
- }
63
- .nd-Message-ctas {
64
- margin: var(--nd-message-ctas-margin);
65
- }
66
- .nd-Message-ctas {
67
- @apply flex flex-wrap items-center gap-[var(--nd-message-ctas-gap)];
68
- }
69
- }
70
-
71
-
72
- /* visual layouts */
73
- ._nd-Message-visual-x-mobile {
74
- .nd-Message-content {
75
- @apply flex flex-col gap-[var(--nd-message-visual-gap-y)];
76
- }
77
-
78
- .nd-Message-visualWrap {
79
- @apply order-last;
80
- }
81
- .nd-Message-copyWrap {
82
- @apply container-p;
83
- }
84
- .nd-Message-copy {
85
- @apply items-center text-center;
86
- }
87
- .nd-Message-ctas {
88
- @apply justify-center;
89
- }
90
-
91
- &:not(.nd-Block-fullbleed) {
92
- .nd-Message-visualWrap {
93
- @apply container-p;
94
- }
95
- .nd-Message-visual {
96
- @apply overflow-hidden;
97
- border-radius: var(--nd-message-visual-rounding);
98
- }
99
- }
100
- }
101
- ._nd-Message-visual-x-desktop {
102
- .nd-Message-content {
103
- @apply stacked;
104
- }
105
-
106
- .nd-Message-visualWrap {
107
- @apply grid grid-cols-12 items-center gap-[var(--nd-message-visual-gap-x)];
108
- }
109
- .nd-Message-visual {
110
- @apply col-span-6;
111
- }
112
- .nd-Message-copyWrap {
113
- @apply container-p grid grid-cols-12 items-center gap-[var(--nd-message-visual-gap-x)];
114
- }
115
- .nd-Message-copy {
116
- @apply col-span-6 items-start text-left;
117
- }
118
-
119
- &:not(:has(.nd-Message-visual)) {
120
- .nd-Message-copy {
121
- @apply col-span-full;
122
- }
123
- }
124
-
125
- &:not(.nd-Block-fullbleed) {
126
- .nd-Message-visualWrap {
127
- @apply container-p;
128
- }
129
- .nd-Message-visual {
130
- @apply overflow-hidden;
131
- border-radius: var(--nd-message-visual-rounding);
132
- }
133
- }
134
- }
135
- .nd-Message.nd-Block-visual-left {
136
- @apply max-md:_nd-Message-visual-x-mobile md:_nd-Message-visual-x-desktop;
137
-
138
- .nd-Message-visual {
139
- @apply md:col-start-1;
140
- }
141
- .nd-Message-copy {
142
- @apply md:col-start-7;
143
- }
144
- }
145
- .nd-Message.nd-Block-visual-right {
146
- @apply max-md:_nd-Message-visual-x-mobile md:_nd-Message-visual-x-desktop;
147
-
148
- .nd-Message-visual {
149
- @apply md:col-start-7;
150
- }
151
- .nd-Message-copy {
152
- @apply md:col-start-1;
153
- }
154
- }
155
- ._nd-Message-visual-y {
156
- .nd-Message-content {
157
- @apply flex flex-col gap-[var(--nd-message-visual-gap-y)];
158
- }
159
-
160
- .nd-Message-copyWrap {
161
- @apply container-p grid grid-cols-12;
162
- }
163
- .nd-Message-copy {
164
- @apply items-center text-center;
165
- @apply col-span-full md:col-start-3 md:col-span-8;
166
- }
167
-
168
- &.nd-Block-fullbleed {
169
- .nd-Message-visual {
170
- @apply w-full;
171
- }
172
- }
173
- &:not(.nd-Block-fullbleed) {
174
- .nd-Message-visualWrap {
175
- @apply container-p;
176
- }
177
- .nd-Message-visual {
178
- @apply overflow-hidden;
179
- border-radius: var(--nd-message-visual-rounding);
180
-
181
- > * {
182
- @apply mx-auto;
183
- }
184
- }
185
- }
186
- }
187
- .nd-Message.nd-Block-visual-top {
188
- @apply _nd-Message-visual-y;
189
- }
190
- .nd-Message.nd-Block-visual-btm {
191
- @apply _nd-Message-visual-y;
192
-
193
- .nd-Message-visualWrap {
194
- @apply order-last;
195
- }
196
- }
197
- ._nd-Message-visual-bg-mobile {
198
- .nd-Message-content {
199
- @apply stacked;
200
- }
201
-
202
- .nd-Message-visual img,
203
- .nd-Message-visual video {
204
- @apply min-h-lvh object-cover;
205
- }
206
- .nd-Message-copyWrap {
207
- @apply container-p grid grid-cols-12 items-center py-[var(--nd-message-visual-padding)] z-overlay;
208
- }
209
- .nd-Message-copy {
210
- @apply col-start-1 col-span-full items-center text-center;
211
- }
212
- &:not(.nd-Block-fullbleed) {
213
- .nd-Message-visualWrap {
214
- @apply container-p;
215
- }
216
- .nd-Message-visual {
217
- @apply overflow-hidden;
218
- border-radius: var(--nd-message-visual-rounding);
219
- }
220
- }
221
-
222
- /* copy placement */
223
- &.nd-Block-copy-center {
224
- }
225
- &.nd-Block-copy-top .nd-Message-copyWrap {
226
- @apply items-start;
227
- }
228
- &.nd-Block-copy-btm .nd-Message-copyWrap {
229
- @apply items-end;
230
- }
231
- &.nd-Block-copy-left .nd-Message-copy {
232
- @apply col-start-1 items-start text-left;
233
- }
234
- &.nd-Block-copy-left-top {
235
- .nd-Message-copyWrap {
236
- @apply items-start;
237
- }
238
- .nd-Message-copy {
239
- @apply col-start-1 items-start text-left;
240
- }
241
- }
242
- &.nd-Block-copy-left-btm {
243
- .nd-Message-copyWrap {
244
- @apply items-end;
245
- }
246
- .nd-Message-copy {
247
- @apply col-start-1 items-start text-left;
248
- }
249
- }
250
- &.nd-Block-copy-right .nd-Message-copy {
251
- @apply col-end-12 items-end text-right;
252
- }
253
- &.nd-Block-copy-right-top {
254
- .nd-Message-copyWrap {
255
- @apply items-start;
256
- }
257
- .nd-Message-copy {
258
- @apply col-end-12 items-end text-right;
259
- }
260
- }
261
- &.nd-Block-copy-right-btm {
262
- .nd-Message-copyWrap {
263
- @apply items-end;
264
- }
265
- .nd-Message-copy {
266
- @apply col-end-12 items-end text-right;
267
- }
268
- }
269
- }
270
- ._nd-Message-visual-bg-desktop {
271
- .nd-Message-content {
272
- @apply stacked;
273
- }
274
-
275
- &:not(.nd-Block-fullbleed) {
276
- .nd-Message-visualWrap {
277
- @apply container-p;
278
- }
279
- .nd-Message-visual {
280
- @apply overflow-hidden;
281
- border-radius: var(--nd-message-visual-rounding);
282
- }
283
- }
284
- .nd-Message-copyWrap {
285
- @apply z-overlay;
286
- @apply container-p grid grid-cols-12 items-center py-[var(--nd-message-visual-padding)];
287
- }
288
- .nd-Message-copy {
289
- @apply col-start-3 col-span-8 items-center text-center;
290
- }
291
-
292
- /* copy placement */
293
- &.nd-Block-copy-center {
294
- }
295
- &.nd-Block-copy-top .nd-Message-copyWrap {
296
- @apply items-start;
297
- }
298
- &.nd-Block-copy-btm .nd-Message-copyWrap {
299
- @apply items-end;
300
- }
301
- &.nd-Block-copy-left .nd-Message-copy {
302
- @apply col-start-1 items-start text-left;
303
- }
304
- &.nd-Block-copy-left-top {
305
- .nd-Message-copyWrap {
306
- @apply items-start;
307
- }
308
- .nd-Message-copy {
309
- @apply col-start-1 items-start text-left;
310
- }
311
- }
312
- &.nd-Block-copy-left-btm {
313
- .nd-Message-copyWrap {
314
- @apply items-end;
315
- }
316
- .nd-Message-copy {
317
- @apply col-start-1 items-start text-left;
318
- }
319
- }
320
- &.nd-Block-copy-right .nd-Message-copy {
321
- @apply col-end-12 items-end text-right;
322
- }
323
- &.nd-Block-copy-right-top {
324
- .nd-Message-copyWrap {
325
- @apply items-start;
326
- }
327
- .nd-Message-copy {
328
- @apply col-end-12 items-end text-right;
329
- }
330
- }
331
- &.nd-Block-copy-right-btm {
332
- .nd-Message-copyWrap {
333
- @apply items-end;
334
- }
335
- .nd-Message-copy {
336
- @apply col-end-12 items-end text-right;
337
- }
338
- }
339
- }
340
- .nd-Message.nd-Block-visual-bg {
341
- @apply max-md:_nd-Message-visual-bg-mobile md:_nd-Message-visual-bg-desktop;
342
-
343
- &.nd-Block-fullbleed {
344
- @apply min-h-0;
345
-
346
- .nd-Message-visual {
347
- img, video {
348
- @apply w-full object-cover;
349
- }
350
- }
351
- }
352
9
  }
353
10
  }
package/dist/styles/blocks/Outcome.css CHANGED
@@ -2,13 +2,6 @@
2
2
 
3
3
  /* variables */
4
4
  :root {
5
- --nd-outcome-gap-x: theme('spacing.l10');
6
- --nd-outcome-gap-y: theme('spacing.l13');
7
- --nd-outome-intro-gap: theme('spacing.l8');
8
- --nd-outome-intro-title-mb: theme('spacing.l3');
9
- --nd-outome-intro-headline-mb: unset;
10
- --nd-outome-intro-caption-mb: unset;
11
- --nd-outome-details-gap: theme('spacing.l11');
12
5
  --nd-outome-detail-gap: theme('spacing.l6');
13
6
  --nd-outome-detail-title-mb: theme('spacing.l2');
14
7
  --nd-outome-detail-headline-mb: unset;
@@ -17,66 +10,36 @@
17
10
 
18
11
  /* base */
19
12
  .nd-Outcome {
13
+ }
20
14
 
21
- /* content */
22
- .nd-Outcome-content {
23
- @apply container-p;
24
- @apply flex flex-col max-md:gap-[var(--nd-outcome-gap-y)];
25
- @apply md:grid md:grid-cols-2 md:gap-x-[var(--nd-outcome-gap-x)] md:gap-y-[var(--nd-outcome-gap-y)];
26
- }
27
-
28
- /* intro */
29
- .nd-Outcome-introWrap {
30
- }
31
- .nd-Outcome-intro {
32
- @apply flex flex-col;
33
- }
34
- .nd-Outcome-title {
35
- margin-bottom: var(--nd-outome-intro-title-mb, var(--nd-outome-intro-gap));
36
- }
37
- .nd-Outcome-headline {
38
- &:not(:last-child) {
39
- margin-bottom: var(--nd-outome-intro-headline-mb, var(--nd-outome-intro-gap));
40
- }
41
- }
42
- .nd-Outcome-caption {
43
- &:not(:last-child) {
44
- margin-bottom: var(--nd-outome-intro-caption-mb, var(--nd-outome-intro-gap));
45
- }
46
- }
47
- .nd-Outcome-link {
48
- }
49
-
50
- /* visual */
51
- .nd-Outcome-visualWrap {
52
- @apply md:col-start-2 md:row-span-2;
53
- }
54
- .nd-Outcome-visual {
55
- @apply block;
56
- }
15
+ /* outcome detail */
16
+ .nd-Outcome-detail {
57
17
 
58
- /* details */
59
- .nd-Outcome-detailsWrap {
60
- }
61
- .nd-Outcome-details {
18
+ /* main content */
19
+ .nd-Outcome-detail-content {
62
20
  @apply flex flex-col gap-[var(--nd-outome-details-gap)];
63
21
  }
64
- .nd-Outcome-detail {
65
- @apply flex flex-col;
66
- }
22
+
23
+ /* title */
67
24
  .nd-Outcome-detail-title {
68
25
  margin-bottom: var(--nd-outome-detail-title-mb, var(--nd-outome-detail-gap));
69
26
  }
27
+
28
+ /* headline */
70
29
  .nd-Outcome-detail-headline {
71
30
  &:not(:last-child) {
72
31
  margin-bottom: var(--nd-outome-detail-headline-mb, var(--nd-outome-detail-gap));
73
32
  }
74
33
  }
34
+
35
+ /* caption */
75
36
  .nd-Outcome-detail-caption {
76
37
  &:not(:last-child) {
77
38
  margin-bottom: var(--nd-outome-detail-caption-mb, var(--nd-outome-detail-gap));
78
39
  }
79
40
  }
41
+
42
+ /* link */
80
43
  .nd-Outcome-detail-link {
81
44
  }
82
45
  }
package/dist/styles/blocks/Summary.css ADDED
@@ -0,0 +1,15 @@
1
+ @layer components {
2
+
3
+ :root {
4
+ --nd-summary-statement-copy-gap: unset;
5
+ }
6
+
7
+ /* summary */
8
+ .nd-Summary {
9
+ }
10
+
11
+ /* statement content */
12
+ .nd-Statement-content {
13
+ @apply flex flex-col gap-[var(--nd-summary-statement-copy-gap)];
14
+ }
15
+ }