External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-21 22:48:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Switched Selectable Card to styled components (#249)

Browse Source 
* Switched Selectable Card to styled components
 * styles.scss in AddRole/ removed
 * styles.scss import in index.jsx removed

Signed-off-by: catjones9 <catjones@redhat.com>

* Addressed PR linter issues

Signed-off-by: catjones9 <catjones@redhat.com>

* Switched Indicator and Label to styled components

Signed-off-by: catjones9 <catjones@redhat.com>
This commit is contained in:
catjones9 2019-06-04 15:03:41 -04:00 committed by GitHub
parent 5df424803f
commit a8c51670af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/AddRole/SelectableCard.jsx
View File

@ -1,5 +1,31 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const SelectableItem = styled.div`
min-width: 200px;
border: 1px solid var(--pf-global--BorderColor--200);
border-radius: var(--pf-global--BorderRadius--sm);
border: 1px solid;
border-color: ${props => (props.isSelected ? 'var(--pf-global--active-color--100)' : 'var(--pf-global--BorderColor--200)')};
margin-right: 20px;
font-weight: bold;
display: flex;
cursor: pointer;
`;
const Indicator = styled.div`
display: flex;
flex: 0 0 5px;
background-color: ${props => (props.isSelected ? 'var(--pf-global--active-color--100)' : null)};
`;
const Label = styled.div`
display: flex;
flex: 1;
align-items: center;
padding: 20px;
`;
class SelectableCard extends Component {
render () {
@ -8,19 +34,21 @@ class SelectableCard extends Component {
onClick,
isSelected
} = this.props;
return (
<div
className={isSelected ? 'awx-selectableCard awx-selectableCard__selected' : 'awx-selectableCard'}
<SelectableItem
onClick={onClick}
onKeyPress={onClick}
role="button"
tabIndex="0"
isSelected={isSelected}
>
<div
className="awx-selectableCard__indicator"
<Indicator
isSelected={isSelected}
/>
<div className="awx-selectableCard__label">{label}</div>
</div>
<Label>{label}</Label>
</SelectableItem>
);
}
}

29
src/components/AddRole/styles.scss
View File

@ -1,29 +0,0 @@
.awx-selectableCard {
min-width: 200px;
border: 1px solid var(--pf-global--BorderColor--200);
border-radius: var(--pf-global--BorderRadius--sm);
margin-right: 20px;
font-weight: bold;
display: flex;
cursor: pointer;
.awx-selectableCard__indicator {
display: flex;
flex: 0 0 5px;
}
.awx-selectableCard__label {
display: flex;
flex: 1;
align-items: center;
padding: 20px;
}
}
.awx-selectableCard.awx-selectableCard__selected {
border-color: var(--pf-global--active-color--100);
.awx-selectableCard__indicator {
background-color: var(--pf-global--active-color--100);
}
}

1
src/index.jsx
View File

@ -12,7 +12,6 @@ import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css';
import './app.scss';
import './components/AddRole/styles.scss';
import { Config } from './contexts/Config';