diff --git a/packages/module/package.json b/packages/module/package.json index 03c2ba0..a9c33cc 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -53,7 +53,7 @@ "react-dom": "^16.8 || ^17 || ^18" }, "devDependencies": { - "@patternfly/documentation-framework": "^1.2.55", + "@patternfly/documentation-framework": "^1.3.0", "@patternfly/react-table": "^4.111.4", "@patternfly/react-code-editor": "^4.82.26", "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 9d0256f..c9b09bb 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md +++ b/packages/module/patternfly-docs/content/examples/CatalogItemHeader.md @@ -1,6 +1,7 @@ --- -id: Catalog view item header +id: Catalog item header section: extensions +subsection: Catalog view source: react propComponents: ['CatalogItemHeader'] --- diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md index 13f1a41..ca4ca8b 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogTile.md +++ b/packages/module/patternfly-docs/content/examples/CatalogTile.md @@ -1,6 +1,7 @@ --- -id: Catalog view tile +id: Catalog tile section: extensions +subsection: Catalog view source: react propComponents: ['CatalogTile'] --- diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index ed5b434..8f2e062 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -1,6 +1,7 @@ --- -id: Catalog view filter side panel +id: Filter side panel section: extensions +subsection: Catalog view source: react propComponents: ['FilterSidePanel', 'FilterSidePanelCategory', 'FilterSidePanelCategoryItem'] --- diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 63fadf8..ef2c7e9 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -1,6 +1,7 @@ --- -id: Catalog view properties side panel +id: Properties side panel section: extensions +subsection: Catalog view source: react propComponents: ['PropertiesSidePanel', 'PropertyItem'] --- diff --git a/packages/module/patternfly-docs/content/examples/VerticalTabs.md b/packages/module/patternfly-docs/content/examples/VerticalTabs.md index fba47a1..10edf8a 100644 --- a/packages/module/patternfly-docs/content/examples/VerticalTabs.md +++ b/packages/module/patternfly-docs/content/examples/VerticalTabs.md @@ -1,6 +1,7 @@ --- -id: Catalog view vertical tabs +id: Vertical tabs section: extensions +subsection: Catalog view source: react propComponents: ['VerticalTabs', 'VerticalTabsTab'] --- 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 new file mode 100644 index 0000000..0cd4f84 --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view-item-header/react.js @@ -0,0 +1,101 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogItemHeader } from '@ausuliv/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 `} + + + {`@ausuliv/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 new file mode 100644 index 0000000..bc69caf --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-item-header/catalog-view/react.js @@ -0,0 +1,101 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogItemHeader } from '@ausuliv/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 `} + + + {`@ausuliv/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 new file mode 100644 index 0000000..452f5d4 --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js @@ -0,0 +1,190 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogTile, CatalogTileBadge } from '@ausuliv/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 `} + + + {`@ausuliv/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 new file mode 100644 index 0000000..449c53c --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js @@ -0,0 +1,190 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogTile, CatalogTileBadge } from '@ausuliv/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 `} + + + {`@ausuliv/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 index 15af7a0..7409808 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 @@ -12,6 +12,7 @@ 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", 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 7148de3..eb18dbb 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 @@ -8,6 +8,7 @@ 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", 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 191f786..8ac5962 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 @@ -5,6 +5,7 @@ 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", 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 new file mode 100644 index 0000000..2d122e1 --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js @@ -0,0 +1,101 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogItemHeader } from '@ausuliv/react-catalog-view-extension'; +import pfLogo2 from '../../../../content/examples/./pfLogo2.svg'; +import '../../../../content/examples/./catalogItemHeader.css'; +const pageData = { + "id": "Catalog item header", + "section": "extensions", + "subsection": "Catalog view", + "source": "react", + "slug": "/extensions/catalog-view/catalog-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 `} + + + {`@ausuliv/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 = 'ExtensionsCatalogViewCatalogItemHeaderReactDocs'; +Component.pageData = pageData; + +export default Component; 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 new file mode 100644 index 0000000..b12ae4f --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js @@ -0,0 +1,190 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { CatalogTile, CatalogTileBadge } from '@ausuliv/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 tile", + "section": "extensions", + "subsection": "Catalog view", + "source": "react", + "slug": "/extensions/catalog-view/catalog-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 `} + + + {`@ausuliv/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 = 'ExtensionsCatalogViewCatalogTileReactDocs'; +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 new file mode 100644 index 0000000..4de39cf --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -0,0 +1,202 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { FilterSidePanel, FilterSidePanelCategory, FilterSidePanelCategoryItem } from '@ausuliv/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": "Filter side panel", + "section": "extensions", + "subsection": "Catalog view", + "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 `} + + + {`@ausuliv/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/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js new file mode 100644 index 0000000..e7387ea --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -0,0 +1,106 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { PropertiesSidePanel, PropertyItem } from '@ausuliv/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": "Properties side panel", + "section": "extensions", + "subsection": "Catalog view", + "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 `} + + + {`@ausuliv/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/vertical-tabs/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js new file mode 100644 index 0000000..5f1d255 --- /dev/null +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js @@ -0,0 +1,152 @@ +import React from 'react'; +import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; +import { VerticalTabs, VerticalTabsTab } from '@ausuliv/react-catalog-view-extension'; +import '../../../../content/examples/./verticalTab.css'; +const pageData = { + "id": "Vertical tabs", + "section": "extensions", + "subsection": "Catalog view", + "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 `} + + + {`@ausuliv/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/index.js b/packages/module/patternfly-docs/generated/index.js index 9f11f6d..49313c9 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -1,47 +1,52 @@ module.exports = { - '/extensions/catalog-view-item-header/react': { - id: "Catalog view item header", - title: "Catalog view item header", + '/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", - Component: () => import(/* webpackChunkName: "extensions/catalog-view-item-header/react/index" */ './extensions/catalog-view-item-header/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-item-header/react/index" */ './extensions/catalog-view/catalog-item-header/react') }, - '/extensions/catalog-view-tile/react': { - id: "Catalog view tile", - title: "Catalog view tile", + '/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", - Component: () => import(/* webpackChunkName: "extensions/catalog-view-tile/react/index" */ './extensions/catalog-view-tile/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/catalog-tile/react/index" */ './extensions/catalog-view/catalog-tile/react') }, - '/extensions/catalog-view-filter-side-panel/react': { - id: "Catalog view filter side panel", - title: "Catalog view filter side panel", + '/extensions/catalog-view/filter-side-panel/react': { + id: "Filter side panel", + title: "Filter side panel", toc: [{"text":"Introduction"},{"text":"Examples"},[{"text":"Basic"}]], examples: ["Basic"], section: "extensions", + subsection: "Catalog view", source: "react", - Component: () => import(/* webpackChunkName: "extensions/catalog-view-filter-side-panel/react/index" */ './extensions/catalog-view-filter-side-panel/react') + 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: "Catalog view properties side panel", - title: "Catalog view properties side panel", + '/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", - Component: () => import(/* webpackChunkName: "extensions/catalog-view-properties-side-panel/react/index" */ './extensions/catalog-view-properties-side-panel/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/properties-side-panel/react/index" */ './extensions/catalog-view/properties-side-panel/react') }, - '/extensions/catalog-view-vertical-tabs/react': { - id: "Catalog view vertical tabs", - title: "Catalog view vertical tabs", + '/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", - Component: () => import(/* webpackChunkName: "extensions/catalog-view-vertical-tabs/react/index" */ './extensions/catalog-view-vertical-tabs/react') + Component: () => import(/* webpackChunkName: "extensions/catalog-view/vertical-tabs/react/index" */ './extensions/catalog-view/vertical-tabs/react') } }; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index fe43d51..e47c7ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1630,10 +1630,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^1.2.55": - version "1.2.55" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-1.2.55.tgz#c4c304ae720cc85da8a31c1d6921b26c88cb0715" - integrity sha512-uPfC5rHBcbYJpfh1wUojfxBoHaA7/UCkCvSFKNzO2IlkgGMm4cQv0R9ESjbaZrXtmB/FKaw7m5L+oBTTZTSzqA== +"@patternfly/documentation-framework@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-1.3.0.tgz#ad6cd0789bbca78b6c9f7f3c2812167a4860f850" + integrity sha512-y9q47LP29+fyRwBhQloH6Hp1wvSjZlfCMiAvQAhBety4LBEltWFpdjt2gHzPoneTKbBYChiY0d63ZIrr57bbZA== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12"