QA pass: layout, create-flow, and About books #68
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
|
||||
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
|
||||
|
||||
const ARTICLE_COLUMN_CLASS =
|
||||
"mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-[904px] xl:text-xx-large-paragraph";
|
||||
"mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph";
|
||||
|
||||
const LINK_CLASS = "underline decoration-solid underline-offset-2";
|
||||
|
||||
@@ -160,7 +160,7 @@ export default function LegalDocumentPage({
|
||||
/>
|
||||
|
||||
<article
|
||||
className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)]"
|
||||
className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]"
|
||||
data-node-id="19003:23574"
|
||||
>
|
||||
<div className={ARTICLE_COLUMN_CLASS}>
|
||||
|
||||
@@ -216,9 +216,10 @@ export default async function BlogPostPage({ params }: PageProps) {
|
||||
relative z-10 flex w-full justify-center
|
||||
p-[var(--spacing-scale-024)]
|
||||
sm:px-0 sm:py-[var(--spacing-scale-032)]
|
||||
xl:px-[calc(268/1440*100%)]
|
||||
"
|
||||
>
|
||||
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
|
||||
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none">
|
||||
<div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -109,9 +109,9 @@ export default function HowItWorksPage() {
|
||||
<div className="relative w-full overflow-x-clip">
|
||||
<ContentTemplateDecorativeShapes variant="guide" />
|
||||
|
||||
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
|
||||
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]">
|
||||
<div
|
||||
className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]"
|
||||
className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
|
||||
/>
|
||||
</article>
|
||||
|
||||
@@ -286,10 +286,12 @@ describe("BlogPostPage", () => {
|
||||
const contentDiv = screen
|
||||
.getByText(/This is the article content/)
|
||||
.closest("div.post-body");
|
||||
const article = contentDiv?.closest("article");
|
||||
expect(contentDiv).toHaveClass("sm:max-w-[390px]");
|
||||
expect(contentDiv).toHaveClass("md:max-w-[472px]");
|
||||
expect(contentDiv).toHaveClass("lg:max-w-[700px]");
|
||||
expect(contentDiv).toHaveClass("xl:max-w-[904px]");
|
||||
expect(contentDiv).toHaveClass("xl:max-w-none");
|
||||
expect(article).toHaveClass("xl:px-[calc(268/1440*100%)]");
|
||||
});
|
||||
|
||||
it("includes structured data scripts", async () => {
|
||||
|
||||
Reference in New Issue
Block a user