feat(PPDSC-2256): update dropcap logical props and presets (#312)

* feat(PPDSC-2256): update dropcap logical props and presets * feat(PPDSC-2256): add unit test * feat(PPDSC-2256): design review comments * feat(PPDSC-2256): update story name
newscorp-ghfb · Jul 28, 2022 · 1af06df · 1af06df
1 parent 2eaa33b
commit 1af06df
Show file tree

Hide file tree

Showing 11 changed files with 436 additions and 98 deletions.
diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
@@ -2075,16 +2075,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -4474,16 +4483,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -6876,16 +6894,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -9275,16 +9302,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -11677,16 +11713,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -14076,16 +14121,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -16478,16 +16532,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
@@ -18877,16 +18940,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight040}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily030.fontFamily}}",

diff --git a/site/theme/typography-presets.json b/site/theme/typography-presets.json
@@ -109,5 +109,17 @@
     "fontSize": "{{fonts.fontSize030}}",
     "fontWeight": "{{fonts.fontWeight010}}",
     "lineHeight": "{{fonts.fontLineHeight040}}"
+  },
+  "editorialDropCap010": {
+    "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+    "fontWeight": "{{fonts.fontWeight040}}"
+  },
+  "editorialDropCap020": {
+    "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+    "fontWeight": "{{fonts.fontWeight040}}"
+  },
+  "editorialDropCap030": {
+    "fontFamily": "{{fonts.fontFamily030.fontFamily}}",
+    "fontWeight": "{{fonts.fontWeight040}}"
   }
-}
+}
diff --git a/src/theme/__tests__/__snapshots__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap
@@ -840,16 +840,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily020.fontFamily}}",

diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -856,16 +856,25 @@ Object {
       "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize120}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize130}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
+      "fontSize": "{{fonts.fontSize140}}",
+      "fontWeight": "{{fonts.fontWeight020}}",
+      "letterSpacing": "{{fonts.fontLetterSpacing030}}",
+      "lineHeight": "{{fonts.fontLineHeight020}}",
     },
     "editorialHeadline010": Object {
       "fontFamily": "{{fonts.fontFamily020.fontFamily}}",
@@ -2099,7 +2108,16 @@ Object {
   },
   "paragraph": Object {
     "dropCap": Object {
-      "space": "space010",
+      "paddingBlockEnd": Object {
+        "lg": "space040",
+        "md": "space030",
+        "xs": "space020",
+      },
+      "paddingInlineEnd": Object {
+        "lg": "space040",
+        "md": "space030",
+        "xs": "space020",
+      },
       "stylePreset": "inkContrast",
       "typographyPreset": Object {
         "lg": "editorialDropCap030",

diff --git a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap
@@ -984,16 +984,25 @@ Object {
       "lineHeight": 1.125,
     },
     "editorialDropCap010": Object {
-      "fontSize": "5.625em",
-      "lineHeight": 0.85,
+      "fontFamily": "\\"Bitter\\", serif",
+      "fontSize": "44px",
+      "fontWeight": 500,
+      "letterSpacing": "0",
+      "lineHeight": 1.125,
     },
     "editorialDropCap020": Object {
-      "fontSize": "5.875em",
-      "lineHeight": 0.85,
+      "fontFamily": "\\"Bitter\\", serif",
+      "fontSize": "48px",
+      "fontWeight": 500,
+      "letterSpacing": "0",
+      "lineHeight": 1.125,
     },
     "editorialDropCap030": Object {
-      "fontSize": "6em",
-      "lineHeight": 0.85,
+      "fontFamily": "\\"Bitter\\", serif",
+      "fontSize": "56px",
+      "fontWeight": 500,
+      "letterSpacing": "0",
+      "lineHeight": 1.125,
     },
     "editorialHeadline010": Object {
       "fontFamily": "\\"Bitter\\", serif",