Skip to content

Commit 223cbbd

Browse files
aferddependabot[bot]fhlavacepwinchell
committed
RHCLOUD-34195 Ansible logo updates (#354)
* chore(deps-dev): bump @octokit/plugin-paginate-rest Bumps [@octokit/plugin-paginate-rest](https://github.com/octokit/plugin-paginate-rest.js) from 11.3.0 to 11.3.3. - [Release notes](https://github.com/octokit/plugin-paginate-rest.js/releases) - [Commits](octokit/plugin-paginate-rest.js@v11.3.0...v11.3.3) --- updated-dependencies: - dependency-name: "@octokit/plugin-paginate-rest" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump @types/bonjour from 3.5.10 to 3.5.13 Bumps [@types/bonjour](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/bonjour) from 3.5.10 to 3.5.13. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/bonjour) --- updated-dependencies: - dependency-name: "@types/bonjour" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump binary-extensions from 2.2.0 to 2.3.0 Bumps [binary-extensions](https://github.com/sindresorhus/binary-extensions) from 2.2.0 to 2.3.0. - [Release notes](https://github.com/sindresorhus/binary-extensions/releases) - [Commits](sindresorhus/binary-extensions@v2.2.0...v2.3.0) --- updated-dependencies: - dependency-name: binary-extensions dependency-type: indirect update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump @octokit/request from 9.1.1 to 9.1.3 Bumps [@octokit/request](https://github.com/octokit/request.js) from 9.1.1 to 9.1.3. - [Release notes](https://github.com/octokit/request.js/releases) - [Commits](octokit/request.js@v9.1.1...v9.1.3) --- updated-dependencies: - dependency-name: "@octokit/request" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump pirates from 4.0.5 to 4.0.6 Bumps [pirates](https://github.com/danez/pirates) from 4.0.5 to 4.0.6. - [Release notes](https://github.com/danez/pirates/releases) - [Commits](danez/pirates@v4.0.5...v4.0.6) --- updated-dependencies: - dependency-name: pirates dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump @types/aria-query from 5.0.1 to 5.0.4 Bumps [@types/aria-query](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/aria-query) from 5.0.1 to 5.0.4. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/aria-query) --- updated-dependencies: - dependency-name: "@types/aria-query" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump @types/http-proxy from 1.17.11 to 1.17.15 Bumps [@types/http-proxy](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/http-proxy) from 1.17.11 to 1.17.15. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/http-proxy) --- updated-dependencies: - dependency-name: "@types/http-proxy" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump @types/json-schema from 7.0.12 to 7.0.15 Bumps [@types/json-schema](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/json-schema) from 7.0.12 to 7.0.15. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/json-schema) --- updated-dependencies: - dependency-name: "@types/json-schema" dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump semver from 5.7.1 to 5.7.2 Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md) - [Commits](npm/node-semver@v5.7.1...v5.7.2) --- updated-dependencies: - dependency-name: semver dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * chore(deps-dev): bump caniuse-lite from 1.0.30001649 to 1.0.30001653 Bumps [caniuse-lite](https://github.com/browserslist/caniuse-lite) from 1.0.30001649 to 1.0.30001653. - [Commits](browserslist/caniuse-lite@1.0.30001649...1.0.30001653) --- updated-dependencies: - dependency-name: caniuse-lite dependency-type: indirect update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> * init ansible icon updates * show icon * fix docs and logic * lint fix * add icon back * rhaap icon update * lint fix * lint fix 2 * update name * add suggested changes * update examples * update prop and disabled color * fix color * add title and ouiaID to RHAAP icon * update snapshot * remove unsupported state from rhaap * update snapshot * update snapshot --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Filip Hlavac <[email protected]> Co-authored-by: ewinchel <[email protected]>
1 parent e15a24b commit 223cbbd

File tree

7 files changed

+166
-217
lines changed

7 files changed

+166
-217
lines changed

package-lock.json

Lines changed: 3 additions & 124 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,12 @@ To specify that Ansible is not supported, set the `isSupported` property to `fal
3333
```js file="./AnsibleUnsupportedExample.tsx"
3434

3535
```
36+
37+
38+
### Red Hat Ansible Automation Platform
39+
40+
To display the Red Hat Ansible Automation Platform, add the `isRHAAP` property to the `<Ansible>` component.
41+
42+
```js file="./AnsibleTechnologyExample.tsx"
43+
44+
```
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
3+
4+
export const BasicExample: React.FunctionComponent = () => (
5+
<Ansible isRHAAP/>
6+
);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,8 @@ describe('Ansible component', () => {
1414
expect(container).toMatchSnapshot();
1515
});
1616

17+
it('should render RHAAP', () => {
18+
const { container } = render(<Ansible isRHAAP />);
19+
expect(container).toMatchSnapshot();
20+
});
1721
});

packages/module/src/Ansible/Ansible.tsx

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,31 @@ import { createUseStyles } from 'react-jss';
55
export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
66
/** Supported/unsupported variant flag */
77
isSupported?: boolean;
8+
/** Red Hat Ansible Automation Platform technology icon */
9+
isRHAAP?: boolean;
810
/** Ansible icon className */
911
className?: string;
1012
/** Custom OUIA ID */
1113
ouiaId?: string | number;
1214
}
1315

16+
const RHAAPTechnologyIcon =
17+
<svg
18+
width="24" height="24" viewBox="0 0 38 38"
19+
xmlns="http://www.w3.org/2000/svg">
20+
<defs>
21+
<style>
22+
{`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
23+
{`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
24+
{`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
25+
</style>
26+
</defs>
27+
<rect x="1" y="1" width="36" height="36" rx="9" ry="9"/>
28+
<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"/>
29+
<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"/>
30+
<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"/>
31+
</svg>
32+
1433
const useStyles = createUseStyles({
1534
ansible: {
1635
'& svg': {
@@ -21,18 +40,18 @@ const useStyles = createUseStyles({
2140
},
2241
ansibleSupported: {
2342
'& .st0': {
24-
fill: 'var(--pf-t--color--blue--40)',
43+
fill: 'var(--pf-t-global--icon--color--regular)',
2544
}
2645
},
2746
ansibleUnsupported: {
2847
'& .st0, .st1, .st2': {
29-
fill: 'var(--pf-t--global--color--disabled--200)',
48+
fill: 'var(--pf-t--global--icon--color--disabled)',
3049
cursor: 'not-allowed',
3150
}
32-
}
51+
}
3352
})
3453

35-
export const Ansible: React.FunctionComponent<AnsibleProps> = ({ isSupported = true, className, ouiaId = "AnsibleSupport-icon", ...props }: AnsibleProps) => {
54+
const Ansible: React.FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
3655
const classes = useStyles();
3756
const ansibleLogoClass = clsx(
3857
classes.ansible,
@@ -73,24 +92,32 @@ export const Ansible: React.FunctionComponent<AnsibleProps> = ({ isSupported = t
7392
);
7493

7594
return (
76-
<i className={ansibleLogoClass} title={isSupported ? "Ansible supported" : "Ansible is not supported" } data-ouia-component-id={ouiaId} {...props}>
77-
<svg
78-
version="1.1"
79-
x="0px"
80-
y="0px"
81-
viewBox="0 0 2032 2027.2"
82-
style={{ enableBackground: 'new 0 0 2032 2027.2' } as React.CSSProperties}
83-
>
84-
<path
85-
className="st0"
86-
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
95+
<React.Fragment>
96+
{isRHAAP ? (
97+
<i title="Red Hat Ansible Automation Platform" data-ouia-component-id={ouiaId} {...props}>
98+
{RHAAPTechnologyIcon}
99+
</i>
100+
) : (
101+
<i className={ansibleLogoClass} title={isSupported ? "Ansible supported" : "Ansible is not supported" } data-ouia-component-id={ouiaId} {...props}>
102+
<svg
103+
version="1.1"
104+
x="0px"
105+
y="0px"
106+
viewBox="0 0 2032 2027.2"
107+
style={{ enableBackground: 'new 0 0 2032 2027.2' } as React.CSSProperties}
108+
>
109+
<path
110+
className="st0"
111+
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
87112
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
88113
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
89114
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"
90-
/>
91-
{isSupported ? null : unsupportedSlash}
92-
</svg>
93-
</i>
115+
/>
116+
{isSupported ? null : unsupportedSlash}
117+
</svg>
118+
</i>
119+
) }
120+
</React.Fragment>
94121
);
95122
};
96123

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

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,54 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Ansible component should render RHAAP 1`] = `
4+
<div>
5+
<i
6+
data-ouia-component-id="Ansible-icon"
7+
title="Red Hat Ansible Automation Platform"
8+
>
9+
<svg
10+
height="24"
11+
viewBox="0 0 38 38"
12+
width="24"
13+
xmlns="http://www.w3.org/2000/svg"
14+
>
15+
<defs>
16+
<style>
17+
.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}
18+
.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}
19+
.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}
20+
</style>
21+
</defs>
22+
<rect
23+
height="36"
24+
rx="9"
25+
ry="9"
26+
width="36"
27+
x="1"
28+
y="1"
29+
/>
30+
<path
31+
class="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6"
32+
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"
33+
/>
34+
<path
35+
class="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b"
36+
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"
37+
/>
38+
<path
39+
class="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e"
40+
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"
41+
/>
42+
</svg>
43+
</i>
44+
</div>
45+
`;
46+
347
exports[`Ansible component should render supported 1`] = `
448
<div>
549
<i
650
class="ansible-0-2-1 ansibleSupported-0-2-2"
7-
data-ouia-component-id="AnsibleSupport-icon"
51+
data-ouia-component-id="Ansible-icon"
852
title="Ansible supported"
953
>
1054
<svg
@@ -30,7 +74,7 @@ exports[`Ansible component should render unsupported 1`] = `
3074
<div>
3175
<i
3276
class="ansible-0-2-1 ansibleUnsupported-0-2-3"
33-
data-ouia-component-id="AnsibleSupport-icon"
77+
data-ouia-component-id="Ansible-icon"
3478
title="Ansible is not supported"
3579
>
3680
<svg

0 commit comments

Comments
 (0)