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

package/src/sliceTemplates/CallToAction/index.ts

@@ -1,9 +1,10 @@
 import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 
-import { pascalCase } from "../../lib/pascalCase";
-
-import { stripIndent } from "common-tags";
+export const screenshotPaths = {
+	default: "CallToAction/screenshot-default.png",
+	alignLeft: "CallToAction/screenshot-alignLeft.png",
+};
 
 export const mocks: SharedSliceContent[] = [
 	{
@@ -154,296 +155,6 @@ export const mocks: SharedSliceContent[] = [
 	},
 ];
 
-export const createComponentContents = (
-	model: SharedSlice,
-	isTypeScriptProject: boolean,
-): string => {
-	const pascalName = pascalCase(model.name);
-
-	if (isTypeScriptProject) {
-		return stripIndent`
-			import { Content, isFilled } from "@prismicio/client";	
-			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
-			import {
-				PrismicRichText,
-				PrismicText,
-				SliceComponentProps
-			} from "@prismicio/react";
-			
-			/**
-			 * Props for \`${pascalName}\`.
-			 */
-			export type ${pascalName}Props = SliceComponentProps<Content.${pascalName}Slice>;
-			
-			/**
-			 * Component for "${model.name}" Slices.
-			 */
-			const ${pascalName} = ({ slice }: ${pascalName}Props): 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 ${pascalName};
-
-		`;
-	}
-
-	return stripIndent`
-			import { isFilled } from "@prismicio/client";
-			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
-			import { PrismicRichText, PrismicText } from "@prismicio/react";
-			
-			/**
-			 * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
-			 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
-			 * @param {${pascalName}Props}
-			 */
-			const ${pascalName} = ({ 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 ${pascalName};
-			
-		`;
-};
-
 export const model: SharedSlice = {
 	id: "call_to_action",
 	type: "SharedSlice",
@@ -552,8 +263,3 @@ export const model: SharedSlice = {
 		},
 	],
 };
-
-export const screenshotPaths = {
-	default: "CallToAction/screenshot-default.png",
-	alignLeft: "CallToAction/screenshot-alignLeft.png",
-};

package/src/sliceTemplates/CustomerLogos/index.ts

@@ -1,9 +1,9 @@
 import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 
-import { pascalCase } from "../../lib/pascalCase";
-
-import { stripIndent } from "common-tags";
+export const screenshotPaths = {
+	default: "CustomerLogos/screenshot-default.png",
+};
 
 export const mocks: SharedSliceContent[] = [
 	{
@@ -251,281 +251,6 @@ export const mocks: SharedSliceContent[] = [
 	},
 ];
 
-export const createComponentContents = (
-	model: SharedSlice,
-	isTypeScriptProject: boolean,
-): string => {
-	const pascalName = pascalCase(model.name);
-
-	if (isTypeScriptProject) {
-		return stripIndent`
-			import { Content, isFilled, asText } from "@prismicio/client";
-			import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
-			import { SliceComponentProps } from "@prismicio/react";
-			
-			/**
-			 * Props for \`${pascalName}\`.
-			 */
-			export type ${pascalName}Props = SliceComponentProps<Content.${pascalName}Slice>;
-			
-			/**
-			 * Component for "${model.name}" Slices.
-			 */
-			const ${pascalName} = ({ slice }: ${pascalName}Props): 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 ${pascalName};
-
-		`;
-	}
-
-	return stripIndent`
-		import { isFilled, asText } from "@prismicio/client";
-		import { PrismicNextLink, PrismicNextImage } from "@prismicio/next";
-		
-		/**
-		 * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
-		 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
-		 * @param {${pascalName}Props}
-		 */
-		const ${pascalName} = ({ 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 ${pascalName};
-		
-	`;
-};
-
 export const model: SharedSlice = {
 	id: "customer_logos",
 	type: "SharedSlice",
@@ -586,7 +311,3 @@ export const model: SharedSlice = {
 		},
 	],
 };
-
-export const screenshotPaths = {
-	default: "CustomerLogos/screenshot-default.png",
-};