Skip to content

Commit

Permalink
fix(docs): hardcode Tile deprecation, fix console errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@evwilkin
evwilkin committed Oct 25, 2024
1 parent da375ce commit fa25421
Show file tree
Hide file tree
Showing 4 changed files with 495 additions and 256 deletions.
120 changes: 63 additions & 57 deletions packages/documentation-framework/components/cssVariables/cssVariables.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import React from "react";
import { List, ListItem, debounce } from "@patternfly/react-core";
import {
Table,
Thead,
Th,
Tr,
Tbody,
Td
} from "@patternfly/react-table";
import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
import React from 'react';
import { List, ListItem, debounce } from '@patternfly/react-core';
import { Table, Thead, Th, Tr, Tbody, Td } from '@patternfly/react-table';
import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
import * as tokensModule from '@patternfly/react-tokens/dist/esm/componentIndex';
import LevelUpAltIcon from '@patternfly/react-icons/dist/esm/icons/level-up-alt-icon';
import { CSSSearch } from './cssSearch';

const isColorRegex = /^(#|rgb)/;
Expand All @@ -19,27 +12,25 @@ const mappingAsList = (property, values) => (
<List isPlain>
<ListItem>{property}</ListItem>
{values.map((entry) => (
<ListItem
icon={<LevelUpAltIcon className="rotate-90-deg" />}
>
<ListItem key={entry} icon={<LevelUpAltIcon className="rotate-90-deg" />}>
{entry}
</ListItem>
))}
</List>
);

const flattenList = files => {
const flattenList = (files) => {
let list = [];
files.forEach(file => {
files.forEach((file) => {
Object.entries(file).forEach(([selector, values]) => {
if(values !== undefined) {
if (values !== undefined) {
Object.entries(values).forEach(([key, val]) => {
list.push({
selector,
property: val.name,
token: key,
value: val.value,
values: val.values
values: val.values,
});
});
}
Expand All @@ -51,15 +42,15 @@ const flattenList = files => {
export class CSSVariables extends React.Component {
constructor(props) {
super(props);
const prefixToken = props.prefix.replace("pf-v6-", "").replace(/-+/g, "_");
const prefixToken = props.prefix.replace('pf-v6-', '').replace(/-+/g, '_');
const applicableFiles = Object.entries(tokensModule)
.filter(([key, val]) => prefixToken === key)
.sort(([key1], [key2]) => key1.localeCompare(key2))
.map(([key, val]) => {
if (props.selector) {
return {
[props.selector]: val[props.selector]
}
[props.selector]: val[props.selector],
};
}
return val;
});
Expand All @@ -69,15 +60,15 @@ export class CSSVariables extends React.Component {
this.state = {
searchRE: '',
rows: this.getFilteredRows(),
allRowsExpanded: true
allRowsExpanded: true,
};
}

getFilteredRows = (searchRE) => {
let filteredRows = [];
let rowNumber = -1;
this.flatList.forEach(row => {
const { selector, property, token, value, values} = row;
this.flatList.forEach((row) => {
const { selector, property, token, value, values } = row;
const passes =
!searchRE ||
searchRE.test(selector) ||
Expand All @@ -88,7 +79,7 @@ export class CSSVariables extends React.Component {
const rowKey = `${selector}_${property}`;
const isColor = isColorRegex.test(value);
const cells = [
...this.props.hideSelectorColumn ? [] : [selector],
...(this.props.hideSelectorColumn ? [] : [selector]),
property,
<div key={rowKey}>
<div
Expand All @@ -100,7 +91,10 @@ export class CSSVariables extends React.Component {
key={`${rowKey}_2`}
className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
>
<span className="circle" style={{ backgroundColor: `var(${property})`}}/>
<span
className="circle"
style={{ backgroundColor: `var(${property})` }}
/>
</div>
)}
<div
Expand All @@ -110,20 +104,22 @@ export class CSSVariables extends React.Component {
{isColor && '(In light theme)'} {value}
</div>
</div>
</div>
</div>,
];
filteredRows.push({
isOpen: values ? false : undefined,
cells,
details: values ? {
parent: rowNumber,
fullWidth: true,
data: mappingAsList(property, values)
} : undefined
details: values
? {
parent: rowNumber,
fullWidth: true,
data: mappingAsList(property, values),
}
: undefined,
});
rowNumber += 1;
if (values) {
rowNumber += 1
rowNumber += 1;
}
}
});
Expand All @@ -136,28 +132,35 @@ export class CSSVariables extends React.Component {
let newRows = Array.from(rows);

if (collapseAll) {
newRows = newRows.map(r => (r.isOpen === undefined ? r : { ...r, isOpen }));
newRows = newRows.map((r) =>
r.isOpen === undefined ? r : { ...r, isOpen }
);
} else {
newRows[rowKey] = { ...newRows[rowKey], isOpen };
}
this.setState(prevState => ({
this.setState((prevState) => ({
rows: newRows,
...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
...(collapseAll && { allRowsExpanded: !prevState.allRowsExpanded }),
}));
};

getDebouncedFilteredRows = debounce(value => {
const searchRE = new RegExp(value, "i");
getDebouncedFilteredRows = debounce((value) => {
const searchRE = new RegExp(value, 'i');
this.setState({
searchRE,
rows: this.getFilteredRows(searchRE)
rows: this.getFilteredRows(searchRE),
});
}, 500);

render() {
return (
<React.Fragment>
{this.props.autoLinkHeader && <AutoLinkHeader headingLevel="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
{this.props.autoLinkHeader && (
<AutoLinkHeader
headingLevel="h3"
className="pf-v6-u-mt-lg pf-v6-u-mb-md"
>{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>
)}
<CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
<Table
variant="compact"
Expand All @@ -183,11 +186,11 @@ export class CSSVariables extends React.Component {
expand={
row.details
? {
rowIndex,
isExpanded: row.isOpen,
onToggle: this.onCollapse,
expandId: `css-vars-expandable-toggle-${this.props.prefix}`
}
rowIndex,
isExpanded: row.isOpen,
onToggle: this.onCollapse,
expandId: `css-vars-expandable-toggle-${this.props.prefix}`,
}
: undefined
}
/>
Expand All @@ -198,19 +201,22 @@ export class CSSVariables extends React.Component {
{row.details ? (
<Tr isExpanded={row.isOpen}>
{!row.details.fullWidth ? <Td /> : null}
<Td dataLabel="Selector" colSpan={5}>{row.details.data}</Td>
<Td dataLabel="Selector" colSpan={5}>
{row.details.data}
</Td>
</Tr>
) : null}
</Tbody>
))) : (
<Tbody>
{this.state.rows.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td dataLabel="Variable">{row.cells[0]}</Td>
<Td dataLabel="Value">{row.cells[1]}</Td>
</Tr>
))}
</Tbody>
))
) : (
<Tbody>
{this.state.rows.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td dataLabel="Variable">{row.cells[0]}</Td>
<Td dataLabel="Value">{row.cells[1]}</Td>
</Tr>
))}
</Tbody>
)}
</Table>
</React.Fragment>
Expand Down
40 changes: 24 additions & 16 deletions packages/documentation-framework/components/footer/footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
import {
Brand,
Grid,
Expand All @@ -7,11 +7,11 @@ import {
ListItem,
PageSection,
Content,
} from "@patternfly/react-core";
import { Link } from "@patternfly/documentation-framework/components";
import { GithubIcon } from "@patternfly/react-icons";
import redhatLogo from "./RHLogo.png";
import redhatLogoDark from "./RHLogoDark.png";
} from '@patternfly/react-core';
import { Link } from '@patternfly/documentation-framework/components';
import { GithubIcon } from '@patternfly/react-icons';
import redhatLogo from './RHLogo.png';
import redhatLogoDark from './RHLogoDark.png';

export const Footer = ({ isDarkTheme }) => (
<React.Fragment>
Expand All @@ -36,7 +36,7 @@ export const Footer = ({ isDarkTheme }) => (
<p className="ws-org-pfsite-footer-menu-list-title">What's new</p>
<nav aria-label="Quick Links">
<List isPlain className="ws-org-pfsite-footer-menu-list">
<ListItem className="ws-org-pfsite-footer-menu-list-item">
<ListItem className="ws-org-pfsite-footer-menu-list-item">
<Link
className="ws-org-pfsite-footer-menu-link"
to="/get-started/upgrade"
Expand Down Expand Up @@ -83,7 +83,7 @@ export const Footer = ({ isDarkTheme }) => (
<p className="ws-org-pfsite-footer-menu-list-title">Contribute</p>
<nav aria-label="Contribute">
<List isPlain className="ws-org-pfsite-footer-menu-list">
<ListItem className="ws-org-pfsite-footer-menu-list-item">
<ListItem className="ws-org-pfsite-footer-menu-list-item">
<Link
className="ws-org-pfsite-footer-menu-link"
to="/get-started/about-patternfly"
Expand All @@ -110,17 +110,15 @@ export const Footer = ({ isDarkTheme }) => (
Contribute
</Link>
</ListItem>
</List>
</List>
</nav>
</GridItem>
<GridItem
sm={6}
md={4}
className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
>
<p className="ws-org-pfsite-footer-menu-list-title">
Community
</p>
<p className="ws-org-pfsite-footer-menu-list-title">Community</p>
<nav aria-label="Stay in touch">
<List isPlain className="ws-org-pfsite-footer-menu-list">
<ListItem className="ws-org-pfsite-footer-menu-list-item">
Expand All @@ -140,7 +138,7 @@ export const Footer = ({ isDarkTheme }) => (
target="top"
aria-label="Read the PatternFly blog"
>
Blog
Blog
</Link>
</ListItem>
<ListItem className="ws-org-pfsite-footer-menu-list-item">
Expand Down Expand Up @@ -171,7 +169,7 @@ export const Footer = ({ isDarkTheme }) => (
>
Discussions
</Link>
</ListItem>
</ListItem>
</List>
</nav>
</GridItem>
Expand Down Expand Up @@ -268,9 +266,19 @@ export const Footer = ({ isDarkTheme }) => (
target="top"
aria-label="Link to PatternFly X page"
>
<svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>
<svg
className="pf-v6-svg"
viewBox="0 0 512 512"
fill="currentColor"
aria-hidden="true"
role="img"
width="1em"
height="1em"
>
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
</svg>
</Link>
{/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
{/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
</GridItem>
</Grid>
</GridItem>
Expand Down
Loading

0 comments on commit fa25421

Please sign in to comment.