From 56f7aa7002c652c6a77bcd74d4d76f07bbe5e391 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 10 Apr 2023 11:49:07 -0400 Subject: [PATCH 1/6] feat(labels): add deprecated/demo/beta labels to headers + nav items --- .../autoLinkHeader/autoLinkHeader.js | 31 ++-- .../components/example/example.js | 34 ++++- .../components/sideNav/sideNav.js | 33 +++-- packages/documentation-framework/package.json | 8 +- .../scripts/md/parseMD.js | 8 +- .../documentation-framework/templates/mdx.js | 69 +++++++-- packages/v4/package.json | 2 +- .../content/get-started/about.md | 12 ++ yarn.lock | 136 ++++++++++-------- 9 files changed, 229 insertions(+), 104 deletions(-) diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js index 7d96a86b69..0af656a4b7 100644 --- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js +++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Title } from '@patternfly/react-core'; +import { Title, Flex, FlexItem } from '@patternfly/react-core'; import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon'; import { Link } from '../link/link'; import { slugger } from '../../helpers/slugger'; @@ -25,17 +25,22 @@ export const AutoLinkHeader = ({ const slug = id || slugger(children); return ( - - <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden> - <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} /> - </Link> - {children} {metaText} - + + + + <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden> + <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} /> + </Link> + {children} + + + {metaText} + ) }; diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 9ff0c715db..d459287822 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -1,6 +1,6 @@ import React from 'react'; import { useLocation } from '@reach/router'; -import { Badge, CodeBlock, CodeBlockCode, debounce, Switch } from '@patternfly/react-core'; +import { Button, CodeBlock, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core'; import * as reactCoreModule from '@patternfly/react-core'; import * as reactCoreNextModule from '@patternfly/react-core/next'; import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated'; @@ -71,7 +71,11 @@ export const Example = ({ // The image src thumbnail for the example thumbnail = missingThumbnail, // Whether the example shows demo capability + isDemo, + // Whether the example is open to further evolution isBeta, + // Whether the example is deprecated + isDeprecated, // Slugified source + title id, // Section in frontmatter of MD file (components, demos, etc) @@ -173,12 +177,36 @@ export const Example = ({ + (loc.pathname.endsWith(source) ? '' : `/${source}`) + '/' + slugger(title); - + return (
Beta} + metaText={ + + {isBeta && ( + + + + )} + {isDemo && ( + + + + )} + {isDeprecated && ( + + + + )} + + } size="h4" headingLevel="h3" className="ws-example-heading" diff --git a/packages/documentation-framework/components/sideNav/sideNav.js b/packages/documentation-framework/components/sideNav/sideNav.js index be2b5d04cd..5336aa0bec 100644 --- a/packages/documentation-framework/components/sideNav/sideNav.js +++ b/packages/documentation-framework/components/sideNav/sideNav.js @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from '../link/link'; -import { Nav, NavList, NavExpandable, PageContextConsumer, capitalize } from '@patternfly/react-core'; +import { Label, Nav, NavList, NavExpandable, PageContextConsumer, capitalize, Flex, FlexItem } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; import { Location } from '@reach/router'; import { makeSlug } from '../../helpers'; @@ -14,7 +14,7 @@ const getIsActive = (location, section, subsection = null) => { const defaultValue = 50; -const NavItem = ({ text, href }) => { +const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => { const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10); return ( @@ -33,7 +33,18 @@ const NavItem = ({ text, href }) => { } tabIndex={isNavOpen ? undefined : -1} > - {text} + + {text} + {(isBeta || isDemo || isDeprecated) && ( + + {isBeta && ()} + {!isBeta && isDemo && ()} + {!isBeta && !isDemo && isDeprecated && ()} + + )} + + + )} @@ -70,7 +81,7 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) => > {Object.entries(routes || {}) .filter(([id, navObj]) => !Boolean(navObj.hideNavItem) && (Object.entries(navObj).length > 0)) - .map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue) })) + .map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue, sources }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue), sources })) .sort(({text: text1, sortValue: sortValue1}, {text: text2, sortValue: sortValue2}) => { if (sortValue1 === sortValue2) { return text1.localeCompare(text2); @@ -78,10 +89,14 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) => return sortValue1 > sortValue2 ? 1 : -1; }) .map(navObj => navObj.isSubsection - ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text}) - : NavItem(navObj) - ) - } + ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text}) + : NavItem({ + ...navObj, + isDeprecated: navObj.href?.includes('components') && navObj.sources.some(source => source.source === "react-deprecated") && !navObj.sources.some(source => source.source === "react"), + isBeta: navObj.sources.some(source => source.beta), + isDemo: navObj.sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !navObj.sources.some(source => source.source === "react" || source.source === "html") + }) + )} ); } @@ -101,7 +116,7 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => { lastElement.scrollIntoView({ block: 'center' }); } }, []); - + return (