feat(PrismicRichText): support className component shortcut

[angeloashmore]

Types of changes

• Chore (a non-breaking change which is related to package maintenance)
• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR allows <PrismicRichText> to be configured with a className shorthand for individual components. It saves developer keystrokes by removing boilerplate in the common case of applying a classname to the default block element.

<PrismicRichText
  components={{
    heading1: { className: "text-4xl uppercase" },
    heading2: { className: "text-2xl" },
    strong: { className: "font-bold" },
  }}
/>

The above components value is equivalent to the following:

<PrismicRichText
  components={{
    heading1: ({ children }) => (
      <h1 className="text-4xl uppercase">{children}</h1>
    ),
    heading2: ({ children }) => <h2 className="text-2xl">{children}</h2>,
    strong: ({ children }) => <strong className="font-bold">{children}</strong>,
  }}
/>

The shorthand and existing inline component syntax can coincide in the components prop.

<PrismicRichText
  components={{
    heading1: { className: "text-4xl uppercase" },
    heading2: ({ children }) => <h2 className="text-2xl">{children}</h2>,
  }}
/>

className is the only supported shorthand prop. Other props, like data- attributes, are not supported. Continue to use the inline component syntax for component definitions that require more than just className customization.

Checklist:

• My change requires an update to the official documentation.
• All TSDoc comments are up-to-date and new ones have been added where necessary.
• All new and existing tests are passing.

🐻

[github-actions]

size-limit report 📦

Path	Size
./dist/index.cjs	8.54 KB (+6.47% 🔺)
./dist/index.js	6.4 KB (+5.88% 🔺)
./dist/react-server.cjs	7.71 KB (+6.81% 🔺)
./dist/react-server.js	5.89 KB (+5.72% 🔺)

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 94.63869% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 99.02%. Comparing base (ca3f851) to head (f5be8ba).
⚠️ Report is 36 commits behind head on master.

Files with missing lines	Patch %	Lines
src/lib/createDefaultSerializer.tsx	95.18%	13 Missing ⚠️
src/lib/wrapShorthandSerializer.ts	88.60%	8 Missing and 1 partial ⚠️
src/PrismicRichText.tsx	94.44%	1 Missing ⚠️
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #196      +/-   ##
==========================================
- Coverage   99.68%   99.02%   -0.67%     
==========================================
  Files          20       23       +3     
  Lines        2561     2863     +302     
  Branches       95      114      +19     
==========================================
+ Hits         2553     2835     +282     
- Misses          8       27      +19     
- Partials        0        1       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.