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

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