Skip to content
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

Jump to bottom

chore(docs): sectiongallery - remove unused styles, cleanup code #4140

Merged
merged 1 commit into from
Jul 16, 2024
Merged

chore(docs): sectiongallery - remove unused styles, cleanup code #4140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
127 changes: 87 additions & 40 deletions packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<DataList onSelectDataListItem={() => {}}>
{galleryItems.map(({ idx, slug, illustration, itemName, title, isBeta, isDeprecated, isDemo, id, galleryItemsData }) => (
<Link to={slug} key={idx} className="ws-section-gallery-item">
<DataListItem>
<DataListItemRow>
<DataListItemCells dataListCells={[
hasListImages && illustration && (
<DataListCell width={1} key="illustration">
<div>
<img src={illustration} alt={`${itemName} illustration`} />
</div>
</DataListCell>
),
<DataListCell width={5} key="text-description">
<Split className={ hasListText ? "pf-v6-u-mb-md" : null }>
<SplitItem isFilled>
<TextContent>
<Text component={TextVariants.h2}>
<span>
{title}
</span>
</Text>
</TextContent>
</SplitItem>
<SplitItem>
{isBeta && (<Label color="blue" isCompact>Beta</Label>)}
{!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
{!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
</SplitItem>
</Split>
{ hasListText && <TextSummary id={id} itemsData={galleryItemsData} /> }
</DataListCell>
]} />
</DataListItemRow>
</DataListItem>
</Link>
))}
{galleryItems.map(
({
idx,
slug,
illustration,
itemName,
title,
isBeta,
isDeprecated,
isDemo,
id,
galleryItemsData,
}) => (
<Link to={slug} key={idx} className="ws-section-gallery-item">
<DataListItem>
<DataListItemRow>
<DataListItemCells
dataListCells={[
hasListImages && illustration && (
<DataListCell width={1} key="illustration">
<div>
<img
src={illustration}
alt={`${itemName} illustration`}
/>
</div>
</DataListCell>
),
<DataListCell width={5} key="text-description">
<Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
<SplitItem isFilled>
<TextContent>
<Text component={TextVariants.h2}>
<span>{title}</span>
</Text>
</TextContent>
</SplitItem>
<SplitItem>
{isBeta && (
<Label color="blue" isCompact>
Beta
</Label>
)}
{!isBeta && isDeprecated && (
<Label color="grey" isCompact>
Deprecated
</Label>
)}
{!isBeta && !isDeprecated && isDemo && (
<Label color="purple" isCompact>
Demo
</Label>
)}
</SplitItem>
</Split>
{hasListText && (
<TextSummary id={id} itemsData={galleryItemsData} />
)}
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
</Link>
)
)}
</DataList>
)
);
};
42 changes: 2 additions & 40 deletions packages/documentation-framework/components/sectionGallery/sectionGallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -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);
}
96 changes: 73 additions & 23 deletions packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Gallery hasGutter>
{galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, isDeprecated, isDemo, title, galleryItemsData}) => (
<GalleryItem span={4} key={idx}>
<Link to={slug} className="ws-section-gallery-item">
<Card
id={id}
key={idx}
isSelectableRaised
>
<CardTitle>{title}</CardTitle>
{galleryItems.map(
({
idx,
slug,
id,
itemName,
illustration,
isBeta,
isDeprecated,
isDemo,
title,
galleryItemsData,
}) => (
<GalleryItem span={4} key={idx}>
<Card id={id} key={idx} isClickable>
<CardHeader
selectableActions={{
onClickAction: (e) => {
e.preventDefault();
document.getElementById('ws-page-main').scrollIntoView();
navigate(slug);
},
selectableActionId: `${id}-input`,
selectableActionAriaLabelledby: id,
name: `clickable-card-${idx}`,
}}
>
<CardTitle>{title}</CardTitle>
</CardHeader>
{(hasGridImages || hasGridText) && (
<CardBody>
{ hasGridImages && illustration && <img src={illustration} alt={`${itemName} illustration`} /> }
{ hasGridText && <TextSummary id={id} itemsData={galleryItemsData} /> }
{hasGridImages && illustration && (
<img src={illustration} alt={`${itemName} illustration`} />
)}
{hasGridText && (
<TextSummary id={id} itemsData={galleryItemsData} />
)}
</CardBody>
)}
{(isBeta || isDeprecated || isDemo) && (
<CardFooter>
{isBeta && (<Label color="blue" isCompact>Beta</Label>)}
{!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
{!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
{isBeta && (
<Label color="blue" isCompact>
Beta
</Label>
)}
{!isBeta && isDeprecated && (
<Label color="grey" isCompact>
Deprecated
</Label>
)}
{!isBeta && !isDeprecated && isDemo && (
<Label color="purple" isCompact>
Demo
</Label>
)}
</CardFooter>
)}
</Card>
</Link>
</GalleryItem>
))}
</GalleryItem>
)
)}
</Gallery>
)
);
};
59 changes: 47 additions & 12 deletions packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,72 @@
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,
searchTerm,
setSearchTerm,
layoutView,
setLayoutView,
placeholderText ="Search by name",
countText=" items"
placeholderText = 'Search by name',
countText = ' items',
}) => (
<Toolbar isSticky>
<ToolbarContent>
<ToolbarItem variant="search-filter" widths={{default: '100%', md: '320px'}}>
<SearchInput onClear={false} value={searchTerm} placeholder={placeholderText} onChange={(_evt, val) => setSearchTerm(val)} />
<ToolbarItem>
<SearchInput
onClear={false}
value={searchTerm}
placeholder={placeholderText}
onChange={(_evt, val) => setSearchTerm(val)}
/>
</ToolbarItem>
{searchTerm && (
<ToolbarItem>
<Button variant="link" onClick={() => setSearchTerm('')}>Reset</Button>
<Button variant="link" onClick={() => setSearchTerm('')}>
Reset
</Button>
</ToolbarItem>
)}
<ToolbarGroup variant="icon-button-group">
<ToolbarItem>
<ToggleGroup>
<ToggleGroupItem icon={<ThIcon />} aria-label="grid icon button" isSelected={layoutView === 'grid'} onChange={() => setLayoutView('grid')}></ToggleGroupItem>
<ToggleGroupItem icon={<ListIcon />} aria-label="list icon button" isSelected={layoutView === 'list'} onChange={() => setLayoutView('list')}></ToggleGroupItem>
<ToggleGroupItem
icon={<ThIcon />}
aria-label="grid icon button"
isSelected={layoutView === 'grid'}
onChange={() => setLayoutView('grid')}
></ToggleGroupItem>
<ToggleGroupItem
icon={<ListIcon />}
aria-label="list icon button"
isSelected={layoutView === 'list'}
onChange={() => setLayoutView('list')}
></ToggleGroupItem>
</ToggleGroup>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v6-c-toolbar__item--MinWidth': "max-content"}}>
<Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
<ToolbarItem
variant="pagination"
spacer={{ default: 'spacerMd', md: 'spacerNone' }}
style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
>
<Text component={TextVariants.small}>
{galleryItems.length}
{countText}
</Text>
</ToolbarItem>
</ToolbarContent>
</Toolbar>
Expand Down
Loading
Loading