From 62b592bfd160f7f18af889f1a9bd4c2e83431bf4 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 16 Dec 2024 17:27:51 -0500 Subject: [PATCH] chore(examples): compile & use scss in examples --- .gitignore | 3 +- packages/module/buildSass.js | 2 +- packages/module/package.json | 5 +- .../content/examples/CatalogItemHeader.md | 1 - .../content/examples/CatalogTile.md | 1 - .../content/examples/FilterSidePanel.md | 2 - .../content/examples/PropertiesSidePanel.md | 1 - .../content/examples/VerticalTabs.md | 1 - .../content/examples/catalogItemHeader.css | 28 --- .../content/examples/catalogTile.css | 47 ---- .../content/examples/filterSidePanel.css | 46 ---- .../content/examples/propertiesSidePanel.css | 18 -- .../content/examples/verticalTab.css | 77 ------- .../catalog-view-item-header/react.js | 101 --------- .../catalog-item-header/catalog-view/react.js | 101 --------- .../catalog-tile/catalog-view-tile/react.js | 190 ---------------- .../catalog-tile/catalog-view/react.js | 190 ---------------- .../catalog-view-filter-side-panel/react.js | 202 ------------------ .../catalog-view-item-header/react.js | 100 --------- .../react.js | 106 --------- .../extensions/catalog-view-tile/react.js | 189 ---------------- .../catalog-view-vertical-tabs/react.js | 152 ------------- .../catalog-view/catalog-item-header/react.js | 2 - .../catalog-view/catalog-tile/react.js | 2 - .../catalog-view/filter-side-panel/react.js | 2 - .../properties-side-panel/react.js | 2 - .../catalog-view/vertical-tabs/react.js | 2 - .../patternfly-docs/patternfly-docs.css.js | 1 + .../react-catalog-view-extension.css | 1 + 29 files changed, 8 insertions(+), 1567 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/examples/catalogItemHeader.css delete mode 100644 packages/module/patternfly-docs/content/examples/catalogTile.css delete mode 100644 packages/module/patternfly-docs/content/examples/filterSidePanel.css delete mode 100644 packages/module/patternfly-docs/content/examples/propertiesSidePanel.css delete mode 100644 packages/module/patternfly-docs/content/examples/verticalTab.css delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view-item-header/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-view-item-header/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js delete mode 100644 packages/module/patternfly-docs/generated/extensions/catalog-view-vertical-tabs/react.js create mode 100644 packages/module/src/components/react-catalog-view-extension.css diff --git a/.gitignore b/.gitignore index ff76253..c61f6d6 100644 --- a/.gitignore +++ b/.gitignore @@ -32,4 +32,5 @@ lerna-debug.log # For vim *.swp -public \ No newline at end of file +public +**/generated/**/*.js diff --git a/packages/module/buildSass.js b/packages/module/buildSass.js index 79f3064..8be2ee0 100644 --- a/packages/module/buildSass.js +++ b/packages/module/buildSass.js @@ -29,4 +29,4 @@ if (!fs.existsSync(outDir)) { fs.mkdirSync(outDir, { recursive: true }); } -fs.writeFileSync(path.join(outDir, 'react-catalog-view-extension.css'), res.css); +fs.writeFileSync(path.join('src/components', 'react-catalog-view-extension.css'), res.css); diff --git a/packages/module/package.json b/packages/module/package.json index 6368bfd..bb83873 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -17,9 +17,10 @@ "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000", "test:a11y": "patternfly-a11y --config patternfly-a11y.config", "serve:a11y": "yarn serve coverage", - "generate": "yarn build:sass && yarn copy:sass", + "generate": "yarn build:sass && yarn copy:sass && yarn copy:css", "build:sass": "node buildSass.js", - "copy:sass": "shx mkdir -p dist/sass && shx cp -r sass/react-catalog-view-extension/* dist/sass" + "copy:sass": "shx mkdir -p dist/sass && shx cp -r sass/react-catalog-view-extension/* dist/sass", + "copy:css": "shx mkdir -p dist/css && shx cp src/components/*.css dist/css" }, "repository": { "type": "git", diff --git a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md index ac7767e..1f35f5a 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md +++ b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md @@ -9,7 +9,6 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/ import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; import pfLogo6 from './pfLogo6.svg'; -import './catalogItemHeader.css'; ## Introduction Note: Catalog item header lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)! diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md index 291a6fd..128365b 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogTile.md +++ b/packages/module/patternfly-docs/content/examples/CatalogTile.md @@ -11,7 +11,6 @@ import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-ex 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 pfLogo6 from './pfLogo6.svg'; -import './catalogTile.css'; ## Introduction diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index 25ed37b..0de73cc 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -16,8 +16,6 @@ import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon'; import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon'; import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon'; -import './filterSidePanel.css'; - ## Introduction Note: FilterSidePanel lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)! diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 7f5f342..7793aa1 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -11,7 +11,6 @@ import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-vie 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'; -import './propertiesSidePanel.css'; ## Introduction Note: PropertiesSidePanel lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)! diff --git a/packages/module/patternfly-docs/content/examples/VerticalTabs.md b/packages/module/patternfly-docs/content/examples/VerticalTabs.md index acfc0c6..df3aba6 100644 --- a/packages/module/patternfly-docs/content/examples/VerticalTabs.md +++ b/packages/module/patternfly-docs/content/examples/VerticalTabs.md @@ -8,7 +8,6 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/ --- import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; -import './verticalTab.css'; ## Introduction Note: Vertical tabs lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)! diff --git a/packages/module/patternfly-docs/content/examples/catalogItemHeader.css b/packages/module/patternfly-docs/content/examples/catalogItemHeader.css deleted file mode 100644 index fd1e458..0000000 --- a/packages/module/patternfly-docs/content/examples/catalogItemHeader.css +++ /dev/null @@ -1,28 +0,0 @@ -.ws-react-e-catalog-item-header .text-overflow-pf { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: normal; -} -.ws-react-e-catalog-item-header .catalog-item-header-pf { - display: flex; - align-items: center; -} -.ws-react-e-catalog-item-header .catalog-item-header-pf-icon { - 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-inline-start: var(--pf-t--global--spacer--md); -} -.ws-react-e-catalog-item-header .catalog-item-header-pf-title { - 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: 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 deleted file mode 100644 index e219c30..0000000 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ /dev/null @@ -1,47 +0,0 @@ -.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: var(--pf-t--global--text--color--regular); - text-decoration: none; -} -.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle { - 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); - text-decoration: none; -} -.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover { - color: var(--pf-t--global--text--color--link--hover); - text-decoration: underline; -} -.ws-react-e-catalog-tile .catalog-tile-pf-icon { - font-size: 37px; - height: 37px; - max-width: 60px; - min-width: 37px; -} -.ws-react-e-catalog-tile .catalog-tile-pf-badge-container { - display: flex; - flex: 1; - justify-content: flex-end; - 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: 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; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} -.ws-react-e-catalog-tile .catalog-tile-pf-body .catalog-tile-pf-description span.has-footer { - -webkit-line-clamp: 1; -} -.ws-react-e-catalog-tile .example-ok-icon { - 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 deleted file mode 100644 index f256934..0000000 --- a/packages/module/patternfly-docs/content/examples/filterSidePanel.css +++ /dev/null @@ -1,46 +0,0 @@ -.filter-panel-pf { - 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: 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-block: 0; -} - -.filter-panel-pf-category-items .pf-v6-c-button.pf-m-link { - padding: 0; -} - -.filter-panel-pf-category-items > * + * { - margin-block-start: var(--pf-t--global--spacer--sm); -} - -.filter-panel-pf-category-item { - font-weight: var(--pf-t--global--font--weight--body); -} - -.filter-panel-pf-category-item:first-of-type { - margin-block-start: 0; -} - -.filter-panel-pf-category-item .item-icon { - padding-inline-end: var(--pf-t--global--spacer--xs); -} - -.filter-panel-pf-category-item .item-count { - 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 deleted file mode 100644 index 1cf5375..0000000 --- a/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css +++ /dev/null @@ -1,18 +0,0 @@ -.properties-side-panel-pf { - width: 165px; - display: flex; - flex-direction: column; - gap: var(--pf-t--global--spacer--lg); -} - -.properties-side-panel-pf-property-label { - 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: 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 deleted file mode 100644 index 2f9ffd3..0000000 --- a/packages/module/patternfly-docs/content/examples/verticalTab.css +++ /dev/null @@ -1,77 +0,0 @@ -.ws-react-e-vertical-tabs .vertical-tabs-pf { - list-style: none; - 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-block-end: 0; - padding-block-start: var(--pf-t--global--spacer--xs); -} -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab { - position: relative; -} -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a { - color: var(--pf-t--global--text--color--regular); - display: inline-block; - 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--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 { - overflow-x: hidden; - white-space: nowrap; -} -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.truncate { - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.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::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); -} -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab:first-of-type { - margin-block-start: 0; -} -.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > .vertical-tabs-pf > .vertical-tabs-pf-tab { - 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; - /* Show any active tab, tab that has an active descendant, or is force shown */ -} -.ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active, .ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active-descendant, .ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.shown { - display: block; -} -.ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs.active-tab > .vertical-tabs-pf-tab { - display: block; -} -.ws-react-e-vertical-tabs .vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active > .vertical-tabs-pf > .vertical-tabs-pf-tab { - display: block; -} diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view-item-header/react.js deleted file mode 100644 index 8721fac..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view-item-header/react.js +++ /dev/null @@ -1,101 +0,0 @@ -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 '../../../../content/examples/./catalogItemHeader.css'; -const pageData = { - "id": "Catalog view item header", - "section": "extensions", - "subsection": "Catalog item header", - "source": "react", - "slug": "/extensions/catalog-item-header/catalog-view-item-header/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md", - "propComponents": [ - { - "name": "CatalogItemHeader", - "description": "", - "props": [ - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "null" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic", - "With vendor description" - ] -}; -pageData.liveContext = { - CatalogItemHeader, - pfLogo2 -}; -pageData.relativeImports = { - -}; -pageData.examples = { - 'Basic': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog item header lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic"])} - {React.createElement(pageData.examples["With vendor description"])} - -); -Component.displayName = 'ExtensionsCatalogItemHeaderCatalogViewItemHeaderReactDocs'; -Component.pageData = pageData; - -export default Component; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view/react.js deleted file mode 100644 index 22d226e..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view/react.js +++ /dev/null @@ -1,101 +0,0 @@ -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 '../../../../content/examples/./catalogItemHeader.css'; -const pageData = { - "id": "Catalog view", - "section": "extensions", - "subsection": "Catalog item header", - "source": "react", - "slug": "/extensions/catalog-item-header/catalog-view/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md", - "propComponents": [ - { - "name": "CatalogItemHeader", - "description": "", - "props": [ - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "null" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic", - "With vendor description" - ] -}; -pageData.liveContext = { - CatalogItemHeader, - pfLogo2 -}; -pageData.relativeImports = { - -}; -pageData.examples = { - 'Basic': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog item header lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic"])} - {React.createElement(pageData.examples["With vendor description"])} - -); -Component.displayName = 'ExtensionsCatalogItemHeaderCatalogViewReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index 55ca199..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js +++ /dev/null @@ -1,190 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -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 '../../../../content/examples/./catalogTile.css'; -const pageData = { - "id": "Catalog view tile", - "section": "extensions", - "subsection": "Catalog tile", - "source": "react", - "slug": "/extensions/catalog-tile/catalog-view-tile/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogTile.md", - "propComponents": [ - { - "name": "CatalogTile", - "description": "", - "props": [ - { - "name": "badges", - "type": "React.ReactNode[]", - "description": "Array of badges", - "defaultValue": "[]" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Body content that isn't truncated", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "description", - "type": "string | React.ReactNode", - "description": "Description of the catalog item", - "defaultValue": "null" - }, - { - "name": "featured", - "type": "boolean", - "description": "Flag if the tile is 'featured'", - "defaultValue": "false" - }, - { - "name": "footer", - "type": "string | React.ReactNode", - "description": "Footer for the tile", - "defaultValue": "null" - }, - { - "name": "href", - "type": "string", - "description": "href for the tile if used as a link", - "defaultValue": "null" - }, - { - "name": "icon", - "type": "React.ReactNode", - "description": "Alternatively provided JSX for the icon", - "defaultValue": "null" - }, - { - "name": "iconAlt", - "type": "string", - "description": "Alternate text for the item's icon", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "''" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "id", - "type": "any", - "description": "Id", - "defaultValue": "null" - }, - { - "name": "onClick", - "type": "(event: React.SyntheticEvent) => void", - "description": "Callback for a click on the tile", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic featured tile", - "Basic with footer", - "Link variant", - "With multiple icon badges", - "With text badge", - "With children instead of description" - ] -}; -pageData.liveContext = { - CatalogTile, - CatalogTileBadge, - CogIcon, - OutlinedCheckCircleIcon, - pfLogo2 -}; -pageData.relativeImports = { - -}; -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"}}> - - , - '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"}}> - - , - '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"}}> - - , - '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"}}> - - , - 'With text badge': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog tile lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic featured tile"])} - {React.createElement(pageData.examples["Basic with footer"])} - {React.createElement(pageData.examples["Link variant"])} - {React.createElement(pageData.examples["With multiple icon badges"])} - {React.createElement(pageData.examples["With text badge"])} - {React.createElement(pageData.examples["With children instead of description"])} - -); -Component.displayName = 'ExtensionsCatalogTileCatalogViewTileReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index e522f52..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js +++ /dev/null @@ -1,190 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -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 '../../../../content/examples/./catalogTile.css'; -const pageData = { - "id": "Catalog view", - "section": "extensions", - "subsection": "Catalog tile", - "source": "react", - "slug": "/extensions/catalog-tile/catalog-view/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogTile.md", - "propComponents": [ - { - "name": "CatalogTile", - "description": "", - "props": [ - { - "name": "badges", - "type": "React.ReactNode[]", - "description": "Array of badges", - "defaultValue": "[]" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Body content that isn't truncated", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "description", - "type": "string | React.ReactNode", - "description": "Description of the catalog item", - "defaultValue": "null" - }, - { - "name": "featured", - "type": "boolean", - "description": "Flag if the tile is 'featured'", - "defaultValue": "false" - }, - { - "name": "footer", - "type": "string | React.ReactNode", - "description": "Footer for the tile", - "defaultValue": "null" - }, - { - "name": "href", - "type": "string", - "description": "href for the tile if used as a link", - "defaultValue": "null" - }, - { - "name": "icon", - "type": "React.ReactNode", - "description": "Alternatively provided JSX for the icon", - "defaultValue": "null" - }, - { - "name": "iconAlt", - "type": "string", - "description": "Alternate text for the item's icon", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "''" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "id", - "type": "any", - "description": "Id", - "defaultValue": "null" - }, - { - "name": "onClick", - "type": "(event: React.SyntheticEvent) => void", - "description": "Callback for a click on the tile", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic featured tile", - "Basic with footer", - "Link variant", - "With multiple icon badges", - "With text badge", - "With children instead of description" - ] -}; -pageData.liveContext = { - CatalogTile, - CatalogTileBadge, - CogIcon, - OutlinedCheckCircleIcon, - pfLogo2 -}; -pageData.relativeImports = { - -}; -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"}}> - - , - '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"}}> - - , - '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"}}> - - , - '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"}}> - - , - 'With text badge': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog tile lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic featured tile"])} - {React.createElement(pageData.examples["Basic with footer"])} - {React.createElement(pageData.examples["Link variant"])} - {React.createElement(pageData.examples["With multiple icon badges"])} - {React.createElement(pageData.examples["With text badge"])} - {React.createElement(pageData.examples["With children instead of description"])} - -); -Component.displayName = 'ExtensionsCatalogTileCatalogViewReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index f732226..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js +++ /dev/null @@ -1,202 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@patternfly/react-catalog-view-extension'; -import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; -import CcPaypalIcon from '@patternfly/react-icons/dist/esm/icons/cc-paypal-icon'; -import CcAmexIcon from '@patternfly/react-icons/dist/esm/icons/cc-amex-icon'; -import CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-icon'; -import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon'; -import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon'; -import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon'; -import '../../../content/examples/./filterSidePanel.css'; -const pageData = { - "id": "Catalog view filter side panel", - "section": "extensions", - "subsection": "", - "source": "react", - "slug": "/extensions/catalog-view-filter-side-panel/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/FilterSidePanel.md", - "propComponents": [ - { - "name": "FilterSidePanel", - "description": "", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "description": "Children nodes", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes for the Filter Side Panel", - "defaultValue": "''" - } - ] - }, - { - "name": "FilterSidePanelCategory", - "description": "", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "description": "Children nodes", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes for the Filter Side Panel Category", - "defaultValue": "''" - }, - { - "name": "hideText", - "type": "string", - "description": "Text for the link to hide overflow items, default 'Show less'", - "defaultValue": "null" - }, - { - "name": "leeway", - "type": "number", - "description": "Leeway to add to maxShowCount, minimum X for the 'Show X more'", - "defaultValue": "2" - }, - { - "name": "maxShowCount", - "type": "number", - "description": "Number of items (max) to show before adding Show More link button", - "defaultValue": "5" - }, - { - "name": "onShowAllToggle", - "type": "(event: React.SyntheticEvent) => void", - "description": "Callback function when the Show/Hide link button is clicked", - "defaultValue": "() => null" - }, - { - "name": "showAll", - "type": "boolean", - "description": "Flag to show all items (ie. set to true after Show X more link is clicked)", - "defaultValue": "false" - }, - { - "name": "showText", - "type": "string", - "description": "Text for the link to show all items, default 'Show more'", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Title for the category", - "defaultValue": "null" - } - ] - }, - { - "name": "FilterSidePanelCategoryItem", - "description": "", - "props": [ - { - "name": "checked", - "type": "boolean", - "description": "Flag to show if the Filter Item Checkbox is checked.", - "defaultValue": "false" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Children nodes", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes for the Filter Panel Property Item", - "defaultValue": "''" - }, - { - "name": "count", - "type": "number", - "description": "Optional count of the items matching the filter", - "defaultValue": "null" - }, - { - "name": "icon", - "type": "React.ReactNode", - "description": "Optional icon (or other) to show before the children", - "defaultValue": "null" - }, - { - "name": "onClick", - "type": "(event: React.SyntheticEvent) => void", - "description": "Callback for a click on the Filter Item Checkbox", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string", - "description": "Title of the checkbox", - "defaultValue": "''" - } - ] - } - ], - "examples": [ - "Basic" - ] -}; -pageData.liveContext = { - FilterSidePanel, - FilterSidePanelCategory, - FilterSidePanelCategoryItem, - StarIcon, - CcPaypalIcon, - CcAmexIcon, - CcDiscoverIcon, - CcVisaIcon, - CcMastercardIcon, - CcDinersClubIcon -}; -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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: FilterSidePanel lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`Note: the width, border, and top padding styling are not part of the FilterSidePanel.`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic"])} - -); -Component.displayName = 'ExtensionsCatalogViewFilterSidePanelReactDocs'; -Component.pageData = pageData; - -export default Component; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-item-header/react.js deleted file mode 100644 index 77b6939..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-item-header/react.js +++ /dev/null @@ -1,100 +0,0 @@ -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 '../../../content/examples/./catalogItemHeader.css'; -const pageData = { - "id": "Catalog view item header", - "section": "extensions", - "source": "react", - "slug": "/extensions/catalog-view-item-header/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md", - "propComponents": [ - { - "name": "CatalogItemHeader", - "description": "", - "props": [ - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "null" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic", - "With vendor description" - ] -}; -pageData.liveContext = { - CatalogItemHeader, - pfLogo2 -}; -pageData.relativeImports = { - -}; -pageData.examples = { - 'Basic': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog item header lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic"])} - {React.createElement(pageData.examples["With vendor description"])} - -); -Component.displayName = 'ExtensionsCatalogViewItemHeaderReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index a0172fa..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension'; -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'; -import '../../../content/examples/./propertiesSidePanel.css'; -const pageData = { - "id": "Catalog view properties side panel", - "section": "extensions", - "subsection": "", - "source": "react", - "slug": "/extensions/catalog-view-properties-side-panel/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md", - "propComponents": [ - { - "name": "PropertiesSidePanel", - "description": "", - "props": [ - { - "name": "children", - "type": "React.ReactNode", - "description": "Children, should be PropertyItem items plus any action buttons, etc.", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes for the Property Item", - "defaultValue": "''" - } - ] - }, - { - "name": "PropertyItem", - "description": "", - "props": [ - { - "name": "className", - "type": "string", - "description": "Additional css classes for the Property Item", - "defaultValue": "''" - }, - { - "name": "label", - "type": "string | React.ReactNode", - "description": "Label for the property", - "required": true - }, - { - "name": "value", - "type": "string | React.ReactNode", - "description": "Value of the property", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Properties side panel with property items" - ] -}; -pageData.liveContext = { - PropertiesSidePanel, - PropertyItem, - OkIcon, - ExternalLinkAltIcon, - GlobeIcon -}; -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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: PropertiesSidePanel lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Properties side panel with property items"])} - -); -Component.displayName = 'ExtensionsCatalogViewPropertiesSidePanelReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index 158ce7e..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js +++ /dev/null @@ -1,189 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -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 '../../../content/examples/./catalogTile.css'; -const pageData = { - "id": "Catalog view tile", - "section": "extensions", - "source": "react", - "slug": "/extensions/catalog-view-tile/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/CatalogTile.md", - "propComponents": [ - { - "name": "CatalogTile", - "description": "", - "props": [ - { - "name": "badges", - "type": "React.ReactNode[]", - "description": "Array of badges", - "defaultValue": "[]" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Body content that isn't truncated", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "description", - "type": "string | React.ReactNode", - "description": "Description of the catalog item", - "defaultValue": "null" - }, - { - "name": "featured", - "type": "boolean", - "description": "Flag if the tile is 'featured'", - "defaultValue": "false" - }, - { - "name": "footer", - "type": "string | React.ReactNode", - "description": "Footer for the tile", - "defaultValue": "null" - }, - { - "name": "href", - "type": "string", - "description": "href for the tile if used as a link", - "defaultValue": "null" - }, - { - "name": "icon", - "type": "React.ReactNode", - "description": "Alternatively provided JSX for the icon", - "defaultValue": "null" - }, - { - "name": "iconAlt", - "type": "string", - "description": "Alternate text for the item's icon", - "defaultValue": "''" - }, - { - "name": "iconClass", - "type": "string", - "description": "Class for the image when an icon is to be used (exclusive from iconImg)", - "defaultValue": "''" - }, - { - "name": "iconImg", - "type": "string", - "description": "URL of an image for the item's icon", - "defaultValue": "null" - }, - { - "name": "id", - "type": "any", - "description": "Id", - "defaultValue": "null" - }, - { - "name": "onClick", - "type": "(event: React.SyntheticEvent) => void", - "description": "Callback for a click on the tile", - "defaultValue": "null" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Tile for the catalog item", - "required": true - }, - { - "name": "vendor", - "type": "string | React.ReactNode", - "description": "Vendor for the catalog item", - "defaultValue": "null" - } - ] - } - ], - "examples": [ - "Basic featured tile", - "Basic with footer", - "Link variant", - "With multiple icon badges", - "With text badge", - "With children instead of description" - ] -}; -pageData.liveContext = { - CatalogTile, - CatalogTileBadge, - CogIcon, - OutlinedCheckCircleIcon, - pfLogo2 -}; -pageData.relativeImports = { - -}; -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"}}> - - , - '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"}}> - - , - '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"}}> - - , - '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"}}> - - , - 'With text badge': props => - (\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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Catalog tile lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic featured tile"])} - {React.createElement(pageData.examples["Basic with footer"])} - {React.createElement(pageData.examples["Link variant"])} - {React.createElement(pageData.examples["With multiple icon badges"])} - {React.createElement(pageData.examples["With text badge"])} - {React.createElement(pageData.examples["With children instead of description"])} - -); -Component.displayName = 'ExtensionsCatalogViewTileReactDocs'; -Component.pageData = pageData; - -export default Component; 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 deleted file mode 100644 index 1225ab6..0000000 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-vertical-tabs/react.js +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; -import '../../../content/examples/./verticalTab.css'; -const pageData = { - "id": "Catalog view vertical tabs", - "section": "extensions", - "subsection": "", - "source": "react", - "slug": "/extensions/catalog-view-vertical-tabs/react", - "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/module/patternfly-docs/content/examples/VerticalTabs.md", - "propComponents": [ - { - "name": "VerticalTabs", - "description": "", - "props": [ - { - "name": "activeTab", - "type": "boolean", - "description": "Flag if a direct child is active (only used in restrictTabs mode)", - "defaultValue": "false" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Children nodes", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "restrictTabs", - "type": "boolean", - "description": "Flag to restrict shown tabs to active tabs, their parents, their siblings, and direct children", - "defaultValue": "false" - } - ] - }, - { - "name": "VerticalTabsTab", - "description": "", - "props": [ - { - "name": "active", - "type": "boolean", - "description": "Flag if this is the active tab", - "defaultValue": "false" - }, - { - "name": "children", - "type": "React.ReactNode", - "description": "Child tab nodes (VerticalTabsTab's)", - "defaultValue": "null" - }, - { - "name": "className", - "type": "string", - "description": "Additional css classes", - "defaultValue": "''" - }, - { - "name": "component", - "type": "React.ElementType | React.ComponentType", - "description": "Sets the base component to render. defaults to a" - }, - { - "name": "hasActiveDescendant", - "type": "boolean", - "description": "Flag if a descendant tab is active (used only in restrictTabs mode)", - "defaultValue": "false" - }, - { - "name": "href", - "type": "string", - "description": "HREF location" - }, - { - "name": "onActivate", - "type": "() => void", - "description": "Callback function when the tab is activated", - "defaultValue": "null" - }, - { - "name": "shown", - "type": "boolean", - "description": "Flag to force show the tab (if parent tab is shown, used only in restrictTabs mode)", - "defaultValue": "false" - }, - { - "name": "title", - "type": "string | React.ReactNode", - "description": "Title for the tab", - "defaultValue": "null" - }, - { - "name": "wrapStyle", - "type": "'wrap' | 'truncate' | 'nowrap'", - "description": "Title wrap style", - "defaultValue": "'wrap'" - } - ] - } - ], - "examples": [ - "Basic" - ] -}; -pageData.liveContext = { - VerticalTabs, - VerticalTabsTab -}; -pageData.relativeImports = { - -}; -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"}}> - - -}; - -const Component = () => ( - - - {`Introduction`} - -

- {`Note: Vertical tabs lives in its own package at `} - - - {`@patternfly/react-catalog-view-extension`} - - - {`!`} -

-

- {`This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.`} -

- - {`Examples`} - - {React.createElement(pageData.examples["Basic"])} - -); -Component.displayName = 'ExtensionsCatalogViewVerticalTabsReactDocs'; -Component.pageData = pageData; - -export default Component; 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 f53b595..b4ca213 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 @@ -2,7 +2,6 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension'; import pfLogo6 from '../../../../content/examples/./pfLogo6.svg'; -import '../../../../content/examples/./catalogItemHeader.css'; const pageData = { "id": "Catalog item header", "section": "extensions", @@ -64,7 +63,6 @@ pageData.liveContext = { CatalogItemHeader, pfLogo6 }; -pageData.relativeImports = "import 'content/examples/./catalogItemHeader.css';" pageData.examples = { 'Basic': props => (\n \n)","title":"Basic","lang":"js","className":""}}> 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 6020645..30f4050 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 @@ -4,7 +4,6 @@ import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-ex 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 pfLogo6 from '../../../../content/examples/./pfLogo6.svg'; -import '../../../../content/examples/./catalogTile.css'; const pageData = { "id": "Catalog tile", "section": "extensions", @@ -133,7 +132,6 @@ pageData.liveContext = { OutlinedCheckCircleIcon, 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","className":""}}> 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 c2dc3f6..31eacd1 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 @@ -8,7 +8,6 @@ import CcDiscoverIcon from '@patternfly/react-icons/dist/esm/icons/cc-discover-i import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon'; import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon'; import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon'; -import '../../../../content/examples/./filterSidePanel.css'; const pageData = { "id": "Filter side panel", "section": "extensions", @@ -167,7 +166,6 @@ pageData.liveContext = { CcMastercardIcon, CcDinersClubIcon }; -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","className":""}}> 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 9fd026c..136e6cc 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 @@ -4,7 +4,6 @@ import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-vie 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'; -import '../../../../content/examples/./propertiesSidePanel.css'; const pageData = { "id": "Properties side panel", "section": "extensions", @@ -74,7 +73,6 @@ pageData.liveContext = { ExternalLinkAltIcon, GlobeIcon }; -pageData.relativeImports = "import 'content/examples/./propertiesSidePanel.css';" pageData.examples = { 'Properties side panel with property items': props => (\n \n \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)","title":"Properties side panel with property items","lang":"js","className":""}}> 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 690c5d7..c939dea 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 @@ -1,7 +1,6 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; -import '../../../../content/examples/./verticalTab.css'; const pageData = { "id": "Vertical tabs", "section": "extensions", @@ -120,7 +119,6 @@ pageData.liveContext = { VerticalTabs, VerticalTabsTab }; -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","className":""}}> diff --git a/packages/module/patternfly-docs/patternfly-docs.css.js b/packages/module/patternfly-docs/patternfly-docs.css.js index 240ac3b..5e778f8 100644 --- a/packages/module/patternfly-docs/patternfly-docs.css.js +++ b/packages/module/patternfly-docs/patternfly-docs.css.js @@ -6,3 +6,4 @@ import '@patternfly/patternfly/patternfly-addons.css'; import '@patternfly/documentation-framework/global.css'; // Add your extension CSS below +import '../src/components/react-catalog-view-extension.css'; diff --git a/packages/module/src/components/react-catalog-view-extension.css b/packages/module/src/components/react-catalog-view-extension.css new file mode 100644 index 0000000..3b9eb13 --- /dev/null +++ b/packages/module/src/components/react-catalog-view-extension.css @@ -0,0 +1 @@ +:root{--vertical-tab-pf-color: var(--pf-t--global--text--color--regular);--vertical-tab-pf-active-color: var(--pf-t--global--text--color--brand--clicked)}.catalog-item-header-pf{display:flex;align-items:center}.catalog-item-header-pf-icon{font-size:60px;max-height:60px;width:60px}.catalog-item-header-pf-text{margin-left:20px}.catalog-item-header-pf-title{font-weight:400;margin-bottom:0;margin-top:0}.catalog-item-header-pf-subtitle{color:var(--pf-t--global--text--color--subtle);margin-bottom:0}.catalog-tile-pf.featured{border-top:2px solid var(--pf-t--global--border--color--brand--default)}.catalog-tile-pf:active,.catalog-tile-pf:hover,.catalog-tile-pf:focus,.catalog-tile-pf:visited{color:inherit;text-decoration:none}.catalog-tile-pf .pf-v6-c-card__actions{padding-left:5px}.catalog-tile-pf-header{font-size:16px;font-weight:400;padding-bottom:16px}.catalog-tile-pf-header .catalog-tile-pf-title{font-size:15px;font-weight:400}.catalog-tile-pf-header .catalog-tile-pf-subtitle{color:var(--pf-t--global--text--color--subtle);font-size:13px;font-weight:initial}.catalog-tile-pf-header .catalog-tile-pf-subtitle a,.catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover{text-decoration:none}.catalog-tile-pf-icon{font-size:40px;height:40px;max-width:60px;min-width:40px}.catalog-tile-pf-badge-container{display:flex;flex:1;justify-content:flex-end}.catalog-tile-pf-badge-container .catalog-tile-pf-badge{font-size:16px;margin-left:5px}.catalog-tile-pf-description{margin-top:0}.catalog-tile-pf-description span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.catalog-tile-pf-description .has-footer{-webkit-line-clamp:1}.vertical-tabs-pf{list-style:none;margin:0 0 30px;padding:0}.vertical-tabs-pf .vertical-tabs-pf{margin-bottom:0}.vertical-tabs-pf-tab{margin-top:4px;position:relative}.vertical-tabs-pf-tab>a{color:var(--pf-t--global--text--color--regular);display:inline-block;font-size:13px;padding:3px 6px 3px 15px;vertical-align:top;width:100%;word-break:break-word}.vertical-tabs-pf-tab>a:hover,.vertical-tabs-pf-tab>a:focus{color:var(--pf-t--global--text--color--brand--hover);text-decoration:none}.vertical-tabs-pf-tab>a.no-wrap{overflow-x:hidden;white-space:nowrap}.vertical-tabs-pf-tab>a.truncate{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.vertical-tabs-pf-tab.active>a{color:var(--pf-t--global--text--color--brand--clicked)}.vertical-tabs-pf-tab.active>a::before{background:var(--pf-t--global--border--color--brand--clicked);content:" ";left:0;position:absolute;width:3px}.vertical-tabs-pf-tab:first-of-type{margin-top:0}.vertical-tabs-pf-tab>.vertical-tabs-pf>.vertical-tabs-pf-tab{position:initial;padding-left:15px}.vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab{display:none}.vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active,.vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active-descendant,.vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.shown{display:block}.vertical-tabs-pf.restrict-tabs.active-tab>.vertical-tabs-pf-tab{display:block}.vertical-tabs-pf.restrict-tabs .vertical-tabs-pf-tab.active>.vertical-tabs-pf>.vertical-tabs-pf-tab{display:block}.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}.properties-side-panel-pf-property-label{font-weight:700 !important;font-size:14px !important;margin:0 !important}.properties-side-panel-pf-property-value{font-size:14px !important;margin-top:8px;word-break:break-word}.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}.filter-panel-pf-category-title{border:0;font-size:inherit;margin:0 0 8px 0;font-weight:700}.filter-panel-pf-category-items{margin-top:0;margin-bottom:0}.filter-panel-pf-category-item{margin-top:5px}.filter-panel-pf-category-item:first-of-type{margin-top:0}.filter-panel-pf-category-item .pf-v6-c-check__label{min-height:23px}.filter-panel-pf-category-item .item-icon{padding-right:3px}.filter-panel-pf-category-item .item-count{padding-left:3px} \ No newline at end of file