feat(site): fix build for prerelease, use editorial content (#4271)

* feat(site): fix build for prerelease, use editorial content * add missing editorial flag * rebase lock * bump docs-framework * clean up some extra unneeded flags
patternfly · Oct 1, 2024 · 154cca6 · 154cca6
1 parent 7b27287
commit 154cca6
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 44 deletions.
diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
@@ -22,6 +22,7 @@ export const AutoLinkHeader = ({
           component={headingLevel}
           className={css('ws-heading', className)}
           tabIndex={-1}
+          isEditorial
         >
           <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
             <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />

diff --git a/packages/documentation-framework/components/footer/footer.js b/packages/documentation-framework/components/footer/footer.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Brand,
   Grid,
@@ -7,11 +7,11 @@ import {
   ListItem,
   PageSection,
   Content,
-} from '@patternfly/react-core';
-import { Link } from '@patternfly/documentation-framework/components';
-import { GithubIcon, TwitterIcon } from '@patternfly/react-icons';
-import redhatLogo from './RHLogo.png';
-import redhatLogoDark from './RHLogoDark.png';
+} from "@patternfly/react-core";
+import { Link } from "@patternfly/documentation-framework/components";
+import { GithubIcon, TwitterIcon } from "@patternfly/react-icons";
+import redhatLogo from "./RHLogo.png";
+import redhatLogoDark from "./RHLogoDark.png";
 
 export const Footer = ({ isDarkTheme }) => (
   <React.Fragment>
@@ -39,7 +39,7 @@ export const Footer = ({ isDarkTheme }) => (
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to={'/get-started/about-patternfly'}
+                      to={"/get-started/about-patternfly"}
                       aria-label="Get started with PatternFly"
                     >
                       Get started
@@ -237,6 +237,7 @@ export const Footer = ({ isDarkTheme }) => (
               <Content
                 component="p"
                 className="ws-org-pfsite-footer-menu-about-description"
+                isEditorial
               >
                 PatternFly is an open source design system built to drive
                 consistency and unify teams. From documentation and components

diff --git a/packages/documentation-framework/components/sectionGallery/TextSummary.js b/packages/documentation-framework/components/sectionGallery/TextSummary.js
@@ -4,28 +4,28 @@ import { Content } from "@patternfly/react-core";
 
 // convert summary text from string to jsx, remove links
 export const SummaryComponent = ({ id, itemsData }) => {
-  const itemDasherized = id.split(' ').join('-').toLowerCase();
+  const itemDasherized = id.split(" ").join("-").toLowerCase();
   const summary = itemsData?.[itemDasherized]?.summary;
   if (!summary) {
     return null;
   }
   // Remove anchor tags to avoid <a> in summary nested within <a> of Link card/datalistitem
-  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, '$1');
+  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, "$1");
   const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`);
-  const getSummaryComponent = new Function('React', code);
+  const getSummaryComponent = new Function("React", code);
   return getSummaryComponent(React);
-}
+};
 
 export const TextSummary = ({ id, itemsData }) => {
   if (!id) {
     return null;
   }
 
   return (
-    <Content>
+    <Content isEditorial>
       <Content component="p">
         <SummaryComponent id={id} itemsData={itemsData} />
       </Content>
     </Content>
-  )
+  );
 };
diff --git a/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js b/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   DataList,
   DataListItem,
@@ -10,17 +10,17 @@ import {
   Content,
   ContentVariants,
   Label,
-} from '@patternfly/react-core';
-import { Link } from '../link/link';
-import { TextSummary } from './TextSummary';
+} from "@patternfly/react-core";
+import { Link } from "../link/link";
+import { TextSummary } from "./TextSummary";
 
 export const SectionDataListLayout = ({
   galleryItems,
   layoutView,
   hasListText,
   hasListImages,
 }) => {
-  if (layoutView !== 'list') {
+  if (layoutView !== "list") {
     return null;
   }
 
@@ -55,9 +55,9 @@ export const SectionDataListLayout = ({
                       </DataListCell>
                     ),
                     <DataListCell width={5} key="text-description">
-                      <Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
+                      <Split className={hasListText ? "pf-v6-u-mb-md" : null}>
                         <SplitItem isFilled>
-                          <Content>
+                          <Content isEditorial>
                             <Content component={ContentVariants.h2}>
                               <span>{title}</span>
                             </Content>

diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Button,
   SearchInput,
@@ -10,18 +10,18 @@ import {
   ContentVariants,
   ToggleGroup,
   ToggleGroupItem,
-} from '@patternfly/react-core';
-import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+} from "@patternfly/react-core";
+import ListIcon from "@patternfly/react-icons/dist/esm/icons/list-icon";
+import ThIcon from "@patternfly/react-icons/dist/esm/icons/th-icon";
 
 export const SectionGalleryToolbar = ({
   galleryItems,
   searchTerm,
   setSearchTerm,
   layoutView,
   setLayoutView,
-  placeholderText = 'Search by name',
-  countText = ' items',
+  placeholderText = "Search by name",
+  countText = " items",
 }) => (
   <Toolbar isSticky>
     <ToolbarContent>
@@ -35,7 +35,7 @@ export const SectionGalleryToolbar = ({
       </ToolbarItem>
       {searchTerm && (
         <ToolbarItem>
-          <Button variant="link" onClick={() => setSearchTerm('')}>
+          <Button variant="link" onClick={() => setSearchTerm("")}>
             Reset
           </Button>
         </ToolbarItem>
@@ -46,25 +46,25 @@ export const SectionGalleryToolbar = ({
             <ToggleGroupItem
               icon={<ThIcon />}
               aria-label="grid icon button"
-              isSelected={layoutView === 'grid'}
-              onChange={() => setLayoutView('grid')}
+              isSelected={layoutView === "grid"}
+              onChange={() => setLayoutView("grid")}
             ></ToggleGroupItem>
             <ToggleGroupItem
               icon={<ListIcon />}
               aria-label="list icon button"
-              isSelected={layoutView === 'list'}
-              onChange={() => setLayoutView('list')}
+              isSelected={layoutView === "list"}
+              onChange={() => setLayoutView("list")}
             ></ToggleGroupItem>
           </ToggleGroup>
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem
         variant="pagination"
-        gap={{ default: 'gapMd', md: 'gapNone' }}
-        style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
+        gap={{ default: "gapMd", md: "gapNone" }}
+        style={{ "--pf-v6-c-toolbar__item--MinWidth": "max-content" }}
         className="pf-m-align-self-center"
       >
-        <Content component={ContentVariants.small}>
+        <Content isEditorial component={ContentVariants.small}>
           {galleryItems.length}
           {countText}
         </Content>

diff --git a/packages/documentation-framework/scripts/md/styled-tags.js b/packages/documentation-framework/scripts/md/styled-tags.js
@@ -26,7 +26,7 @@ function styledTags() {
       node.properties.className = node.properties.className || '';
 
       if (contentStyledMdTags.includes(node.tagName)) {
-        node.properties.className += `pf-v6-c-content--${node.tagName}`;
+        node.properties.className += `pf-v6-c-content--${node.tagName} pf-m-editorial`;
       }
 
       if (styledMdTags.includes(node.tagName)) {

diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
@@ -249,7 +249,7 @@ export const MDXTemplate = ({
           variant={!isSinglePage ? PageSectionVariants.light : ""}
           isWidthLimited
         >
-          <Content>
+          <Content isEditorial>
             <Flex alignItems={{ default: 'alignItemsCenter'}}>
               <FlexItem>
                 <Title headingLevel='h1' size='4xl' id="ws-page-title">

diff --git a/...on-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js b/...on-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js
@@ -41,7 +41,7 @@ const ColorFamily = ({color, computedStyles}) => {
 
   return (
     <GridItem>
-      <Content className="ws-heading ws-title" component="h3">{color} family</Content>
+      <Content className="ws-heading ws-title" component="h3" isEditorial>{color} family</Content>
       <Flex direction={{ default: 'column' }}  gap={{ default: 'gapMd' }}>
         {entries}
       </Flex>

diff --git a/...documentation-site/patternfly-docs/content/design-guidelines/styles/colors/ColorFamily.js b/...documentation-site/patternfly-docs/content/design-guidelines/styles/colors/ColorFamily.js
@@ -13,8 +13,8 @@ export function ColorFamily({
 }) {
   const [expanded, setExpanded] = React.useState([]);
   const rootTokens = tokens[':root'];
-
   const familyTokens = Object.values(rootTokens).filter(token => token.name.includes(`${palettePrefix}${family}--`));
+
   if (family === 'gray') {
     const whiteToken = rootTokens.t_color_white;
     familyTokens.unshift(whiteToken);
@@ -69,9 +69,9 @@ export function ColorFamily({
                 {tokenList?.length > 0 ? (
                   <>
                     <Title headingLevel="h4" size="md">Semantic tokens<span className='pf-v6-screen-reader'>for {token.value.toUpperCase()}</span></Title>
-                    <Content className="pf-v6-u-m-sm" component={ContentVariants.ol} isPlainList>
+                    <Content isEditorial className="pf-v6-u-m-sm" component={ContentVariants.ol} isPlainList>
                       {tokenList.map(tokenName =>
-                        <Content component={ContentVariants.li} key={tokenName}>{tokenName}</Content>
+                        <Content isEditorial component={ContentVariants.li} key={tokenName}>{tokenName}</Content>
                       )}
                     </Content>
                   </>

diff --git a/packages/documentation-site/patternfly-docs/pages/home.js b/packages/documentation-site/patternfly-docs/pages/home.js
@@ -184,10 +184,7 @@ const HomePage = () => (
               <span className="pf-v6-u-primary-color-100"> open </span>
               with PatternFly
             </Title>
-            <Content
-              component={ContentVariants.p}
-              className="pf-v6-u-font-size-lg"
-            >
+            <Content component={ContentVariants.p} className="pf-v6-u-font-size-lg">
               PatternFly is an open source design system that enables teams to
               create consistent and scalable enterprise products. PatternFly is
               sponsored and maintained by Red Hat, but is open to all.