diff --git a/package-lock.json b/package-lock.json index 52a2b1c9..2f2981c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "0.0.2", "license": "MIT", "dependencies": { - "@patternfly/react-core": "6.0.0-alpha.7", - "@patternfly/react-icons": "6.0.0-alpha.5", - "@patternfly/react-styles": "6.0.0-alpha.5", + "@patternfly/react-core": "6.0.0-alpha.28", + "@patternfly/react-icons": "6.0.0-alpha.11", + "@patternfly/react-styles": "6.0.0-alpha.11", "@storybook/builder-webpack5": "^7.5.3", "react": "^18", "react-dom": "^18", @@ -2234,13 +2234,13 @@ } }, "node_modules/@patternfly/react-core": { - "version": "6.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.7.tgz", - "integrity": "sha512-/C+hoA4D7vr33KmjdN99X/zPOAx00F3HvezQbyBSc/G+cC/jiVHLlYlbRTjke1HoLR7PqT0erku8sP06oPjsew==", + "version": "6.0.0-alpha.28", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.28.tgz", + "integrity": "sha512-iVUXmiJFsu0lkW75GTQLMAB5PbtcUEyKIFegP7fL21KiorehT2n+DqVCbXlkRh/XCzTwph+ftHoBEctOFp+oQg==", "dependencies": { - "@patternfly/react-icons": "^6.0.0-alpha.5", - "@patternfly/react-styles": "^6.0.0-alpha.5", - "@patternfly/react-tokens": "^6.0.0-alpha.5", + "@patternfly/react-icons": "^6.0.0-alpha.11", + "@patternfly/react-styles": "^6.0.0-alpha.11", + "@patternfly/react-tokens": "^6.0.0-alpha.11", "focus-trap": "7.5.2", "react-dropzone": "^14.2.3", "tslib": "^2.5.0" @@ -2251,23 +2251,23 @@ } }, "node_modules/@patternfly/react-icons": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.5.tgz", - "integrity": "sha512-uVc50vJWAsZ24RtJUgAP8/ezZKHaQ5u6J2dyhvZtOICAxuPQ122J1GNlPxAFT1+nmu7fNqgMpQT7duADQ0KlrQ==", + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.11.tgz", + "integrity": "sha512-s8qP4EMSsI7JqOOv1Iw9wORSseG9dgjBwTodiN+sh/HZQnG+gtD+N5+FXEYxGKRYfqL9gA3UCdSbTvUqZaZtkA==", "peerDependencies": { "react": "^17 || ^18", "react-dom": "^17 || ^18" } }, "node_modules/@patternfly/react-styles": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.5.tgz", - "integrity": "sha512-RAOeDoHVL+A3Cz9+cGN1kkCBczW+jKbgaDKPDEc+mW6afF9Szq0YXwBN/BU56w9+r4heUe2tHMmlsCAMXVU7iA==" + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.11.tgz", + "integrity": "sha512-ltUjZFnai7hkOLGdobCviBA5F1PsPBaLTK0BF66I2aSqalKU8LAthGkj7Yq/996VHY6C+Z59C3voa2GQ7PCPHw==" }, "node_modules/@patternfly/react-tokens": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.5.tgz", - "integrity": "sha512-d5t1gHMx36RqkqO3c5S0BU8gSQh3yyMYnf5/6VAMzwknGvdyLAMNNahnWodga6rjBK0wlwV785vCkGY78MfKfw==" + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.11.tgz", + "integrity": "sha512-NpbGL/37kRgQAMKuwx/R0mmp3dFctgYqeF+DlJL1tpBmrZBgmIIHvmxZNXmAJx//u/lVzUJklzP3hoO2L6T4mA==" }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", @@ -25123,33 +25123,33 @@ } }, "@patternfly/react-core": { - "version": "6.0.0-alpha.7", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.7.tgz", - "integrity": "sha512-/C+hoA4D7vr33KmjdN99X/zPOAx00F3HvezQbyBSc/G+cC/jiVHLlYlbRTjke1HoLR7PqT0erku8sP06oPjsew==", + "version": "6.0.0-alpha.28", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.28.tgz", + "integrity": "sha512-iVUXmiJFsu0lkW75GTQLMAB5PbtcUEyKIFegP7fL21KiorehT2n+DqVCbXlkRh/XCzTwph+ftHoBEctOFp+oQg==", "requires": { - "@patternfly/react-icons": "^6.0.0-alpha.5", - "@patternfly/react-styles": "^6.0.0-alpha.5", - "@patternfly/react-tokens": "^6.0.0-alpha.5", + "@patternfly/react-icons": "^6.0.0-alpha.11", + "@patternfly/react-styles": "^6.0.0-alpha.11", + "@patternfly/react-tokens": "^6.0.0-alpha.11", "focus-trap": "7.5.2", "react-dropzone": "^14.2.3", "tslib": "^2.5.0" } }, "@patternfly/react-icons": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.5.tgz", - "integrity": "sha512-uVc50vJWAsZ24RtJUgAP8/ezZKHaQ5u6J2dyhvZtOICAxuPQ122J1GNlPxAFT1+nmu7fNqgMpQT7duADQ0KlrQ==", + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.11.tgz", + "integrity": "sha512-s8qP4EMSsI7JqOOv1Iw9wORSseG9dgjBwTodiN+sh/HZQnG+gtD+N5+FXEYxGKRYfqL9gA3UCdSbTvUqZaZtkA==", "requires": {} }, "@patternfly/react-styles": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.5.tgz", - "integrity": "sha512-RAOeDoHVL+A3Cz9+cGN1kkCBczW+jKbgaDKPDEc+mW6afF9Szq0YXwBN/BU56w9+r4heUe2tHMmlsCAMXVU7iA==" + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.11.tgz", + "integrity": "sha512-ltUjZFnai7hkOLGdobCviBA5F1PsPBaLTK0BF66I2aSqalKU8LAthGkj7Yq/996VHY6C+Z59C3voa2GQ7PCPHw==" }, "@patternfly/react-tokens": { - "version": "6.0.0-alpha.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.5.tgz", - "integrity": "sha512-d5t1gHMx36RqkqO3c5S0BU8gSQh3yyMYnf5/6VAMzwknGvdyLAMNNahnWodga6rjBK0wlwV785vCkGY78MfKfw==" + "version": "6.0.0-alpha.11", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.11.tgz", + "integrity": "sha512-NpbGL/37kRgQAMKuwx/R0mmp3dFctgYqeF+DlJL1tpBmrZBgmIIHvmxZNXmAJx//u/lVzUJklzP3hoO2L6T4mA==" }, "@pkgjs/parseargs": { "version": "0.11.0", diff --git a/src/app/AppLayout/AppLayout.css b/src/app/AppLayout/AppLayout.css new file mode 100644 index 00000000..28cb96d7 --- /dev/null +++ b/src/app/AppLayout/AppLayout.css @@ -0,0 +1,19 @@ +#primary-app-container { + z-index: var(--pf-v5-c-page__sidebar--ZIndex); +} + +.ws-full-page-utils { + position: fixed; + right: 0; + bottom: 0; + padding: var(--pf-v5-global--spacer--lg); +} + +.ws-full-page-utils::before { + position: absolute; + inset: 0; + content: ""; + background-color: var(--pf-v5-global--BackgroundColor--100); + opacity: 0.8; + box-shadow: var(--pf-v5-global--BoxShadow--sm); +} diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx index b2d3e7c6..b580a165 100644 --- a/src/app/AppLayout/AppLayout.tsx +++ b/src/app/AppLayout/AppLayout.tsx @@ -2,21 +2,24 @@ import * as React from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import { Button, + Flex, Masthead, MastheadBrand, MastheadMain, MastheadToggle, - Nav, + Nav, NavExpandable, NavItem, - NavList, - Page, - PageSidebar, + NavList, + Page, + PageSidebar, PageSidebarBody, - SkipToContent + SkipToContent, + Switch, } from '@patternfly/react-core'; import { IAppRoute, IAppRouteGroup, routes } from '@app/routes'; import { BarsIcon } from '@patternfly/react-icons'; +import './AppLayout.css'; interface IAppLayout { children: React.ReactNode; @@ -24,6 +27,7 @@ interface IAppLayout { const AppLayout: React.FunctionComponent = ({ children }) => { const [sidebarOpen, setSidebarOpen] = React.useState(true); + const Header = ( @@ -42,7 +46,11 @@ const AppLayout: React.FunctionComponent = ({ children }) => { - + @@ -55,9 +63,19 @@ const AppLayout: React.FunctionComponent = ({ children }) => { - - - + + + @@ -91,7 +109,7 @@ const AppLayout: React.FunctionComponent = ({ children }) => { @@ -99,30 +117,48 @@ const AppLayout: React.FunctionComponent = ({ children }) => { const Sidebar = ( - - {Navigation} - + {Navigation} ); const pageId = 'primary-app-container'; const PageSkipToContent = ( - { - event.preventDefault(); - const primaryContentContainer = document.getElementById(pageId); - primaryContentContainer && primaryContentContainer.focus(); - }} href={`#${pageId}`}> + { + event.preventDefault(); + const primaryContentContainer = document.getElementById(pageId); + primaryContentContainer && primaryContentContainer.focus(); + }} + href={`#${pageId}`} + > Skip to Content ); + return ( - + {children} + + document!.querySelector('html')!.classList.toggle('pf-v5-theme-dark')} + /> + { + const html = document.querySelector('html'); + const curDir = html!.dir; + html!.dir = curDir !== 'rtl' ? 'rtl' : 'ltr'; + }} + /> + ); }; diff --git a/src/app/__snapshots__/app.test.tsx.snap b/src/app/__snapshots__/app.test.tsx.snap index df13f5f7..046956d6 100644 --- a/src/app/__snapshots__/app.test.tsx.snap +++ b/src/app/__snapshots__/app.test.tsx.snap @@ -286,6 +286,68 @@ exports[`App tests should render default App component 1`] = ` Dashboard Page Title! +
+ + +
diff --git a/src/favicon.png b/src/favicon.png index f2e3f564..9dad8a36 100644 Binary files a/src/favicon.png and b/src/favicon.png differ