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]

Codecov Report

Merging #196 (020993b) into master (ca3f851) will increase coverage by 0.05%. The diff coverage is 100.00%.

:exclamation: Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@            Coverage Diff             @@
##           master     #196      +/-   ##
==========================================
+ Coverage   99.68%   99.74%   +0.05%     
==========================================
  Files          20       20              
  Lines        2561     2746     +185     
  Branches       95      118      +23     
==========================================
+ Hits         2553     2739     +186     
+ Misses          8        7       -1     

Files Changed	Coverage Δ
src/react-server/PrismicRichText.tsx	99.78% <100.00%> (+0.49%)	:arrow_up: