diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js index 85af8b7d77..09f0fe9d0f 100644 --- a/packages/documentation-framework/components/cssVariables/cssVariables.js +++ b/packages/documentation-framework/components/cssVariables/cssVariables.js @@ -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)/; @@ -19,27 +12,25 @@ const mappingAsList = (property, values) => ( {property} {values.map((entry) => ( - } - > + }> {entry} ))} ); -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, }); }); } @@ -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; }); @@ -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) || @@ -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,
- +
)}
-
+ , ]; 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; } } }); @@ -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 ( - {this.props.autoLinkHeader && {`Prefixed with '${this.props.prefix}'`}} + {this.props.autoLinkHeader && ( + {`Prefixed with '${this.props.prefix}'`} + )} @@ -198,19 +201,22 @@ export class CSSVariables extends React.Component { {row.details ? ( {!row.details.fullWidth ? + ) : null} - ))) : ( - - {this.state.rows.map((row, rowIndex) => ( - - - - - ))} - + )) + ) : ( + + {this.state.rows.map((row, rowIndex) => ( + + + + + ))} + )}
: null} - {row.details.data} + {row.details.data} +
{row.cells[0]}{row.cells[1]}
{row.cells[0]}{row.cells[1]}
 diff --git a/packages/documentation-framework/components/footer/footer.js b/packages/documentation-framework/components/footer/footer.js index ce6afdbad3..1927003a10 100644 --- a/packages/documentation-framework/components/footer/footer.js +++ b/packages/documentation-framework/components/footer/footer.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import { Brand, Grid, @@ -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 }) => ( @@ -36,7 +36,7 @@ export const Footer = ({ isDarkTheme }) => (

What's new