fix(docs): Add NotAuthorized example

packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md

@@ -0,0 +1,17 @@
+---
+section: extensions
+subsection: Component groups
+id: NotAuthorized
+source: react
+propComponents: ['NotAuthorized']
+---
+
+import { NotAuthorized } from "@patternfly/react-component-groups";
+
+## Components Usage
+
+### NotAuthorized Component
+
+```js file="./NotAuthorizedExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NotAuthorized } from '@patternfly/react-component-groups';
+import { Button } from '@patternfly/react-core';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const actions = [
+    <Button key="1">
+      First action
+    </Button>,
+    <Button key="2" className='pf-u-mx-md'>
+      Second action
+    </Button>,
+  ];
+  return (
+    <NotAuthorized 
+      actions={actions} 
+      className="something" 
+      description="Description text" 
+      serviceName="Demo bundle"
+      prevPageButtonText="Go to previous page"
+    />
+  );
+}

packages/module/src/NotAuthorized/NotAuthorized.tsx

@@ -5,8 +5,7 @@ import { createUseStyles } from 'react-jss';
 
 export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | 'title'> {
   serviceName?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  icon?: React.ComponentType<any>;
+  icon?: React.ComponentType;
   description?: React.ReactNode;
   showReturnButton?: boolean;
   className?: string;
@@ -16,12 +15,6 @@ export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | '
   toLandingPageText?: React.ReactNode;
 }
 
-const ContactBody = () => (
-  <React.Fragment>
-    Contact your organization administrator(s) for more information or visit&nbsp;
-    <a href={`./settings/my-user-access`}>My User Access</a>&nbsp; to learn more about your permissions.
-  </React.Fragment>
-);
 
 const useStyles = createUseStyles({
   title: {
@@ -31,26 +24,25 @@ const useStyles = createUseStyles({
   },
 })
 
-const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
+export const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
   prevPageButtonText = 'Return to previous page',
   toLandingPageText = 'Go to landing page',
-  title,
   actions = null,
   serviceName,
+  title = `You do not have access to ${serviceName}`,
   icon: Icon = LockIcon,
-  description = <ContactBody />,
+  description = 'Contact your system administrator(s) for more information.',
   showReturnButton = true,
   className,
   ...props
-}) => {
+}: NotAuthorizedProps) => {
   const classes = useStyles();
 
-  const heading = title || `You do not have access to ${serviceName}`;
   return (
     <EmptyState variant={EmptyStateVariant.full} className={className} {...props}>
       <EmptyStateIcon icon={Icon} />
       <Title className={classes.title} headingLevel="h5" size="lg">
-        {heading}
+        {title}
       </Title>
       <EmptyStateBody>{description}</EmptyStateBody>
       {actions}

packages/module/src/NotAuthorized/__tests__/__snapshots__/NotAuthorized.test.js.snap

@@ -16,7 +16,7 @@ exports[`NotAuthorized component should apply custom styles 1`] = `
     You do not have access to Foo
   </Title>
   <EmptyStateBody>
-    <ContactBody />
+    Contact your system administrator(s) for more information.
   </EmptyStateBody>
   <Button
     component="a"
@@ -43,7 +43,7 @@ exports[`NotAuthorized component should not show buttons 1`] = `
     You do not have access to Foo
   </Title>
   <EmptyStateBody>
-    <ContactBody />
+    Contact your system administrator(s) for more information.
   </EmptyStateBody>
 </EmptyState>
 `;
@@ -63,7 +63,7 @@ exports[`NotAuthorized component should render 1`] = `
     You do not have access to Foo
   </Title>
   <EmptyStateBody>
-    <ContactBody />
+    Contact your system administrator(s) for more information.
   </EmptyStateBody>
   <Button
     component="a"
@@ -90,7 +90,7 @@ exports[`NotAuthorized component should show custom actions 1`] = `
     You do not have access to Foo
   </Title>
   <EmptyStateBody>
-    <ContactBody />
+    Contact your system administrator(s) for more information.
   </EmptyStateBody>
   <button
     id="action-one"
@@ -156,7 +156,7 @@ exports[`NotAuthorized component should show custom title 1`] = `
     Custom title
   </Title>
   <EmptyStateBody>
-    <ContactBody />
+    Contact your system administrator(s) for more information.
   </EmptyStateBody>
   <Button
     component="a"
@@ -187,15 +187,7 @@ exports[`NotAuthorized component should use custom icon 1`] = `
     <div
       className="pf-c-empty-state__body"
     >
-      [
-        "Contact your organization administrator(s) for more information or visit ",
-        <a
-          href="./settings/my-user-access"
-        >
-          My User Access
-        </a>,
-        "  to learn more about your permissions.",
-      ]
+      Contact your system administrator(s) for more information.
     </div>
     <a
       aria-disabled={false}

packages/module/src/index.ts

@@ -3,3 +3,4 @@ export * from './DetailsPageHeader';
 export * from './ErrorBoundaryPage';
 export * from './ErrorState';
 export * from './HorizontalNav';
+export * from './NotAuthorized';