From a15ce0e7ca51c215ac49de575389d5727cc3b236 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 15 Jul 2024 22:19:47 -0400 Subject: [PATCH] chore(docs): sectiongallery - remove unused styles, cleanup code --- .../sectionGallery/sectionDataListLayout.js | 127 ++++++++++++------ .../sectionGallery/sectionGallery.css | 42 +----- .../sectionGallery/sectionGalleryLayout.js | 96 +++++++++---- .../sectionGallery/sectionGalleryToolbar.js | 59 ++++++-- packages/documentation-site/package.json | 2 +- 5 files changed, 210 insertions(+), 116 deletions(-) diff --git a/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js b/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js index 92446bf0d7..7cc2670313 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js +++ b/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js @@ -1,51 +1,98 @@ -import React from "react"; -import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, Split, SplitItem, TextContent, Text, TextVariants, Label } from "@patternfly/react-core"; +import React from 'react'; +import { + DataList, + DataListItem, + DataListItemRow, + DataListItemCells, + DataListCell, + Split, + SplitItem, + TextContent, + Text, + TextVariants, + Label, +} from '@patternfly/react-core'; import { Link } from '../link/link'; import { TextSummary } from './TextSummary'; -export const SectionDataListLayout = ({ galleryItems, layoutView, hasListText, hasListImages }) => { +export const SectionDataListLayout = ({ + galleryItems, + layoutView, + hasListText, + hasListImages, +}) => { if (layoutView !== 'list') { return null; } return ( {}}> - {galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => ( - - - - -
- {`${itemName} -
- - ), - - - - - - - {title} - - - - - - {isBeta && ()} - {!isBeta && isDeprecated && ()} - {!isBeta && !isDeprecated && isDemo && ()} - - - { hasListText && } - - ]} /> - - - - ))} + {galleryItems.map( + ({ + idx, + slug, + illustration, + itemName, + title, + isBeta, + isDeprecated, + isDemo, + id, + galleryItemsData, + }) => ( + + + + +
+ {`${itemName} +
+ + ), + + + + + + {title} + + + + + {isBeta && ( + + )} + {!isBeta && isDeprecated && ( + + )} + {!isBeta && !isDeprecated && isDemo && ( + + )} + + + {hasListText && ( + + )} + , + ]} + /> + + + + ) + )} - ) + ); }; diff --git a/packages/documentation-framework/components/sectionGallery/sectionGallery.css b/packages/documentation-framework/components/sectionGallery/sectionGallery.css index 629145683c..c3cb16ff5a 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGallery.css +++ b/packages/documentation-framework/components/sectionGallery/sectionGallery.css @@ -1,39 +1,6 @@ -.ws-landing-page > * { - max-width: 832px; -} - -.ws-landing-page > .ws-section-gallery-full-width { - max-width: initial; -} - -.ws-section-gallery { - /* top placement */ - margin-top: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1); -} - -* + .ws-section-gallery { - /* top placement */ - margin-top: unset; -} - /* Toolbar styles */ .ws-section-gallery .pf-v6-c-toolbar { - margin-left: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1); - border-bottom: var(--pf-v6-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v6-c-page__sidebar--m-light--BorderRightColor); - margin-bottom: var(--pf-t--global--spacer--md); - width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight)); - /* avoid hoverable data list items overlapping toolbar */ -/* z-index: calc(var(--pf-v6-global--ZIndex--xs) + 2); */ -} - -/* Match toolbar left-padding to gallery left-padding */ -.ws-section-gallery .pf-v6-c-toolbar .pf-v6-c-toolbar__content { - --pf-v6-c-toolbar__content--PaddingLeft: var(--pf-v6-c-page__main-section--PaddingLeft); -} - -/* Avoid toolbar wrap on smaller screens */ -.ws-section-gallery .pf-v6-c-toolbar__content-section { - flex-wrap: nowrap; + margin-block-end: var(--pf-t--global--spacer--md); } /* Avoid link styling on gallery/data list item names */ @@ -42,12 +9,7 @@ color: inherit; } -/* Ensure same height for all cards in a gallery row */ -.ws-section-gallery .pf-v6-c-card { - height: 100%; -} - /* Limit width for data list view only */ .ws-section-gallery .pf-v6-c-data-list { - max-width: 956px; + max-width: var(--pf-t--global--breakpoint--lg); } diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js index ed367d41c1..3eecd6ed1d 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js +++ b/packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js @@ -1,41 +1,91 @@ -import React from "react"; -import { Gallery, GalleryItem, Card, CardTitle, CardBody, CardFooter, Label } from "@patternfly/react-core"; -import { Link } from '../link/link'; -import { TextSummary } from "./TextSummary"; +import React from 'react'; +import { + Gallery, + GalleryItem, + Card, + CardHeader, + CardTitle, + CardBody, + CardFooter, + Label, +} from '@patternfly/react-core'; +import { navigate } from '@reach/router'; +import { TextSummary } from './TextSummary'; -export const SectionGalleryLayout = ({ galleryItems, layoutView, hasGridText, hasGridImages }) => { +export const SectionGalleryLayout = ({ + galleryItems, + layoutView, + hasGridText, + hasGridImages, +}) => { if (layoutView !== 'grid') { return null; } return ( - {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, isDeprecated, isDemo, title, galleryItemsData}) => ( - - - - {title} + {galleryItems.map( + ({ + idx, + slug, + id, + itemName, + illustration, + isBeta, + isDeprecated, + isDemo, + title, + galleryItemsData, + }) => ( + + + { + e.preventDefault(); + document.getElementById('ws-page-main').scrollIntoView(); + navigate(slug); + }, + selectableActionId: `${id}-input`, + selectableActionAriaLabelledby: id, + name: `clickable-card-${idx}`, + }} + > + {title} + {(hasGridImages || hasGridText) && ( - { hasGridImages && illustration && {`${itemName} } - { hasGridText && } + {hasGridImages && illustration && ( + {`${itemName} + )} + {hasGridText && ( + + )} )} {(isBeta || isDeprecated || isDemo) && ( - {isBeta && ()} - {!isBeta && isDeprecated && ()} - {!isBeta && !isDeprecated && isDemo && ()} + {isBeta && ( + + )} + {!isBeta && isDeprecated && ( + + )} + {!isBeta && !isDeprecated && isDemo && ( + + )} )} - - - ))} + + ) + )} - ) + ); }; diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js index f3a06547e7..4a39cc3673 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js +++ b/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js @@ -1,7 +1,18 @@ -import React from "react"; -import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Text, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; +import React from 'react'; +import { + Button, + SearchInput, + Toolbar, + ToolbarContent, + ToolbarGroup, + ToolbarItem, + Text, + TextVariants, + 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'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; export const SectionGalleryToolbar = ({ galleryItems, @@ -9,29 +20,53 @@ export const SectionGalleryToolbar = ({ setSearchTerm, layoutView, setLayoutView, - placeholderText ="Search by name", - countText=" items" + placeholderText = 'Search by name', + countText = ' items', }) => ( - - setSearchTerm(val)} /> + + setSearchTerm(val)} + /> {searchTerm && ( - + )} - } aria-label="grid icon button" isSelected={layoutView === 'grid'} onChange={() => setLayoutView('grid')}> - } aria-label="list icon button" isSelected={layoutView === 'list'} onChange={() => setLayoutView('list')}> + } + aria-label="grid icon button" + isSelected={layoutView === 'grid'} + onChange={() => setLayoutView('grid')} + > + } + aria-label="list icon button" + isSelected={layoutView === 'list'} + onChange={() => setLayoutView('list')} + > - - { galleryItems.length }{ countText } + + + {galleryItems.length} + {countText} + diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index ea259cf17d..0c8149fa3e 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.0-alpha.58", + "@patternfly/documentation-framework": "6.0.0-alpha.59", "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4", "@patternfly/react-console": "6.0.0-alpha.3", "@patternfly/react-docs": "7.0.0-alpha.84",