@slicemachine/adapter-next 0.3.18-dev-next-release.1 → 0.3.18-dev-next-release.3

package/dist/AlternateGrid/javascript.jsx

@@ -0,0 +1,247 @@
+import { isFilled } from "@prismicio/client";
+import { 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-alternate-grid"
+		>
+			<div
+				className={`
+          es-bounded__content
+          es-alternate-grid__content
+          ${
+						isFilled.image(slice.primary.image)
+							? "es-alternate-grid__content--with-image"
+							: ""
+					}
+      `}
+			>
+				{isFilled.image(slice.primary.image) && (
+					<PrismicNextImage
+						field={slice.primary.image}
+						className={`
+									es-alternate-grid__image
+									${
+										slice.variation === "imageRight"
+											? "es-alternate-grid__image--right"
+											: "es-alternate-grid__image--left"
+									}
+								`}
+					/>
+				)}
+				<div className="es-alternate-grid__primary-content">
+					<div className="es-alternate-grid__primary-content__intro">
+						{isFilled.keyText(slice.primary.eyebrowHeadline) && (
+							<p className="es-alternate-grid__primary-content__intro__eyebrow">
+								{slice.primary.eyebrowHeadline}
+							</p>
+						)}
+						{isFilled.richText(slice.primary.title) && (
+							<div className="es-alternate-grid__primary-content__intro__headline">
+								<PrismicRichText field={slice.primary.title} />
+							</div>
+						)}
+						{isFilled.richText(slice.primary.description) && (
+							<div className="es-alternate-grid__primary-content__intro__description">
+								<PrismicRichText field={slice.primary.description} />
+							</div>
+						)}
+					</div>
+					{slice.items.length > 0 && (
+						<div className="es-alternate-grid__primary-content__items">
+							{slice.items.map((item, i) => (
+								<div key={`item-${i + 1}`} className="es-alternate-grid__item">
+									{isFilled.richText(item.title) && (
+										<div className="es-alternate-grid__item__heading">
+											<PrismicRichText field={item.title} />
+										</div>
+									)}
+									{isFilled.richText(item.description) && (
+										<div className="es-alternate-grid__item__description">
+											<PrismicRichText field={item.description} />
+										</div>
+									)}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</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;
+					}
+
+					.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: .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>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;

package/dist/AlternateGrid/typescript.tsx

@@ -0,0 +1,244 @@
+import { PrismicNextImage } from "@prismicio/next";
+import { Content, isFilled } from "@prismicio/client";
+import { SliceComponentProps, PrismicRichText } 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-alternate-grid"
+		>
+			<div
+				className={`
+          es-bounded__content
+          es-alternate-grid__content
+          ${
+						isFilled.image(slice.primary.image)
+							? "es-alternate-grid__content--with-image"
+							: ""
+					}
+        `}
+			>
+				{isFilled.image(slice.primary.image) && (
+					<PrismicNextImage
+						field={slice.primary.image}
+						className={`
+              es-alternate-grid__image
+              ${
+								slice.variation === "imageRight"
+									? "es-alternate-grid__image--right"
+									: "es-alternate-grid__image--left"
+							}
+            `}
+					/>
+				)}
+				<div className="es-alternate-grid__primary-content">
+					<div className="es-alternate-grid__primary-content__intro">
+						{isFilled.keyText(slice.primary.eyebrowHeadline) && (
+							<p className="es-alternate-grid__primary-content__intro__eyebrow">
+								{slice.primary.eyebrowHeadline}
+							</p>
+						)}
+						{isFilled.richText(slice.primary.title) && (
+							<div className="es-alternate-grid__primary-content__intro__headline">
+								<PrismicRichText field={slice.primary.title} />
+							</div>
+						)}
+						{isFilled.richText(slice.primary.description) && (
+							<div className="es-alternate-grid__primary-content__intro__description">
+								<PrismicRichText field={slice.primary.description} />
+							</div>
+						)}
+					</div>
+					{slice.items.length > 0 && (
+						<div className="es-alternate-grid__primary-content__items">
+							{slice.items.map((item, i) => (
+								<div key={`item-${i + 1}`} className="es-alternate-grid__item">
+									{isFilled.richText(item.title) && (
+										<div className="es-alternate-grid__item__heading">
+											<PrismicRichText field={item.title} />
+										</div>
+									)}
+									{isFilled.richText(item.description) && (
+										<div className="es-alternate-grid__item__description">
+											<PrismicRichText field={item.description} />
+										</div>
+									)}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</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;
+						}
+
+						.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: .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>
+		</section>
+	);
+};
+
+export default PascalNameToReplace;

package/dist/CallToAction/javascript.jsx

@@ -0,0 +1,135 @@
+import { isFilled } from "@prismicio/client";
+import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
+import { PrismicRichText, PrismicText } from "@prismicio/react";
+
+/**
+ * @typedef {import("@prismicio/client").Content.PascalNameToReplaceSlice} PascalNameToReplaceSlice
+ *
+ * @typedef {import("@prismicio/react").SliceComponentProps<PascalNameToReplaceSlice>} PascalNameToReplaceProps
+ *
+ * @param {PascalNameToReplaceProps}
+ */
+const PascalNameToReplace = ({ slice }) => {
+	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;