@slicemachine/adapter-nuxt 0.3.18-dev-next-release.6 → 0.3.18-dev-slice-templates-svelte-nuxt.0

package/dist/AlternateGrid/javascript.vue

@@ -0,0 +1,228 @@
+<script setup>
+import { isFilled } from "@prismicio/client";
+
+defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
+</script>
+
+<template>
+	<section
+		:data-slice-type="slice.slice_type"
+		:data-slice-variation="slice.variation"
+		class="es-bounded es-alternate-grid"
+	>
+		<div
+			:class="[
+				'es-bounded__content',
+				'es-alternate-grid__content',
+				isFilled.image(slice.primary.image)
+					? 'es-alternate-grid__content--with-image'
+					: '',
+			]"
+		>
+			<PrismicImage
+				v-if="isFilled.image(slice.primary.image)"
+				:field="slice.primary.image"
+				:class="imageClass"
+			/>
+			<div class="es-alternate-grid__primary-content">
+				<div
+					v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
+					class="es-alternate-grid__primary-content__intro__eyebrow"
+				>
+					{{ slice.primary.eyebrowHeadline }}
+				</div>
+				<PrismicRichText
+					v-if="isFilled.richText(slice.primary.title)"
+					:field="slice.primary.title"
+					class="es-alternate-grid__primary-content__intro__headline"
+				/>
+				<PrismicRichText
+					v-if="isFilled.richText(slice.primary.description)"
+					:field="slice.primary.description"
+					class="es-alternate-grid__primary-content__intro__description"
+				/>
+				<div
+					v-if="slice.items && slice.items.length"
+					class="es-alternate-grid__primary-content__items"
+				>
+					<div
+						v-for="(item, i) in slice.items"
+						:key="i"
+						class="es-alternate-grid__item"
+					>
+						<PrismicRichText
+							v-if="isFilled.richText(item.title)"
+							:field="item.title"
+							class="es-alternate-grid__item__heading"
+						/>
+						<PrismicRichText
+							v-if="isFilled.richText(item.description)"
+							:field="item.description"
+							class="es-alternate-grid__item__description"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<style>
+.es-bounded {
+	margin: 0px;
+	min-width: 0px;
+	position: relative;
+	padding: 8vw 1.25rem;
+}
+
+.es-bounded__content {
+	min-width: 0px;
+	max-width: 90%;
+	margin: 0px auto;
+}
+
+.es-alternate-grid {
+	font-family: system-ui, sans-serif;
+	background-color: #fff;
+	color: #333;
+}
+
+.es-alternate-grid__content {
+	display: grid;
+	gap: 1.5rem;
+	grid-auto-flow: dense;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__content--with-image {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__content--with-image {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.es-alternate-grid__image {
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	align-self: center;
+}
+
+.es-alternate-grid__image--left {
+	order: 1;
+}
+
+.es-alternate-grid__image--left + div {
+	order: 2;
+}
+
+.es-alternate-grid__image--right {
+	order: 2;
+}
+
+.es-alternate-grid__image--right + div {
+	order: 1;
+}
+
+.es-alternate-grid__primary-content {
+	display: grid;
+	gap: 2rem;
+}
+
+.es-alternate-grid__primary-content__intro {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.es-alternate-grid__primary-content__intro__eyebrow {
+	color: #8592e0;
+	font-size: 1.15rem;
+	font-weight: 500;
+	margin: 0;
+}
+
+.es-alternate-grid__primary-content__intro__headline {
+	font-size: 1.625rem;
+	font-weight: 700;
+}
+
+.es-alternate-grid__primary-content__intro__headline > * {
+	margin: 0;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2.5rem;
+	}
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2.75rem;
+	}
+}
+
+.es-alternate-grid__primary-content__intro__description {
+	font-size: 1.15rem;
+	max-width: 38rem;
+}
+
+.es-alternate-grid__primary-content__intro__description > p {
+	margin: 0;
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__primary-content__intro__description {
+		font-size: 1.4rem;
+	}
+}
+
+.es-alternate-grid__primary-content__items {
+	display: grid;
+	gap: 2rem;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__primary-content__items {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.es-alternate-grid__item {
+	display: grid;
+	align-content: start;
+}
+
+.es-alternate-grid__item__icon {
+	max-height: 3rem;
+}
+
+.es-alternate-grid__item__heading {
+	font-weight: 700;
+	font-size: 1.17rem;
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+
+.es-alternate-grid__item__heading > * {
+	margin: 0;
+}
+
+.es-alternate-grid__item__description {
+	font-size: 0.9rem;
+}
+
+.es-alternate-grid__item__description > * {
+	margin: 0;
+}
+</style>

package/dist/AlternateGrid/typescript.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { Content, isFilled } from "@prismicio/client";
+
+defineProps(
+	getSliceComponentProps<Content.PascalNameToReplaceSlice>([
+		"slice",
+		"index",
+		"slices",
+		"context",
+	]),
+);
+</script>
+
+<template>
+	<section
+		:data-slice-type="slice.slice_type"
+		:data-slice-variation="slice.variation"
+		class="es-bounded es-alternate-grid"
+	>
+		<div
+			:class="[
+				'es-bounded__content',
+				'es-alternate-grid__content',
+				isFilled.image(slice.primary.image)
+					? 'es-alternate-grid__content--with-image'
+					: '',
+			]"
+		>
+			<PrismicImage
+				v-if="isFilled.image(slice.primary.image)"
+				:field="slice.primary.image"
+				:class="imageClass"
+			/>
+			<div class="es-alternate-grid__primary-content">
+				<div
+					v-if="isFilled.keyText(slice.primary.eyebrowHeadline)"
+					class="es-alternate-grid__primary-content__intro__eyebrow"
+				>
+					{{ slice.primary.eyebrowHeadline }}
+				</div>
+				<PrismicRichText
+					v-if="isFilled.richText(slice.primary.title)"
+					:field="slice.primary.title"
+					class="es-alternate-grid__primary-content__intro__headline"
+				/>
+				<PrismicRichText
+					v-if="isFilled.richText(slice.primary.description)"
+					:field="slice.primary.description"
+					class="es-alternate-grid__primary-content__intro__description"
+				/>
+				<div
+					v-if="slice.items && slice.items.length"
+					class="es-alternate-grid__primary-content__items"
+				>
+					<div
+						v-for="(item, i) in slice.items"
+						:key="i"
+						class="es-alternate-grid__item"
+					>
+						<PrismicRichText
+							v-if="isFilled.richText(item.title)"
+							:field="item.title"
+							class="es-alternate-grid__item__heading"
+						/>
+						<PrismicRichText
+							v-if="isFilled.richText(item.description)"
+							:field="item.description"
+							class="es-alternate-grid__item__description"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<style>
+.es-bounded {
+	margin: 0px;
+	min-width: 0px;
+	position: relative;
+	padding: 8vw 1.25rem;
+}
+
+.es-bounded__content {
+	min-width: 0px;
+	max-width: 90%;
+	margin: 0px auto;
+}
+
+.es-alternate-grid {
+	font-family: system-ui, sans-serif;
+	background-color: #fff;
+	color: #333;
+}
+
+.es-alternate-grid__content {
+	display: grid;
+	gap: 1.5rem;
+	grid-auto-flow: dense;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__content--with-image {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__content--with-image {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.es-alternate-grid__image {
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	align-self: center;
+}
+
+.es-alternate-grid__image--left {
+	order: 1;
+}
+
+.es-alternate-grid__image--left + div {
+	order: 2;
+}
+
+.es-alternate-grid__image--right {
+	order: 2;
+}
+
+.es-alternate-grid__image--right + div {
+	order: 1;
+}
+
+.es-alternate-grid__primary-content {
+	display: grid;
+	gap: 2rem;
+}
+
+.es-alternate-grid__primary-content__intro {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.es-alternate-grid__primary-content__intro__eyebrow {
+	color: #8592e0;
+	font-size: 1.15rem;
+	font-weight: 500;
+	margin: 0;
+}
+
+.es-alternate-grid__primary-content__intro__headline {
+	font-size: 1.625rem;
+	font-weight: 700;
+}
+
+.es-alternate-grid__primary-content__intro__headline > * {
+	margin: 0;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2.5rem;
+	}
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__primary-content__intro__headline {
+		font-size: 2.75rem;
+	}
+}
+
+.es-alternate-grid__primary-content__intro__description {
+	font-size: 1.15rem;
+	max-width: 38rem;
+}
+
+.es-alternate-grid__primary-content__intro__description > p {
+	margin: 0;
+}
+
+@media (min-width: 1200px) {
+	.es-alternate-grid__primary-content__intro__description {
+		font-size: 1.4rem;
+	}
+}
+
+.es-alternate-grid__primary-content__items {
+	display: grid;
+	gap: 2rem;
+}
+
+@media (min-width: 640px) {
+	.es-alternate-grid__primary-content__items {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+.es-alternate-grid__item {
+	display: grid;
+	align-content: start;
+}
+
+.es-alternate-grid__item__icon {
+	max-height: 3rem;
+}
+
+.es-alternate-grid__item__heading {
+	font-weight: 700;
+	font-size: 1.17rem;
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+
+.es-alternate-grid__item__heading > * {
+	margin: 0;
+}
+
+.es-alternate-grid__item__description {
+	font-size: 0.9rem;
+}
+
+.es-alternate-grid__item__description > * {
+	margin: 0;
+}
+</style>

package/dist/CustomerLogos/javascript.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { isFilled } from "@prismicio/client";
+
+defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
+</script>
+
+<template>
+	<section
+		:data-slice-type="slice.slice_type"
+		:data-slice-variation="slice.variation"
+		class="es-bounded es-customer-logos"
+	>
+		<div class="es-bounded__content es-customer-logos__content">
+			<h2
+				v-if="isFilled.richText(slice.primary.eyebrowHeadline)"
+				class="es-customer-logos__heading"
+			>
+				{{ slice.primary.eyebrowHeadline }}
+			</h2>
+			<ul v-if="slice.items.length > 0" class="es-customer-logos__logos">
+				<li
+					v-for="item in slice.items"
+					:key="item.image.url"
+					v-if="isFilled.image(item.image)"
+					class="es-customer-logos__logo"
+				>
+					<NuxtLink :to="item.link" class="es-customer-logos__link">
+						<img
+							:src="item.image.url"
+							:alt="item.image.alt"
+							:height="26"
+							:width="160"
+							class="es-customer-logos__logo__link__image"
+						/>
+					</NuxtLink>
+				</li>
+			</ul>
+			<NuxtLink
+				:to="slice.primary.callToActionLink"
+				class="es-customer-logos__button"
+			>
+				{{ slice.primary.callToActionLabel || "Learn more..." }}
+			</NuxtLink>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.es-bounded {
+	margin: 0px;
+	min-width: 0px;
+	position: relative;
+	padding: 8vw 1.25rem;
+}
+
+.es-bounded__content {
+	min-width: 0px;
+	max-width: 90%;
+	margin: 0px auto;
+	font-family: system-ui, sans-serif;
+}
+
+.es-customer-logos {
+	background-color: #f4f0ec;
+	color: #333;
+}
+
+.es-customer-logos__content {
+	display: grid;
+	gap: 2rem;
+	justify-items: center;
+}
+
+.es-customer-logos__heading {
+	color: #8592e0;
+	font-size: 1.5rem;
+	font-weight: 500;
+	text-align: center;
+}
+
+.es-customer-logos__logos {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	grid-column-gap: 1.25rem;
+	grid-row-gap: 2rem;
+	align-items: center;
+	list-style-type: none;
+	width: 100%;
+}
+
+@media (min-width: 1200px) {
+	.es-customer-logos__logos {
+		margin-left: -3rem;
+	}
+}
+
+.es-customer-logos__logo {
+	margin: 0;
+	display: flex;
+	justify-content: center;
+}
+
+@media (min-width: 1200px) {
+	.es-customer-logos__logo {
+		margin-left: 3rem;
+	}
+}
+
+.es-customer-logos__logo__link__image {
+	max-width: 10rem;
+}
+
+.es-customer-logos__button {
+	justify-self: center;
+	text-decoration: underline;
+}
+</style>

package/dist/CustomerLogos/typescript.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Content, isFilled } from "@prismicio/client";
+
+defineProps(
+	getSliceComponentProps<Content.PascalNameToReplaceSlice>([
+		"slice",
+		"index",
+		"slices",
+		"context",
+	]),
+);
+</script>
+
+<template>
+	<section
+		:data-slice-type="slice.slice_type"
+		:data-slice-variation="slice.variation"
+		class="es-bounded es-customer-logos"
+	>
+		<div class="es-bounded__content es-customer-logos__content">
+			<h2
+				v-if="isFilled.richText(slice.primary.eyebrowHeadline)"
+				class="es-customer-logos__heading"
+			>
+				{{ slice.primary.eyebrowHeadline }}
+			</h2>
+			<ul v-if="slice.items.length > 0" class="es-customer-logos__logos">
+				<li
+					v-for="item in slice.items"
+					:key="item.image.url"
+					v-if="isFilled.image(item.image)"
+					class="es-customer-logos__logo"
+				>
+					<NuxtLink :to="item.link" class="es-customer-logos__link">
+						<img
+							:src="item.image.url"
+							:alt="item.image.alt"
+							:height="26"
+							:width="160"
+							class="es-customer-logos__logo__link__image"
+						/>
+					</NuxtLink>
+				</li>
+			</ul>
+			<NuxtLink
+				:to="slice.primary.callToActionLink"
+				class="es-customer-logos__button"
+			>
+				{{ slice.primary.callToActionLabel || "Learn more..." }}
+			</NuxtLink>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.es-bounded {
+	margin: 0px;
+	min-width: 0px;
+	position: relative;
+	padding: 8vw 1.25rem;
+}
+
+.es-bounded__content {
+	min-width: 0px;
+	max-width: 90%;
+	margin: 0px auto;
+	font-family: system-ui, sans-serif;
+}
+
+.es-customer-logos {
+	background-color: #f4f0ec;
+	color: #333;
+}
+
+.es-customer-logos__content {
+	display: grid;
+	gap: 2rem;
+	justify-items: center;
+}
+
+.es-customer-logos__heading {
+	color: #8592e0;
+	font-size: 1.5rem;
+	font-weight: 500;
+	text-align: center;
+}
+
+.es-customer-logos__logos {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	grid-column-gap: 1.25rem;
+	grid-row-gap: 2rem;
+	align-items: center;
+	list-style-type: none;
+	width: 100%;
+}
+
+@media (min-width: 1200px) {
+	.es-customer-logos__logos {
+		margin-left: -3rem;
+	}
+}
+
+.es-customer-logos__logo {
+	margin: 0;
+	display: flex;
+	justify-content: center;
+}
+
+@media (min-width: 1200px) {
+	.es-customer-logos__logo {
+		margin-left: 3rem;
+	}
+}
+
+.es-customer-logos__logo__link__image {
+	max-width: 10rem;
+}
+
+.es-customer-logos__button {
+	justify-self: center;
+	text-decoration: underline;
+}
+</style>