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)
• [x] 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:

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

🐻

[github-actions[bot]]

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]

:warning: Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

:x: Patch coverage is 94.63869% with 23 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 99.02%. Comparing base (ca3f851) to head (f5be8ba). :warning: Report is 36 commits behind head on master.

Files with missing lines	Patch %	Lines
src/lib/createDefaultSerializer.tsx	95.18%	13 Missing :warning:
src/lib/wrapShorthandSerializer.ts	88.60%	8 Missing and 1 partial :warning:
src/PrismicRichText.tsx	94.44%	1 Missing :warning:
:exclamation: 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     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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