+ { children(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) }
+
+ )
+};
diff --git a/packages/documentation-framework/scripts/md/parseMD.js b/packages/documentation-framework/scripts/md/parseMD.js
index 892d913e60..3823fc00dc 100644
--- a/packages/documentation-framework/scripts/md/parseMD.js
+++ b/packages/documentation-framework/scripts/md/parseMD.js
@@ -292,6 +292,7 @@ function sourceMDFile(file, source, buildMode) {
source: pageData.source,
tabName: pageData.tabName,
...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
+ ...(pageData.beta && { beta: pageData.beta }),
...(pageData.sortValue && { sortValue: pageData.sortValue }),
...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
};
diff --git a/packages/documentation-framework/scripts/webpack/webpack.base.config.js b/packages/documentation-framework/scripts/webpack/webpack.base.config.js
index d27bfc4eed..9883642b1d 100644
--- a/packages/documentation-framework/scripts/webpack/webpack.base.config.js
+++ b/packages/documentation-framework/scripts/webpack/webpack.base.config.js
@@ -149,7 +149,7 @@ module.exports = (_env, argv) => {
'process.env.sideNavItems': JSON.stringify(sideNavItems),
'process.env.topNavItems': JSON.stringify(topNavItems),
'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),
- 'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || ''),
+ 'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || '')
}),
new CopyWebpackPlugin({
patterns: [
diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index 99f7b84cea..305694b289 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -13,7 +13,8 @@ const MDXChildTemplate = ({
Component,
source,
toc = [],
- index = 0
+ index = 0,
+ id
}) => {
const {
propComponents = [],
@@ -61,6 +62,7 @@ const MDXChildTemplate = ({
)}
);
+ console.log(id);
// Create dynamic component for @reach/router
const ChildComponent = () => (
@@ -68,7 +70,7 @@ const MDXChildTemplate = ({
-
+
{InlineAlerts}
@@ -211,38 +221,35 @@ export const MDXTemplate = ({
isWidthLimited
>
- {title}
- {isComponent && summary && ({title}
+ {isComponent && summary && (
- {((!isSinglePage && !hideTabName) ||
- isComponent ||
- isUtility ||
- isDemo) && (
-
-
+ { showTabs && (
+
+
)}
- {isSinglePage && }
{!isSinglePage && (
{sources
diff --git a/packages/v4/patternfly-docs/images/component-illustrations/default-placeholder.png b/packages/v4/patternfly-docs/images/component-illustrations/default-placeholder.png
new file mode 100644
index 0000000000..84c80f801a
Binary files /dev/null and b/packages/v4/patternfly-docs/images/component-illustrations/default-placeholder.png differ
diff --git a/packages/v4/patternfly-docs/images/component-illustrations/index.js b/packages/v4/patternfly-docs/images/component-illustrations/index.js
new file mode 100644
index 0000000000..ab468f4432
--- /dev/null
+++ b/packages/v4/patternfly-docs/images/component-illustrations/index.js
@@ -0,0 +1,88 @@
+export { default as about_modal } from './about-modal.png';
+export { default as accordion } from './accordion.png';
+export { default as action_list } from './action-list.png';
+export { default as alert_group } from './alert-group.png';
+export { default as alert } from './alert.png';
+export { default as application_launcher } from './application-launcher.png';
+export { default as avatar } from './avatar.png';
+export { default as back_to_top } from './back-to-top.png';
+export { default as backdrop } from './backdrop.png';
+export { default as background_image } from './background-image.png';
+export { default as badge } from './badge.png';
+export { default as banner } from './banner.png';
+export { default as brand } from './brand.png';
+export { default as breadcrumb } from './breadcrumb.png';
+export { default as button } from './button.png';
+export { default as calendar_month } from './calendar-month.png';
+export { default as card } from './card.png';
+export { default as checkbox } from './checkbox.png';
+export { default as chip_group } from './chip-group.png';
+export { default as chip } from './chip.png';
+export { default as clipboard_copy } from './clipboard-copy.png';
+export { default as code_block } from './code-block.png';
+export { default as code_editor } from './code-editor.png';
+export { default as context_selector } from './context-selector.png';
+export { default as data_list } from './data-list.png';
+export { default as date_picker } from './date-picker.png';
+export { default as default_placeholder } from './default-placeholder.png';
+export { default as description_list } from './description-list.png';
+export { default as divider } from './divider.png';
+export { default as drag_and_drop } from './drag-and-drop.png';
+export { default as drawer } from './drawer.png';
+export { default as dropdown } from './dropdown.png';
+export { default as dual_list_selector } from './dual-list-selector.png';
+export { default as empty_state } from './empty-state.png';
+export { default as expandable_section } from './expandable-section.png';
+export { default as file_upload_multiple } from './file-upload-multiple.png';
+export { default as file_upload } from './file-upload.png';
+export { default as form_control } from './form-control.png';
+export { default as form } from './form.png';
+export { default as helper_text } from './helper-text.png';
+export { default as hint } from './hint.png';
+export { default as inline_edit } from './inline-edit.png';
+export { default as input_group } from './input-group.png';
+export { default as jump_links } from './jump-links.png';
+export { default as label_group } from './label-group.png';
+export { default as label } from './label.png';
+export { default as list } from './list.png';
+export { default as login_page } from './login-page.png';
+export { default as masthead } from './masthead.png';
+export { default as menu_toggle } from './menu-toggle.png';
+export { default as menu } from './menu.png';
+export { default as modal } from './modal.png';
+export { default as navigation } from './navigation.png';
+export { default as notification_badge } from './notification-badge.png';
+export { default as notification_drawer } from './notification-drawer.png';
+export { default as number_input } from './number-input.png';
+export { default as options_menu } from './options-menu.png';
+export { default as overflow_menu } from './overflow-menu.png';
+export { default as page } from './page.png';
+export { default as pagination } from './pagination.png';
+export { default as panel } from './panel.png';
+export { default as popover } from './popover.png';
+export { default as progress_stepper } from './progress-stepper.png';
+export { default as progress } from './progress.png';
+export { default as radio } from './radio.png';
+export { default as search_input } from './search-input.png';
+export { default as select } from './select.png';
+export { default as sidebar } from './sidebar.png';
+export { default as simple_list } from './simple-list.png';
+export { default as skeleton } from './skeleton.png';
+export { default as skip_to_content } from './skip-to-content.png';
+export { default as slider } from './slider.png';
+export { default as spinner } from './spinner.png';
+export { default as switch } from './switch.png';
+export { default as tab_content } from './tab-content.png';
+export { default as table } from './table.png';
+export { default as tabs } from './tabs.png';
+export { default as text_area } from './text-area.png';
+export { default as text_input_group } from './text-input-group.png';
+export { default as text_input } from './text-input.png';
+export { default as text } from './text.png';
+export { default as tile } from './tile.png';
+export { default as toggle_group } from './toggle-group.png';
+export { default as toolbar } from './toolbar.png';
+export { default as tooltip } from './tooltip.png';
+export { default as tree_view } from './tree-view.png';
+export { default as truncate } from './truncate.png';
+export { default as wizard } from './wizard.png';
diff --git a/packages/v4/patternfly-docs/pages/landing-pages/components/view-all-components.md b/packages/v4/patternfly-docs/pages/landing-pages/components/view-all-components.md
new file mode 100644
index 0000000000..d29cd10b15
--- /dev/null
+++ b/packages/v4/patternfly-docs/pages/landing-pages/components/view-all-components.md
@@ -0,0 +1,18 @@
+---
+id: All components
+title: All components
+section: components
+sortValue: 1
+---
+
+import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery';
+import * as illustrations from '../../../images/component-illustrations';
+import componentsData from '../../../components-data.json';
+
+
-
- -
- {sourceKeys.map((source, index) => (
-
- trackEvent('tab_click', 'click_event', source.toUpperCase())} - > - - {tabNames[source]} - - - ))} -
+
+ -
+ {sourceKeys.map((source, index) => (
+
- trackEvent('tab_click', 'click_event', source.toUpperCase())} + > + + {tabNames[source]} + + + ))} +