-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from fhlavac/Ansible
Add Ansible component
- Loading branch information
Showing
21 changed files
with
343 additions
and
38 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
...patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
|
||
``` |
6 changes: 6 additions & 0 deletions
6
...fly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import React from 'react'; | ||
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; | ||
|
||
export const BasicExample: React.FunctionComponent = () => ( | ||
<Ansible /> | ||
); |
6 changes: 6 additions & 0 deletions
6
...y-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 /> | ||
); |
7 changes: 2 additions & 5 deletions
7
...nfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
|
4 changes: 1 addition & 3 deletions
4
...rnfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}/> | ||
8 changes: 3 additions & 5 deletions
8
...tternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
8 changes: 3 additions & 5 deletions
8
...atternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
8 changes: 3 additions & 5 deletions
8
...ernfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
|
||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Oops, something went wrong.