RHCLOUD-34195 Updates to Ansible logo

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

@@ -28,8 +28,17 @@ By default, the Ansible logo displays as normal and in full color, meaning that
 
 ### Ansible unsupported
 
-To specify that Ansible is not supported, add the `unsupported` property to the `<Ansible>` component.
+To specify that Ansible is not supported, add the `isSupported={false}` property to the `<Ansible>` component.
 
 ```js file="./AnsibleUnsupportedExample.tsx"
 
 ```
+
+
+### Red Hat Ansible Automation Platform 
+
+To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `<Ansible>` component.
+
+```js file="./AnsibleTechnologyExample.tsx"
+
+```

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

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

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleTechnologyExample.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 isRHAAP/>
+);

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

@@ -2,5 +2,5 @@ import React from 'react';
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <Ansible unsupported />
+  <Ansible isSupported={false}/>
 );

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

@@ -5,12 +5,7 @@ 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} />);
+    const { container } = render(<Ansible isSupported={false} />);
     expect(container).toMatchSnapshot();
   });
 
@@ -19,8 +14,8 @@ describe('Ansible component', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should render supported - number', () => {
-    const { container } = render(<Ansible unsupported={0} />);
+  it('should render RHAAP - boolean', () => {
+    const { container } = render(<Ansible isRHAAP />);
     expect(container).toMatchSnapshot();
   });
 

packages/module/src/Ansible/Ansible.tsx

@@ -4,13 +4,32 @@ import { createUseStyles } from 'react-jss';
 
 export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
   /** Supported/unsupported variant flag */
-  unsupported?: boolean | number;
+  isSupported?: boolean;
+  /** Red Hat Ansible Automation Platform technology icon */
+  isRHAAP?: boolean;
   /** Ansible icon className */
   className?: string;
   /** Custom OUIA ID */
   ouiaId?: string | number;
 }
 
+const RHAAPTechnologyIcon = 
+<svg
+  width="24" height="24" viewBox="0 0 38 38"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      {`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
+      {`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
+      {`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
+    </style>
+  </defs>
+  <rect x="1" y="1" width="36" height="36" rx="9" ry="9"/>
+  <path className="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6" d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"/>
+  <path className="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b" d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"/>
+  <path className="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e" d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"/>
+</svg>
+
 const useStyles = createUseStyles({
   ansible: {
     '& svg': {
@@ -21,23 +40,23 @@ const useStyles = createUseStyles({
   },
   ansibleSupported: {
     '& .st0': {
-      fill: 'var(--pf-t--color--blue--40)',
+      fill: 'var(--pf-t-global--icon--color--regular)',
     }
   },
   ansibleUnsupported: {
     '& .st0, .st1, .st2': {
-      fill: 'var(--pf-t--color--gray--50)',
+      fill: 'var(--pf-t--global--icon--color--disabled)',
       cursor: 'not-allowed',
     }
-  } 
+  }
 })
 
-const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
+const Ansible: React.FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
   const classes = useStyles();
   const ansibleLogoClass = clsx(
     classes.ansible,
-    { [classes.ansibleSupported]: !unsupported || unsupported === 0 },
-    { [classes.ansibleUnsupported]: unsupported || unsupported === 1 },
+    { [classes.ansibleSupported]: isSupported },
+    { [classes.ansibleUnsupported]: !isSupported },
     className
   );
 
@@ -73,24 +92,32 @@ const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className
   );
 
   return (
-    <i className={ansibleLogoClass} title={unsupported ? "Ansible is not supported" : "Ansible supported" } data-ouia-component-id={ouiaId} {...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
+    <React.Fragment>
+      {isRHAAP ? (
+        <i title="Red Hat Ansible Automation Platform" data-ouia-component-id={ouiaId} {...props}>
+          {RHAAPTechnologyIcon}
+        </i>
+      ) : (
+        <i className={ansibleLogoClass} title={isSupported ? "Ansible supported" : "Ansible is not supported" } data-ouia-component-id={ouiaId} {...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>
+            />
+            {isSupported ? null : unsupportedSlash}
+          </svg>
+        </i>
+      ) }
+    </React.Fragment>
   );
 };
 

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

@@ -1,32 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Ansible component should render supported - boolean 1`] = `
+exports[`Ansible component should render RHAAP - boolean 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 ansibleSupported-0-2-2"
     data-ouia-component-id="Ansible-icon"
-    title="Ansible supported"
+    title="Red Hat Ansible Automation Platform"
   >
     <svg
-      style="enable-background: new 0 0 2032 2027.2;"
-      version="1.1"
-      viewBox="0 0 2032 2027.2"
-      x="0px"
-      y="0px"
+      height="24"
+      viewBox="0 0 38 38"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
     >
+      <defs>
+        <style>
+          .uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}
+          .uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}
+          .uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}
+        </style>
+      </defs>
+      <rect
+        height="36"
+        rx="9"
+        ry="9"
+        width="36"
+        x="1"
+        y="1"
+      />
       <path
-        class="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"
+        class="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6"
+        d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"
+      />
+      <path
+        class="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b"
+        d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"
+      />
+      <path
+        class="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e"
+        d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"
       />
     </svg>
   </i>
 </div>
 `;
 
-exports[`Ansible component should render supported - number 1`] = `
+exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
     class="ansible-0-2-1 ansibleSupported-0-2-2"
@@ -101,53 +119,3 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
   </i>
 </div>
 `;
-
-exports[`Ansible component should render unsupported - number 1`] = `
-<div>
-  <i
-    class="ansible-0-2-1 ansibleUnsupported-0-2-3"
-    data-ouia-component-id="Ansible-icon"
-    title="Ansible is not supported"
-  >
-    <svg
-      style="enable-background: new 0 0 2032 2027.2;"
-      version="1.1"
-      viewBox="0 0 2032 2027.2"
-      x="0px"
-      y="0px"
-    >
-      <path
-        class="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"
-      />
-      <rect
-        class="st0"
-        height="221.5"
-        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 3082.5815 -510.474)"
-        width="803.8"
-        x="1245.1"
-        y="272.4"
-      />
-      <rect
-        class="st1"
-        height="221.5"
-        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 2450.9683 1014.3757)"
-        width="2590.2"
-        x="-279.7"
-        y="904"
-      />
-      <rect
-        class="st0"
-        height="221.5"
-        transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 1734.4641 2744.1697)"
-        width="563.7"
-        x="17.1"
-        y="1620.5"
-      />
-    </svg>
-  </i>
-</div>
-`;