Switched Selectable Card to styled components (#249)

* 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>

src/components/AddRole/SelectableCard.jsx

@@ -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
+      <SelectableItem
-        className={isSelected ? 'awx-selectableCard awx-selectableCard__selected' : 'awx-selectableCard'}
         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>
+        <Label>{label}</Label>
-      </div>
+      </SelectableItem>
     );
   }
 }

src/components/AddRole/styles.scss

@@ -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);
-  }
-}

src/index.jsx

@@ -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';