External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 04:10:44 -03: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
Show Stats 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 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 {
render() {
const { name, description, isSelected, onSelect, itemId } = this.props;
return (
<div
style={{
display: 'flex',
border: '1px solid var(--pf-global--BorderColor--200)',
borderRadius: 'var(--pf-global--BorderRadius--sm)',
padding: '10px',
}}
>
<CheckboxWrapper>
<Checkbox
isChecked={isSelected}
onChange={onSelect}
@ -27,7 +35,7 @@ class CheckboxCard extends Component {
}
value={itemId}
/>
</div>
</CheckboxWrapper>
);
}
}