External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 09:27:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

makes whole card selectable

Browse Source
This commit is contained in:
Alex Corey
2020-05-29 09:19:14 -04:00
parent 585ca082e3
commit ca6ae24032
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
awx/ui_next/src/components/AddRole/CheckboxCard.jsx
View File

@@ -1,19 +1,27 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Checkbox } from '@patternfly/react-core'; import { Checkbox as PFCheckbox } from '@patternfly/react-core';
import styled from 'styled-components';
const CheckboxWrapper = styled.div`
display: flex;
border: 1px solid var(--pf-global--BorderColor--200);
border-radius: var(--pf-global--BorderRadius--sm);
padding: 10px;
`;
const Checkbox = styled(PFCheckbox)`
width: 100%;
& label {
width: 100%;
}
`;
class CheckboxCard extends Component { class CheckboxCard extends Component {
render() { render() {
const { name, description, isSelected, onSelect, itemId } = this.props; const { name, description, isSelected, onSelect, itemId } = this.props;
return ( return (
<div <CheckboxWrapper>
style={{
display: 'flex',
border: '1px solid var(--pf-global--BorderColor--200)',
borderRadius: 'var(--pf-global--BorderRadius--sm)',
padding: '10px',
}}
>
<Checkbox <Checkbox
isChecked={isSelected} isChecked={isSelected}
onChange={onSelect} onChange={onSelect}
@@ -27,7 +35,7 @@ class CheckboxCard extends Component {
} }
value={itemId} value={itemId}
/> />
</div> </CheckboxWrapper>
); );
} }
} }