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/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index 2ced5e1c07..b46ae28856 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -8,6 +8,7 @@ import { Tbody, Td } from "@patternfly/react-table"; +import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader"; import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex"; import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md"; import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon"; @@ -59,12 +60,9 @@ const flattenList = files => { export class CSSVariables extends React.Component { constructor(props) { super(props); - // Ensure array in case of multiple prefixes - this.prefix = - typeof props.prefix === "string" ? [props.prefix] : props.prefix; - const prefixTokens = this.prefix.map(prefix => prefix.replace("pf-", "").replace(/-+/g, "_")); + const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_"); const applicableFiles = Object.entries(tokensModule) - .filter(([key, val]) => prefixTokens.includes(key)) + .filter(([key, val]) => prefixToken === key) .sort(([key1], [key2]) => key1.localeCompare(key2)) .map(([key, val]) => { if (props.selector) { @@ -170,10 +168,11 @@ export class CSSVariables extends React.Component { render() { return ( + {this.props.autoLinkHeader && {`Prefixed with '${this.props.prefix}'`}} 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..4d204c7fb2 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 (