feat(Content): add editorial support (#10881)

* feat(Content): add editorial support

* update prop description

* docs updates

Author: kmcfaul

packages/react-core/src/components/Content/Content.tsx

@@ -53,6 +53,8 @@ export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isPlainList?: boolean;
   /** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */
   isVisitedLink?: boolean;
+  /** Flag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.  */
+  isEditorial?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id. */
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -89,6 +91,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
   isVisitedLink = false,
   ouiaId,
   ouiaSafe = true,
+  isEditorial = false,
   ...props
 }: ContentProps) => {
   const wrappingComponent = component ?? 'div';
@@ -106,6 +109,7 @@ export const Content: React.FunctionComponent<ContentProps> = ({
         componentStyles[wrappingComponent],
         isList && isPlainList && styles.modifiers.plain,
         isVisitedLink && styles.modifiers.visited,
+        isEditorial && styles.modifiers.editorial,
         className
       )}
     >

packages/react-core/src/components/Content/__tests__/Content.test.tsx

@@ -264,6 +264,30 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
+test(`Renders without class name ${styles.modifiers.editorial} by default`, () => {
+  render(<Content>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true`, () => {
+  render(<Content isEditorial>Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders with class name ${styles.modifiers.editorial} when isEditorial = true and component is specified`, () => {
+  render(
+    <Content component="h1" isEditorial>
+      Test
+    </Content>
+  );
+  expect(screen.getByText('Test')).toHaveClass('pf-m-editorial');
+});
+
+test(`Renders without class name ${styles.modifiers.editorial} when isEditorial = false`, () => {
+  render(<Content isEditorial={false}>Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-editorial');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Content ouiaId="ouia-id">Test</Content>);
   expect(asFragment()).toMatchSnapshot();

packages/react-core/src/components/Content/examples/Content.md

@@ -62,3 +62,11 @@ HTML elements wrapped by `<Content>` are styled by the content component.
 ```ts file="./ContentVisited.tsx"
 
 ```
+
+### Editorial content
+
+Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use `isEditorial`.
+
+```ts file="./ContentEditorial.tsx"
+
+```

packages/react-core/src/components/Content/examples/ContentEditorial.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+export const ContentEditorial: React.FunctionComponent = () => (
+  <>
+    <Content component={ContentVariants.h1} isEditorial>
+      Example of editorial content via components
+    </Content>
+    <Content component={ContentVariants.p} isEditorial>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+      erat vel, interdum mattis neque. Sub works as well!
+    </Content>
+    <br />
+    <Content isEditorial>
+      <h1>Example of editorial content via wrapper</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
+        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+        erat vel, interdum mattis neque. Sub works as well!
+      </p>
+    </Content>
+  </>
+);