@slicemachine/adapter-next 0.3.15-dev-next-release.2 → 0.3.15-dev-next-release.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/CustomerLogos/screenshot-default.png +0 -0
  2. package/dist/hooks/sliceTemplateLibrary-read.cjs +2 -1
  3. package/dist/hooks/sliceTemplateLibrary-read.cjs.map +1 -1
  4. package/dist/hooks/sliceTemplateLibrary-read.js +2 -1
  5. package/dist/hooks/sliceTemplateLibrary-read.js.map +1 -1
  6. package/dist/sliceTemplates/AlternateGrid/index.cjs +3 -2
  7. package/dist/sliceTemplates/AlternateGrid/index.cjs.map +1 -1
  8. package/dist/sliceTemplates/AlternateGrid/index.js +3 -2
  9. package/dist/sliceTemplates/AlternateGrid/index.js.map +1 -1
  10. package/dist/sliceTemplates/CustomerLogos/index.cjs +585 -0
  11. package/dist/sliceTemplates/CustomerLogos/index.cjs.map +1 -0
  12. package/dist/sliceTemplates/CustomerLogos/index.d.ts +8 -0
  13. package/dist/sliceTemplates/CustomerLogos/index.js +585 -0
  14. package/dist/sliceTemplates/CustomerLogos/index.js.map +1 -0
  15. package/package.json +3 -3
  16. package/src/hooks/sliceTemplateLibrary-read.ts +2 -1
  17. package/src/sliceTemplates/AlternateGrid/index.ts +3 -2
  18. package/src/sliceTemplates/CustomerLogos/index.ts +591 -0
package/src/sliceTemplates/AlternateGrid/index.ts CHANGED
@@ -770,11 +770,13 @@ export const createComponentContents = (
770
770
  position: relative;
771
771
  padding: 8vw 1.25rem;
772
772
  }
773
+
773
774
  .es-bounded-content {
774
775
  min-width: 0px;
775
776
  max-width: 90%;
776
777
  margin: 0px auto;
777
778
  }
779
+
778
780
  .es-alternate-grid {
779
781
  font-family: system-ui, sans-serif;
780
782
  background-color: #fff;
@@ -809,7 +811,7 @@ export const createComponentContents = (
809
811
  }
810
812
 
811
813
  .es-alternate-grid__image--right {
812
- grid-column: 2;
814
+ grid-column: 2;
813
815
  }
814
816
 
815
817
  .es-alternate-grid__primary-content {
@@ -908,7 +910,6 @@ export const createComponentContents = (
908
910
  .es-alternate-grid__item__description > * {
909
911
  margin: 0;
910
912
  }
911
-
912
913
  \`}
913
914
  </style>
914
915
  </section>
package/src/sliceTemplates/CustomerLogos/index.ts ADDED
@@ -0,0 +1,591 @@
1
+ import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
2
+ import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
3
+
4
+ import { pascalCase } from "../../lib/pascalCase";
5
+
6
+ import { stripIndent } from "common-tags";
7
+
8
+ export const mocks: SharedSliceContent[] = [
9
+ {
10
+ __TYPE__: "SharedSliceContent",
11
+ variation: "default",
12
+ primary: {
13
+ callToActionLabel: {
14
+ __TYPE__: "FieldContent",
15
+ type: "Text",
16
+ value: "View customer stories",
17
+ },
18
+ callToActionLink: {
19
+ __TYPE__: "LinkContent",
20
+ value: {
21
+ __TYPE__: "ExternalLink",
22
+ url: "https://prismic.io",
23
+ target: "_blank",
24
+ },
25
+ },
26
+ eyebrowHeadline: {
27
+ __TYPE__: "StructuredTextContent",
28
+ value: [
29
+ {
30
+ type: "heading2",
31
+ content: {
32
+ text: "Trusted by",
33
+ spans: [],
34
+ },
35
+ direction: "ltr",
36
+ },
37
+ ],
38
+ },
39
+ },
40
+ items: [
41
+ {
42
+ __TYPE__: "GroupItemContent",
43
+ value: [
44
+ [
45
+ "image",
46
+ {
47
+ origin: {
48
+ id: "main",
49
+ url: "https://images.prismic.io/slicesexamples/95a608cd-8d3c-40c1-a554-0bec1b89eda5_logo-3.svg",
50
+ width: 2545,
51
+ height: 2545,
52
+ },
53
+ url: "https://images.prismic.io/slicesexamples/95a608cd-8d3c-40c1-a554-0bec1b89eda5_logo-3.svg",
54
+ width: 2545,
55
+ height: 2545,
56
+ edit: {
57
+ zoom: 1,
58
+ crop: {
59
+ x: 0,
60
+ y: 0,
61
+ },
62
+ background: "transparent",
63
+ },
64
+ credits: null,
65
+ alt: "Customer Logo",
66
+ __TYPE__: "ImageContent",
67
+ thumbnails: {},
68
+ },
69
+ ],
70
+ [
71
+ "link",
72
+ {
73
+ __TYPE__: "LinkContent",
74
+ value: {
75
+ __TYPE__: "ExternalLink",
76
+ url: "http://twitter.com",
77
+ },
78
+ },
79
+ ],
80
+ ],
81
+ },
82
+ {
83
+ __TYPE__: "GroupItemContent",
84
+ value: [
85
+ [
86
+ "image",
87
+ {
88
+ url: "https://images.prismic.io/slicesexamples/b62a8629-f7f1-4d2e-885a-bd7c6bcff201_logo-2.svg",
89
+ origin: {
90
+ id: "xnRg3xDcNnE",
91
+ url: "https://images.prismic.io/slicesexamples/b62a8629-f7f1-4d2e-885a-bd7c6bcff201_logo-2.svg",
92
+ width: 7173,
93
+ height: 10041,
94
+ },
95
+ width: 7173,
96
+ height: 10041,
97
+ edit: {
98
+ background: "transparent",
99
+ zoom: 1,
100
+ crop: {
101
+ x: 0,
102
+ y: 0,
103
+ },
104
+ },
105
+ credits: null,
106
+ alt: "Customer Logo",
107
+ __TYPE__: "ImageContent",
108
+ thumbnails: {},
109
+ },
110
+ ],
111
+ [
112
+ "link",
113
+ {
114
+ __TYPE__: "LinkContent",
115
+ value: {
116
+ __TYPE__: "ExternalLink",
117
+ url: "https://prismic.io",
118
+ target: "_blank",
119
+ },
120
+ },
121
+ ],
122
+ ],
123
+ },
124
+ {
125
+ __TYPE__: "GroupItemContent",
126
+ value: [
127
+ [
128
+ "image",
129
+ {
130
+ url: "https://images.prismic.io/slicesexamples/4360a72b-bfe4-4144-911c-597146f72c00_logo-5.svg",
131
+ origin: {
132
+ id: "U1iYwZ8Dx7k",
133
+ url: "https://images.prismic.io/slicesexamples/4360a72b-bfe4-4144-911c-597146f72c00_logo-5.svg",
134
+ width: 3337,
135
+ height: 4171,
136
+ },
137
+ width: 3337,
138
+ height: 4171,
139
+ edit: {
140
+ background: "transparent",
141
+ zoom: 1,
142
+ crop: {
143
+ x: 0,
144
+ y: 0,
145
+ },
146
+ },
147
+ credits: null,
148
+ alt: "Customer Logo",
149
+ __TYPE__: "ImageContent",
150
+ thumbnails: {},
151
+ },
152
+ ],
153
+ [
154
+ "link",
155
+ {
156
+ __TYPE__: "LinkContent",
157
+ value: {
158
+ __TYPE__: "ExternalLink",
159
+ url: "https://prismic.io",
160
+ target: "",
161
+ },
162
+ },
163
+ ],
164
+ ],
165
+ },
166
+ {
167
+ __TYPE__: "GroupItemContent",
168
+ value: [
169
+ [
170
+ "image",
171
+ {
172
+ url: "https://images.prismic.io/slicesexamples/846576e2-c93c-40dd-8aaa-b97f4e99e7aa_logo-1.svg",
173
+ origin: {
174
+ id: "nibgG33H0F8",
175
+ url: "https://images.prismic.io/slicesexamples/846576e2-c93c-40dd-8aaa-b97f4e99e7aa_logo-1.svg",
176
+ width: 4000,
177
+ height: 6000,
178
+ },
179
+ width: 4000,
180
+ height: 6000,
181
+ edit: {
182
+ background: "transparent",
183
+ zoom: 1,
184
+ crop: {
185
+ x: 0,
186
+ y: 0,
187
+ },
188
+ },
189
+ credits: null,
190
+ alt: "Customer Logo",
191
+ __TYPE__: "ImageContent",
192
+ thumbnails: {},
193
+ },
194
+ ],
195
+ [
196
+ "link",
197
+ {
198
+ __TYPE__: "LinkContent",
199
+ value: {
200
+ __TYPE__: "ExternalLink",
201
+ url: "https://prismic.io",
202
+ target: "",
203
+ },
204
+ },
205
+ ],
206
+ ],
207
+ },
208
+ {
209
+ __TYPE__: "GroupItemContent",
210
+ value: [
211
+ [
212
+ "image",
213
+ {
214
+ url: "https://images.prismic.io/slicesexamples/23461395-458d-41f5-be25-bac37a4ff53e_logo-6.svg",
215
+ origin: {
216
+ id: "nAOZCYcLND8",
217
+ url: "https://images.prismic.io/slicesexamples/23461395-458d-41f5-be25-bac37a4ff53e_logo-6.svg",
218
+ width: 2749,
219
+ height: 4124,
220
+ },
221
+ width: 2749,
222
+ height: 4124,
223
+ edit: {
224
+ background: "transparent",
225
+ zoom: 1,
226
+ crop: {
227
+ x: 0,
228
+ y: 0,
229
+ },
230
+ },
231
+ credits: null,
232
+ alt: "Customer Logo",
233
+ __TYPE__: "ImageContent",
234
+ thumbnails: {},
235
+ },
236
+ ],
237
+ [
238
+ "link",
239
+ {
240
+ __TYPE__: "LinkContent",
241
+ value: {
242
+ __TYPE__: "ExternalLink",
243
+ url: "https://prismic.io",
244
+ target: "",
245
+ },
246
+ },
247
+ ],
248
+ ],
249
+ },
250
+ ],
251
+ },
252
+ ];
253
+
254
+ export const createComponentContents = (
255
+ model: SharedSlice,
256
+ isTypeScriptProject: boolean,
257
+ ): string => {
258
+ const pascalName = pascalCase(model.name);
259
+
260
+ if (isTypeScriptProject) {
261
+ return stripIndent`
262
+ import { Content, isFilled, asText } from "@prismicio/client";
263
+ import {
264
+ SliceComponentProps,
265
+ PrismicLink,
266
+ PrismicImage,
267
+ } from "@prismicio/react";
268
+
269
+ export type ${pascalName}Props =
270
+ SliceComponentProps<Content.${pascalName}Slice>;
271
+
272
+ const ${pascalName} = ({ slice }: ${pascalName}Props): JSX.Element => {
273
+ return (
274
+ <section
275
+ data-slice-type={slice.slice_type}
276
+ data-slice-variation={slice.variation}
277
+ className="essential-slice es-bounded es-customer-logos"
278
+ >
279
+ <div className="es-bounded-content es-customer-logos__content">
280
+ {isFilled.richText(slice.primary.eyebrowHeadline) && (
281
+ <h2 className="es-customer-logos__heading">
282
+ {asText(slice.primary.eyebrowHeadline)}
283
+ </h2>
284
+ )}
285
+ {slice.items.length > 0 && (
286
+ <ul className="es-customer-logos__logos">
287
+ {slice.items.map(
288
+ (item) =>
289
+ isFilled.image(item.image) && (
290
+ <li key={item.image.url} className="es-customer-logos__logo">
291
+ <PrismicLink
292
+ field={item.link}
293
+ className="es-customer-logos__link"
294
+ >
295
+ <PrismicImage
296
+ field={item.image}
297
+ height={26}
298
+ width={160}
299
+ className="es-customer-logos__logo__link__image"
300
+ />
301
+ </PrismicLink>
302
+ </li>
303
+ )
304
+ )}
305
+ </ul>
306
+ )}
307
+ <PrismicLink
308
+ field={slice.primary.callToActionLink}
309
+ className="es-customer-logos__button"
310
+ >
311
+ {slice.primary.callToActionLabel || "Learn more..."}
312
+ </PrismicLink>
313
+ </div>
314
+ <style>
315
+ {\`
316
+ .es-bounded {
317
+ margin: 0px;
318
+ min-width: 0px;
319
+ position: relative;
320
+ padding: 8vw 1.25rem;
321
+ }
322
+
323
+ .es-bounded-content {
324
+ min-width: 0px;
325
+ max-width: 90%;
326
+ margin: 0px auto;
327
+ font-family: system-ui, sans-serif;
328
+ }
329
+
330
+ .es-customer-logos {
331
+ background-color: #f4f0ec;
332
+ color: #333;
333
+ }
334
+
335
+ .es-customer-logos__content {
336
+ display: grid;
337
+ gap: 2rem;
338
+ justify-items: center;
339
+ }
340
+
341
+ .es-customer-logos__heading {
342
+ color: #8592e0;
343
+ font-size: 1.5rem;
344
+ font-weight: 500;
345
+ text-align: center;
346
+ }
347
+
348
+ .es-customer-logos__logos {
349
+ display: grid;
350
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
351
+ grid-column-gap: 1.25rem;
352
+ grid-row-gap: 2rem;
353
+ align-items: center;
354
+ list-style-type: none;
355
+ width: 100%;
356
+ }
357
+
358
+ @media (min-width: 1200px) {
359
+ .es-customer-logos__logos {
360
+ margin-left: -3rem;
361
+ }
362
+ }
363
+
364
+ .es-customer-logos__logo {
365
+ margin: 0;
366
+ display: flex;
367
+ justify-content: center;
368
+ }
369
+
370
+ @media (min-width: 1200px) {
371
+ .es-customer-logos__logo {
372
+ margin-left: 3rem;
373
+ }
374
+ }
375
+
376
+ .es-customer-logos__logo__link__image {
377
+ max-width: 10rem;
378
+ }
379
+
380
+ .es-customer-logos__button {
381
+ justify-self: center;
382
+ }
383
+ \`}
384
+ </style>
385
+ </section>
386
+ );
387
+ };
388
+
389
+ export default ${pascalName};
390
+ `;
391
+ }
392
+
393
+ return stripIndent`
394
+ import { isFilled, asText } from "@prismicio/client";
395
+ import {
396
+ PrismicLink,
397
+ PrismicImage,
398
+ } from "@prismicio/react";
399
+
400
+ /**
401
+ * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
402
+ * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
403
+ * @param {${pascalName}Props}
404
+ */
405
+
406
+ const ${pascalName} = ({ slice }) => {
407
+ return (
408
+ <section
409
+ data-slice-type={slice.slice_type}
410
+ data-slice-variation={slice.variation}
411
+ className="essential-slice es-bounded es-customer-logos"
412
+ >
413
+ <div className="es-bounded-content es-customer-logos__content">
414
+ {isFilled.richText(slice.primary.eyebrowHeadline) && (
415
+ <h2 className="es-customer-logos__heading">
416
+ {asText(slice.primary.eyebrowHeadline)}
417
+ </h2>
418
+ )}
419
+ {slice.items.length > 0 && (
420
+ <ul className="es-customer-logos__logos">
421
+ {slice.items.map(
422
+ (item) =>
423
+ isFilled.image(item.image) && (
424
+ <li key={item.image.url} className="es-customer-logos__logo">
425
+ <PrismicLink
426
+ field={item.link}
427
+ className="es-customer-logos__link"
428
+ >
429
+ <PrismicImage
430
+ field={item.image}
431
+ height={26}
432
+ width={160}
433
+ className="es-customer-logos__logo__link__image"
434
+ />
435
+ </PrismicLink>
436
+ </li>
437
+ )
438
+ )}
439
+ </ul>
440
+ )}
441
+ <PrismicLink
442
+ field={slice.primary.callToActionLink}
443
+ className="es-customer-logos__button"
444
+ >
445
+ {slice.primary.callToActionLabel || "Learn more..."}
446
+ </PrismicLink>
447
+ </div>
448
+ <style>
449
+ {\`
450
+ .es-bounded {
451
+ margin: 0px;
452
+ min-width: 0px;
453
+ position: relative;
454
+ padding: 8vw 1.25rem;
455
+ }
456
+
457
+ .es-bounded-content {
458
+ min-width: 0px;
459
+ max-width: 90%;
460
+ margin: 0px auto;
461
+ font-family: system-ui, sans-serif;
462
+ }
463
+
464
+ .es-customer-logos {
465
+ background-color: #f4f0ec;
466
+ color: #333;
467
+ }
468
+
469
+ .es-customer-logos__content {
470
+ display: grid;
471
+ gap: 2rem;
472
+ justify-items: center;
473
+ }
474
+
475
+ .es-customer-logos__heading {
476
+ color: #8592e0;
477
+ font-size: 1.5rem;
478
+ font-weight: 500;
479
+ text-align: center;
480
+ }
481
+
482
+ .es-customer-logos__logos {
483
+ display: grid;
484
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
485
+ grid-column-gap: 1.25rem;
486
+ grid-row-gap: 2rem;
487
+ align-items: center;
488
+ list-style-type: none;
489
+ width: 100%;
490
+ }
491
+
492
+ @media (min-width: 1200px) {
493
+ .es-customer-logos__logos {
494
+ margin-left: -3rem;
495
+ }
496
+ }
497
+
498
+ .es-customer-logos__logo {
499
+ margin: 0;
500
+ display: flex;
501
+ justify-content: center;
502
+ }
503
+
504
+ @media (min-width: 1200px) {
505
+ .es-customer-logos__logo {
506
+ margin-left: 3rem;
507
+ }
508
+ }
509
+
510
+ .es-customer-logos__logo__link__image {
511
+ max-width: 10rem;
512
+ }
513
+
514
+ .es-customer-logos__button {
515
+ justify-self: center;
516
+ }
517
+ \`}
518
+ </style>
519
+ </section>
520
+ );
521
+ };
522
+
523
+ export default ${pascalName};
524
+
525
+ `;
526
+ };
527
+
528
+ export const model: SharedSlice = {
529
+ id: "customer_logos",
530
+ type: "SharedSlice",
531
+ name: "CustomerLogos",
532
+ description: "CustomerLogos",
533
+ variations: [
534
+ {
535
+ id: "default",
536
+ name: "Default",
537
+ docURL: "...",
538
+ version: "initial",
539
+ description: "Default",
540
+ imageUrl: "",
541
+ primary: {
542
+ eyebrowHeadline: {
543
+ type: "StructuredText",
544
+ config: {
545
+ label: "eyebrowHeadline",
546
+ placeholder: "",
547
+ allowTargetBlank: true,
548
+ single: "strong,em,rtl,heading2",
549
+ },
550
+ },
551
+ callToActionLabel: {
552
+ type: "Text",
553
+ config: {
554
+ label: "callToActionLabel",
555
+ placeholder: "",
556
+ },
557
+ },
558
+ callToActionLink: {
559
+ type: "Link",
560
+ config: {
561
+ label: "callToActionLink",
562
+ placeholder: "",
563
+ select: null,
564
+ },
565
+ },
566
+ },
567
+ items: {
568
+ image: {
569
+ type: "Image",
570
+ config: {
571
+ label: "image",
572
+ constraint: {},
573
+ thumbnails: [],
574
+ },
575
+ },
576
+ link: {
577
+ type: "Link",
578
+ config: {
579
+ label: "link",
580
+ placeholder: "",
581
+ select: null,
582
+ },
583
+ },
584
+ },
585
+ },
586
+ ],
587
+ };
588
+
589
+ export const screenshotPaths = {
590
+ default: "CustomerLogos/screenshot-default.png",
591
+ };