@slicemachine/adapter-sveltekit 0.3.18-dev-slice-templates-svelte-nuxt.4 → 0.3.18-dev-next-release.9

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 (37) hide show
  1. package/dist/Hero/javascript.svelte +12 -17
  2. package/dist/Hero/typescript.svelte +12 -17
  3. package/dist/plugin.cjs +1 -4
  4. package/dist/plugin.cjs.map +1 -1
  5. package/dist/plugin.js +1 -4
  6. package/dist/plugin.js.map +1 -1
  7. package/package.json +3 -3
  8. package/src/plugin.ts +1 -4
  9. package/dist/AlternateGrid/javascript.svelte +0 -241
  10. package/dist/AlternateGrid/screenshot-default.png +0 -0
  11. package/dist/AlternateGrid/screenshot-imageRight.png +0 -0
  12. package/dist/AlternateGrid/typescript.svelte +0 -239
  13. package/dist/CallToAction/javascript.svelte +0 -132
  14. package/dist/CallToAction/screenshot-alignLeft.png +0 -0
  15. package/dist/CallToAction/screenshot-default.png +0 -0
  16. package/dist/CallToAction/typescript.svelte +0 -129
  17. package/dist/CustomerLogos/javascript.svelte +0 -122
  18. package/dist/CustomerLogos/screenshot-default.png +0 -0
  19. package/dist/CustomerLogos/typescript.svelte +0 -120
  20. package/dist/sliceTemplates/AlternateGrid/index.cjs +0 -436
  21. package/dist/sliceTemplates/AlternateGrid/index.cjs.map +0 -1
  22. package/dist/sliceTemplates/AlternateGrid/index.d.ts +0 -8
  23. package/dist/sliceTemplates/AlternateGrid/index.js +0 -436
  24. package/dist/sliceTemplates/AlternateGrid/index.js.map +0 -1
  25. package/dist/sliceTemplates/CallToAction/index.cjs +0 -264
  26. package/dist/sliceTemplates/CallToAction/index.cjs.map +0 -1
  27. package/dist/sliceTemplates/CallToAction/index.d.ts +0 -8
  28. package/dist/sliceTemplates/CallToAction/index.js +0 -264
  29. package/dist/sliceTemplates/CallToAction/index.js.map +0 -1
  30. package/dist/sliceTemplates/CustomerLogos/index.cjs +0 -314
  31. package/dist/sliceTemplates/CustomerLogos/index.cjs.map +0 -1
  32. package/dist/sliceTemplates/CustomerLogos/index.d.ts +0 -7
  33. package/dist/sliceTemplates/CustomerLogos/index.js +0 -314
  34. package/dist/sliceTemplates/CustomerLogos/index.js.map +0 -1
  35. package/src/sliceTemplates/AlternateGrid/index.ts +0 -441
  36. package/src/sliceTemplates/CallToAction/index.ts +0 -265
  37. package/src/sliceTemplates/CustomerLogos/index.ts +0 -313
@@ -1,239 +0,0 @@
1
- <script lang="ts">
2
- import {
3
- PrismicImage,
4
- PrismicText,
5
- PrismicRichText,
6
- } from "@prismicio/svelte";
7
- import { isFilled } from "@prismicio/client";
8
- import type { Content } from "@prismicio/client";
9
-
10
- let slice: Content.PascalNameToReplaceSlice;
11
- </script>
12
-
13
- <section
14
- data-slice-type={slice.slice_type}
15
- data-slice-variation={slice.variation}
16
- class="es-bounded es-alternate-grid"
17
- >
18
- <div
19
- class={`
20
- es-bounded__content
21
- es-alternate-grid__content
22
- ${
23
- isFilled.image(slice.primary.image)
24
- ? "es-alternate-grid__content--with-image"
25
- : ""
26
- }
27
- `}
28
- >
29
- {#if isFilled.image(slice.primary.image)}
30
- <PrismicImage
31
- field={slice.primary.image}
32
- class={`
33
- es-alternate-grid__image
34
- ${
35
- slice.variation === "imageRight"
36
- ? "es-alternate-grid__image--right"
37
- : "es-alternate-grid__image--left"
38
- }
39
- `}
40
- />
41
- {/if}
42
- <div class="es-alternate-grid__primary-content">
43
- <div class="es-alternate-grid__primary-content__intro">
44
- {#if isFilled.keyText(slice.primary.eyebrowHeadline)}
45
- <p class="es-alternate-grid__primary-content__intro__eyebrow">
46
- <PrismicText field={slice.primary.eyebrowHeadline} />
47
- </p>
48
- {/if}
49
- {#if isFilled.richText(slice.primary.title)}
50
- <div class="es-alternate-grid__primary-content__intro__headline">
51
- <PrismicRichText field={slice.primary.title} />
52
- </div>
53
- {/if}
54
- {#if isFilled.richText(slice.primary.description)}
55
- <div class="es-alternate-grid__primary-content__intro__description">
56
- <PrismicRichText field={slice.primary.description} />
57
- </div>
58
- {/if}
59
- </div>
60
- {#if slice.items && slice.items.length}
61
- <div class="es-alternate-grid__primary-content__items">
62
- {#each slice.items as item, i}
63
- <div class="es-alternate-grid__item">
64
- {#if isFilled.richText(item.title)}
65
- <div class="es-alternate-grid__item__heading">
66
- <PrismicRichText field={item.title} />
67
- </div>
68
- {/if}
69
- {#if isFilled.richText(item.description)}
70
- <div class="es-alternate-grid__item__description">
71
- <PrismicRichText field={item.description} />
72
- </div>
73
- {/if}
74
- </div>
75
- {/each}
76
- </div>
77
- {/if}
78
- </div>
79
- </div>
80
- <style>
81
- .es-bounded {
82
- margin: 0px;
83
- min-width: 0px;
84
- position: relative;
85
- padding: 8vw 1.25rem;
86
- }
87
-
88
- .es-bounded__content {
89
- min-width: 0px;
90
- max-width: 90%;
91
- margin: 0px auto;
92
- }
93
-
94
- .es-alternate-grid {
95
- font-family: system-ui, sans-serif;
96
- background-color: #fff;
97
- color: #333;
98
- }
99
-
100
- .es-alternate-grid__content {
101
- display: grid;
102
- gap: 1.5rem;
103
- grid-auto-flow: dense;
104
- }
105
-
106
- @media (min-width: 640px) {
107
- .es-alternate-grid__content--with-image {
108
- grid-template-columns: repeat(2, 1fr);
109
- }
110
- }
111
-
112
- @media (min-width: 1200px) {
113
- .es-alternate-grid__content--with-image {
114
- grid-template-columns: repeat(2, 1fr);
115
- }
116
- }
117
-
118
- .es-alternate-grid__image {
119
- width: auto;
120
- height: auto;
121
- max-width: 100%;
122
- align-self: center;
123
- }
124
-
125
- .es-alternate-grid__image--left {
126
- order: 1;
127
- }
128
-
129
- .es-alternate-grid__image--left + div {
130
- order: 2;
131
- }
132
-
133
- .es-alternate-grid__image--right {
134
- order: 2;
135
- }
136
-
137
- .es-alternate-grid__image--right + div {
138
- order: 1;
139
- }
140
-
141
- .es-alternate-grid__primary-content {
142
- display: grid;
143
- gap: 2rem;
144
- }
145
-
146
- .es-alternate-grid__primary-content__intro {
147
- display: grid;
148
- gap: 0.5rem;
149
- }
150
-
151
- .es-alternate-grid__primary-content__intro__eyebrow {
152
- color: #8592e0;
153
- font-size: 1.15rem;
154
- font-weight: 500;
155
- margin: 0;
156
- }
157
-
158
- .es-alternate-grid__primary-content__intro__headline {
159
- font-size: 1.625rem;
160
- font-weight: 700;
161
- }
162
-
163
- .es-alternate-grid__primary-content__intro__headline > * {
164
- margin: 0;
165
- }
166
-
167
- @media (min-width: 640px) {
168
- .es-alternate-grid__primary-content__intro__headline {
169
- font-size: 2rem;
170
- }
171
- }
172
-
173
- @media (min-width: 1024px) {
174
- .es-alternate-grid__primary-content__intro__headline {
175
- font-size: 2.5rem;
176
- }
177
- }
178
-
179
- @media (min-width: 1200px) {
180
- .es-alternate-grid__primary-content__intro__headline {
181
- font-size: 2.75rem;
182
- }
183
- }
184
-
185
- .es-alternate-grid__primary-content__intro__description {
186
- font-size: 1.15rem;
187
- max-width: 38rem;
188
- }
189
-
190
- .es-alternate-grid__primary-content__intro__description > p {
191
- margin: 0;
192
- }
193
-
194
- @media (min-width: 1200px) {
195
- .es-alternate-grid__primary-content__intro__description {
196
- font-size: 1.4rem;
197
- }
198
- }
199
-
200
- .es-alternate-grid__primary-content__items {
201
- display: grid;
202
- gap: 2rem;
203
- }
204
-
205
- @media (min-width: 640px) {
206
- .es-alternate-grid__primary-content__items {
207
- grid-template-columns: repeat(2, 1fr);
208
- }
209
- }
210
-
211
- .es-alternate-grid__item {
212
- display: grid;
213
- align-content: start;
214
- }
215
-
216
- .es-alternate-grid__item__icon {
217
- max-height: 3rem;
218
- }
219
-
220
- .es-alternate-grid__item__heading {
221
- font-weight: 700;
222
- font-size: 1.17rem;
223
- margin-top: 0;
224
- margin-bottom: 0.5rem;
225
- }
226
-
227
- .es-alternate-grid__item__heading > * {
228
- margin: 0;
229
- }
230
-
231
- .es-alternate-grid__item__description {
232
- font-size: 0.9rem;
233
- }
234
-
235
- .es-alternate-grid__item__description > * {
236
- margin: 0;
237
- }
238
- </style>
239
- </section>
@@ -1,132 +0,0 @@
1
- <script>
2
- import { isFilled } from "@prismicio/client";
3
- import {
4
- PrismicLink,
5
- PrismicImage,
6
- PrismicRichText,
7
- PrismicText,
8
- } from "@prismicio/svelte";
9
-
10
- /**
11
- * @type {import("@prismicio/client").Content.${PascalNameToReplace}Slice}
12
- */
13
- export let slice;
14
-
15
- $: alignment = slice.variation === "alignLeft" ? "left" : "center";
16
- </script>
17
-
18
- <section
19
- data-slice-type={slice.slice_type}
20
- data-slice-variation={slice.variation}
21
- class="es-bounded es-call-to-action"
22
- style="--alignment: var(--alignment);"
23
- >
24
- <div class="es-bounded__content es-call-to-action__content">
25
- {#if isFilled.image(slice.primary.image)}
26
- <PrismicImage
27
- class="es-call-to-action__image"
28
- field={slice.primary.image}
29
- />
30
- {/if}
31
- <div class="es-call-to-action__content">
32
- {#if isFilled.richText(slice.primary.title)}
33
- <h2 class="es-call-to-action__content__heading">
34
- <PrismicText field={slice.primary.title} />
35
- </h2>
36
- {/if}
37
- {#if isFilled.richText(slice.primary.paragraph)}
38
- <div class="es-call-to-action__content__paragraph">
39
- <PrismicRichText field={slice.primary.paragraph} />
40
- </div>
41
- {/if}
42
- </div>
43
- {#if isFilled.link(slice.primary.buttonLink)}
44
- <PrismicLink
45
- class="es-call-to-action__button"
46
- field={slice.primary.buttonLink}
47
- >
48
- {slice.primary.buttonLabel || "Learn more…"}
49
- </PrismicLink>
50
- {/if}
51
- </div>
52
- <style>
53
- .es-bounded {
54
- padding: 8vw 2rem;
55
- }
56
-
57
- .es-bounded__content {
58
- margin-left: auto;
59
- margin-right: auto;
60
- }
61
-
62
- @media screen and (min-width: 640px) {
63
- .es-bounded__content {
64
- max-width: 90%;
65
- }
66
- }
67
-
68
- @media screen and (min-width: 896px) {
69
- .es-bounded__content {
70
- max-width: 80%;
71
- }
72
- }
73
-
74
- @media screen and (min-width: 1280px) {
75
- .es-bounded__content {
76
- max-width: 75%;
77
- }
78
- }
79
-
80
- .es-call-to-action {
81
- background-color: #fff;
82
- color: #333;
83
- }
84
-
85
- .es-call-to-action__content {
86
- display: grid;
87
- gap: 2rem;
88
- }
89
-
90
- .es-call-to-action__image {
91
- max-width: 14rem;
92
- height: auto;
93
- width: auto;
94
- justify-self: var(--alignment);
95
- }
96
-
97
- .es-call-to-action__content {
98
- display: grid;
99
- gap: 1rem;
100
- justify-items: var(--alignment);
101
- }
102
-
103
- .es-call-to-action__content__heading {
104
- font-size: 2rem;
105
- font-weight: 700;
106
- text-align: var(--alignment);
107
- }
108
-
109
- .es-call-to-action__content__paragraph {
110
- font-size: 1.15rem;
111
- max-width: 38rem;
112
- text-align: var(--alignment);
113
- }
114
-
115
- .es-call-to-action__button {
116
- justify-self: var(--alignment);
117
- border-radius: 0.25rem;
118
- display: inline-block;
119
- font-size: 0.875rem;
120
- line-height: 1.3;
121
- padding: 1rem 2.625rem;
122
- text-align: var(--alignment);
123
- transition: background-color 100ms linear;
124
- background-color: #16745f;
125
- color: #fff;
126
- }
127
-
128
- .es-call-to-action__button:hover {
129
- background-color: #0d5e4c;
130
- }
131
- </style>
132
- </section>
@@ -1,129 +0,0 @@
1
- <script lang="ts">
2
- import { Content, isFilled } from "@prismicio/client";
3
- import {
4
- PrismicLink,
5
- PrismicImage,
6
- PrismicRichText,
7
- PrismicText,
8
- } from "@prismicio/svelte";
9
-
10
- export let slice: Content.PascalNameToReplaceSlice;
11
-
12
- $: alignment = slice.variation === "alignLeft" ? "left" : "center";
13
- </script>
14
-
15
- <section
16
- data-slice-type={slice.slice_type}
17
- data-slice-variation={slice.variation}
18
- class="es-bounded es-call-to-action"
19
- style="--alignment: var(--alignment);"
20
- >
21
- <div class="es-bounded__content es-call-to-action__content">
22
- {#if isFilled.image(slice.primary.image)}
23
- <PrismicImage
24
- class="es-call-to-action__image"
25
- field={slice.primary.image}
26
- />
27
- {/if}
28
- <div class="es-call-to-action__content">
29
- {#if isFilled.richText(slice.primary.title)}
30
- <h2 class="es-call-to-action__content__heading">
31
- <PrismicText field={slice.primary.title} />
32
- </h2>
33
- {/if}
34
- {#if isFilled.richText(slice.primary.paragraph)}
35
- <div class="es-call-to-action__content__paragraph">
36
- <PrismicRichText field={slice.primary.paragraph} />
37
- </div>
38
- {/if}
39
- </div>
40
- {#if isFilled.link(slice.primary.buttonLink)}
41
- <PrismicLink
42
- class="es-call-to-action__button"
43
- field={slice.primary.buttonLink}
44
- >
45
- {slice.primary.buttonLabel || "Learn more…"}
46
- </PrismicLink>
47
- {/if}
48
- </div>
49
- <style>
50
- .es-bounded {
51
- padding: 8vw 2rem;
52
- }
53
-
54
- .es-bounded__content {
55
- margin-left: auto;
56
- margin-right: auto;
57
- }
58
-
59
- @media screen and (min-width: 640px) {
60
- .es-bounded__content {
61
- max-width: 90%;
62
- }
63
- }
64
-
65
- @media screen and (min-width: 896px) {
66
- .es-bounded__content {
67
- max-width: 80%;
68
- }
69
- }
70
-
71
- @media screen and (min-width: 1280px) {
72
- .es-bounded__content {
73
- max-width: 75%;
74
- }
75
- }
76
-
77
- .es-call-to-action {
78
- background-color: #fff;
79
- color: #333;
80
- }
81
-
82
- .es-call-to-action__content {
83
- display: grid;
84
- gap: 2rem;
85
- }
86
-
87
- .es-call-to-action__image {
88
- max-width: 14rem;
89
- height: auto;
90
- width: auto;
91
- justify-self: var(--alignment);
92
- }
93
-
94
- .es-call-to-action__content {
95
- display: grid;
96
- gap: 1rem;
97
- justify-items: var(--alignment);
98
- }
99
-
100
- .es-call-to-action__content__heading {
101
- font-size: 2rem;
102
- font-weight: 700;
103
- text-align: var(--alignment);
104
- }
105
-
106
- .es-call-to-action__content__paragraph {
107
- font-size: 1.15rem;
108
- max-width: 38rem;
109
- text-align: var(--alignment);
110
- }
111
-
112
- .es-call-to-action__button {
113
- justify-self: var(--alignment);
114
- border-radius: 0.25rem;
115
- display: inline-block;
116
- font-size: 0.875rem;
117
- line-height: 1.3;
118
- padding: 1rem 2.625rem;
119
- text-align: var(--alignment);
120
- transition: background-color 100ms linear;
121
- background-color: #16745f;
122
- color: #fff;
123
- }
124
-
125
- .es-call-to-action__button:hover {
126
- background-color: #0d5e4c;
127
- }
128
- </style>
129
- </section>
@@ -1,122 +0,0 @@
1
- <script>
2
- import { isFilled } from "@prismicio/client";
3
- import {
4
- PrismicImage,
5
- PrismicRichText,
6
- PrismicLink,
7
- } from "@prismicio/svelte";
8
-
9
- /**
10
- * @type {import("@prismicio/client").Content.${PascalNameToReplace}Slice}
11
- */
12
- export let slice;
13
- </script>
14
-
15
- <section
16
- data-slice-type={slice.slice_type}
17
- data-slice-variation={slice.variation}
18
- class="es-bounded es-customer-logos"
19
- >
20
- <div class="es-bounded__content es-customer-logos__content">
21
- {#if isFilled.richText(slice.primary.eyebrowHeadline)}
22
- <h2 class="es-customer-logos__heading">
23
- <PrismicRichText field={slice.primary.eyebrowHeadline} />
24
- </h2>
25
- {/if}
26
- {#if slice.items.length > 0}
27
- <ul class="es-customer-logos__logos">
28
- {#each slice.items as item}
29
- {#if isFilled.image(item.image)}
30
- <li class="es-customer-logos__logo">
31
- <PrismicLink field={item.link}>
32
- <PrismicImage
33
- field={item.image}
34
- class="es-customer-logos__logo__link__image"
35
- height="26"
36
- width="160"
37
- />
38
- </PrismicLink>
39
- </li>
40
- {/if}
41
- {/each}
42
- </ul>
43
- {/if}
44
- <PrismicLink
45
- field={slice.primary.callToActionLink}
46
- class="es-customer-logos__button"
47
- >
48
- {slice.primary.callToActionLabel || "Learn more..."}
49
- </PrismicLink>
50
- </div>
51
-
52
- <style>
53
- .es-bounded {
54
- margin: 0px;
55
- min-width: 0px;
56
- position: relative;
57
- padding: 8vw 1.25rem;
58
- }
59
-
60
- .es-bounded__content {
61
- min-width: 0px;
62
- max-width: 90%;
63
- margin: 0px auto;
64
- font-family: system-ui, sans-serif;
65
- }
66
-
67
- .es-customer-logos {
68
- background-color: #f4f0ec;
69
- color: #333;
70
- }
71
-
72
- .es-customer-logos__content {
73
- display: grid;
74
- gap: 2rem;
75
- justify-items: center;
76
- }
77
-
78
- .es-customer-logos__heading {
79
- color: #8592e0;
80
- font-size: 1.5rem;
81
- font-weight: 500;
82
- text-align: center;
83
- }
84
-
85
- .es-customer-logos__logos {
86
- display: grid;
87
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
88
- grid-column-gap: 1.25rem;
89
- grid-row-gap: 2rem;
90
- align-items: center;
91
- list-style-type: none;
92
- width: 100%;
93
- }
94
-
95
- @media (min-width: 1200px) {
96
- .es-customer-logos__logos {
97
- margin-left: -3rem;
98
- }
99
- }
100
-
101
- .es-customer-logos__logo {
102
- margin: 0;
103
- display: flex;
104
- justify-content: center;
105
- }
106
-
107
- @media (min-width: 1200px) {
108
- .es-customer-logos__logo {
109
- margin-left: 3rem;
110
- }
111
- }
112
-
113
- .es-customer-logos__logo__link__image {
114
- max-width: 10rem;
115
- }
116
-
117
- .es-customer-logos__button {
118
- justify-self: center;
119
- text-decoration: underline;
120
- }
121
- </style>
122
- </section>