SUM-253 | add heading size option

src/components/elements/headers.tsx

@@ -1,5 +1,5 @@
+import twMerge from "@lib/utils/twMergeConfig"
 import {HtmlHTMLAttributes} from "react"
-import {twMerge} from "tailwind-merge"
 
 type Props = HtmlHTMLAttributes<HTMLHeadingElement>
 

src/components/paragraphs/stanford-card/card-paragraph.tsx

@@ -14,6 +14,16 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordCard
 }
 
+const adjustHeadingType = (heading: "h2" | "h3" | "h4" | "div", size?: "larger" | "smaller"): number | undefined => {
+  const headingTypes: Record<string, number> = {
+    h2: 4,
+    h3: 3,
+    h4: 2,
+  }
+  if (!headingTypes[heading] || !size) return
+  return size === "larger" ? headingTypes[heading] + 1 : headingTypes[heading] - 1
+}
+
 const CardParagraph = ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors(paragraph)
 
@@ -22,8 +32,19 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
     paragraph.suCardMedia?.__typename === "MediaVideo" ? paragraph.suCardMedia.mediaOembedVideo : undefined
 
   const headerTagChoice = (behaviors.su_card_styles?.heading || "h2").split(".", 2)
-  const headerTag = headerTagChoice[0]
-  const headerClasses = headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "type-3 mb-12") || "mb-12"
+  const headerSize = behaviors.su_card_styles?.sum_card_heading_size
+  const headerTag = headerTagChoice[0] as "h2" | "h3" | "h4" | "div"
+  const headerType = adjustHeadingType(headerTag, headerSize)
+  const headerClasses = twMerge(
+    headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "type-3 mb-12") || "mb-12",
+    clsx({
+      "type-4": headerType === 4,
+      "type-3": headerType === 3,
+      "type-2": headerType === 2,
+      "type-1": headerType === 1,
+      "type-0": headerType === 0,
+    })
+  )
   const cardVariant = behaviors.su_card_styles?.sum_card_variant
   const hasBgColor = behaviors.su_card_styles?.sum_card_bg_color_variant
   const cardBgColor = cardVariant === "pill" ? behaviors.su_card_styles?.sum_card_pill_bg_color_variant : undefined

src/components/patterns/pill-card.tsx

@@ -66,7 +66,7 @@ const PillCard = ({imageUrl, imageAlt, videoUrl, isArticle, children, bgColor, .
 
       <div
         className={twMerge(
-          "rs-px-3 flex flex-col pb-[125px] pt-20 @7xl:rs-px-4 @2xl:pb-[175px] @3xl:pb-[225px] @4xl:pb-[300px]",
+          "rs-px-3 flex flex-col pb-[125px] pt-20 @7xl:rs-px-4 @2xl:pb-[175px] @3xl:pb-[225px] @4xl:pb-[300px] [&_p>a]:text-black-true hocus:[&_p>a]:text-[#001829]",
           clsx({
             "pt-[125px] @3xl:pt-[175px] @4xl:pt-[225px] @5xl:pt-[250px] @7xl:pt-[300px]": !imageUrl,
           })

src/lib/drupal/drupal-jsonapi.d.tsx

@@ -19,6 +19,7 @@ export type CardParagraphBehaviors = {
   heading?: "h2" | "h3" | "h4" | "div.su-splash-font"
   hide_heading?: boolean
   link_style?: "action" | "button"
+  sum_card_heading_size?: "larger" | "smaller"
   sum_card_bg_color_variant?: boolean
   sum_card_variant?: "pill"
   sum_card_pill_bg_color_variant?:

src/lib/utils/twMergeConfig.tsx

@@ -0,0 +1,18 @@
+import {extendTailwindMerge} from "tailwind-merge"
+
+// Creates an array containing type-# classes from 0 to 1
+const typeClasses = Array.from({length: 10}, (_, i) => `type-${i}`)
+// Creates an array containing text-# classes from 11 to 30
+const textClasses = Array.from({length: 20}, (_, i) => `text-${i + 11}`)
+
+const typographyClasses = [...textClasses, ...typeClasses]
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": typographyClasses,
+    },
+  },
+})
+
+export default twMerge

tailwind.config.js

@@ -1,27 +1,26 @@
 /** @type {import('tailwindcss').Config} */
 
-const decanter = require('decanter');
+const decanter = require("decanter")
 
-const path = require('path');
-const dir = path.resolve(__dirname, 'src/styles');
+const path = require("path")
+const dir = path.resolve(__dirname, "src/styles")
 
-let twoColumn = {}, threeColumn = {}, i;
+let twoColumn = {},
+  threeColumn = {},
+  i
 for (i = 1; i <= 4; i++) {
-  twoColumn[`1-${i}`] = `minmax(0, 1fr) minmax(0, ${i}fr)`;
-  twoColumn[`${i}-1`] = `minmax(0, ${i}fr) minmax(0, 1fr)`;
+  twoColumn[`1-${i}`] = `minmax(0, 1fr) minmax(0, ${i}fr)`
+  twoColumn[`${i}-1`] = `minmax(0, ${i}fr) minmax(0, 1fr)`
 }
 
 for (i = 1; i <= 4; i++) {
-  threeColumn[`${i}-1-1`] = `minmax(0, ${i}fr) minmax(0, 1fr) minmax(0, 1fr)`;
-  threeColumn[`1-${i}-1`] = `minmax(0, 1fr) minmax(0, ${i}fr) minmax(0, 1fr)`;
-  threeColumn[`1-1-${i}`] = `minmax(0, 1fr) minmax(0, 1fr) minmax(0, ${i}fr)`;
+  threeColumn[`${i}-1-1`] = `minmax(0, ${i}fr) minmax(0, 1fr) minmax(0, 1fr)`
+  threeColumn[`1-${i}-1`] = `minmax(0, 1fr) minmax(0, ${i}fr) minmax(0, 1fr)`
+  threeColumn[`1-1-${i}`] = `minmax(0, 1fr) minmax(0, 1fr) minmax(0, ${i}fr)`
 }
 
 module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     fontFamily: decanter.theme.fontFamily,
     decanter: decanter.theme.decanter,
@@ -33,33 +32,33 @@ module.exports = {
       },
       gridTemplateColumns: {...twoColumn, ...threeColumn},
       containers: {
-        '8xl': '80rem',
-        '9xl': '90rem',
-        '10xl': '100rem',
-        '11xl': '110rem',
-        '12xl': '120rem',
-        '13xl': '130rem',
-        '14xl': '140rem',
-        '15xl': '150rem',
+        "8xl": "80rem",
+        "9xl": "90rem",
+        "10xl": "100rem",
+        "11xl": "110rem",
+        "12xl": "120rem",
+        "13xl": "130rem",
+        "14xl": "140rem",
+        "15xl": "150rem",
       },
       screens: {
-        '4xl': '2000px',
+        "4xl": "2000px",
       },
       scale: {
-        '-100': '-1'
+        "-100": "-1",
       },
       fontFamily: {
-        roboto: ['var(--font-roboto)', 'sans-serif'],
-        stanford: ['var(--font-stanford)', 'sans-serif'],
+        roboto: ["var(--font-roboto)", "sans-serif"],
+        stanford: ["var(--font-stanford)", "sans-serif"],
       },
     },
   },
   plugins: [
     ...decanter.plugins,
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/container-queries"),
     require(`${dir}/typography/local-footer.tsx`)(),
     require(`${dir}/typography/global-message.tsx`)(),
     require(`${dir}/typography/wysiwyg.tsx`)(),
     require(`${dir}/centered-container.tsx`)(),
   ],
-};
+}

tsconfig.json

@@ -20,6 +20,12 @@
       "@lib/*": ["./src/lib/*"]
     }
   },
-  "include": ["next-env.d.ts", "src/**/*.tsx", "app/**/*.tsx", ".storybook/stories/**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.tsx",
+    "app/**/*.tsx",
+    ".storybook/stories/**/*.tsx",
+    ".next/types/**/*.ts",
+  ],
   "exclude": ["node_modules"]
 }