From c25f8837b4973d13d96b2f827b148930817d1a4f Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 3 Apr 2024 11:25:29 -0400 Subject: [PATCH 01/19] chore(pf-issues): Updated github actions to create issues in Patternfly issues. --- .github/workflows/extensions.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml index f5aff95..7fe2c56 100644 --- a/.github/workflows/extensions.yml +++ b/.github/workflows/extensions.yml @@ -13,5 +13,5 @@ jobs: steps: - uses: actions/add-to-project@v0.3.0 with: - project-url: https://github.com/orgs/patternfly/projects/12 + project-url: https://github.com/orgs/patternfly/projects/7 github-token: ${{ secrets.GH_PROJECTS }} From 8a3c479847d1ca8587b771bc190a7e8a51ec0c11 Mon Sep 17 00:00:00 2001 From: Jessie Date: Fri, 29 Mar 2024 10:07:22 -0400 Subject: [PATCH 02/19] Upgrade to v6 --- packages/module/package.json | 12 +- .../content/examples/CatalogItemHeader.md | 10 +- .../content/examples/CatalogTile.md | 30 +- .../content/examples/FilterSidePanel.md | 2 +- .../content/examples/PropertiesSidePanel.md | 2 +- .../content/examples/catalogTile.css | 2 +- .../content/examples/filterSidePanel.css | 4 +- .../content/examples/pfLogo6.svg | 17 + .../catalog-tile/catalog-view-tile/react.js | 4 +- .../catalog-tile/catalog-view/react.js | 4 +- .../catalog-view-filter-side-panel/react.js | 2 +- .../react.js | 2 +- .../extensions/catalog-view-tile/react.js | 4 +- .../catalog-view/catalog-item-header/react.js | 12 +- .../catalog-view/catalog-tile/react.js | 20 +- .../catalog-view/filter-side-panel/react.js | 6 +- .../properties-side-panel/react.js | 6 +- .../catalog-view/vertical-tabs/react.js | 4 +- .../module/patternfly-docs/generated/index.js | 48 +- .../module/patternfly-docs/pages/index.js | 2 +- .../_catalog-item.scss | 2 +- .../_catalog-tile.scss | 6 +- .../_filter-side-panel.scss | 2 +- .../_variables.scss | 4 +- .../CatalogTile/CatalogTileBadge.tsx | 2 +- yarn.lock | 447 +++++++++++++----- 26 files changed, 427 insertions(+), 229 deletions(-) create mode 100644 packages/module/patternfly-docs/content/examples/pfLogo6.svg diff --git a/packages/module/package.json b/packages/module/package.json index a1f9f8c..ca48a6c 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -40,18 +40,18 @@ "patternfly" ], "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.2", - "@patternfly/react-styles": "6.0.0-alpha.2" + "@patternfly/react-core": "6.0.0-alpha.47", + "@patternfly/react-styles": "6.0.0-alpha.17" }, "peerDependencies": { "react": "^17 || ^18", "react-dom": "^17 || ^18" }, "devDependencies": { - "@patternfly/patternfly": "^6.0.0-alpha.21", - "@patternfly/documentation-framework": "^5.3.8", - "@patternfly/react-table": "^6.0.0-alpha.2", - "@patternfly/react-code-editor": "^6.0.0-alpha.2", + "@patternfly/patternfly": "6.0.0-alpha.107", + "@patternfly/documentation-framework": "6.0.0-alpha.16", + "@patternfly/react-table": "6.0.0-alpha.47", + "@patternfly/react-code-editor": "6.0.0-alpha.47", "react-monaco-editor": "0.51.0", "monaco-editor": "0.34.1", "rimraf": "^2.6.2", diff --git a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md index 1d9ac5c..facb7e2 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md +++ b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md @@ -8,7 +8,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/ --- import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; import './catalogItemHeader.css'; ## Introduction @@ -19,10 +19,10 @@ Note: Catalog item header lives in its own package at [`@patternfly/react-catalo ```js import React from 'react'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo2 from './examples/pfLogo2.svg'; +import pfLogo6 from './examples/pfLogo2.svg'; ``` @@ -31,10 +31,10 @@ import pfLogo2 from './examples/pfLogo2.svg'; ```js import React from 'react'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo2 from './examples/pfLogo2.svg'; +import pfLogo6 from './examples/pfLogo2.svg'; diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md index 53906fd..291a6fd 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogTile.md +++ b/packages/module/patternfly-docs/content/examples/CatalogTile.md @@ -10,7 +10,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/ import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; import './catalogTile.css'; ## Introduction @@ -23,13 +23,13 @@ Note: Catalog tile lives in its own package at [`@patternfly/react-catalog-view- import React from 'react'; import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; import '../../../../dist/css/react-catalog-view-extension.css'; @@ -52,11 +52,11 @@ import React from 'react'; import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; @@ -72,7 +72,7 @@ import pfLogo2 from './pfLogo2.svg'; } footer={ - Enabled + Enabled } /> @@ -83,11 +83,11 @@ import pfLogo2 from './pfLogo2.svg'; import React from 'react'; import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; @@ -111,18 +111,18 @@ import React from 'react'; import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; , - + ]} title="Patternfly-React" @@ -139,11 +139,11 @@ import pfLogo2 from './pfLogo2.svg'; ```js import React from 'react'; import { CatalogTile } from '@patternfly/react-catalog-view-extension'; -import pfLogo2 from './pfLogo2.svg'; +import pfLogo6 from './pfLogo6.svg'; diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index 05897ab..d7569b5 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component { return ( - {`${count} stars`} + {`${count} stars`} {stars} ); diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 5f5ebb7..e52f98b 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; label="Certified Level" value={ - Certified + Certified } /> diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index 1e420b5..45fa728 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -24,7 +24,7 @@ color: #004080; text-decoration: underline; } -.ws-react-e-catalog-tile .pf-v5-c-card__actions { +.ws-react-e-catalog-tile .pf-v6-c-card__actions { padding-left: 5px; } .ws-react-e-catalog-tile .catalog-tile-pf-icon { diff --git a/packages/module/patternfly-docs/content/examples/filterSidePanel.css b/packages/module/patternfly-docs/content/examples/filterSidePanel.css index 7c27d51..985054e 100644 --- a/packages/module/patternfly-docs/content/examples/filterSidePanel.css +++ b/packages/module/patternfly-docs/content/examples/filterSidePanel.css @@ -23,7 +23,7 @@ margin-bottom: 0; } -.filter-panel-pf-category-items .pf-v5-c-button.pf-m-link { +.filter-panel-pf-category-items .pf-v6-c-button.pf-m-link { padding: 0; } @@ -37,7 +37,7 @@ margin-top: 0; } -.filter-panel-pf-category-item .pf-v5-c-check__input { +.filter-panel-pf-category-item .pf-v6-c-check__input { margin-left: 0px; } diff --git a/packages/module/patternfly-docs/content/examples/pfLogo6.svg b/packages/module/patternfly-docs/content/examples/pfLogo6.svg new file mode 100644 index 0000000..bc9527a --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/pfLogo6.svg @@ -0,0 +1,17 @@ + + + PF-IconLogo-color + + + + + + + + + + \ No newline at end of file diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js index 55a8d86..55ca199 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js @@ -135,7 +135,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -143,7 +143,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js index 33a42e5..e522f52 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js @@ -135,7 +135,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -143,7 +143,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js index 43f276e..f732226 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js @@ -165,7 +165,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Basic': props => - {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> + {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js index d5bac8c..a0172fa 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js @@ -72,7 +72,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Properties side panel with property items': props => - (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> + (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js index 113b28f..158ce7e 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js @@ -134,7 +134,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -142,7 +142,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js index 04eaf9a..1bc6eb1 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js @@ -1,7 +1,7 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo2 from '../../../../content/examples/./pfLogo2.svg'; +import pfLogo6 from '../../../../content/examples/./pfLogo6.svg'; import '../../../../content/examples/./catalogItemHeader.css'; const pageData = { "id": "Catalog item header", @@ -61,18 +61,16 @@ const pageData = { }; pageData.liveContext = { CatalogItemHeader, - pfLogo2 -}; -pageData.relativeImports = { - + pfLogo6 }; +pageData.relativeImports = "import 'content/examples/./catalogItemHeader.css';" pageData.examples = { 'Basic': props => - (\n \n)","title":"Basic","lang":"js"}}> + (\n \n)","title":"Basic","lang":"js"}}> , 'With vendor description': props => - (\n \n provided by Red Hat\n \n }\n />\n)","title":"With vendor description","lang":"js"}}> + (\n \n provided by Red Hat\n \n }\n />\n)","title":"With vendor description","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js index 32a099e..8590a99 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js @@ -3,7 +3,7 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon'; -import pfLogo2 from '../../../../content/examples/./pfLogo2.svg'; +import pfLogo6 from '../../../../content/examples/./pfLogo6.svg'; import '../../../../content/examples/./catalogTile.css'; const pageData = { "id": "Catalog tile", @@ -130,34 +130,32 @@ pageData.liveContext = { CatalogTileBadge, CogIcon, OutlinedCheckCircleIcon, - pfLogo2 -}; -pageData.relativeImports = { - + pfLogo6 }; +pageData.relativeImports = "import 'content/examples/./catalogTile.css';" pageData.examples = { 'Basic featured tile': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"Basic featured tile","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"Basic featured tile","lang":"js"}}> , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => - (\n \n \n \n ]}\n href=\"http://patternfly.org/v4\"\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"Link variant","lang":"js"}}> + (\n \n \n \n ]}\n href=\"http://patternfly.org/v4\"\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"Link variant","lang":"js"}}> , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n 'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => - (\n \n)","title":"With text badge","lang":"js"}}> + (\n \n)","title":"With text badge","lang":"js"}}> , 'With children instead of description': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n >\n This is a very, very long stetch of child text that should be not be truncated\n and illustrates how Flyers can add longer content to PatternFly 4 catalog tiles\n using the children prop. Cards usually truncate descriptions at three lines.\n Cards with a footer are truncated after one line. This has changed from PatternFly 3.\n Children can be of any length.\n \n)","title":"With children instead of description","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n >\n This is a very, very long stetch of child text that should be not be truncated\n and illustrates how Flyers can add longer content to PatternFly 4 catalog tiles\n using the children prop. Cards usually truncate descriptions at three lines.\n Cards with a footer are truncated after one line. This has changed from PatternFly 3.\n Children can be of any length.\n \n)","title":"With children instead of description","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js index 7859b3c..1c5a9a3 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -166,12 +166,10 @@ pageData.liveContext = { CcMastercardIcon, CcDinersClubIcon }; -pageData.relativeImports = { - -}; +pageData.relativeImports = "import 'content/examples/./filterSidePanel.css';" pageData.examples = { 'Basic': props => - {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> + {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index 0013820..6cfa62d 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -73,12 +73,10 @@ pageData.liveContext = { ExternalLinkAltIcon, GlobeIcon }; -pageData.relativeImports = { - -}; +pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';" pageData.examples = { 'Properties side panel with property items': props => - (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> + (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js index efe5ad1..6f3b28f 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js @@ -119,9 +119,7 @@ pageData.liveContext = { VerticalTabs, VerticalTabsTab }; -pageData.relativeImports = { - -}; +pageData.relativeImports = "import 'content/examples/./verticalTab.css';" pageData.examples = { 'Basic': props => {\n this.setState({ activeTabId: id });\n };\n }\n\n render() {\n const { restrictTabs, wrapStyle } = this.props;\n const { activeTabId } = this.state;\n\n const topLevelIds = ['all', 'one', 'two', 'three', 'four', 'five', 'six', 'seven'];\n\n const renderTab = (id, title, children, props) => {\n const childIds = React.Children.map(children, child => child.props.id);\n\n return (\n this.onActivateTab(id)}\n active={activeTabId === id}\n hasActiveDescendant={activeTabId.startsWith(id)}\n {...props}\n >\n {children && (\n \n {children}\n \n )}\n \n );\n };\n\n return (\n \n {renderTab('all', 'All', null, { shown: true })}\n {renderTab('one', 'Tab One', [\n renderTab('one-one', 'Tab One-One', [\n renderTab('one-one-one', 'About Modal', null, {href: \"../components/about-modal\"}),\n renderTab('one-one-two', 'Accordion', null, {href: \"../components/accordion\"}),\n renderTab('one-one-three', 'Redhat', null, {href: \"http://www.redhat.com\"})\n ]),\n renderTab('one-two', 'Tab One-Two', [\n renderTab('one-two-one', 'Tab One-Two-One'),\n renderTab('one-two-two', 'Tab One-Two-Two'),\n renderTab('one-two-three', 'Tab One-Two-Three')\n ]),\n renderTab('one-three', 'Tab One-Thee')\n ])}\n {renderTab('two', 'Tab Two', [\n renderTab('two-one', 'Tab Two-One'),\n renderTab('two-two', 'Tab Two-Two'),\n renderTab('two-three', 'Tab Two-Three')\n ])}\n {renderTab('three', 'Tab Three - Donec id elit non mi porta gravida at eget metus')}\n {renderTab('four', 'Tab Four')}\n {renderTab('five', 'Tab Five')}\n {renderTab('six', 'Tab Six')}\n {renderTab('seven', 'Tab Seven')}\n \n );\n }\n}","title":"Basic","lang":"js"}}> diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js index 5eb5aeb..7caf89b 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -1,25 +1,25 @@ module.exports = { - '/extensions/catalog-view/catalog-item-header/react': { - id: "Catalog item header", - title: "Catalog item header", - toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"With vendor description"}]], - examples: ["Basic","With vendor description"], + '/extensions/catalog-view/vertical-tabs/react': { + id: "Vertical tabs", + title: "Vertical tabs", + toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"}]], + examples: ["Basic"], section: "extensions", subsection: "Catalog view", source: "react", tabName: null, - Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-item-header/react/index" */ './extensions/catalog-view/catalog-item-header/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/vertical-tabs/react/index" */ './extensions/catalog-view/vertical-tabs/react') }, - '/extensions/catalog-view/catalog-tile/react': { - id: "Catalog tile", - title: "Catalog tile", - toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic featured tile"},{"text":"Basic with footer"},{"text":"Link variant"},{"text":"With multiple icon badges"},{"text":"With text badge"},{"text":"With children instead of description"}]], - examples: ["Basic featured tile","Basic with footer","Link variant","With multiple icon badges","With text badge","With children instead of description"], + '/extensions/catalog-view/properties-side-panel/react': { + id: "Properties side panel", + title: "Properties side panel", + toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Properties side panel with property items"}]], + examples: ["Properties side panel with property items"], section: "extensions", subsection: "Catalog view", source: "react", tabName: null, - Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-tile/react/index" */ './extensions/catalog-view/catalog-tile/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/properties-side-panel/react/index" */ './extensions/catalog-view/properties-side-panel/react') }, '/extensions/catalog-view/filter-side-panel/react': { id: "Filter side panel", @@ -32,26 +32,26 @@ module.exports = { tabName: null, Component: () => import(/* webpackChunkName: "extensions/catalog-view/filter-side-panel/react/index" */ './extensions/catalog-view/filter-side-panel/react') }, - '/extensions/catalog-view/properties-side-panel/react': { - id: "Properties side panel", - title: "Properties side panel", - toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Properties side panel with property items"}]], - examples: ["Properties side panel with property items"], + '/extensions/catalog-view/catalog-tile/react': { + id: "Catalog tile", + title: "Catalog tile", + toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic featured tile"},{"text":"Basic with footer"},{"text":"Link variant"},{"text":"With multiple icon badges"},{"text":"With text badge"},{"text":"With children instead of description"}]], + examples: ["Basic featured tile","Basic with footer","Link variant","With multiple icon badges","With text badge","With children instead of description"], section: "extensions", subsection: "Catalog view", source: "react", tabName: null, - Component: () => import(/* webpackChunkName: "extensions/catalog-view/properties-side-panel/react/index" */ './extensions/catalog-view/properties-side-panel/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-tile/react/index" */ './extensions/catalog-view/catalog-tile/react') }, - '/extensions/catalog-view/vertical-tabs/react': { - id: "Vertical tabs", - title: "Vertical tabs", - toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"}]], - examples: ["Basic"], + '/extensions/catalog-view/catalog-item-header/react': { + id: "Catalog item header", + title: "Catalog item header", + toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"},{"text":"With vendor description"}]], + examples: ["Basic","With vendor description"], section: "extensions", subsection: "Catalog view", source: "react", tabName: null, - Component: () => import(/* webpackChunkName: "extensions/catalog-view/vertical-tabs/react/index" */ './extensions/catalog-view/vertical-tabs/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-item-header/react/index" */ './extensions/catalog-view/catalog-item-header/react') } }; \ No newline at end of file diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js index a3b8bde..404074c 100644 --- a/packages/module/patternfly-docs/pages/index.js +++ b/packages/module/patternfly-docs/pages/index.js @@ -10,7 +10,7 @@ const centerStyle = { const IndexPage = () => { return ( - +
My extension docs diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss index 7b816e0..1cfb27e 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss @@ -20,6 +20,6 @@ } .catalog-item-header-pf-subtitle { - color: var(--pf-v5-global--Color--200); + color: var(--pf-v6-global--Color--200); margin-bottom: 0; } diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss index 8f790a9..b62cb03 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss @@ -1,6 +1,6 @@ .catalog-tile-pf { &.featured { - border-top: 2px solid var(--pf-v5-global--active-color--100); + border-top: 2px solid var(--pf-v6-global--active-color--100); } &:active, @@ -11,7 +11,7 @@ text-decoration: none; } - .pf-v5-c-card__actions { + .pf-v6-c-card__actions { padding-left: 5px; } } @@ -27,7 +27,7 @@ } .catalog-tile-pf-subtitle { - color: var(--pf-v5-global--Color--200); + color: var(--pf-v6-global--Color--200); font-size: 13px; font-weight: initial; diff --git a/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss b/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss index 0ef53f8..94676eb 100644 --- a/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss +++ b/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss @@ -30,7 +30,7 @@ margin-top: 0; } - .pf-v5-c-check__label { + .pf-v6-c-check__label { min-height: 23px; } diff --git a/packages/module/sass/react-catalog-view-extension/_variables.scss b/packages/module/sass/react-catalog-view-extension/_variables.scss index a104fff..ac4a11c 100644 --- a/packages/module/sass/react-catalog-view-extension/_variables.scss +++ b/packages/module/sass/react-catalog-view-extension/_variables.scss @@ -1,5 +1,5 @@ -$vertical-tab-pf-color: var(--pf-v5-global--Color--100) !default; -$vertical-tab-pf-active-color: var(--pf-v5-global--active-color--100) !default; +$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default; +$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default; :root { --vertical-tab-pf-color: #{$vertical-tab-pf-color}; diff --git a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx index 87963ec..8365083 100644 --- a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx @@ -28,7 +28,7 @@ export const CatalogTileBadge: React.FunctionComponent<CatalogTileBadgeProps> = <Tooltip id={id} content={title}> <span className={classes} {...props}> {children} - <span className="pf-v5-u-screen-reader">{title}</span> + <span className="pf-v6-u-screen-reader">{title}</span> </span> </Tooltip> </React.Fragment> diff --git a/yarn.lock b/yarn.lock index 0678fed..2aad495 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1605,6 +1605,20 @@ resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-2.0.0-next.8.tgz#66ecc27b78e07a3ea2eb1a8fc5a99dfa0ba96690" integrity sha512-T0BcXmNzEunFkuxrO8BFw44htvTPuAoKbLvTG41otyZBDV1Rs+JMddcUuaP5vXpTWtgD3grhcrPEwyx88RUumQ== +"@monaco-editor/loader@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558" + integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg== + dependencies: + state-local "^1.0.6" + +"@monaco-editor/react@^4.6.0": + version "4.6.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119" + integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw== + dependencies: + "@monaco-editor/loader" "^1.4.0" + "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": version "5.1.1-v1" resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129" @@ -1633,10 +1647,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@patternfly/ast-helpers@^1.3.8": - version "1.3.8" - resolved "https://registry.npmjs.org/@patternfly/ast-helpers/-/ast-helpers-1.3.8.tgz#2575b67f3a051e21fff05d38236771de5939622c" - integrity sha512-68cpY/Q/ZIjWzs/pDiG7Jg2BhuPiA36vAlF9wi7qdGaFJTrZGmaosm7whbzpL0TFJZFKDmFYID50EnYzHZOI8w== +"@patternfly/ast-helpers@^1.4.0-alpha.5": + version "1.4.0-alpha.7" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.7.tgz#518f6b4183d0bbb7c0392c964813dbce3b0a0398" + integrity sha512-rG1ObLfPAtVAlac+J1IuvlRDCOLPKKtXb81CCM9Il+haAZXxNOtT33C+G37EFx2hlcbZBLqOVgr7IuJxZUKblg== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -1644,10 +1658,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^5.3.8": - version "5.3.8" - resolved "https://registry.npmjs.org/@patternfly/documentation-framework/-/documentation-framework-5.3.8.tgz#4eb7dcd8b6e7c3a8b1c4680b1d43d45db114201f" - integrity sha512-RiRaC183RdzbUDcpgkT9ekMcBFLhiBfHnByJMgwyveqR10qcGDezT59Pe3bbHSWP+9ly3eCRIkgGHh8rVkfBQg== +"@patternfly/documentation-framework@6.0.0-alpha.16": + version "6.0.0-alpha.16" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.16.tgz#e679e30d979ac587a4479f6a16ac95bba43313fc" + integrity sha512-DAcVCuh+KGx2lfGJG+i2B8cp3tp2XUbGnT71zySu0jzya/7Cs7d5D4yc7BlSTZ7ATD1dFk1paVLmZys6FfO1tw== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12" @@ -1657,7 +1671,7 @@ "@babel/plugin-transform-react-jsx" "7.17.12" "@babel/preset-env" "7.18.2" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.3.8" + "@patternfly/ast-helpers" "^1.4.0-alpha.5" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "9.1.2" @@ -1673,7 +1687,7 @@ file-loader "6.2.0" file-saver "1.3.8" fs-extra "9.0.1" - glob "8.0.3" + glob "9.0.0" handlebars "4.7.7" hast-to-hyperscript "9.0.0" hast-util-to-text "2.0.0" @@ -1688,10 +1702,10 @@ null-loader "4.0.1" parse-entities "2.0.0" path-browserify "1.0.1" - postcss "7.0.32" + postcss "8.4.32" postcss-loader "7.1.0" process "^0.11.10" - puppeteer "14.3.0" + puppeteer "19.11.1" puppeteer-cluster "0.23.0" react-docgen "5.3.1" react-monaco-editor "^0.51.0" @@ -1703,10 +1717,10 @@ remark-parse "8.0.3" remark-squeeze-paragraphs "4.0.0" responsive-loader "3.1.2" - sharp "0.30.6" + sharp "0.32.6" style-to-object "0.3.0" to-vfile "6.1.0" - typedoc "0.22.X" + typedoc "0.23.0" typescript "4.3.5" unified "9.1.0" unist-util-remove "2.0.0" @@ -1733,66 +1747,98 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@^6.0.0-alpha.21": - version "6.0.0-alpha.23" - resolved "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.0.0-alpha.23.tgz#75d96c445c08200ffcd74aebdc221334f1d0cc13" - integrity sha512-h1BRJkZkdTRzg0w1Q66axH1R3hEQM/f2UfKg4H/r8JmP8sRgpshOx2eSMfAask+dqWMJIM/r82fCsNxaDLW/9Q== +"@patternfly/patternfly@6.0.0-alpha.107": + version "6.0.0-alpha.107" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.107.tgz#cf4e4219c9d555c49e612a182812c49df1568dc6" + integrity sha512-gsF0u2RjncgvkIfCK1/UI+U92pS+81oujhnu8HBRiOdwVPxCV20/nWQnbyVQb08vuTBq28cGtWjm+UKKN86K3w== -"@patternfly/react-code-editor@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.2.tgz#96a03ab9218a20fcf63f96f2a1c981f722fe5500" - integrity sha512-YN10UNzVldVk/k93ndX+lXhPQNsh5Psgn+FGTYLMLN8ZlgjtwOPCxWmwj6eseYEvGCdA5QmaN8UjDCY089ieOg== +"@patternfly/react-code-editor@6.0.0-alpha.47": + version "6.0.0-alpha.47" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.47.tgz#bf0a3d5a8b362de6042c046a9eb05f7a64948404" + integrity sha512-d9QOoj3xjHnPaxnAVtDyTrDihxGkF9AHhs+9NlHHsK4/Nu2Qc4MVFGp3lpmJ0PiVx0k1Anv2FyCg4AKBt9hR+w== dependencies: - "@patternfly/react-core" "^6.0.0-alpha.2" - "@patternfly/react-icons" "^6.0.0-alpha.2" - "@patternfly/react-styles" "^6.0.0-alpha.2" + "@monaco-editor/react" "^4.6.0" + "@patternfly/react-core" "^6.0.0-alpha.47" + "@patternfly/react-icons" "^6.0.0-alpha.17" + "@patternfly/react-styles" "^6.0.0-alpha.17" react-dropzone "14.2.3" tslib "^2.5.0" -"@patternfly/react-core@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.2.tgz#038f5d9f32536bba057c4a0c3f80b31eb7e0bd9b" - integrity sha512-1AnOI3ZmjBtAh97+aDNCmEgE/7LvUGu3MB3BYJkYFWXz8CIKCrurc3k3e3gCAVdg0oNXhcoSpUsjXnS4/e7qkA== +"@patternfly/react-core@6.0.0-alpha.47": + version "6.0.0-alpha.47" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.47.tgz#e738e808e1a11880a157fa00253909b8a29dd160" + integrity sha512-ra2v9I+UaLww+PYH+/38K5vAXItdt0tZ7UUS+rHJL2tDg31hHBlySlMkLd9cdA4DfzyX93VRpTpPS8vHiV/JnQ== dependencies: - "@patternfly/react-icons" "^6.0.0-alpha.2" - "@patternfly/react-styles" "^6.0.0-alpha.2" - "@patternfly/react-tokens" "^6.0.0-alpha.2" + "@patternfly/react-icons" "^6.0.0-alpha.17" + "@patternfly/react-styles" "^6.0.0-alpha.17" + "@patternfly/react-tokens" "^6.0.0-alpha.17" focus-trap "7.5.2" react-dropzone "^14.2.3" tslib "^2.5.0" -"@patternfly/react-icons@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.2.tgz#7555a1410a6038c7c59f2f8d515adec572392f86" - integrity sha512-OGBen2niZ5S88rY2DVeO+P06oaZP5cO5MmdgW7iOzhVuyHkUS+IB15bN7+RxO9PJkEpfMQz0Ui/rQaXFGxLaSw== - -"@patternfly/react-styles@6.0.0-alpha.2", "@patternfly/react-styles@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.2.tgz#0d2973b1c8e42e2f35f208874f12c754f0c2a8b0" - integrity sha512-39VT5sKQdxck48mjSgbiL9gn6SaaVuYrlqQcrkpRB4F7qk0rJdVAdjwS/PliRjsb/Ywz7xG9UWK/D/1OoQEf2A== - -"@patternfly/react-table@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-alpha.2.tgz#c454750020518ad8f234d8f630c26f4114c0e249" - integrity sha512-jbyC/JS4F8NifKhdQ7N08ncD2XUoswjDrORoi354Vw+luvS1e+OlcPTCniJZkJP4YlkdeKROTHHe1aJle80BWw== - dependencies: - "@patternfly/react-core" "^6.0.0-alpha.2" - "@patternfly/react-icons" "^6.0.0-alpha.2" - "@patternfly/react-styles" "^6.0.0-alpha.2" - "@patternfly/react-tokens" "^6.0.0-alpha.2" +"@patternfly/react-core@^6.0.0-alpha.47": + version "6.0.0-alpha.48" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.48.tgz#0e80b67a2954b266c224bf2e6d6aec440d4c9e13" + integrity sha512-zKcx1Z5Vzb9Vxa42jDhmW+Gr553jV12dbFXnDyp8KWBgosQo8XApQmMTlFHL6VXOAiKAmNZy0/4ugcEj7JxWgQ== + dependencies: + "@patternfly/react-icons" "^6.0.0-alpha.18" + "@patternfly/react-styles" "^6.0.0-alpha.18" + "@patternfly/react-tokens" "^6.0.0-alpha.18" + focus-trap "7.5.2" + react-dropzone "^14.2.3" + tslib "^2.5.0" + +"@patternfly/react-icons@^6.0.0-alpha.17", "@patternfly/react-icons@^6.0.0-alpha.18": + version "6.0.0-alpha.18" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.18.tgz#b066cdfbe3d170813b0dffc63f12d0bf6c33b23c" + integrity sha512-qjE+z64knS5w/wv2F/tIGnbfgFGeUz74aCgY7qDHui/6thTyG9wjVEs9TaTSw2QE9TpUY2jmClpUhlTnpe7c2Q== + +"@patternfly/react-styles@6.0.0-alpha.17": + version "6.0.0-alpha.17" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.17.tgz#61977015f1af27b876c898ab1b361ec244cf5f96" + integrity sha512-DrYjqCxbatmvjCC4dutH6kOBsB5ymT8aFuXrJN0bzScyA5l+GN6WejKq0m0/DOGme62G1Dz/4v1etl+qWOgXkA== + +"@patternfly/react-styles@^6.0.0-alpha.17", "@patternfly/react-styles@^6.0.0-alpha.18": + version "6.0.0-alpha.18" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.18.tgz#3f0b2335b45a2173f270880eb1ccf42c82ba2d4f" + integrity sha512-YC5QRDUFZ7+/vzN7n4MxyEpVn+yPD/JkOgTMBn2PkqVfKEB+swpv+xSnSMrMJL2Kl4TCsGRk15ZCv26XyukKhA== + +"@patternfly/react-table@6.0.0-alpha.47": + version "6.0.0-alpha.47" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.47.tgz#373adf00231e20498d5a7fd41d6abd5cb3445023" + integrity sha512-hyXVPMcAHcBmk61ppDnBlYUKRfVflj17A3RWW0wQZald1bhPvGKziJwsY46Ket03nxJSjblCr/GPtvnqTWIIaw== + dependencies: + "@patternfly/react-core" "^6.0.0-alpha.47" + "@patternfly/react-icons" "^6.0.0-alpha.17" + "@patternfly/react-styles" "^6.0.0-alpha.17" + "@patternfly/react-tokens" "^6.0.0-alpha.17" lodash "^4.17.19" tslib "^2.5.0" -"@patternfly/react-tokens@^6.0.0-alpha.2": - version "6.0.0-alpha.2" - resolved "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.2.tgz#d0509f67638fa244ae91175b0e308f7935b4ec91" - integrity sha512-A4CN2WLUzjpHD2WAOexYG9X+yy5fowZXmUpLX87+Gk+sl5ziYOFY661l6b+ZgWmvNZ+g58K75JKb8Myu3bx7Ow== +"@patternfly/react-tokens@^6.0.0-alpha.17", "@patternfly/react-tokens@^6.0.0-alpha.18": + version "6.0.0-alpha.18" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.18.tgz#29ee0699f3502d62640fbd5b0a2c005a3c0d1b0e" + integrity sha512-qPz/d3iiUtnWN1oIgKUdDlbKqDX3GCzJX8rYqSOc7ytf7qHVZaWmmhNjMS8OnnIwaML7T9u27yDlnac7r67i+g== "@polka/url@^1.0.0-next.20": version "1.0.0-next.21" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== +"@puppeteer/browsers@0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-0.5.0.tgz#1a1ee454b84a986b937ca2d93146f25a3fe8b670" + integrity sha512-Uw6oB7VvmPRLE4iKsjuOh8zgDabhNX67dzo8U/BB0f9527qx+4eeUs+korU98OhG5C4ubg7ufBgVi63XYwS6TQ== + dependencies: + debug "4.3.4" + extract-zip "2.0.1" + https-proxy-agent "5.0.1" + progress "2.0.3" + proxy-from-env "1.1.0" + tar-fs "2.1.1" + unbzip2-stream "1.4.3" + yargs "17.7.1" + "@reach/router@npm:@gatsbyjs/reach-router@1.3.9": version "1.3.9" resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.9.tgz#305c3c4c5041f27e53fc33e344a08ee2c4b985af" @@ -2929,6 +2975,11 @@ axobject-query@^2.2.0: resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA== +b4a@^1.6.4: + version "1.6.6" + resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.6.tgz#a4cc349a3851987c3c4ac2d7785c18744f6da9ba" + integrity sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg== + babel-jest@^29.2.2: version "29.2.2" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.2.2.tgz#2c15abd8c2081293c9c3f4f80a4ed1d51542fee5" @@ -3046,6 +3097,33 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +bare-events@^2.0.0, bare-events@^2.2.0: + version "2.2.2" + resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.2.2.tgz#a98a41841f98b2efe7ecc5c5468814469b018078" + integrity sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ== + +bare-fs@^2.1.1: + version "2.2.2" + resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.2.2.tgz#286bf54cc6f15f613bee6bb26f0c61c79fb14f06" + integrity sha512-X9IqgvyB0/VA5OZJyb5ZstoN62AzD7YxVGog13kkfYWYqJYcK0kcqLZ6TrmH5qr4/8//ejVcX4x/a0UvaogXmA== + dependencies: + bare-events "^2.0.0" + bare-os "^2.0.0" + bare-path "^2.0.0" + streamx "^2.13.0" + +bare-os@^2.0.0, bare-os@^2.1.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.2.1.tgz#c94a258c7a408ca6766399e44675136c0964913d" + integrity sha512-OwPyHgBBMkhC29Hl3O4/YfxW9n7mdTr2+SsO29XBWKKJsbgj3mnorDB80r5TiCQgQstgE5ga1qNYrpes6NvX2w== + +bare-path@^2.0.0, bare-path@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/bare-path/-/bare-path-2.1.0.tgz#830f17fd39842813ca77d211ebbabe238a88cb4c" + integrity sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw== + dependencies: + bare-os "^2.1.0" + base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -3492,6 +3570,13 @@ chromedriver@^101.0.0: proxy-from-env "^1.1.0" tcp-port-used "^1.0.1" +chromium-bidi@0.4.7: + version "0.4.7" + resolved "https://registry.yarnpkg.com/chromium-bidi/-/chromium-bidi-0.4.7.tgz#4c022c2b0fb1d1c9b571fadf373042160e71d236" + integrity sha512-6+mJuFXwTMU6I3vYLs6IL8A1DyQTPjCfIL971X0aMPVGRbGnNfl6i6Cl0NMbxi2bRYLGESt9T2ZIMRM5PAEcIQ== + dependencies: + mitt "3.0.0" + ci-info@^1.5.0: version "1.6.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497" @@ -3887,7 +3972,7 @@ core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== -cosmiconfig@^8.0.0: +cosmiconfig@8.1.3, cosmiconfig@^8.0.0: version "8.1.3" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.3.tgz#0e614a118fcc2d9e5afc2f87d53cd09931015689" integrity sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw== @@ -4203,11 +4288,16 @@ detab@2.0.3: dependencies: repeat-string "^1.5.4" -detect-libc@^2.0.0, detect-libc@^2.0.1: +detect-libc@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd" integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w== +detect-libc@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700" + integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw== + detect-newline@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" @@ -4223,6 +4313,11 @@ devtools-protocol@0.0.1001819: resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1001819.tgz#0a98f44cefdb02cc684f3d5e6bd898a1690231d9" integrity sha512-G6OsIFnv/rDyxSqBa2lDLR6thp9oJioLsb2Gl+LbQlyoA9/OBAkrTU9jiCcQ8Pnh7z4d6slDiLaogR5hzgJLmQ== +devtools-protocol@0.0.1107588: + version "0.0.1107588" + resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1107588.tgz#f8cac707840b97cc30b029359341bcbbb0ad8ffa" + integrity sha512-yIR+pG9x65Xko7bErCUSQaDLrO/P1p3JUzEk7JCU4DowPcGHkTGUGQapcfcLc4qj0UaALwZ+cr0riFgiqpixcg== + diff-sequences@^29.2.0: version "29.2.0" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.2.0.tgz#4c55b5b40706c7b5d2c5c75999a50c56d214e8f6" @@ -5155,6 +5250,11 @@ fast-diff@^1.1.1: resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== +fast-fifo@^1.1.0, fast-fifo@^1.2.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c" + integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ== + fast-glob@^3.2.11, fast-glob@^3.2.9: version "3.2.12" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" @@ -5605,16 +5705,15 @@ glob-to-regexp@^0.4.1: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@8.0.3: - version "8.0.3" - resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e" - integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ== +glob@9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-9.0.0.tgz#8940d5f3225ca022931bf129cae13fc5f284aab7" + integrity sha512-7rdoWzT8/4f1yEe/cMdBug2lmzmYMYU9h4RNNiavPHajhcxt7kkxrOvwSnIPkZMjLQb9BXv7nFoKmTnPPklMyA== dependencies: fs.realpath "^1.0.0" - inflight "^1.0.4" - inherits "2" - minimatch "^5.0.1" - once "^1.3.0" + minimatch "^7.3.0" + minipass "^4.2.4" + path-scurry "^1.5.0" glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: version "7.2.3" @@ -5628,17 +5727,6 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^8.0.3: - version "8.1.0" - resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e" - integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ== - dependencies: - fs.realpath "^1.0.0" - inflight "^1.0.4" - inherits "2" - minimatch "^5.0.1" - once "^1.3.0" - global-dirs@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445" @@ -7348,6 +7436,11 @@ lowercase-keys@^1.0.0: resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f" integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA== +lru-cache@^10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3" + integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q== + lru-cache@^4.0.1, lru-cache@^4.1.1: version "4.1.5" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" @@ -7581,13 +7674,6 @@ minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch dependencies: brace-expansion "^1.1.7" -minimatch@^5.0.1: - version "5.1.0" - resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7" - integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg== - dependencies: - brace-expansion "^2.0.1" - minimatch@^5.1.0: version "5.1.6" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96" @@ -7595,11 +7681,28 @@ minimatch@^5.1.0: dependencies: brace-expansion "^2.0.1" +minimatch@^7.3.0: + version "7.4.6" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.6.tgz#845d6f254d8f4a5e4fd6baf44d5f10c8448365fb" + integrity sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw== + dependencies: + brace-expansion "^2.0.1" + minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6: version "1.2.7" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18" integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== +minipass@^4.2.4: + version "4.2.8" + resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a" + integrity sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ== + +"minipass@^5.0.0 || ^6.0.2 || ^7.0.0": + version "7.0.4" + resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c" + integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ== + mississippi@^1.2.0, mississippi@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.1.tgz#2a8bb465e86550ac8b36a7b6f45599171d78671e" @@ -7632,6 +7735,11 @@ mississippi@^2.0.0: stream-each "^1.1.0" through2 "^2.0.0" +mitt@3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd" + integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ== + mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3: version "0.5.3" resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113" @@ -7711,6 +7819,11 @@ nanoid@^3.3.6: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== +nanoid@^3.3.7: + version "3.3.7" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" + integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + napi-build-utils@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806" @@ -7751,10 +7864,10 @@ node-abi@^3.3.0: dependencies: semver "^7.3.5" -node-addon-api@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.0.0.tgz#7d7e6f9ef89043befdb20c1989c905ebde18c501" - integrity sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA== +node-addon-api@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76" + integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA== node-dir@^0.1.10: version "0.1.17" @@ -8314,6 +8427,14 @@ path-parse@^1.0.7: resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== +path-scurry@^1.5.0: + version "1.10.2" + resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.2.tgz#8f6357eb1239d5fa1da8b9f70e9c080675458ba7" + integrity sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA== + dependencies: + lru-cache "^10.2.0" + minipass "^5.0.0 || ^6.0.2 || ^7.0.0" + path-to-regexp@0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" @@ -8446,14 +8567,14 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@7.0.32: - version "7.0.32" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d" - integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw== +postcss@8.4.32: + version "8.4.32" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9" + integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw== dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" + nanoid "^3.3.7" + picocolors "^1.0.0" + source-map-js "^1.0.2" postcss@^7.0.32: version "7.0.39" @@ -8472,10 +8593,10 @@ postcss@^8.4.19: picocolors "^1.0.0" source-map-js "^1.0.2" -prebuild-install@^7.1.0: - version "7.1.1" - resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45" - integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw== +prebuild-install@^7.1.1: + version "7.1.2" + resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.2.tgz#a5fd9986f5a6251fbc47e1e5c65de71e68c0a056" + integrity sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ== dependencies: detect-libc "^2.0.0" expand-template "^2.0.3" @@ -8668,23 +8789,34 @@ puppeteer-cluster@0.23.0, puppeteer-cluster@^0.23.0: dependencies: debug "^4.3.3" -puppeteer@14.3.0: - version "14.3.0" - resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-14.3.0.tgz#0099cabf97767461aca02486313e84fcfc776af6" - integrity sha512-pDtg1+vyw1UPIhUjh2/VW1HUdQnaZJHfMacrJciR3AVm+PBiqdCEcFeFb3UJ/CDEQlHOClm3/WFa7IjY25zIGg== +puppeteer-core@19.11.1: + version "19.11.1" + resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-19.11.1.tgz#4c63d7a0a6cd268ff054ebcac315b646eee32667" + integrity sha512-qcuC2Uf0Fwdj9wNtaTZ2OvYRraXpAK+puwwVW8ofOhOgLPZyz1c68tsorfIZyCUOpyBisjr+xByu7BMbEYMepA== dependencies: + "@puppeteer/browsers" "0.5.0" + chromium-bidi "0.4.7" cross-fetch "3.1.5" debug "4.3.4" - devtools-protocol "0.0.1001819" + devtools-protocol "0.0.1107588" extract-zip "2.0.1" https-proxy-agent "5.0.1" - pkg-dir "4.2.0" - progress "2.0.3" proxy-from-env "1.1.0" - rimraf "3.0.2" tar-fs "2.1.1" unbzip2-stream "1.4.3" - ws "8.7.0" + ws "8.13.0" + +puppeteer@19.11.1: + version "19.11.1" + resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-19.11.1.tgz#bb75d518e87b0b4f6ef9bad1ea7e9d1cdcd18a5d" + integrity sha512-39olGaX2djYUdhaQQHDZ0T0GwEp+5f9UB9HmEP0qHfdQHIq0xGQZuAZ5TLnJIc/88SrPLpEflPC+xUqOTv3c5g== + dependencies: + "@puppeteer/browsers" "0.5.0" + cosmiconfig "8.1.3" + https-proxy-agent "5.0.1" + progress "2.0.3" + proxy-from-env "1.1.0" + puppeteer-core "19.11.1" puppeteer@^14.2.0: version "14.4.1" @@ -8728,6 +8860,11 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +queue-tick@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142" + integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag== + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -9404,6 +9541,13 @@ semver@^7.3.8: dependencies: lru-cache "^6.0.0" +semver@^7.5.4: + version "7.6.0" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d" + integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg== + dependencies: + lru-cache "^6.0.0" + send@0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" @@ -9506,18 +9650,18 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -sharp@0.30.6: - version "0.30.6" - resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.6.tgz#02264e9826b5f1577509f70bb627716099778873" - integrity sha512-lSdVxFxcndzcXggDrak6ozdGJgmIgES9YVZWtAFrwi+a/H5vModaf51TghBtMPw+71sLxUsTy2j+aB7qLIODQg== +sharp@0.32.6: + version "0.32.6" + resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a" + integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w== dependencies: color "^4.2.3" - detect-libc "^2.0.1" - node-addon-api "^5.0.0" - prebuild-install "^7.1.0" - semver "^7.3.7" + detect-libc "^2.0.2" + node-addon-api "^6.1.0" + prebuild-install "^7.1.1" + semver "^7.5.4" simple-get "^4.0.1" - tar-fs "^2.1.1" + tar-fs "^3.0.4" tunnel-agent "^0.6.0" shebang-command@^1.2.0: @@ -9787,6 +9931,11 @@ stack-utils@^2.0.3: dependencies: escape-string-regexp "^2.0.0" +state-local@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5" + integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w== + state-toggle@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe" @@ -9815,6 +9964,16 @@ stream-shift@^1.0.0: resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d" integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ== +streamx@^2.13.0, streamx@^2.15.0: + version "2.16.1" + resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.16.1.tgz#2b311bd34832f08aa6bb4d6a80297c9caef89614" + integrity sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ== + dependencies: + fast-fifo "^1.1.0" + queue-tick "^1.0.1" + optionalDependencies: + bare-events "^2.2.0" + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -10033,7 +10192,7 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0: resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== -tar-fs@2.1.1, tar-fs@^2.0.0, tar-fs@^2.1.1: +tar-fs@2.1.1, tar-fs@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784" integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng== @@ -10053,6 +10212,17 @@ tar-fs@^1.15.3: pump "^1.0.0" tar-stream "^1.1.2" +tar-fs@^3.0.4: + version "3.0.5" + resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.5.tgz#f954d77767e4e6edf973384e1eb95f8f81d64ed9" + integrity sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg== + dependencies: + pump "^3.0.0" + tar-stream "^3.1.5" + optionalDependencies: + bare-fs "^2.1.1" + bare-path "^2.1.0" + tar-stream@^1.1.2, tar-stream@^1.5.4: version "1.6.2" resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555" @@ -10077,6 +10247,15 @@ tar-stream@^2.1.4: inherits "^2.0.3" readable-stream "^3.1.1" +tar-stream@^3.1.5: + version "3.1.7" + resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-3.1.7.tgz#24b3fb5eabada19fe7338ed6d26e5f7c482e792b" + integrity sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ== + dependencies: + b4a "^1.6.4" + fast-fifo "^1.2.0" + streamx "^2.15.0" + tcp-port-used@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.2.tgz#9652b7436eb1f4cfae111c79b558a25769f6faea" @@ -10330,12 +10509,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typedoc@0.22.X: - version "0.22.18" - resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.22.18.tgz#1d000c33b66b88fd8cdfea14a26113a83b7e6591" - integrity sha512-NK9RlLhRUGMvc6Rw5USEYgT4DVAUFk7IF7Q6MYfpJ88KnTZP7EneEa4RcP+tX1auAcz7QT1Iy0bUSZBYYHdoyA== +typedoc@0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.23.0.tgz#dfb61f455d0111c206573de9bd48fd25b620d958" + integrity sha512-pcVvGbxRJDPuXKt7VV9gGMhR36kJc4IlQOnLAqfPQWujzHM9C4hW7gLjfpbXJXuwXkJehuFhPMOinga8mYFcjA== dependencies: - glob "^8.0.3" lunr "^2.3.9" marked "^4.0.16" minimatch "^5.1.0" @@ -11121,6 +11299,11 @@ write-file-atomic@^4.0.1: imurmurhash "^0.1.4" signal-exit "^3.0.7" +ws@8.13.0, ws@^8.13.0: + version "8.13.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" + integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== + ws@8.7.0: version "8.7.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.7.0.tgz#eaf9d874b433aa00c0e0d8752532444875db3957" @@ -11131,11 +11314,6 @@ ws@^7.3.1: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== -ws@^8.13.0: - version "8.13.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" - integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== - ws@^8.9.0: version "8.10.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.10.0.tgz#00a28c09dfb76eae4eb45c3b565f771d6951aa51" @@ -11211,11 +11389,24 @@ yargs-parser@^13.1.2: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^21.0.0: +yargs-parser@^21.0.0, yargs-parser@^21.1.1: version "21.1.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35" integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== +yargs@17.7.1: + version "17.7.1" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.1.tgz#34a77645201d1a8fc5213ace787c220eabbd0967" + integrity sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw== + dependencies: + cliui "^8.0.1" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.3" + y18n "^5.0.5" + yargs-parser "^21.1.1" + yargs@^13.3.0: version "13.3.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" From 38abbf695191239cfb9235fecace5922e88360df Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 29 Mar 2024 10:29:59 -0400 Subject: [PATCH 03/19] Fix logo path --- .../patternfly-docs/content/examples/CatalogItemHeader.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md index facb7e2..ac7767e 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md +++ b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md @@ -19,7 +19,7 @@ Note: Catalog item header lives in its own package at [`@patternfly/react-catalo ```js import React from 'react'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo6 from './examples/pfLogo2.svg'; +import pfLogo6 from './examples/pfLogo6.svg'; <CatalogItemHeader iconImg={pfLogo6} @@ -31,7 +31,7 @@ import pfLogo6 from './examples/pfLogo2.svg'; ```js import React from 'react'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; -import pfLogo6 from './examples/pfLogo2.svg'; +import pfLogo6 from './examples/pfLogo6.svg'; <CatalogItemHeader iconImg={pfLogo6} From 852b12fd0042754019dc27a22fd3ebcc7f6bdda6 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 29 Mar 2024 10:55:02 -0400 Subject: [PATCH 04/19] Update node version in github actions --- .github/workflows/build-lint-test.yml | 2 +- .github/workflows/promote.yml | 2 +- .github/workflows/release.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index 728e743..929d4be 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -130,7 +130,7 @@ jobs: fi - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: '18' - uses: actions/cache@v2 id: yarn-cache name: Cache npm deps diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml index d42455c..77793d2 100644 --- a/.github/workflows/promote.yml +++ b/.github/workflows/promote.yml @@ -17,7 +17,7 @@ jobs: run: yarn install --frozen-lockfile && yarn build - uses: actions/setup-node@v3 with: - node-version: '16.x' + node-version: '18.x' registry-url: 'https://registry.npmjs.org' - name: GitHub Tag Name example run: | diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2e62110..a4cc4bb 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -17,7 +17,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: '18' - uses: actions/cache@v2 id: yarn-cache name: Cache npm deps From 131d72b7b48ac7bde7e0e119fbf0326c1d67cfea Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 29 Mar 2024 11:07:20 -0400 Subject: [PATCH 05/19] Missed a few node versions --- .github/workflows/build-lint-test.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index 929d4be..5cb7952 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -16,7 +16,7 @@ jobs: fi - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: '18' - uses: actions/cache@v2 id: yarn-cache name: Cache npm deps @@ -52,7 +52,7 @@ jobs: fi - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: '18' - uses: actions/cache@v2 id: yarn-cache name: Cache npm deps @@ -89,7 +89,7 @@ jobs: fi - uses: actions/setup-node@v1 with: - node-version: '14' + node-version: '18' - uses: actions/cache@v2 id: yarn-cache name: Cache npm deps From d16392757591161e8d05b1feecc3803036423aef Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 29 Mar 2024 11:32:33 -0400 Subject: [PATCH 06/19] Update snapshots --- .../catalog-view/catalog-item-header/react.js | 4 +- .../__snapshots__/CatalogTile.test.tsx.snap | 102 +++++++++--------- .../PropertiesSidePanel.test.tsx.snap | 6 +- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js index 1bc6eb1..2cef118 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js @@ -66,11 +66,11 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./catalogItemHeader.css';" pageData.examples = { 'Basic': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';\nimport pfLogo6 from './examples/pfLogo2.svg';\n\nconst Basic = () => (\n <CatalogItemHeader\n iconImg={pfLogo6}\n title=\"PatternFly\"\n />\n)","title":"Basic","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';\nimport pfLogo6 from './examples/pfLogo6.svg';\n\nconst Basic = () => (\n <CatalogItemHeader\n iconImg={pfLogo6}\n title=\"PatternFly\"\n />\n)","title":"Basic","lang":"js"}}> </Example>, 'With vendor description': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';\nimport pfLogo6 from './examples/pfLogo2.svg';\n\nconst WithVendorDescription = () => (\n <CatalogItemHeader\n iconImg={pfLogo6}\n title=\"Patternfly-React\"\n vendor={\n <span>\n provided by <a style={{ textDecoration: 'underline' }}href=\"http://redhat.com\">Red Hat</a>\n </span>\n }\n />\n)","title":"With vendor description","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';\nimport pfLogo6 from './examples/pfLogo6.svg';\n\nconst WithVendorDescription = () => (\n <CatalogItemHeader\n iconImg={pfLogo6}\n title=\"Patternfly-React\"\n vendor={\n <span>\n provided by <a style={{ textDecoration: 'underline' }}href=\"http://redhat.com\">Red Hat</a>\n </span>\n }\n />\n)","title":"With vendor description","lang":"js"}}> </Example> }; diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index b4ce300..d21310d 100644 --- a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CatalogTile href renders properly 1`] = ` <DocumentFragment> <a - class="pf-v5-c-card catalog-tile-pf featured" + class="pf-v6-c-card catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-6" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -11,10 +11,10 @@ exports[`CatalogTile href renders properly 1`] = ` id="test-href" > <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="test-href-title" > <div @@ -30,7 +30,7 @@ exports[`CatalogTile href renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__body catalog-tile-pf-body" + class="pf-v6-c-card__body catalog-tile-pf-body" > <div class="catalog-tile-pf-description" @@ -50,7 +50,7 @@ exports[`CatalogTile renders properly 1`] = ` <div> <div> <div - class="pf-v5-c-card catalog-tile-pf featured" + class="pf-v6-c-card catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-1" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -58,10 +58,10 @@ exports[`CatalogTile renders properly 1`] = ` id="single-badge-test" > <div - class="pf-v5-c-card__header" + class="pf-v6-c-card__header" > <div - class="pf-v5-c-card__actions" + class="pf-v6-c-card__actions" > <div class="catalog-tile-pf-badge-container" @@ -75,7 +75,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -87,7 +87,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v5-u-screen-reader" + class="pf-v6-u-screen-reader" > Certified </span> @@ -100,7 +100,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -116,14 +116,14 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__header-main" + class="pf-v6-c-card__header-main" /> </div> <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="single-badge-test-title" > <div @@ -146,7 +146,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__body catalog-tile-pf-body" + class="pf-v6-c-card__body catalog-tile-pf-body" > <div class="catalog-tile-pf-description" @@ -160,7 +160,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card catalog-tile-pf" + class="pf-v6-c-card catalog-tile-pf" data-ouia-component-id="OUIA-Generated-Card-2" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -168,10 +168,10 @@ exports[`CatalogTile renders properly 1`] = ` id="multi-badge-test" > <div - class="pf-v5-c-card__header" + class="pf-v6-c-card__header" > <div - class="pf-v5-c-card__actions" + class="pf-v6-c-card__actions" > <div class="catalog-tile-pf-badge-container" @@ -185,7 +185,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -197,7 +197,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v5-u-screen-reader" + class="pf-v6-u-screen-reader" > Certified </span> @@ -213,7 +213,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -225,7 +225,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v5-u-screen-reader" + class="pf-v6-u-screen-reader" > USDA Approved </span> @@ -235,14 +235,14 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__header-main" + class="pf-v6-c-card__header-main" /> </div> <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="multi-badge-test-title" > <div @@ -258,7 +258,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__body catalog-tile-pf-body" + class="pf-v6-c-card__body catalog-tile-pf-body" > <div class="catalog-tile-pf-description" @@ -272,7 +272,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card catalog-tile-pf" + class="pf-v6-c-card catalog-tile-pf" data-ouia-component-id="OUIA-Generated-Card-3" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -280,10 +280,10 @@ exports[`CatalogTile renders properly 1`] = ` id="test-iconClass" > <div - class="pf-v5-c-card__header" + class="pf-v6-c-card__header" > <div - class="pf-v5-c-card__actions" + class="pf-v6-c-card__actions" > <div class="catalog-tile-pf-badge-container" @@ -297,7 +297,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -309,7 +309,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v5-u-screen-reader" + class="pf-v6-u-screen-reader" > USDA Approved </span> @@ -319,7 +319,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__header-main" + class="pf-v6-c-card__header-main" > <span class="catalog-tile-pf-icon fa fa-codepen" @@ -327,10 +327,10 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="test-iconClass-title" > <div @@ -346,7 +346,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__body catalog-tile-pf-body" + class="pf-v6-c-card__body catalog-tile-pf-body" > <div class="catalog-tile-pf-description" @@ -360,7 +360,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <a - class="pf-v5-c-card catalog-tile-pf featured" + class="pf-v6-c-card catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-4" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -368,10 +368,10 @@ exports[`CatalogTile renders properly 1`] = ` id="tile-footer-test" > <div - class="pf-v5-c-card__header" + class="pf-v6-c-card__header" > <div - class="pf-v5-c-card__actions" + class="pf-v6-c-card__actions" > <div class="catalog-tile-pf-badge-container" @@ -385,7 +385,7 @@ exports[`CatalogTile renders properly 1`] = ` > <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -397,7 +397,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v5-u-screen-reader" + class="pf-v6-u-screen-reader" > Certified </span> @@ -407,14 +407,14 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__header-main" + class="pf-v6-c-card__header-main" /> </div> <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="tile-footer-test-title" > <div @@ -430,7 +430,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__body catalog-tile-pf-body" + class="pf-v6-c-card__body catalog-tile-pf-body" > <div class="catalog-tile-pf-description" @@ -443,12 +443,12 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__footer catalog-tile-pf-footer" + class="pf-v6-c-card__footer catalog-tile-pf-footer" > <span> <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -464,7 +464,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </a> <a - class="pf-v5-c-card catalog-tile-pf featured" + class="pf-v6-c-card catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-5" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -472,13 +472,13 @@ exports[`CatalogTile renders properly 1`] = ` id="custom-icon-svg-test" > <div - class="pf-v5-c-card__header" + class="pf-v6-c-card__header" > <div - class="pf-v5-c-card__actions" + class="pf-v6-c-card__actions" /> <div - class="pf-v5-c-card__header-main" + class="pf-v6-c-card__header-main" > <span class="catalog-tile-pf-icon " @@ -500,10 +500,10 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <div - class="pf-v5-c-card__title" + class="pf-v6-c-card__title" > <div - class="pf-v5-c-card__title-text catalog-tile-pf-header" + class="pf-v6-c-card__title-text catalog-tile-pf-header" id="custom-icon-svg-test-title" > <div diff --git a/packages/module/src/components/PropertiesSidePanel/__snapshots__/PropertiesSidePanel.test.tsx.snap b/packages/module/src/components/PropertiesSidePanel/__snapshots__/PropertiesSidePanel.test.tsx.snap index 855f806..b233070 100644 --- a/packages/module/src/components/PropertiesSidePanel/__snapshots__/PropertiesSidePanel.test.tsx.snap +++ b/packages/module/src/components/PropertiesSidePanel/__snapshots__/PropertiesSidePanel.test.tsx.snap @@ -41,7 +41,7 @@ exports[`PropertiesSidePanel renders properly 1`] = ` <span> <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -136,7 +136,7 @@ exports[`PropertiesSidePanel renders properly 1`] = ` 0.22.2 <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" @@ -168,7 +168,7 @@ exports[`PropertiesSidePanel renders properly 1`] = ` <span> <svg aria-hidden="true" - class="pf-v5-svg" + class="pf-v6-svg" fill="currentColor" height="1em" role="img" From fe10357d9aeccaf0c09f19c2c791a3112bc35bd8 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Mon, 1 Apr 2024 15:43:49 -0400 Subject: [PATCH 07/19] Update with tokens --- .../module/patternfly-docs/content/examples/catalogTile.css | 6 +++--- .../module/patternfly-docs/content/examples/verticalTab.css | 6 +++--- .../sass/react-catalog-view-extension/_catalog-tile.scss | 4 ++-- .../sass/react-catalog-view-extension/_vertical-tabs.scss | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index 45fa728..980fb14 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -1,5 +1,5 @@ .ws-react-e-catalog-tile .catalog-tile-pf.featured { - border-top: 2px solid #39a5dc; + border-top: 2px solid var(--pf-t--global--border--color--brand--default); } .ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited { color: inherit; @@ -17,11 +17,11 @@ font-size: small; } .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a { - color: #0066CC; + color: var(--pf-t--global--border--color--brand--default); text-decoration: none; } .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover { - color: #004080; + color: var(--pf-t--global--border--color--brand--hover); text-decoration: underline; } .ws-react-e-catalog-tile .pf-v6-c-card__actions { diff --git a/packages/module/patternfly-docs/content/examples/verticalTab.css b/packages/module/patternfly-docs/content/examples/verticalTab.css index 7f5271e..e967fdc 100644 --- a/packages/module/patternfly-docs/content/examples/verticalTab.css +++ b/packages/module/patternfly-docs/content/examples/verticalTab.css @@ -20,7 +20,7 @@ word-break: break-word; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:hover, .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:focus { - color: #0088ce; + color: var(--pf-t--global--text--color--brand--hover); text-decoration: none; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.no-wrap { @@ -33,10 +33,10 @@ white-space: nowrap; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a { - color: #0088ce; + color: var(--pf-t--global--text--color--brand--clicked); } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a::before { - background: #0088ce; + background: var(--pf-t--global--border--color--brand--clicked); content: " "; left: 0; position: absolute; diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss index b62cb03..bed55c5 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss @@ -1,6 +1,6 @@ .catalog-tile-pf { &.featured { - border-top: 2px solid var(--pf-v6-global--active-color--100); + border-top: 2px solid var(--pf-t--global--border--color--brand--default); } &:active, @@ -27,7 +27,7 @@ } .catalog-tile-pf-subtitle { - color: var(--pf-v6-global--Color--200); + color: var(--pf-t--global--border--color--brand--default); font-size: 13px; font-weight: initial; diff --git a/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss b/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss index 6cef144..55aca6c 100644 --- a/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss +++ b/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss @@ -23,7 +23,7 @@ &:hover, &:focus { - color: var(--vertical-tab-pf-active-color); + color: var(--pf-t--global--text--color--brand--hover); text-decoration: none; } @@ -41,10 +41,10 @@ &.active { > a { - color: var(--vertical-tab-pf-active-color); + color: var(--pf-t--global--text--color--brand--clicked); &::before { - background: var(--vertical-tab-pf-active-color); + background: var( --pf-t--global--border--color--brand--clicked); content: "\00a0"; //   left: 0; position: absolute; From bd81ee6fb18d6d21533ce344fd84c1252a701632 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Mon, 1 Apr 2024 16:30:33 -0400 Subject: [PATCH 08/19] Ignore experimental rule --- packages/module/patternfly-a11y.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/module/patternfly-a11y.config.js b/packages/module/patternfly-a11y.config.js index 0601252..8afbff1 100644 --- a/packages/module/patternfly-a11y.config.js +++ b/packages/module/patternfly-a11y.config.js @@ -22,7 +22,8 @@ module.exports = { 'color-contrast', 'landmark-no-duplicate-main', 'landmark-main-is-top-level', - 'scrollable-region-focusable' + 'scrollable-region-focusable', + 'link-in-text-block', ].join(','), ignoreIncomplete: true }; From 462fc7fd9fa2f68bbc7417ba4b95c360602f2b76 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Tue, 2 Apr 2024 14:34:32 -0400 Subject: [PATCH 09/19] Update styles based on feedback --- .../module/patternfly-docs/content/examples/catalogTile.css | 4 ++-- .../sass/react-catalog-view-extension/_catalog-tile.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index 980fb14..1b7bed1 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -17,11 +17,11 @@ font-size: small; } .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a { - color: var(--pf-t--global--border--color--brand--default); + color: var(--pf-t--global--text--color--link--default); text-decoration: none; } .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover { - color: var(--pf-t--global--border--color--brand--hover); + color: var(--pf-t--global--text--color--link--hover); text-decoration: underline; } .ws-react-e-catalog-tile .pf-v6-c-card__actions { diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss index bed55c5..d73c3e1 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss @@ -27,7 +27,7 @@ } .catalog-tile-pf-subtitle { - color: var(--pf-t--global--border--color--brand--default); + color: var(--pf-t--global--text--color--subtle); font-size: 13px; font-weight: initial; From a63fe8cc6dd2d6fad2293f63731cc1ba01508158 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Wed, 3 Apr 2024 10:59:07 -0400 Subject: [PATCH 10/19] Update alpha versions --- packages/module/package.json | 12 +- .../catalog-view/catalog-item-header/react.js | 1 + .../catalog-view/catalog-tile/react.js | 1 + .../catalog-view/filter-side-panel/react.js | 1 + .../properties-side-panel/react.js | 1 + .../catalog-view/vertical-tabs/react.js | 1 + yarn.lock | 138 +++++++----------- 7 files changed, 62 insertions(+), 93 deletions(-) diff --git a/packages/module/package.json b/packages/module/package.json index ca48a6c..3d4d996 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -40,18 +40,18 @@ "patternfly" ], "dependencies": { - "@patternfly/react-core": "6.0.0-alpha.47", - "@patternfly/react-styles": "6.0.0-alpha.17" + "@patternfly/react-core": "6.0.0-alpha.50", + "@patternfly/react-styles": "6.0.0-alpha.19" }, "peerDependencies": { "react": "^17 || ^18", "react-dom": "^17 || ^18" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.107", - "@patternfly/documentation-framework": "6.0.0-alpha.16", - "@patternfly/react-table": "6.0.0-alpha.47", - "@patternfly/react-code-editor": "6.0.0-alpha.47", + "@patternfly/patternfly": "6.0.0-alpha.117", + "@patternfly/documentation-framework": "6.0.0-alpha.20", + "@patternfly/react-table": "6.0.0-alpha.50", + "@patternfly/react-code-editor": "6.0.0-alpha.50", "react-monaco-editor": "0.51.0", "monaco-editor": "0.34.1", "rimraf": "^2.6.2", diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js index 2cef118..bb205a9 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js @@ -8,6 +8,7 @@ const pageData = { "section": "extensions", "subsection": "Catalog view", "deprecated": false, + "template": false, "beta": false, "demo": false, "newImplementationLink": false, diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js index 8590a99..2905f35 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js @@ -10,6 +10,7 @@ const pageData = { "section": "extensions", "subsection": "Catalog view", "deprecated": false, + "template": false, "beta": false, "demo": false, "newImplementationLink": false, diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js index 1c5a9a3..6ab048d 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -14,6 +14,7 @@ const pageData = { "section": "extensions", "subsection": "Catalog view", "deprecated": false, + "template": false, "beta": false, "demo": false, "newImplementationLink": false, diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index 6cfa62d..7a10a22 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -10,6 +10,7 @@ const pageData = { "section": "extensions", "subsection": "Catalog view", "deprecated": false, + "template": false, "beta": false, "demo": false, "newImplementationLink": false, diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js index 6f3b28f..5fea95e 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js @@ -7,6 +7,7 @@ const pageData = { "section": "extensions", "subsection": "Catalog view", "deprecated": false, + "template": false, "beta": false, "demo": false, "newImplementationLink": false, diff --git a/yarn.lock b/yarn.lock index 2aad495..d5e63df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1647,10 +1647,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@patternfly/ast-helpers@^1.4.0-alpha.5": - version "1.4.0-alpha.7" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.7.tgz#518f6b4183d0bbb7c0392c964813dbce3b0a0398" - integrity sha512-rG1ObLfPAtVAlac+J1IuvlRDCOLPKKtXb81CCM9Il+haAZXxNOtT33C+G37EFx2hlcbZBLqOVgr7IuJxZUKblg== +"@patternfly/ast-helpers@^1.4.0-alpha.9": + version "1.4.0-alpha.9" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.9.tgz#de5135ac5906d16b3a73a137ab8b5efd460c78f0" + integrity sha512-kq4vfrDPr6NfuBbIvqgGKRCl+WASWAUgf5+mF4rD0Db/00kJ3kdx5P70a14YK5H1R0Tcf7m4v+u/NLMCESR17w== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -1658,10 +1658,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@6.0.0-alpha.16": - version "6.0.0-alpha.16" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.16.tgz#e679e30d979ac587a4479f6a16ac95bba43313fc" - integrity sha512-DAcVCuh+KGx2lfGJG+i2B8cp3tp2XUbGnT71zySu0jzya/7Cs7d5D4yc7BlSTZ7ATD1dFk1paVLmZys6FfO1tw== +"@patternfly/documentation-framework@6.0.0-alpha.20": + version "6.0.0-alpha.20" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.20.tgz#bdd66d2647b39d1422edeccfb51ff2e6e18d8191" + integrity sha512-OVhzLMjSWFqmzPHFiWkN9EooYVF5xgy1R9CByr8+TOI8lrXvBs4ACkErf3LCHwqNkzsbuFB26M0NSqK8OQZq5A== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12" @@ -1671,7 +1671,7 @@ "@babel/plugin-transform-react-jsx" "7.17.12" "@babel/preset-env" "7.18.2" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.4.0-alpha.5" + "@patternfly/ast-helpers" "^1.4.0-alpha.9" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "9.1.2" @@ -1697,8 +1697,6 @@ mdast-util-to-hast "9.1.1" mdurl "1.0.1" mini-css-extract-plugin "2.7.5" - monaco-editor "0.34.1" - monaco-editor-webpack-plugin "7.0.1" null-loader "4.0.1" parse-entities "2.0.0" path-browserify "1.0.1" @@ -1708,7 +1706,6 @@ puppeteer "19.11.1" puppeteer-cluster "0.23.0" react-docgen "5.3.1" - react-monaco-editor "^0.51.0" react-ssr-prepass "1.5.0" remark-footnotes "1.0.0" remark-frontmatter "2.0.0" @@ -1747,78 +1744,61 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.107": - version "6.0.0-alpha.107" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.107.tgz#cf4e4219c9d555c49e612a182812c49df1568dc6" - integrity sha512-gsF0u2RjncgvkIfCK1/UI+U92pS+81oujhnu8HBRiOdwVPxCV20/nWQnbyVQb08vuTBq28cGtWjm+UKKN86K3w== +"@patternfly/patternfly@6.0.0-alpha.117": + version "6.0.0-alpha.117" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.117.tgz#ae62a787f99085acfecb4422fd1c08cace2fd23a" + integrity sha512-AqN09ur+jQXqtu7mf1UD7YmFa9fsbeb3tuyMwxut7P9QW4dvdTkHhFC9zv5eaJ5v7M03vvKKtxteVwPLaDn2zA== -"@patternfly/react-code-editor@6.0.0-alpha.47": - version "6.0.0-alpha.47" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.47.tgz#bf0a3d5a8b362de6042c046a9eb05f7a64948404" - integrity sha512-d9QOoj3xjHnPaxnAVtDyTrDihxGkF9AHhs+9NlHHsK4/Nu2Qc4MVFGp3lpmJ0PiVx0k1Anv2FyCg4AKBt9hR+w== +"@patternfly/react-code-editor@6.0.0-alpha.50": + version "6.0.0-alpha.50" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.50.tgz#10a0d0fb306355f70fe94695c4ff8631b805a19d" + integrity sha512-oNUOc2t//9MoipPXsrc9FxkaV+7VMdcKUMzgnS7kDpT8srRw8JLhvEScfKtyVpLBQQGaZPujkB/R6XSrlLzFqw== dependencies: "@monaco-editor/react" "^4.6.0" - "@patternfly/react-core" "^6.0.0-alpha.47" - "@patternfly/react-icons" "^6.0.0-alpha.17" - "@patternfly/react-styles" "^6.0.0-alpha.17" + "@patternfly/react-core" "^6.0.0-alpha.50" + "@patternfly/react-icons" "^6.0.0-alpha.19" + "@patternfly/react-styles" "^6.0.0-alpha.19" react-dropzone "14.2.3" tslib "^2.5.0" -"@patternfly/react-core@6.0.0-alpha.47": - version "6.0.0-alpha.47" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.47.tgz#e738e808e1a11880a157fa00253909b8a29dd160" - integrity sha512-ra2v9I+UaLww+PYH+/38K5vAXItdt0tZ7UUS+rHJL2tDg31hHBlySlMkLd9cdA4DfzyX93VRpTpPS8vHiV/JnQ== +"@patternfly/react-core@6.0.0-alpha.50", "@patternfly/react-core@^6.0.0-alpha.50": + version "6.0.0-alpha.50" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.50.tgz#982d773240e7adf969c9d53f0bf49c3ed25c550f" + integrity sha512-RIO5g0s/i5lAjkjp0eaOdqhefKzppWeAl7M/+dGkHjsoNUG0xbKigzpy3kHYHphbAA1O9vCKYfoEPlcTB0Svvg== dependencies: - "@patternfly/react-icons" "^6.0.0-alpha.17" - "@patternfly/react-styles" "^6.0.0-alpha.17" - "@patternfly/react-tokens" "^6.0.0-alpha.17" + "@patternfly/react-icons" "^6.0.0-alpha.19" + "@patternfly/react-styles" "^6.0.0-alpha.19" + "@patternfly/react-tokens" "^6.0.0-alpha.19" focus-trap "7.5.2" react-dropzone "^14.2.3" tslib "^2.5.0" -"@patternfly/react-core@^6.0.0-alpha.47": - version "6.0.0-alpha.48" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.48.tgz#0e80b67a2954b266c224bf2e6d6aec440d4c9e13" - integrity sha512-zKcx1Z5Vzb9Vxa42jDhmW+Gr553jV12dbFXnDyp8KWBgosQo8XApQmMTlFHL6VXOAiKAmNZy0/4ugcEj7JxWgQ== - dependencies: - "@patternfly/react-icons" "^6.0.0-alpha.18" - "@patternfly/react-styles" "^6.0.0-alpha.18" - "@patternfly/react-tokens" "^6.0.0-alpha.18" - focus-trap "7.5.2" - react-dropzone "^14.2.3" - tslib "^2.5.0" - -"@patternfly/react-icons@^6.0.0-alpha.17", "@patternfly/react-icons@^6.0.0-alpha.18": - version "6.0.0-alpha.18" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.18.tgz#b066cdfbe3d170813b0dffc63f12d0bf6c33b23c" - integrity sha512-qjE+z64knS5w/wv2F/tIGnbfgFGeUz74aCgY7qDHui/6thTyG9wjVEs9TaTSw2QE9TpUY2jmClpUhlTnpe7c2Q== - -"@patternfly/react-styles@6.0.0-alpha.17": - version "6.0.0-alpha.17" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.17.tgz#61977015f1af27b876c898ab1b361ec244cf5f96" - integrity sha512-DrYjqCxbatmvjCC4dutH6kOBsB5ymT8aFuXrJN0bzScyA5l+GN6WejKq0m0/DOGme62G1Dz/4v1etl+qWOgXkA== - -"@patternfly/react-styles@^6.0.0-alpha.17", "@patternfly/react-styles@^6.0.0-alpha.18": - version "6.0.0-alpha.18" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.18.tgz#3f0b2335b45a2173f270880eb1ccf42c82ba2d4f" - integrity sha512-YC5QRDUFZ7+/vzN7n4MxyEpVn+yPD/JkOgTMBn2PkqVfKEB+swpv+xSnSMrMJL2Kl4TCsGRk15ZCv26XyukKhA== - -"@patternfly/react-table@6.0.0-alpha.47": - version "6.0.0-alpha.47" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.47.tgz#373adf00231e20498d5a7fd41d6abd5cb3445023" - integrity sha512-hyXVPMcAHcBmk61ppDnBlYUKRfVflj17A3RWW0wQZald1bhPvGKziJwsY46Ket03nxJSjblCr/GPtvnqTWIIaw== - dependencies: - "@patternfly/react-core" "^6.0.0-alpha.47" - "@patternfly/react-icons" "^6.0.0-alpha.17" - "@patternfly/react-styles" "^6.0.0-alpha.17" - "@patternfly/react-tokens" "^6.0.0-alpha.17" +"@patternfly/react-icons@^6.0.0-alpha.19": + version "6.0.0-alpha.19" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.19.tgz#885e45fceac78a8d7269094e15c78394cd21b1dd" + integrity sha512-glp38ag1FVaAm1OtzAJYtbDw207xACqvTvUmWlESh2pEJ8FP7jr7vsxP+2LLue5Ag3b/J9JrrEl8ubQqZrpWug== + +"@patternfly/react-styles@6.0.0-alpha.19", "@patternfly/react-styles@^6.0.0-alpha.19": + version "6.0.0-alpha.19" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.19.tgz#4708b71889c25c7a87ba20878a601c8ab4c2426e" + integrity sha512-Qpa1nbPPvB0HoFWEfWMnG41lWmI0tV0c48QSpF01jDwUU6idqMlRjnW1O9E69CKP6C+8MQj2RxFSu8QOMhAi0A== + +"@patternfly/react-table@6.0.0-alpha.50": + version "6.0.0-alpha.50" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.50.tgz#01b855a4ad596efda4fa40c7b91b09b7d8cbc84f" + integrity sha512-N6SoKVSi3LY/07vEKln3cqC2AwA3Hr13VUdXsDGLFYnbTtE32Eh5K6p9gLXejgDj9JQQ2uktaplHXIYtdh94qw== + dependencies: + "@patternfly/react-core" "^6.0.0-alpha.50" + "@patternfly/react-icons" "^6.0.0-alpha.19" + "@patternfly/react-styles" "^6.0.0-alpha.19" + "@patternfly/react-tokens" "^6.0.0-alpha.19" lodash "^4.17.19" tslib "^2.5.0" -"@patternfly/react-tokens@^6.0.0-alpha.17", "@patternfly/react-tokens@^6.0.0-alpha.18": - version "6.0.0-alpha.18" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.18.tgz#29ee0699f3502d62640fbd5b0a2c005a3c0d1b0e" - integrity sha512-qPz/d3iiUtnWN1oIgKUdDlbKqDX3GCzJX8rYqSOc7ytf7qHVZaWmmhNjMS8OnnIwaML7T9u27yDlnac7r67i+g== +"@patternfly/react-tokens@^6.0.0-alpha.19": + version "6.0.0-alpha.19" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.19.tgz#dea91288e11e633dbff9251fa440519736ec785d" + integrity sha512-qxFPXdFWg7eq67XFoKVtpSGANd9HgnUA+mPJI1IRmHxhZmKbth0Ym3q6I745ratlGdrlpjg9YnRXmyOe8xPwpw== "@polka/url@^1.0.0-next.20": version "1.0.0-next.21" @@ -7354,15 +7334,6 @@ loader-utils@^2.0.0: emojis-list "^3.0.0" json5 "^2.1.2" -loader-utils@^2.0.2: - version "2.0.4" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" - integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== - dependencies: - big.js "^5.2.2" - emojis-list "^3.0.0" - json5 "^2.1.2" - loader-utils@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576" @@ -7752,13 +7723,6 @@ mkdirp@^0.5.1: dependencies: minimist "^1.2.6" -monaco-editor-webpack-plugin@7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c" - integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw== - dependencies: - loader-utils "^2.0.2" - monaco-editor@0.34.1: version "0.34.1" resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87" @@ -8953,7 +8917,7 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-monaco-editor@0.51.0, react-monaco-editor@^0.51.0: +react-monaco-editor@0.51.0: version "0.51.0" resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.51.0.tgz#68d6afc912f7fcb7782e57b39889a5fd75fc0ceb" integrity sha512-6jx1V8p6gHVKJHFaTvicOtmlhFjOJhekobeNd92ZAo7F5UvAin1cF7bxWLCKgtxClYZ7CB3Ar284Kpbhj22FpQ== From 17c18c51b25a31cf5bfc8df00ed7ecb03115bd9c Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Mon, 8 Apr 2024 11:27:34 -0400 Subject: [PATCH 11/19] Update featured card to secondary styling --- .../module/patternfly-docs/content/examples/catalogTile.css | 3 --- packages/module/src/components/CatalogTile/CatalogTile.tsx | 1 + 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index 1b7bed1..a767e5c 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -1,6 +1,3 @@ -.ws-react-e-catalog-tile .catalog-tile-pf.featured { - border-top: 2px solid var(--pf-t--global--border--color--brand--default); -} .ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited { color: inherit; text-decoration: none; diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx index f11deeb..0211190 100644 --- a/packages/module/src/components/CatalogTile/CatalogTile.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTile.tsx @@ -113,6 +113,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> { id={id || this.generatedId} href={href || '#'} className={css('catalog-tile-pf', { featured }, className)} + variant={featured ? 'secondary' : 'default'} isClickable={!!onClick} {...props} > From 95b84993bd1d80d3fb775dd9855fa532dc601352 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Mon, 8 Apr 2024 11:29:54 -0400 Subject: [PATCH 12/19] Update snapshots --- .../CatalogTile/__snapshots__/CatalogTile.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index d21310d..4df290c 100644 --- a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -3,7 +3,7 @@ exports[`CatalogTile href renders properly 1`] = ` <DocumentFragment> <a - class="pf-v6-c-card catalog-tile-pf featured" + class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-6" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -50,7 +50,7 @@ exports[`CatalogTile renders properly 1`] = ` <div> <div> <div - class="pf-v6-c-card catalog-tile-pf featured" + class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-1" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -360,7 +360,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </div> <a - class="pf-v6-c-card catalog-tile-pf featured" + class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-4" data-ouia-component-type="PF5/Card" data-ouia-safe="true" @@ -464,7 +464,7 @@ exports[`CatalogTile renders properly 1`] = ` </div> </a> <a - class="pf-v6-c-card catalog-tile-pf featured" + class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured" data-ouia-component-id="OUIA-Generated-Card-5" data-ouia-component-type="PF5/Card" data-ouia-safe="true" From bafc9de25f809f04ca90285e22b1203099ae3bea Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Tue, 23 Apr 2024 15:13:59 -0400 Subject: [PATCH 13/19] Update screen reader class --- .../module/patternfly-docs/content/examples/FilterSidePanel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index d7569b5..2cf5f80 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component { return ( <span> - <span className="pf-v6-u-screen-reader">{`${count} stars`}</span> + <span className="pf-v6-screen-reader">{`${count} stars`}</span> {stars} </span> ); From f51c84a9d6687333568a700c5260d4d83ccf6488 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 26 Apr 2024 13:25:21 -0400 Subject: [PATCH 14/19] Update styling --- .../patternfly-docs/content/examples/PropertiesSidePanel.md | 2 +- .../extensions/catalog-view/filter-side-panel/react.js | 2 +- .../extensions/catalog-view/properties-side-panel/react.js | 2 +- .../sass/react-catalog-view-extension/_catalog-item.scss | 2 +- .../module/sass/react-catalog-view-extension/_variables.scss | 4 ++-- .../sass/react-catalog-view-extension/_vertical-tabs.scss | 2 +- .../module/src/components/CatalogTile/CatalogTileBadge.tsx | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index e52f98b..41f7063 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; label="Certified Level" value={ <span> - <OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified + <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified </span> } /> diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js index 6ab048d..ea85de1 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -170,7 +170,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./filterSidePanel.css';" pageData.examples = { 'Basic': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';\nimport StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';\nimport CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';\nimport CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';\nimport CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';\nimport CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';\nimport CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';\nimport CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';\nimport { TextInput } from '@patternfly/react-core';\n\nclass MockFilterSidePanelExample extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeFilters: {\n typeSUV: false,\n typeSedan: false,\n typePickup: false,\n typeSports: false,\n makeChevy: false,\n makeFord: false,\n makeDodge: false,\n makeVolkswagen: false,\n makeHyundai: false,\n makeHonda: false,\n makeToyota: false,\n makeMercedes: false,\n makeBMW: false,\n makeInfiniti: false,\n makeLexus: false,\n makeAcura: false,\n paymentPaypal: false,\n paymentDiscover: false,\n paymentVisa: false,\n paymentMastercard: false,\n paymentAmex: false,\n paymentDinersClub: false,\n mileage50: false,\n mileage40: false,\n mileage30: false,\n mileage20: false,\n mileage10: false,\n rating5: false,\n rating4: false,\n rating3: false,\n rating2: false,\n rating1: false\n },\n showAllCategories: {\n type: false,\n make: false,\n paymentOptions: false,\n mileage: false,\n rating: false\n }\n };\n \n this.onShowAllToggle = id => {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push(<StarIcon key={i} />);\n }\n \n return (\n <span>\n <span className=\"pf-v6-u-screen-reader\">{`${count} stars`}</span>\n {stars}\n </span>\n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}> \n <FilterSidePanel id=\"filter-panel\">\n <FilterSidePanelCategory key=\"cat1\"> \n <TextInput type=\"text\" id=\"filter-text-input\" placeholder=\"Filter by name\" aria-label=\"filter text input\" />\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat2\"\n title=\"Type\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.type}\n onShowAllToggle={() => this.onShowAllToggle('type')}\n >\n <FilterSidePanelCategoryItem\n key=\"suv\"\n count={23}\n checked={activeFilters.typeSUV}\n onClick={e => this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sedan\"\n count={11}\n checked={activeFilters.typeSedan}\n onClick={e => this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"pickup\"\n count={5}\n checked={activeFilters.typePickup}\n onClick={e => this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sports\"\n count={3}\n checked={activeFilters.typeSports}\n onClick={e => this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat3\"\n title=\"Manufacturer\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.manufacturer}\n onShowAllToggle={() => this.onShowAllToggle('manufacturer')}\n >\n <FilterSidePanelCategoryItem\n key=\"chevy\"\n count={6}\n checked={activeFilters.makeChevy}\n onClick={e => this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"ford\"\n count={5}\n checked={activeFilters.makeFord}\n onClick={e => this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dodge\"\n count={7}\n checked={activeFilters.makeDodge}\n onClick={e => this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"volks\"\n count={4}\n checked={activeFilters.makeVolkswagen}\n onClick={e => this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"hyundai\"\n count={2}\n checked={activeFilters.makeHyundai}\n onClick={e => this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"honda\"\n count={3}\n checked={activeFilters.makeHonda}\n onClick={e => this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"toyota\"\n count={6}\n checked={activeFilters.makeToyota}\n onClick={e => this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mercedes\"\n count={2}\n checked={activeFilters.makeMercedes}\n onClick={e => this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"bmw\"\n count={2}\n checked={activeFilters.makeBMW}\n onClick={e => this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"infiniti\"\n count={1}\n checked={activeFilters.makeInfiniti}\n onClick={e => this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"lexus\"\n count={1}\n checked={activeFilters.makeLexus}\n onClick={e => this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"acura\"\n count={0}\n checked={activeFilters.makeAcura}\n onClick={e => this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat4\"\n title=\"Payment Options\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.payment}\n onShowAllToggle={() => this.onShowAllToggle('payment')}\n >\n <FilterSidePanelCategoryItem\n key=\"pp\"\n icon={<CcPaypalIcon />}\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"discover\"\n icon={<CcDiscoverIcon />}\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"visa\"\n icon={<CcVisaIcon />}\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mc\"\n icon={<CcMastercardIcon />}\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"amex\"\n icon={<CcAmexIcon />}\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dc\"\n icon={<CcDinersClubIcon />}\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat5\"\n title=\"Fuel Mileage\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.mileage}\n onShowAllToggle={() => this.onShowAllToggle('mileage')}\n >\n <FilterSidePanelCategoryItem\n key=\"gt50\"\n count={3}\n checked={activeFilters.mileage50}\n onClick={e => this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"4050\"\n count={7}\n checked={activeFilters.mileage40}\n onClick={e => this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"3040\"\n count={9}\n checked={activeFilters.mileage30}\n onClick={e => this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"2030\"\n count={12}\n checked={activeFilters.mileage20}\n onClick={e => this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"gt20\"\n count={8}\n checked={activeFilters.mileage10}\n onClick={e => this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat6\"\n title=\"Rating\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.rating}\n onShowAllToggle={() => this.onShowAllToggle('rating')}\n >\n <FilterSidePanelCategoryItem\n key=\"5star\"\n count={2}\n icon={this.getStars(5)}\n checked={activeFilters.rating5}\n onClick={e => this.onFilterChange('rating5', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"4star\"\n count={12}\n icon={this.getStars(4)}\n checked={activeFilters.rating4}\n onClick={e => this.onFilterChange('rating4', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"3star\"\n count={8}\n icon={this.getStars(3)}\n checked={activeFilters.rating3}\n onClick={e => this.onFilterChange('rating3', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"2star\"\n count={5}\n icon={this.getStars(2)}\n checked={activeFilters.rating2}\n onClick={e => this.onFilterChange('rating2', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"1star\"\n count={3}\n icon={this.getStars(1)}\n checked={activeFilters.rating1}\n onClick={e => this.onFilterChange('rating1', e.target.checked)}\n />\n </FilterSidePanelCategory>\n </FilterSidePanel>\n </div>\n );\n }\n}","title":"Basic","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';\nimport StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';\nimport CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';\nimport CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';\nimport CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';\nimport CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';\nimport CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';\nimport CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';\nimport { TextInput } from '@patternfly/react-core';\n\nclass MockFilterSidePanelExample extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeFilters: {\n typeSUV: false,\n typeSedan: false,\n typePickup: false,\n typeSports: false,\n makeChevy: false,\n makeFord: false,\n makeDodge: false,\n makeVolkswagen: false,\n makeHyundai: false,\n makeHonda: false,\n makeToyota: false,\n makeMercedes: false,\n makeBMW: false,\n makeInfiniti: false,\n makeLexus: false,\n makeAcura: false,\n paymentPaypal: false,\n paymentDiscover: false,\n paymentVisa: false,\n paymentMastercard: false,\n paymentAmex: false,\n paymentDinersClub: false,\n mileage50: false,\n mileage40: false,\n mileage30: false,\n mileage20: false,\n mileage10: false,\n rating5: false,\n rating4: false,\n rating3: false,\n rating2: false,\n rating1: false\n },\n showAllCategories: {\n type: false,\n make: false,\n paymentOptions: false,\n mileage: false,\n rating: false\n }\n };\n \n this.onShowAllToggle = id => {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push(<StarIcon key={i} />);\n }\n \n return (\n <span>\n <span className=\"pf-v6-screen-reader\">{`${count} stars`}</span>\n {stars}\n </span>\n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}> \n <FilterSidePanel id=\"filter-panel\">\n <FilterSidePanelCategory key=\"cat1\"> \n <TextInput type=\"text\" id=\"filter-text-input\" placeholder=\"Filter by name\" aria-label=\"filter text input\" />\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat2\"\n title=\"Type\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.type}\n onShowAllToggle={() => this.onShowAllToggle('type')}\n >\n <FilterSidePanelCategoryItem\n key=\"suv\"\n count={23}\n checked={activeFilters.typeSUV}\n onClick={e => this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sedan\"\n count={11}\n checked={activeFilters.typeSedan}\n onClick={e => this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"pickup\"\n count={5}\n checked={activeFilters.typePickup}\n onClick={e => this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sports\"\n count={3}\n checked={activeFilters.typeSports}\n onClick={e => this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat3\"\n title=\"Manufacturer\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.manufacturer}\n onShowAllToggle={() => this.onShowAllToggle('manufacturer')}\n >\n <FilterSidePanelCategoryItem\n key=\"chevy\"\n count={6}\n checked={activeFilters.makeChevy}\n onClick={e => this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"ford\"\n count={5}\n checked={activeFilters.makeFord}\n onClick={e => this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dodge\"\n count={7}\n checked={activeFilters.makeDodge}\n onClick={e => this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"volks\"\n count={4}\n checked={activeFilters.makeVolkswagen}\n onClick={e => this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"hyundai\"\n count={2}\n checked={activeFilters.makeHyundai}\n onClick={e => this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"honda\"\n count={3}\n checked={activeFilters.makeHonda}\n onClick={e => this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"toyota\"\n count={6}\n checked={activeFilters.makeToyota}\n onClick={e => this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mercedes\"\n count={2}\n checked={activeFilters.makeMercedes}\n onClick={e => this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"bmw\"\n count={2}\n checked={activeFilters.makeBMW}\n onClick={e => this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"infiniti\"\n count={1}\n checked={activeFilters.makeInfiniti}\n onClick={e => this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"lexus\"\n count={1}\n checked={activeFilters.makeLexus}\n onClick={e => this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"acura\"\n count={0}\n checked={activeFilters.makeAcura}\n onClick={e => this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat4\"\n title=\"Payment Options\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.payment}\n onShowAllToggle={() => this.onShowAllToggle('payment')}\n >\n <FilterSidePanelCategoryItem\n key=\"pp\"\n icon={<CcPaypalIcon />}\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"discover\"\n icon={<CcDiscoverIcon />}\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"visa\"\n icon={<CcVisaIcon />}\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mc\"\n icon={<CcMastercardIcon />}\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"amex\"\n icon={<CcAmexIcon />}\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dc\"\n icon={<CcDinersClubIcon />}\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat5\"\n title=\"Fuel Mileage\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.mileage}\n onShowAllToggle={() => this.onShowAllToggle('mileage')}\n >\n <FilterSidePanelCategoryItem\n key=\"gt50\"\n count={3}\n checked={activeFilters.mileage50}\n onClick={e => this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"4050\"\n count={7}\n checked={activeFilters.mileage40}\n onClick={e => this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"3040\"\n count={9}\n checked={activeFilters.mileage30}\n onClick={e => this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"2030\"\n count={12}\n checked={activeFilters.mileage20}\n onClick={e => this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"gt20\"\n count={8}\n checked={activeFilters.mileage10}\n onClick={e => this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat6\"\n title=\"Rating\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.rating}\n onShowAllToggle={() => this.onShowAllToggle('rating')}\n >\n <FilterSidePanelCategoryItem\n key=\"5star\"\n count={2}\n icon={this.getStars(5)}\n checked={activeFilters.rating5}\n onClick={e => this.onFilterChange('rating5', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"4star\"\n count={12}\n icon={this.getStars(4)}\n checked={activeFilters.rating4}\n onClick={e => this.onFilterChange('rating4', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"3star\"\n count={8}\n icon={this.getStars(3)}\n checked={activeFilters.rating3}\n onClick={e => this.onFilterChange('rating3', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"2star\"\n count={5}\n icon={this.getStars(2)}\n checked={activeFilters.rating2}\n onClick={e => this.onFilterChange('rating2', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"1star\"\n count={3}\n icon={this.getStars(1)}\n checked={activeFilters.rating1}\n onClick={e => this.onFilterChange('rating1', e.target.checked)}\n />\n </FilterSidePanelCategory>\n </FilterSidePanel>\n </div>\n );\n }\n}","title":"Basic","lang":"js"}}> </Example> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index 7a10a22..82e209c 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -77,7 +77,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';" pageData.examples = { 'Properties side panel with property items': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <span>\n <OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified\n </span>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n </div>\n)","title":"Properties side panel with property items","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <span>\n <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified\n </span>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n </div>\n)","title":"Properties side panel with property items","lang":"js"}}> </Example> }; diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss index 1cfb27e..360fdf6 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss @@ -20,6 +20,6 @@ } .catalog-item-header-pf-subtitle { - color: var(--pf-v6-global--Color--200); + color: var(--pf-t--global--text--color--subtle); margin-bottom: 0; } diff --git a/packages/module/sass/react-catalog-view-extension/_variables.scss b/packages/module/sass/react-catalog-view-extension/_variables.scss index ac4a11c..9e21017 100644 --- a/packages/module/sass/react-catalog-view-extension/_variables.scss +++ b/packages/module/sass/react-catalog-view-extension/_variables.scss @@ -1,5 +1,5 @@ -$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default; -$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default; +$vertical-tab-pf-color: var(--pf-t--global--text--color--regular) !default; +$vertical-tab-pf-active-color: var(--pf-t--global--text--color--brand--clicked) !default; :root { --vertical-tab-pf-color: #{$vertical-tab-pf-color}; diff --git a/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss b/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss index 55aca6c..408366d 100644 --- a/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss +++ b/packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss @@ -13,7 +13,7 @@ position: relative; > a { - color: var(--vertical-tab-pf-color); + color: var( --pf-t--global--text--color--regular); display: inline-block; font-size: 13px; padding: 3px 6px 3px 15px; diff --git a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx index 8365083..5d1a6a3 100644 --- a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx @@ -28,7 +28,7 @@ export const CatalogTileBadge: React.FunctionComponent<CatalogTileBadgeProps> = <Tooltip id={id} content={title}> <span className={classes} {...props}> {children} - <span className="pf-v6-u-screen-reader">{title}</span> + <span className="pf-v6-screen-reader">{title}</span> </span> </Tooltip> </React.Fragment> From 46bf5b3c9fef86a9ef2a711195f67614ae5363d4 Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 26 Apr 2024 13:29:04 -0400 Subject: [PATCH 15/19] Update snapshots --- .../__snapshots__/CatalogTile.test.tsx.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index 4df290c..5d4fb9d 100644 --- a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -87,7 +87,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v6-u-screen-reader" + class="pf-v6-screen-reader" > Certified </span> @@ -197,7 +197,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v6-u-screen-reader" + class="pf-v6-screen-reader" > Certified </span> @@ -225,7 +225,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v6-u-screen-reader" + class="pf-v6-screen-reader" > USDA Approved </span> @@ -309,7 +309,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v6-u-screen-reader" + class="pf-v6-screen-reader" > USDA Approved </span> @@ -397,7 +397,7 @@ exports[`CatalogTile renders properly 1`] = ` /> </svg> <span - class="pf-v6-u-screen-reader" + class="pf-v6-screen-reader" > Certified </span> From d714e15d5b8a7d3d07c2a7d3ada89a032fb6decb Mon Sep 17 00:00:00 2001 From: mcoker <mcoker@redhat.com> Date: Thu, 2 May 2024 17:33:12 -0500 Subject: [PATCH 16/19] fix(catalog-view): update to v6 styles --- .../content/examples/FilterSidePanel.md | 2 +- .../content/examples/PropertiesSidePanel.md | 78 +++++++++---------- .../content/examples/catalogItemHeader.css | 20 ++--- .../content/examples/catalogTile.css | 33 ++++---- .../content/examples/filterSidePanel.css | 46 +++++------ .../content/examples/propertiesSidePanel.css | 17 ++-- .../content/examples/verticalTab.css | 42 ++++++---- .../catalog-view/filter-side-panel/react.js | 2 +- .../properties-side-panel/react.js | 2 +- .../components/CatalogTile/CatalogTile.tsx | 2 +- 10 files changed, 120 insertions(+), 124 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index 2cf5f80..25ed37b 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -118,7 +118,7 @@ class MockFilterSidePanelExample extends React.Component { const maxShowCount = 5; const leeway = 2; return ( - <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}> + <div style={{ width: '205px' }}> <FilterSidePanel id="filter-panel"> <FilterSidePanelCategory key="cat1"> <TextInput type="text" id="filter-text-input" placeholder="Filter by name" aria-label="filter text input" /> diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 41f7063..570bea4 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -26,44 +26,42 @@ import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; -<div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}> - <PropertiesSidePanel> - <PropertyItem label="Operator Version" value="0.9.8 (latest)" /> - <PropertyItem - label="Certified Level" - value={ - <span> - <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified - </span> - } - /> - <PropertyItem label="Provider" value="Red Hat, Inc" /> - <PropertyItem label="Health Index" value="A" /> - <PropertyItem - label="Repository" - value={ - <a href="https://quay.io/repository/redhat/prometheus-operator"> - https://quay.io/repository/redhat/prometheus-operator - </a> - } - /> - <PropertyItem - label="Container Image" - value={ - <a href="#"> - 0.22.2 <ExternalLinkAltIcon /> - </a> - } - /> - <PropertyItem - label="Created At" - value={ - <span> - <GlobeIcon /> Aug 23, 1:58pm - </span> - } - /> - <PropertyItem label="Support" value={<a href="#">Red Hat</a>} /> - </PropertiesSidePanel> -</div> +<PropertiesSidePanel> + <PropertyItem label="Operator Version" value="0.9.8 (latest)" /> + <PropertyItem + label="Certified Level" + value={ + <span> + <OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified + </span> + } + /> + <PropertyItem label="Provider" value="Red Hat, Inc" /> + <PropertyItem label="Health Index" value="A" /> + <PropertyItem + label="Repository" + value={ + <a href="https://quay.io/repository/redhat/prometheus-operator"> + https://quay.io/repository/redhat/prometheus-operator + </a> + } + /> + <PropertyItem + label="Container Image" + value={ + <a href="#"> + 0.22.2 <ExternalLinkAltIcon /> + </a> + } + /> + <PropertyItem + label="Created At" + value={ + <span> + <GlobeIcon /> Aug 23, 1:58pm + </span> + } + /> + <PropertyItem label="Support" value={<a href="#">Red Hat</a>} /> +</PropertiesSidePanel> ``` diff --git a/packages/module/patternfly-docs/content/examples/catalogItemHeader.css b/packages/module/patternfly-docs/content/examples/catalogItemHeader.css index c1d66aa..fd1e458 100644 --- a/packages/module/patternfly-docs/content/examples/catalogItemHeader.css +++ b/packages/module/patternfly-docs/content/examples/catalogItemHeader.css @@ -9,20 +9,20 @@ align-items: center; } .ws-react-e-catalog-item-header .catalog-item-header-pf-icon { - font-size: 60px; - max-height: 60px; - width: 60px; + font-size: var(--pf-t--global--icon--size--2xl); + max-height: var(--pf-t--global--icon--size--2xl); + width: var(--pf-t--global--icon--size--2xl); } .ws-react-e-catalog-item-header .catalog-item-header-pf-text { - margin-left: 20px; + margin-inline-start: var(--pf-t--global--spacer--md); } .ws-react-e-catalog-item-header .catalog-item-header-pf-title { - font-weight: 400; - margin-bottom: 0; - margin-top: 0; + font-weight: var(--pf-t--global--font--weight--body); + margin-block-end: 0; + margin-block-start: 0; } .ws-react-e-catalog-item-header .catalog-item-header-pf-subtitle { - color: #8b8d8f; - font-size: small; - margin-bottom: 0; + color: var(--pf-t--global--text--color--subtle); + font-size: var(--pf-t--global--font--size--body--sm); + margin-block-end: 0; } diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index a767e5c..e219c30 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -1,17 +1,13 @@ .ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited { - color: inherit; + color: var(--pf-t--global--text--color--regular); text-decoration: none; } -.ws-react-e-catalog-tile .catalog-tile-pf-header { - font-size: 16px; - font-weight: 400; -} -.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-title { - font-weight: 400; -} .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle { - color: #4D5258; - font-size: small; + color: var(--pf-t--global--text--color--subtle); + font-size: var(--pf-t--global--font--size--body--sm); + font-family: var(--pf-t--global--font--family--body); + font-weight: var(--pf-t--global--font--weight--body); + padding-block-start: var(--pf-t--global--spacer--xs); } .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a { color: var(--pf-t--global--text--color--link--default); @@ -21,24 +17,21 @@ color: var(--pf-t--global--text--color--link--hover); text-decoration: underline; } -.ws-react-e-catalog-tile .pf-v6-c-card__actions { - padding-left: 5px; -} .ws-react-e-catalog-tile .catalog-tile-pf-icon { - font-size: 40px; - height: 40px; + font-size: 37px; + height: 37px; max-width: 60px; - min-width: 40px; + min-width: 37px; } .ws-react-e-catalog-tile .catalog-tile-pf-badge-container { display: flex; flex: 1; justify-content: flex-end; - margin-left: 10px; + margin-inline-start: var(--pf-t--global--spacer--sm); } .ws-react-e-catalog-tile .catalog-tile-pf-badge-container .catalog-tile-pf-badge { - font-size: 16px; - margin-left: 5px; + font-size: var(--pf-t--global--font--size--body--default); + margin-inline-start: var(--pf-t--global--spacer--xs); } .ws-react-e-catalog-tile .catalog-tile-pf-body .catalog-tile-pf-description span { display: -webkit-box; @@ -50,5 +43,5 @@ -webkit-line-clamp: 1; } .ws-react-e-catalog-tile .example-ok-icon { - color: #4CB140; + color: var(--pf-t--global--icon--color--status--success--default); } diff --git a/packages/module/patternfly-docs/content/examples/filterSidePanel.css b/packages/module/patternfly-docs/content/examples/filterSidePanel.css index 985054e..f256934 100644 --- a/packages/module/patternfly-docs/content/examples/filterSidePanel.css +++ b/packages/module/patternfly-docs/content/examples/filterSidePanel.css @@ -1,50 +1,46 @@ .filter-panel-pf { - margin: 0 0 30px; - padding: 0 15px; -} - -.filter-panel-pf-category { - margin-top: 20px; -} - -.filter-panel-pf-category:first-of-type { - margin-top: 0; + margin-block-start: 0; + margin-block-end: var(--pf-t--global--spacer--xl); + margin-inline: 0; + padding-inline: var(--pf-t--global--spacer--md); + display: flex; + flex-direction: column; + gap: var(--pf-t--global--spacer--lg); } .filter-panel-pf-category-title { border: 0; - font-size: inherit; - margin: 0 0 8px 0; - font-weight: 700; + font-size: var(--pf-t--global--font--size--body--sm); + margin-block-start: 0; + margin-block-end: var(--pf-t--global--spacer--sm); + margin-inline: 0; + font-weight: var(--pf-t--global--font--weight--body--bold); } .filter-panel-pf-category-items { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .filter-panel-pf-category-items .pf-v6-c-button.pf-m-link { padding: 0; } -.filter-panel-pf-category-item { - font-weight: 400; - margin-bottom: 0; - margin-top: 5px; +.filter-panel-pf-category-items > * + * { + margin-block-start: var(--pf-t--global--spacer--sm); } -.filter-panel-pf-category-item:first-of-type { - margin-top: 0; +.filter-panel-pf-category-item { + font-weight: var(--pf-t--global--font--weight--body); } -.filter-panel-pf-category-item .pf-v6-c-check__input { - margin-left: 0px; +.filter-panel-pf-category-item:first-of-type { + margin-block-start: 0; } .filter-panel-pf-category-item .item-icon { - padding-right: 3px; + padding-inline-end: var(--pf-t--global--spacer--xs); } .filter-panel-pf-category-item .item-count { - padding-left: 3px; + padding-inline-start: var(--pf-t--global--spacer--xs); } diff --git a/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css b/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css index 8735ccf..1cf5375 100644 --- a/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css +++ b/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css @@ -1,21 +1,18 @@ .properties-side-panel-pf { width: 165px; -} - -.properties-side-panel-pf-property { - margin-top: 24px; } -.properties-side-panel-pf-property:first-of-type { - margin-top: 0; + display: flex; + flex-direction: column; + gap: var(--pf-t--global--spacer--lg); } .properties-side-panel-pf-property-label { - font-weight: 700 !important; - font-size: 14px !important; + font-weight: var(--pf-t--global--font--weight--body--bold) !important; + font-size: var(--pf-t--global--font--size--body--sm) !important; margin: 0 !important; } .properties-side-panel-pf-property-value { - font-size: 14px !important; - margin-top: 8px; + font-size: var(--pf-t--global--font--size--body--regular) !important; + margin-top: var(--pf-t--global--spacer--sm); word-break: break-word; } diff --git a/packages/module/patternfly-docs/content/examples/verticalTab.css b/packages/module/patternfly-docs/content/examples/verticalTab.css index e967fdc..b7a1780 100644 --- a/packages/module/patternfly-docs/content/examples/verticalTab.css +++ b/packages/module/patternfly-docs/content/examples/verticalTab.css @@ -1,26 +1,37 @@ .ws-react-e-vertical-tabs .vertical-tabs-pf { list-style: none; - margin: 0 0 30px; + margin-block-start: 0; + margin-block-end: 30px; + margin-inline-start: 0; + margin-inline-end: 0; padding: 0; + display: flex; + flex-direction: column; + gap: var(--pf-t--global--spacer--xs); } .ws-react-e-vertical-tabs .vertical-tabs-pf .vertical-tabs-pf { - margin-bottom: 0; + margin-block-end: 0; + padding-block-start: var(--pf-t--global--spacer--xs); } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab { - margin-top: 4px; position: relative; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a { - color: initial; + color: var(--pf-t--global--text--color--regular); display: inline-block; - font-size: 13px; - padding: 3px 6px 3px 15px; + font-size: var(--pf-t--global--font--size--body--default); + padding-block: var(--pf-t--global--spacer--xs); + padding-inline: var(--pf-t--global--spacer--sm); vertical-align: top; width: 100%; word-break: break-word; + background-color: var(--pf-t--global--background--color--action--plain--default); + border-radius: var(--pf-t--global--border--radius--small); + margin-inline-start: var(--pf-t--global--spacer--md); } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:hover, .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:focus { - color: var(--pf-t--global--text--color--brand--hover); + color: var(--pf-t--global--text--color--regular); + background-color: var(--pf-t--global--background--color--action--plain--hover); text-decoration: none; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.no-wrap { @@ -32,22 +43,23 @@ text-overflow: ellipsis; white-space: nowrap; } -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a { - color: var(--pf-t--global--text--color--brand--clicked); +.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.disabled { + color: var(--pf-t--global--text--color--on-disabled); + background: var(--pf-t--global--background--color--disabled--default); + pointer-events: none; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a::before { - background: var(--pf-t--global--border--color--brand--clicked); + background: var(--pf-t--global--border--color--clicked); content: " "; - left: 0; + inset-inline-start: 0; position: absolute; - width: 3px; + width: var(--pf-t--global--border--width--extra-strong); } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab:first-of-type { - margin-top: 0; + margin-block-start: 0; } .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > .vertical-tabs-pf > .vertical-tabs-pf-tab { - position: initial; - padding-left: 15px; + margin-inline-start: var(--pf-t--global--spacer--md); } .ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab { display: none; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js index ea85de1..0c9bc35 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -170,7 +170,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./filterSidePanel.css';" pageData.examples = { 'Basic': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';\nimport StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';\nimport CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';\nimport CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';\nimport CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';\nimport CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';\nimport CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';\nimport CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';\nimport { TextInput } from '@patternfly/react-core';\n\nclass MockFilterSidePanelExample extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeFilters: {\n typeSUV: false,\n typeSedan: false,\n typePickup: false,\n typeSports: false,\n makeChevy: false,\n makeFord: false,\n makeDodge: false,\n makeVolkswagen: false,\n makeHyundai: false,\n makeHonda: false,\n makeToyota: false,\n makeMercedes: false,\n makeBMW: false,\n makeInfiniti: false,\n makeLexus: false,\n makeAcura: false,\n paymentPaypal: false,\n paymentDiscover: false,\n paymentVisa: false,\n paymentMastercard: false,\n paymentAmex: false,\n paymentDinersClub: false,\n mileage50: false,\n mileage40: false,\n mileage30: false,\n mileage20: false,\n mileage10: false,\n rating5: false,\n rating4: false,\n rating3: false,\n rating2: false,\n rating1: false\n },\n showAllCategories: {\n type: false,\n make: false,\n paymentOptions: false,\n mileage: false,\n rating: false\n }\n };\n \n this.onShowAllToggle = id => {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push(<StarIcon key={i} />);\n }\n \n return (\n <span>\n <span className=\"pf-v6-screen-reader\">{`${count} stars`}</span>\n {stars}\n </span>\n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}> \n <FilterSidePanel id=\"filter-panel\">\n <FilterSidePanelCategory key=\"cat1\"> \n <TextInput type=\"text\" id=\"filter-text-input\" placeholder=\"Filter by name\" aria-label=\"filter text input\" />\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat2\"\n title=\"Type\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.type}\n onShowAllToggle={() => this.onShowAllToggle('type')}\n >\n <FilterSidePanelCategoryItem\n key=\"suv\"\n count={23}\n checked={activeFilters.typeSUV}\n onClick={e => this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sedan\"\n count={11}\n checked={activeFilters.typeSedan}\n onClick={e => this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"pickup\"\n count={5}\n checked={activeFilters.typePickup}\n onClick={e => this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sports\"\n count={3}\n checked={activeFilters.typeSports}\n onClick={e => this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat3\"\n title=\"Manufacturer\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.manufacturer}\n onShowAllToggle={() => this.onShowAllToggle('manufacturer')}\n >\n <FilterSidePanelCategoryItem\n key=\"chevy\"\n count={6}\n checked={activeFilters.makeChevy}\n onClick={e => this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"ford\"\n count={5}\n checked={activeFilters.makeFord}\n onClick={e => this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dodge\"\n count={7}\n checked={activeFilters.makeDodge}\n onClick={e => this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"volks\"\n count={4}\n checked={activeFilters.makeVolkswagen}\n onClick={e => this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"hyundai\"\n count={2}\n checked={activeFilters.makeHyundai}\n onClick={e => this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"honda\"\n count={3}\n checked={activeFilters.makeHonda}\n onClick={e => this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"toyota\"\n count={6}\n checked={activeFilters.makeToyota}\n onClick={e => this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mercedes\"\n count={2}\n checked={activeFilters.makeMercedes}\n onClick={e => this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"bmw\"\n count={2}\n checked={activeFilters.makeBMW}\n onClick={e => this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"infiniti\"\n count={1}\n checked={activeFilters.makeInfiniti}\n onClick={e => this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"lexus\"\n count={1}\n checked={activeFilters.makeLexus}\n onClick={e => this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"acura\"\n count={0}\n checked={activeFilters.makeAcura}\n onClick={e => this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat4\"\n title=\"Payment Options\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.payment}\n onShowAllToggle={() => this.onShowAllToggle('payment')}\n >\n <FilterSidePanelCategoryItem\n key=\"pp\"\n icon={<CcPaypalIcon />}\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"discover\"\n icon={<CcDiscoverIcon />}\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"visa\"\n icon={<CcVisaIcon />}\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mc\"\n icon={<CcMastercardIcon />}\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"amex\"\n icon={<CcAmexIcon />}\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dc\"\n icon={<CcDinersClubIcon />}\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat5\"\n title=\"Fuel Mileage\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.mileage}\n onShowAllToggle={() => this.onShowAllToggle('mileage')}\n >\n <FilterSidePanelCategoryItem\n key=\"gt50\"\n count={3}\n checked={activeFilters.mileage50}\n onClick={e => this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"4050\"\n count={7}\n checked={activeFilters.mileage40}\n onClick={e => this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"3040\"\n count={9}\n checked={activeFilters.mileage30}\n onClick={e => this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"2030\"\n count={12}\n checked={activeFilters.mileage20}\n onClick={e => this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"gt20\"\n count={8}\n checked={activeFilters.mileage10}\n onClick={e => this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat6\"\n title=\"Rating\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.rating}\n onShowAllToggle={() => this.onShowAllToggle('rating')}\n >\n <FilterSidePanelCategoryItem\n key=\"5star\"\n count={2}\n icon={this.getStars(5)}\n checked={activeFilters.rating5}\n onClick={e => this.onFilterChange('rating5', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"4star\"\n count={12}\n icon={this.getStars(4)}\n checked={activeFilters.rating4}\n onClick={e => this.onFilterChange('rating4', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"3star\"\n count={8}\n icon={this.getStars(3)}\n checked={activeFilters.rating3}\n onClick={e => this.onFilterChange('rating3', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"2star\"\n count={5}\n icon={this.getStars(2)}\n checked={activeFilters.rating2}\n onClick={e => this.onFilterChange('rating2', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"1star\"\n count={3}\n icon={this.getStars(1)}\n checked={activeFilters.rating1}\n onClick={e => this.onFilterChange('rating1', e.target.checked)}\n />\n </FilterSidePanelCategory>\n </FilterSidePanel>\n </div>\n );\n }\n}","title":"Basic","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension';\nimport StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';\nimport CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon';\nimport CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon';\nimport CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon';\nimport CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';\nimport CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';\nimport CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';\nimport { TextInput } from '@patternfly/react-core';\n\nclass MockFilterSidePanelExample extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeFilters: {\n typeSUV: false,\n typeSedan: false,\n typePickup: false,\n typeSports: false,\n makeChevy: false,\n makeFord: false,\n makeDodge: false,\n makeVolkswagen: false,\n makeHyundai: false,\n makeHonda: false,\n makeToyota: false,\n makeMercedes: false,\n makeBMW: false,\n makeInfiniti: false,\n makeLexus: false,\n makeAcura: false,\n paymentPaypal: false,\n paymentDiscover: false,\n paymentVisa: false,\n paymentMastercard: false,\n paymentAmex: false,\n paymentDinersClub: false,\n mileage50: false,\n mileage40: false,\n mileage30: false,\n mileage20: false,\n mileage10: false,\n rating5: false,\n rating4: false,\n rating3: false,\n rating2: false,\n rating1: false\n },\n showAllCategories: {\n type: false,\n make: false,\n paymentOptions: false,\n mileage: false,\n rating: false\n }\n };\n \n this.onShowAllToggle = id => {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push(<StarIcon key={i} />);\n }\n \n return (\n <span>\n <span className=\"pf-v6-screen-reader\">{`${count} stars`}</span>\n {stars}\n </span>\n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n <div style={{ width: '205px' }}> \n <FilterSidePanel id=\"filter-panel\">\n <FilterSidePanelCategory key=\"cat1\"> \n <TextInput type=\"text\" id=\"filter-text-input\" placeholder=\"Filter by name\" aria-label=\"filter text input\" />\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat2\"\n title=\"Type\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.type}\n onShowAllToggle={() => this.onShowAllToggle('type')}\n >\n <FilterSidePanelCategoryItem\n key=\"suv\"\n count={23}\n checked={activeFilters.typeSUV}\n onClick={e => this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sedan\"\n count={11}\n checked={activeFilters.typeSedan}\n onClick={e => this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"pickup\"\n count={5}\n checked={activeFilters.typePickup}\n onClick={e => this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"sports\"\n count={3}\n checked={activeFilters.typeSports}\n onClick={e => this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat3\"\n title=\"Manufacturer\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.manufacturer}\n onShowAllToggle={() => this.onShowAllToggle('manufacturer')}\n >\n <FilterSidePanelCategoryItem\n key=\"chevy\"\n count={6}\n checked={activeFilters.makeChevy}\n onClick={e => this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"ford\"\n count={5}\n checked={activeFilters.makeFord}\n onClick={e => this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dodge\"\n count={7}\n checked={activeFilters.makeDodge}\n onClick={e => this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"volks\"\n count={4}\n checked={activeFilters.makeVolkswagen}\n onClick={e => this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"hyundai\"\n count={2}\n checked={activeFilters.makeHyundai}\n onClick={e => this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"honda\"\n count={3}\n checked={activeFilters.makeHonda}\n onClick={e => this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"toyota\"\n count={6}\n checked={activeFilters.makeToyota}\n onClick={e => this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mercedes\"\n count={2}\n checked={activeFilters.makeMercedes}\n onClick={e => this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"bmw\"\n count={2}\n checked={activeFilters.makeBMW}\n onClick={e => this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"infiniti\"\n count={1}\n checked={activeFilters.makeInfiniti}\n onClick={e => this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"lexus\"\n count={1}\n checked={activeFilters.makeLexus}\n onClick={e => this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"acura\"\n count={0}\n checked={activeFilters.makeAcura}\n onClick={e => this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat4\"\n title=\"Payment Options\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.payment}\n onShowAllToggle={() => this.onShowAllToggle('payment')}\n >\n <FilterSidePanelCategoryItem\n key=\"pp\"\n icon={<CcPaypalIcon />}\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"discover\"\n icon={<CcDiscoverIcon />}\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"visa\"\n icon={<CcVisaIcon />}\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"mc\"\n icon={<CcMastercardIcon />}\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"amex\"\n icon={<CcAmexIcon />}\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"dc\"\n icon={<CcDinersClubIcon />}\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat5\"\n title=\"Fuel Mileage\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.mileage}\n onShowAllToggle={() => this.onShowAllToggle('mileage')}\n >\n <FilterSidePanelCategoryItem\n key=\"gt50\"\n count={3}\n checked={activeFilters.mileage50}\n onClick={e => this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"4050\"\n count={7}\n checked={activeFilters.mileage40}\n onClick={e => this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"3040\"\n count={9}\n checked={activeFilters.mileage30}\n onClick={e => this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"2030\"\n count={12}\n checked={activeFilters.mileage20}\n onClick={e => this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n </FilterSidePanelCategoryItem>\n <FilterSidePanelCategoryItem\n key=\"gt20\"\n count={8}\n checked={activeFilters.mileage10}\n onClick={e => this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n </FilterSidePanelCategoryItem>\n </FilterSidePanelCategory>\n <FilterSidePanelCategory\n key=\"cat6\"\n title=\"Rating\"\n maxShowCount={maxShowCount}\n leeway={leeway}\n showAll={showAllCategories.rating}\n onShowAllToggle={() => this.onShowAllToggle('rating')}\n >\n <FilterSidePanelCategoryItem\n key=\"5star\"\n count={2}\n icon={this.getStars(5)}\n checked={activeFilters.rating5}\n onClick={e => this.onFilterChange('rating5', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"4star\"\n count={12}\n icon={this.getStars(4)}\n checked={activeFilters.rating4}\n onClick={e => this.onFilterChange('rating4', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"3star\"\n count={8}\n icon={this.getStars(3)}\n checked={activeFilters.rating3}\n onClick={e => this.onFilterChange('rating3', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"2star\"\n count={5}\n icon={this.getStars(2)}\n checked={activeFilters.rating2}\n onClick={e => this.onFilterChange('rating2', e.target.checked)}\n />\n <FilterSidePanelCategoryItem\n key=\"1star\"\n count={3}\n icon={this.getStars(1)}\n checked={activeFilters.rating1}\n onClick={e => this.onFilterChange('rating1', e.target.checked)}\n />\n </FilterSidePanelCategory>\n </FilterSidePanel>\n </div>\n );\n }\n}","title":"Basic","lang":"js"}}> </Example> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index 82e209c..206147a 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -77,7 +77,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';" pageData.examples = { 'Properties side panel with property items': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <span>\n <OkIcon style={{color: '--pf-t--global--color--status--success--default'}} /> Certified\n </span>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n </div>\n)","title":"Properties side panel with property items","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <span>\n <OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified\n </span>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n)","title":"Properties side panel with property items","lang":"js"}}> </Example> }; diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx index 0211190..07c94cd 100644 --- a/packages/module/src/components/CatalogTile/CatalogTile.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTile.tsx @@ -119,7 +119,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> { > {(badges.length > 0 || iconImg || iconClass || icon || onClick) && ( <CardHeader - actions={{ actions: badges.length > 0 && this.renderBadges(badges) }} + actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }} selectableActions={ onClick && { selectableActionId: id + '-input', From 5e8fdc09be374cb7b29fd8f3e965a8ecbfe32902 Mon Sep 17 00:00:00 2001 From: mcoker <mcoker@redhat.com> Date: Thu, 2 May 2024 17:56:18 -0500 Subject: [PATCH 17/19] chore(propertiessidepanel): fix icon color --- .../content/examples/PropertiesSidePanel.md | 10 +++++++--- .../catalog-view/properties-side-panel/react.js | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 570bea4..7f5f342 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -23,6 +23,7 @@ Note: PropertiesSidePanel lives in its own package at [`@patternfly/react-catalo import React from 'react'; import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension'; import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon'; +import { Icon } from '@patternfly/react-core'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; @@ -31,9 +32,12 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; <PropertyItem label="Certified Level" value={ - <span> - <OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified - </span> + <> + <Icon status="success"> + <OkIcon /> + </Icon> + Certified + </> } /> <PropertyItem label="Provider" value="Red Hat, Inc" /> diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index 206147a..0287cce 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -77,7 +77,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';" pageData.examples = { 'Properties side panel with property items': props => - <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <span>\n <OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified\n </span>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n)","title":"Properties side panel with property items","lang":"js"}}> + <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';\nimport OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';\nimport { Icon } from '@patternfly/react-core';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\n\nconst PropertiesSidePanelWithPropertyItems = () => (\n <PropertiesSidePanel>\n <PropertyItem label=\"Operator Version\" value=\"0.9.8 (latest)\" />\n <PropertyItem\n label=\"Certified Level\"\n value={\n <>\n <Icon status=\"success\">\n <OkIcon />\n </Icon>\n Certified\n </>\n }\n />\n <PropertyItem label=\"Provider\" value=\"Red Hat, Inc\" />\n <PropertyItem label=\"Health Index\" value=\"A\" />\n <PropertyItem\n label=\"Repository\"\n value={\n <a href=\"https://quay.io/repository/redhat/prometheus-operator\">\n https://quay.io/repository/redhat/prometheus-operator\n </a>\n }\n />\n <PropertyItem\n label=\"Container Image\"\n value={\n <a href=\"#\">\n 0.22.2 <ExternalLinkAltIcon />\n </a>\n }\n />\n <PropertyItem\n label=\"Created At\"\n value={\n <span>\n <GlobeIcon /> Aug 23, 1:58pm\n </span>\n }\n />\n <PropertyItem label=\"Support\" value={<a href=\"#\">Red Hat</a>} />\n </PropertiesSidePanel>\n)","title":"Properties side panel with property items","lang":"js"}}> </Example> }; From 035f51f271b87e846e773cbfb3404f9bfbc5f476 Mon Sep 17 00:00:00 2001 From: mcoker <mcoker@redhat.com> Date: Thu, 2 May 2024 20:03:33 -0500 Subject: [PATCH 18/19] chore(verticalTab): move blue accent from link to li --- .../module/patternfly-docs/content/examples/verticalTab.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/examples/verticalTab.css b/packages/module/patternfly-docs/content/examples/verticalTab.css index b7a1780..2f9ffd3 100644 --- a/packages/module/patternfly-docs/content/examples/verticalTab.css +++ b/packages/module/patternfly-docs/content/examples/verticalTab.css @@ -48,10 +48,11 @@ background: var(--pf-t--global--background--color--disabled--default); pointer-events: none; } -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a::before { +.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active::before { background: var(--pf-t--global--border--color--clicked); content: " "; inset-inline-start: 0; + inset-block-start: var(--pf-t--global--spacer--xs); position: absolute; width: var(--pf-t--global--border--width--extra-strong); } From 7d9783d87234fb0a041099a976b1f9ea05c450ae Mon Sep 17 00:00:00 2001 From: Jessie <jhuff@redhat.com> Date: Fri, 3 May 2024 11:49:25 -0400 Subject: [PATCH 19/19] Update snapshots --- .../__snapshots__/CatalogTile.test.tsx.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index 5d4fb9d..46126e3 100644 --- a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -61,7 +61,7 @@ exports[`CatalogTile renders properly 1`] = ` class="pf-v6-c-card__header" > <div - class="pf-v6-c-card__actions" + class="pf-v6-c-card__actions pf-m-no-offset" > <div class="catalog-tile-pf-badge-container" @@ -171,7 +171,7 @@ exports[`CatalogTile renders properly 1`] = ` class="pf-v6-c-card__header" > <div - class="pf-v6-c-card__actions" + class="pf-v6-c-card__actions pf-m-no-offset" > <div class="catalog-tile-pf-badge-container" @@ -283,7 +283,7 @@ exports[`CatalogTile renders properly 1`] = ` class="pf-v6-c-card__header" > <div - class="pf-v6-c-card__actions" + class="pf-v6-c-card__actions pf-m-no-offset" > <div class="catalog-tile-pf-badge-container" @@ -371,7 +371,7 @@ exports[`CatalogTile renders properly 1`] = ` class="pf-v6-c-card__header" > <div - class="pf-v6-c-card__actions" + class="pf-v6-c-card__actions pf-m-no-offset" > <div class="catalog-tile-pf-badge-container" @@ -475,7 +475,7 @@ exports[`CatalogTile renders properly 1`] = ` class="pf-v6-c-card__header" > <div - class="pf-v6-c-card__actions" + class="pf-v6-c-card__actions pf-m-no-offset" /> <div class="pf-v6-c-card__header-main"