Add Ansible component

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

@@ -0,0 +1,32 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Ansible
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['Ansible']
+---
+
+import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+
+The **Ansible** component shows Ansible project logo.
+
+To specify whether Ansible is supported or not, add the `unsupported` property to the `<Ansible>` component.
+
+### Ansible supported
+
+```js file="./AnsibleSupportedExample.tsx"
+
+```
+
+### Ansible unsupported
+
+```js file="./AnsibleUnsupportedExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Ansible />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Ansible unsupported />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryCriticalExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 4" severity={4} />
-    <Battery className="pf-u-ml-md" label="With prop: critical" severity="critical" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: critical" severity="critical" />
   </>
 );
-
-export default BatteryCriticalExample;
-

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryDefaultExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>
-
-export default BatteryDefaultExample;
+export const BasicExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryHighExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 3" severity={3} />
-    <Battery className="pf-u-ml-md" label="With prop: high" severity="high" />
-    <Battery className="pf-u-ml-md" label="With prop: error" severity="error" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: high" severity="high" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: error" severity="error" />
   </>
 );
-
-export default BatteryHighExample;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryLowExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 1" severity={1} />
-    <Battery className="pf-u-ml-md" label="With prop: low" severity="low" />
-    <Battery className="pf-u-ml-md" label="With prop: info" severity="info" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: low" severity="low" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: info" severity="info" />
   </>
 );
-
-export default BatteryLowExample;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryMediumExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 2" severity={2} />
-    <Battery className="pf-u-ml-md" label="With prop: medium" severity="medium" />
-    <Battery className="pf-u-ml-md" label="With prop: warn" severity="warn" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: medium" severity="medium" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: warn" severity="warn" />
   </>
 );
-
-export default BatteryMediumExample;

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: DetailsPage
+id: Details page
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx

@@ -51,8 +51,8 @@ export const BasicExample: React.FunctionComponent = () => (
         id: 'details-page-action-menu-example'
       }}
       tabs={[
-        { eventKey: 'details', title: 'Details', children: <div className="pf-u-m-md">Details content</div> },
-        { eventKey: 'other', title: 'Other', children: <div className="pf-u-m-md">Other content</div> }
+        { eventKey: 'details', title: 'Details', children: <div className="pf-v5-u-m-md">Details content</div> },
+        { eventKey: 'other', title: 'Other', children: <div className="pf-v5-u-m-md">Other content</div> }
       ]}
     />
   </Router>

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/HorizontalNavExample.tsx

@@ -4,8 +4,8 @@ import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/Horiz
 export const BasicExample: React.FunctionComponent = () => (
   <HorizontalNav
     tabs={[
-      { eventKey: 'details', title: 'Details', children: <div className="pf-u-m-md">Details content</div> },
-      { eventKey: 'other', title: 'Other', children: <div className="pf-u-m-md">Other content</div> }
+      { eventKey: 'details', title: 'Details', children: <div className="pf-v5-u-m-md">Details content</div> },
+      { eventKey: 'other', title: 'Other', children: <div className="pf-v5-u-m-md">Other content</div> }
     ]}
   />
 );

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: ErrorState
+id: Error state
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for

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

@@ -7,7 +7,7 @@ export const BasicExample: React.FunctionComponent = () => {
     <Button key="1">
       First action
     </Button>,
-    <Button key="2" className='pf-u-mx-md'>
+    <Button key="2" className='pf-v5-u-mx-md'>
       Second action
     </Button>,
   ];

packages/module/src/Ansible/Ansible.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Ansible from './Ansible';
+
+describe('Ansible component', () => {
+
+  it('should render unsupported - boolean', () => {
+    const { container } = render(<Ansible unsupported />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render unsupported - number', () => {
+    const { container } = render(<Ansible unsupported={1} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render supported - boolean', () => {
+    const { container } = render(<Ansible />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render supported - number', () => {
+    const { container } = render(<Ansible unsupported={0} />);
+    expect(container).toMatchSnapshot();
+  });
+
+});

packages/module/src/Ansible/Ansible.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import classNames from 'classnames';
+import { createUseStyles } from 'react-jss';
+
+export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+  /** Supported/unsupported variant flag */
+  unsupported?: boolean | number;
+  /** Ansible icon className*/
+  className?: string;
+}
+
+const useStyles = createUseStyles({
+  ansible: {
+    '& svg': {
+      height: 'var(--pf-v5-global--FontSize--xl)',
+      position: 'relative',
+      top: '0.25rem'
+    }
+  },
+  supported: {
+    '& .st0': {
+      fill: 'var(--pf-v5-global--info-color--100)',
+    }
+  },
+  unsupported: {
+    '& .st0, .st1, .st2': {
+      fill: 'var(--pf-v5-global--disabled-color--200)',
+      cursor: 'not-allowed',
+    }
+  } 
+})
+
+const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className, ...props }: AnsibleProps) => {
+  const classes = useStyles();
+  const ansibleLogoClass = classNames(
+    classes.ansible,
+    { [classes.supported]: !unsupported || unsupported === 0 },
+    { [classes.unsupported]: unsupported || unsupported === 1 },
+    className
+  );
+
+  const unsupportedSlash = (
+    <React.Fragment>
+      <rect
+        x="1245.1"
+        y="272.4"
+        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 3082.5815 -510.474)"
+        className="st0"
+        width="803.8"
+        height="221.5"
+      />
+
+      <rect
+        x="-279.7"
+        y="904"
+        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 2450.9683 1014.3757)"
+        className="st1"
+        width="2590.2"
+        height="221.5"
+      />
+
+      <rect
+        x="17.1"
+        y="1620.5"
+        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 1734.4641 2744.1697)"
+        className="st0"
+        width="563.7"
+        height="221.5"
+      />
+    </React.Fragment>
+  );
+
+  return (
+    <i className={ansibleLogoClass} {...props}>
+      <svg
+        version="1.1"
+        x="0px"
+        y="0px"
+        viewBox="0 0 2032 2027.2"
+        style={{ enableBackground: 'new 0 0 2032 2027.2' } as React.CSSProperties}
+      >
+        <path
+          className="st0"
+          d="M2030.8,1014.8c0,559.2-453.3,1012.4-1012.4,1012.4C459.2,2027.2,5.9,1574,5.9,1014.8
+                        C5.9,455.7,459.2,2.4,1018.3,2.4C1577.5,2.4,2030.8,455.7,2030.8,1014.8 M1035.4,620.9l262,646.6L901.7,955.8L1035.4,620.9
+                        L1035.4,620.9z M1500.8,1416.5l-403-969.9c-11.5-28-34.5-42.8-62.4-42.8c-28,0-52.7,14.8-64.2,42.8L528.9,1510.4h151.3l175.1-438.6
+                        l522.5,422.1c21,17,36.2,24.7,55.9,24.7c39.5,0,74-29.6,74-72.3C1507.7,1439.4,1505.3,1428.3,1500.8,1416.5L1500.8,1416.5z"
+        />
+        {unsupported ? unsupportedSlash : null}
+      </svg>
+    </i>
+  );
+};
+
+export default Ansible;