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

package/dist/CallToAction/typescript.tsx

@@ -0,0 +1,137 @@
+import { Content, isFilled } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+import {
+	PrismicRichText,
+	PrismicText,
+	SliceComponentProps,
+} from "@prismicio/react";
+
+export type PascalNameToReplaceProps =
+	SliceComponentProps<Content.PascalNameToReplaceSlice>;
+
+const PascalNameToReplace = ({
+	slice,
+}: PascalNameToReplaceProps): JSX.Element => {
+	const alignment = slice.variation === "alignLeft" ? "left" : "center";
+
+	return (
+		<section
+			data-slice-type={slice.slice_type}
+			data-slice-variation={slice.variation}
+			className="es-bounded es-call-to-action"
+		>
+			<div className="es-bounded__content es-call-to-action__content">
+				{isFilled.image(slice.primary.image) && (
+					<PrismicNextImage
+						className="es-call-to-action__image"
+						field={slice.primary.image}
+					/>
+				)}
+				<div className="es-call-to-action__content">
+					{isFilled.richText(slice.primary.title) && (
+						<h2 className="es-call-to-action__content__heading">
+							<PrismicText field={slice.primary.title} />
+						</h2>
+					)}
+					{isFilled.richText(slice.primary.paragraph) && (
+						<div className="es-call-to-action__content__paragraph">
+							<PrismicRichText field={slice.primary.paragraph} />
+						</div>
+					)}
+				</div>
+				{isFilled.link(slice.primary.buttonLink) && (
+					<PrismicNextLink
+						className="es-call-to-action__button"
+						field={slice.primary.buttonLink}
+					>
+						{slice.primary.buttonLabel || "Learn more…"}
+					</PrismicNextLink>
+				)}
+			</div>
+			<style>
+				{`
+						.es-bounded {
+							padding: 8vw 2rem;
+						}
+						
+						.es-bounded__content {
+							margin-left: auto;
+							margin-right: auto;
+						}
+						
+						@media screen and (min-width: 640px) {
+							.es-bounded__content {
+								max-width: 90%;
+							}
+						}
+						
+						@media screen and (min-width: 896px) {
+							.es-bounded__content {
+								max-width: 80%;
+							}
+						}
+						
+						@media screen and (min-width: 1280px) {
+							.es-bounded__content {
+								max-width: 75%;
+							}
+						}
+						
+						.es-call-to-action {
+							background-color: #fff;
+							color: #333;
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 2rem;
+						}
+						
+						.es-call-to-action__image {
+							max-width: 14rem;
+							height: auto;
+							width: auto;
+							justify-self: ${alignment};
+						}
+						
+						.es-call-to-action__content {
+							display: grid;
+							gap: 1rem;
+							justify-items: ${alignment};
+						}
+						
+						.es-call-to-action__content__heading {
+							font-size: 2rem;
+							font-weight: 700;
+							text-align: ${alignment};
+						}
+						
+						.es-call-to-action__content__paragraph {
+							font-size: 1.15rem;
+							max-width: 38rem;
+							text-align: ${alignment};
+						}
+						
+						.es-call-to-action__button {
+							justify-self: ${alignment};
+							border-radius: 0.25rem;
+							display: inline-block;
+							font-size: 0.875rem;
+							line-height: 1.3;
+							padding: 1rem 2.625rem;
+							text-align: ${alignment};
+							transition: background-color 100ms linear;
+							background-color: #16745f;
+							color: #fff;
+						}
+						
+						.es-call-to-action__button:hover {
+							background-color: #0d5e4c;
+						}
+					`}
+			</style>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;

package/dist/CustomerLogos/javascript.jsx

@@ -0,0 +1,129 @@
+import { isFilled, asText } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+
+/**
+ * @typedef {import("@prismicio/client").Content.PascalNameToReplaceSlice} PascalNameToReplaceSlice
+ *
+ * @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
+ *
+ * @param {PascalNameToReplaceProps}
+ */
+const PascalNameToReplace = ({ slice }) => {
+	return (
+		<section
+			data-slice-type={slice.slice_type}
+			data-slice-variation={slice.variation}
+			className="es-bounded es-customer-logos"
+		>
+			<div className="es-bounded-content es-customer-logos__content">
+				{isFilled.richText(slice.primary.eyebrowHeadline) && (
+					<h2 className="es-customer-logos__heading">
+						{asText(slice.primary.eyebrowHeadline)}
+					</h2>
+				)}
+				{slice.items.length > 0 && (
+					<ul className="es-customer-logos__logos">
+						{slice.items.map(
+							(item) =>
+								isFilled.image(item.image) && (
+									<li key={item.image.url} className="es-customer-logos__logo">
+										<PrismicNextLink
+											field={item.link}
+											className="es-customer-logos__link"
+										>
+											<PrismicNextImage
+												field={item.image}
+												height={26}
+												width={160}
+												className="es-customer-logos__logo__link__image"
+											/>
+										</PrismicNextLink>
+									</li>
+								),
+						)}
+					</ul>
+				)}
+				<PrismicNextLink
+					field={slice.primary.callToActionLink}
+					className="es-customer-logos__button"
+				>
+					{slice.primary.callToActionLabel || "Learn more..."}
+				</PrismicNextLink>
+			</div>
+			<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;
+						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>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;

package/dist/CustomerLogos/typescript.tsx

@@ -0,0 +1,128 @@
+import { Content, isFilled, asText } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+import { SliceComponentProps } from "@prismicio/react";
+
+export type PascalNameToReplaceProps =
+	SliceComponentProps<Content.PascalNameToReplaceSlice>;
+
+const PascalNameToReplace = ({
+	slice,
+}: PascalNameToReplaceProps): JSX.Element => {
+	return (
+		<section
+			data-slice-type={slice.slice_type}
+			data-slice-variation={slice.variation}
+			className="es-bounded es-customer-logos"
+		>
+			<div className="es-bounded-content es-customer-logos__content">
+				{isFilled.richText(slice.primary.eyebrowHeadline) && (
+					<h2 className="es-customer-logos__heading">
+						{asText(slice.primary.eyebrowHeadline)}
+					</h2>
+				)}
+				{slice.items.length > 0 && (
+					<ul className="es-customer-logos__logos">
+						{slice.items.map(
+							(item) =>
+								isFilled.image(item.image) && (
+									<li key={item.image.url} className="es-customer-logos__logo">
+										<PrismicNextLink
+											field={item.link}
+											className="es-customer-logos__link"
+										>
+											<PrismicNextImage
+												field={item.image}
+												height={26}
+												width={160}
+												className="es-customer-logos__logo__link__image"
+											/>
+										</PrismicNextLink>
+									</li>
+								),
+						)}
+					</ul>
+				)}
+				<PrismicNextLink
+					field={slice.primary.callToActionLink}
+					className="es-customer-logos__button"
+				>
+					{slice.primary.callToActionLabel || "Learn more..."}
+				</PrismicNextLink>
+			</div>
+			<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;
+							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>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;

package/dist/Hero/javascript.jsx

@@ -0,0 +1,207 @@
+import { isFilled } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+import { PrismicRichText } from "@prismicio/react";
+
+/**
+ * @typedef {import("@prismicio/client").Content.PascalNameToReplaceSlice} PascalNameToReplaceSlice
+ *
+ * @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
+ *
+ * @param {PascalNameToReplaceProps}
+ */
+
+const PascalNameToReplace = ({ slice }) => {
+	return (
+		<section
+			data-slice-type={slice.slice_type}
+			data-slice-variation={slice.variation}
+			className="es-bounded es-fullpage-hero"
+		>
+			<div
+				className={`
+          es-bounded__content
+          es-fullpage-hero__content
+          ${
+						slice.variation === "imageRight"
+							? "es-fullpage-hero__image--right"
+							: "es-fullpage-hero__image--left"
+					}
+        `}
+			>
+				<div>
+					{isFilled.image(slice.primary.image) && (
+						<PrismicNextImage
+							field={slice.primary.image}
+							className="es-fullpage-hero__image"
+						/>
+					)}
+				</div>
+
+				<div className="es-fullpage-hero__content-right">
+					<div className="es-fullpage-hero__content__intro">
+						{isFilled.keyText(slice.primary.eyebrowHeadline) && (
+							<p className="es-fullpage-hero__content__intro__eyebrow">
+								{slice.primary.eyebrowHeadline}
+							</p>
+						)}
+						{isFilled.richText(slice.primary.title) && (
+							<div className="es-fullpage-hero__content__intro__headline">
+								<PrismicRichText field={slice.primary.title} />
+							</div>
+						)}
+						{isFilled.richText(slice.primary.description) && (
+							<div className="es-fullpage-hero__content__intro__description">
+								<PrismicRichText field={slice.primary.description} />
+							</div>
+						)}
+						{isFilled.link(slice.primary.callToActionLink) && (
+							<PrismicNextLink
+								className="es-call-to-action__link"
+								field={slice.primary.callToActionLink}
+							>
+								{slice.primary.callToActionLabel || "Learn more…"}
+							</PrismicNextLink>
+						)}
+					</div>
+				</div>
+			</div>
+			<style>
+				{`
+          .es-bounded {
+              margin: 0px;
+              min-width: 0px;
+              position: relative;
+          }
+  
+          .es-bounded-content {
+              min-width: 0px;
+              max-width: 90%;
+              margin: 0px auto;
+          }
+  
+          .es-fullpage-hero {
+              font-family: system-ui, sans-serif;
+              background-color: #fff;
+              color: #333;
+          }
+          
+          .es-fullpage-hero__image {
+              max-width: 100%;
+              height: auto;
+              align-self: center;
+          }
+              
+          .es-fullpage-hero__image--left > div:first-child {
+              order: 1;
+          }
+
+          .es-fullpage-hero__image--left > div:nth-child(2) {
+              order: 2;
+          }
+          
+          .es-fullpage-hero__image--right > div:first-child {
+              order: 2;
+          }
+
+          .es-fullpage-hero__image--right > div:nth-child(2) {
+              order: 1;
+          }
+          
+          .es-fullpage-hero__content {
+              display: flex;
+              flex-direction: column;
+              gap: 2rem;
+          }
+          
+          .es-fullpage-hero__content-right {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 1.5rem;
+          }
+  
+          @media (min-width: 1080px) {
+              .es-fullpage-hero__content {
+                  flex-direction: row;
+              }
+
+              .es-fullpage-hero__content > div {
+                  width: 50%;
+              }
+          }
+  
+          .es-fullpage-hero__content__intro {
+              display: grid;
+              gap: 1rem;
+          }
+              
+          .es-fullpage-hero__content__intro__eyebrow {
+              color: #47C1AF;
+              font-size: 1.15rem;
+              font-weight: 500;
+              margin: 0;
+          }
+              
+          .es-fullpage-hero__content__intro__headline {
+              font-size: 1.625rem;
+              font-weight: 700;
+          }
+  
+          .es-fullpage-hero__content__intro__headline > * {
+              margin: 0;
+          }
+              
+          @media (min-width: 640px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2rem;
+              }
+          }
+              
+          @media (min-width: 1024px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2.5rem;
+              }
+          }
+              
+          @media (min-width: 1200px) {
+              .es-fullpage-hero__content__intro__headline {
+                  font-size: 2.75rem;
+              }
+          }
+              
+          .es-fullpage-hero__content__intro__description {
+              font-size: 1.15rem;
+              max-width: 38rem;
+          }
+  
+          .es-fullpage-hero__content__intro__description > p {
+              margin: 0;
+          }
+              
+          @media (min-width: 1200px) {
+              .es-fullpage-hero__content__intro__description {
+                  font-size: 1.4rem;
+              }
+          }
+
+          .es-call-to-action__link {
+              justify-self: flex-start;
+              border-radius: 0.25rem;
+              font-size: 0.875rem;
+              line-height: 1.3;
+              padding: 1rem 2.625rem;
+              transition: background-color 100ms linear;
+              background-color: #16745f;
+              color: #fff;
+          }
+          
+          .es-call-to-action__link:hover {
+              background-color: #0d5e4c;
+          }
+        `}
+			</style>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;