Skip to content

chore(docs): remove harded-coded tile deprecation #4378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 4 commits into from
Dec 9, 2024
Merged

chore(docs): remove harded-coded tile deprecation #4378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
370c070
chore(docs): remove harded-coded tile deprecation
evwilkin Nov 15, 2024
2f0015b
rebase
evwilkin Nov 20, 2024
8d92650
rebased
evwilkin Nov 25, 2024
8031da8
fix docs-framework version
evwilkin Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 26 additions & 79 deletions packages/documentation-framework/components/sideNav/sideNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
PageContextConsumer,
capitalize,
Flex,
FlexItem,
FlexItem
} from '@patternfly/react-core';
import { css } from '@patternfly/react-styles';
import { Location } from '@reach/router';
Expand All @@ -24,8 +24,7 @@ const getIsActive = (location, section, subsection = null) => {
const defaultValue = 50;

const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
const isMobileView =
window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
return (
<PageContextConsumer key={href + text}>
{({ onSidebarToggle, isSidebarOpen }) => (
Expand All @@ -39,11 +38,7 @@ const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
getProps={({ isCurrent, href, location }) => {
const { pathname } = location;
return {
className: css(
'pf-v6-c-nav__link',
(isCurrent || pathname.startsWith(href + '/')) &&
'pf-m-current'
),
className: css('pf-v6-c-nav__link', (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current')
};
}}
tabIndex={isSidebarOpen ? undefined : -1}
Expand Down Expand Up @@ -77,17 +72,10 @@ const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
);
};

const ExpandableNav = ({
groupedRoutes,
location,
section,
subsection = null,
}) => {
const ExpandableNav = ({ groupedRoutes, location, section, subsection = null }) => {
const isActive = getIsActive(location, section, subsection);
const isSubsection = subsection;
const routes = isSubsection
? groupedRoutes[section][subsection]
: groupedRoutes[section];
const routes = isSubsection ? groupedRoutes[section][subsection] : groupedRoutes[section];
const currentSection = isSubsection ? subsection : section;
const analyticsName = isSubsection ? `${section}/${subsection}` : section;

Expand All @@ -102,92 +90,57 @@ const ExpandableNav = ({
event.stopPropagation();
// Don't trigger for bubbled events from NavItems
if (!event.target.href) {
const isExpanded =
event.currentTarget.classList.contains('pf-m-expanded');
const isExpanded = event.currentTarget.classList.contains('pf-m-expanded');
// 1 === expand section, 0 === collapse section
trackEvent(
'sidenav_section_click',
'click_event',
analyticsName,
isExpanded ? 0 : 1
);
trackEvent('sidenav_section_click', 'click_event', analyticsName, isExpanded ? 0 : 1);
}
}}
>
{Object.entries(routes || {})
.filter(
([id, navObj]) =>
!Boolean(navObj.hideNavItem) && Object.entries(navObj).length > 0
)
.filter(([id, navObj]) => !Boolean(navObj.hideNavItem) && Object.entries(navObj).length > 0)
.map(
([
id,
{
slug,
isSubsection = false,
sortValue = defaultValue,
subsectionSortValue = defaultValue,
sources,
},
{ slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue, sources }
]) => ({
text: id,
href: slug,
isSubsection,
sortValue: isSubsection ? subsectionSortValue : sortValue,
sources,
sources
})
)
.sort(
(
{ text: text1, sortValue: sortValue1 },
{ text: text2, sortValue: sortValue2 }
) => {
if (sortValue1 === sortValue2) {
return text1.localeCompare(text2);
}
return sortValue1 > sortValue2 ? 1 : -1;
.sort(({ text: text1, sortValue: sortValue1 }, { text: text2, sortValue: sortValue2 }) => {
if (sortValue1 === sortValue2) {
return text1.localeCompare(text2);
}
)
return sortValue1 > sortValue2 ? 1 : -1;
})
.map((navObj) => {
return navObj.isSubsection
? ExpandableNav({
groupedRoutes,
location,
section,
subsection: navObj.text,
subsection: navObj.text
})
: NavItem({
...navObj,
isDeprecated:
navObj.href?.includes('components') &&
navObj.sources.some(
(source) =>
(source.source === 'react-deprecated' ||
source.source === 'html-deprecated') &&
// TODO: remove hardcoded Tile when Core PR merges
// https://github.com/patternfly/patternfly/pull/7178
(source.id === 'Tile' ||
!navObj.sources.some(
(source) =>
source.source === 'react' ||
source.source === 'html'
))
(source.source === 'react-deprecated' || source.source === 'html-deprecated') &&
!navObj.sources.some((source) => source.source === 'react' || source.source === 'html')
),
isBeta: navObj.sources.some(
(source) =>
source.beta &&
source.source !== 'react-next' &&
source.source !== 'react-templates'
(source) => source.beta && source.source !== 'react-next' && source.source !== 'react-templates'
),
isDemo: navObj.sources.some(
(source) =>
(source.source === 'react-demos' ||
source.source === 'html-demos') &&
!navObj.sources.some(
(source) =>
source.source === 'react' || source.source === 'html'
)
),
(source.source === 'react-demos' || source.source === 'html-demos') &&
!navObj.sources.some((source) => source.source === 'react' || source.source === 'html')
)
});
})}
</NavExpandable>
Expand All @@ -203,8 +156,7 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
if (!overflowElement) {
return;
}
const activeElements =
overflowElement.getElementsByClassName('pf-m-current');
const activeElements = overflowElement.getElementsByClassName('pf-m-current');
if (activeElements.length > 0) {
const lastElement = activeElements[activeElements.length - 1];
lastElement.scrollIntoView({ block: 'center' });
Expand All @@ -216,16 +168,11 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
<NavList className="ws-side-nav-list">
{navItems.map(({ section, text, href }) =>
section ? (
<Location key={section}>
{({ location }) =>
ExpandableNav({ groupedRoutes, location, section })
}
</Location>
<Location key={section}>{({ location }) => ExpandableNav({ groupedRoutes, location, section })}</Location>
) : (
NavItem({
text:
text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
href: href,
text: text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
href: href
})
)
)}
Expand Down
Loading
Loading