Merge pull request #120 from nicolethoen/update_pf_version

chore: update pf versions and fix small issues

Author: mturley

package-lock.json

@@ -79,9 +79,9 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.162.3",
-    "@patternfly/react-icons": "^4.13.1",
-    "@patternfly/react-styles": "^4.12.5",
+    "@patternfly/react-core": "^4.181.1",
+    "@patternfly/react-icons": "^4.32.1",
+    "@patternfly/react-styles": "^4.31.1",
     "@storybook/builder-webpack5": "^6.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package.json

@@ -26,7 +26,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   };
   const onNavToggle = () => {
     setIsNavOpen(!isNavOpen);
-  }
+  };
   const onPageResize = (props: { mobileView: boolean; windowSize: number }) => {
     setIsMobileView(props.mobileView);
   };
@@ -53,8 +53,8 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const location = useLocation();
 
   const renderNavItem = (route: IAppRoute, index: number) => (
-    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`}>
-      <NavLink exact={route.exact} to={route.path} activeClassName="pf-m-current">
+    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={route.path === location.pathname}>
+      <NavLink exact={route.exact} to={route.path}>
         {route.label}
       </NavLink>
     </NavItem>
@@ -109,6 +109,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       {children}
     </Page>
   );
-}
+};
 
 export { AppLayout };

src/app/AppLayout/AppLayout.tsx

@@ -8,7 +8,10 @@ import {
   EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateSecondaryActions,
+  Text,
+  TextContent,
+  TextVariants
 } from '@patternfly/react-core';
 
 export interface ISupportProps {
@@ -22,11 +25,18 @@ let Support: React.FunctionComponent<ISupportProps> = () => (
       <EmptyStateIcon icon={CubesIcon} />
       <Title headingLevel="h1" size="lg">
         Empty State (Stub Support Module)
-        </Title>
+      </Title>
       <EmptyStateBody>
-        This represents an the empty state pattern in Patternfly 4. Hopefully it&apos;s simple enough to use but flexible
-        enough to meet a variety of needs.
-        </EmptyStateBody>
+        <TextContent>
+          <Text component="p">
+            This represents an the empty state pattern in Patternfly 4. Hopefully it&apos;s simple enough to use but flexible
+            enough to meet a variety of needs.
+          </Text>
+          <Text component={TextVariants.small}>
+            This text has overridden a css component variable to demonstrate how to apply customizations using PatternFly's global variable API.
+          </Text>
+        </TextContent>
+      </EmptyStateBody>
       <Button variant="primary">Primary Action</Button>
       <EmptyStateSecondaryActions>
         <Button variant="link">Multiple</Button>
@@ -38,6 +48,6 @@ let Support: React.FunctionComponent<ISupportProps> = () => (
       </EmptyStateSecondaryActions>
     </EmptyState>
   </PageSection>
-)
+);
 
 export { Support };

src/app/Support/Support.tsx

@@ -1,3 +1,9 @@
 html, body, #root {
   height: 100%;
 }
+
+.pf-c-content {
+  --pf-c-content--small--Color: red; /* changes all <small> color to red */
+  --pf-c-content--blockquote--BorderLeftColor: purple; /* changes all <blockquote> left border color to purple */
+  --pf-c-content--hr--BackgroundColor: lemonchiffon; /* changes a <hr> color to lemonchiffon */
+}