fix: set max width on paragraphs

washingtonpost · Nov 15, 2023 · 6eca400 · 6eca400
1 parent bc97568
commit 6eca400
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/build.washingtonpost.com/components/Markdown/Styling.js b/build.washingtonpost.com/components/Markdown/Styling.js
@@ -58,10 +58,12 @@ const HR = styled("hr", {
 
 export const P = styled("p", {
   fontSize: "$100",
+  lineHeight: "$150",
   margin: 0,
   paddingBottom: "$050",
   fontFamily: "$meta",
   fontWeight: "$light",
+  maxWidth: "767px",
   "& > code": {
     fontFamily: "monospace",
     backgroundColor: theme.colors.subtle,

diff --git a/build.washingtonpost.com/components/Typography/Description.js b/build.washingtonpost.com/components/Typography/Description.js
@@ -0,0 +1,10 @@
+import { styled, theme } from "@washingtonpost/wpds-ui-kit";
+
+export const Description = styled("p", {
+  color: theme.colors.accessible,
+  fontFamily: theme.fonts.meta,
+  fontWeight: theme.fontWeights.light,
+  lineHeight: theme.lineHeights["150"],
+  marginBlock: 0,
+  maxWidth: "767px",
+});
diff --git a/build.washingtonpost.com/pages/components/[slug].js b/build.washingtonpost.com/pages/components/[slug].js
@@ -2,10 +2,11 @@ import React from "react";
 import { MDXRemote } from "next-mdx-remote";
 import { NextSeo } from "next-seo";
 
-import { styled, theme } from "@washingtonpost/wpds-ui-kit";
+import { styled } from "@washingtonpost/wpds-ui-kit";
 
 import MDXStyling from "~/components/Markdown/Styling";
 import Header from "~/components/Typography/Headers";
+import { Description } from "~/components/Typography/Description";
 import TableofContents from "~/components/Markdown/Components/tableofcontents";
 import {
   getAllPathsBySection,
@@ -27,11 +28,6 @@ const components = {
   useRef: React.useRef,
 };
 
-const P = styled("p", {
-  color: theme.colors.accessible,
-  marginBlock: 0,
-});
-
 const Article = styled("article", {
   margin: "auto",
 });
@@ -63,7 +59,7 @@ export default function Page({
         )}
 
         {source.scope.description && (
-          <P className="description">{source.scope.description}</P>
+          <Description>{source.scope.description}</Description>
         )}
 
         <ComponentDetails