Merge pull request #236 from AlexSCorey/SwitchToStyledComps

updates test issues caused by PF bump

__tests__/components/CardCloseButton.test.jsx

@@ -8,7 +8,7 @@ describe('<CardCloseButton>', () => {
     const button = wrapper.find('Button');
     expect(button).toHaveLength(1);
     expect(button.prop('variant')).toBe('plain');
-    expect(button.prop('className')).toBe('pf-c-card__close');
+    expect(button.prop('aria-label')).toBe('Close');
     expect(wrapper.find('Link')).toHaveLength(0);
   });
 
@@ -18,6 +18,6 @@ describe('<CardCloseButton>', () => {
     const link = wrapper.find('Link');
     expect(link).toHaveLength(1);
     expect(link.prop('to')).toEqual('/foo');
-    expect(link.prop('className')).toEqual('pf-c-button pf-c-card__close');
+    expect(link.prop('aria-label')).toEqual('Close');
   });
 });

src/app.scss

@@ -68,15 +68,6 @@
   }
 }
 
-//
-// page header overrides
-//
-
-.pf-c-page__main-section.pf-m-condensed {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
 //
 // data list overrides
 //
@@ -208,17 +199,6 @@
   position: relative;
 }
 
-.pf-c-card__close {
-  position: absolute;
-  top: 5px;
-  right: 4px;
-  color: var(--pf-c-button--m-plain--Color);
-
-  &.pf-c-button {
-    position: absolute;
-  }
-}
-
 .pf-c-card__header {
   padding: 0;
 }

src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,18 +1,29 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
-  PageSection,
+  PageSection as PFPageSection,
   PageSectionVariants,
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbHeading
+  BreadcrumbHeading as PFBreadcrumbHeading
 } from '@patternfly/react-core';
 import {
   Link,
   Route,
   withRouter
 } from 'react-router-dom';
-import './breadcrumbs.scss';
+import styled from 'styled-components';
+
+const PageSection = styled(PFPageSection)`
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+
+const BreadcrumbHeading = styled(PFBreadcrumbHeading)`
+   --pf-c-breadcrumb__heading--FontSize: 20px;
+  line-height: 24px;
+  flex: 100%;
+`;
 
 const Breadcrumbs = ({ breadcrumbConfig }) => {
   const { light } = PageSectionVariants;
@@ -20,7 +31,6 @@ const Breadcrumbs = ({ breadcrumbConfig }) => {
   return (
     <PageSection
       variant={light}
-      className="pf-m-condensed"
     >
       <Breadcrumb>
         <Route
@@ -47,7 +57,6 @@ const Crumb = ({ breadcrumbConfig, match }) => {
     crumbElement = (
       <BreadcrumbHeading
         key="breadcrumb-heading"
-        className="heading"
       >
         {crumb}
       </BreadcrumbHeading>

src/components/Breadcrumbs/breadcrumbs.scss

@@ -1,11 +0,0 @@
-.pf-c-breadcrumb__item.heading {
-  --pf-c-breadcrumb__heading--FontSize: 20px;
-  line-height: 24px;
-  flex: 100%;
-}
-
-.pf-c-breadcrumb__item:nth-last-child(2) {
-  .pf-c-breadcrumb__item-divider {
-    display: none;
-  }
-}

src/components/CardCloseButton.jsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link as RRLink } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
+
+const Link = styled(RRLink)`
+    position: absolute;
+    top: 5px;
+    right: 4px;
+    color: var(--pf-c-button--m-plain--Color);
+`;
 
 function CardCloseButton ({ linkTo, i18n, i18nHash, ...props }) {
   if (linkTo) {
     return (
       <Link
-        className="pf-c-button pf-c-card__close"
+        className="pf-c-button"
         aria-label={i18n._(t`Close`)}
         title={i18n._(t`Close`)}
         to={linkTo}
@@ -23,7 +31,6 @@ function CardCloseButton ({ linkTo, i18n, i18nHash, ...props }) {
   return (
     <Button
       variant="plain"
-      className="pf-c-card__close"
       aria-label={i18n._(t`Close`)}
       {...props}
     >

src/components/FormActionGroup/FormActionGroup.jsx

@@ -3,27 +3,24 @@ import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
-  ActionGroup,
+  ActionGroup as PFActionGroup,
   Toolbar,
   ToolbarGroup,
   Button
 } from '@patternfly/react-core';
-import './styles.scss';
+import styled from 'styled-components';
 
-const formActionGroupStyle = {
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-};
-
-const buttonGroupStyle = {
-  marginRight: '20px'
-};
+const ActionGroup = styled(PFActionGroup)`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    --pf-c-form__group--m-action--MarginTop: 0;
+`;
 
 const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
-  <ActionGroup style={formActionGroupStyle}>
+  <ActionGroup>
     <Toolbar>
-      <ToolbarGroup style={buttonGroupStyle}>
+      <ToolbarGroup css="margin-right: 20px">
         <Button aria-label={i18n._(t`Save`)} variant="primary" type="submit" onClick={onSubmit} isDisabled={submitDisabled}>{i18n._(t`Save`)}</Button>
       </ToolbarGroup>
       <ToolbarGroup>

src/components/FormActionGroup/index.js

@@ -1,3 +0,0 @@
-import FormActionGroup from './FormActionGroup';
-
-export default FormActionGroup;

src/components/FormActionGroup/styles.scss

@@ -1,3 +0,0 @@
-.pf-c-form__group.pf-m-action {
-  --pf-c-form__group--m-action--MarginTop: 0;
-}

src/components/FormRow.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
+import styled from 'styled-components';
 
+const Row = styled.div`
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  `;
 export default function FormRow ({ children }) {
   return (
-    <div
-      style={{
-        display: 'grid',
-        gridGap: '20px',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
-      }}
-    >
+    <Row>
       {children}
-    </div>
+    </Row>
   );
 }

src/pages/Organizations/components/OrganizationForm.jsx

@@ -13,7 +13,7 @@ import { Config } from '../../../contexts/Config';
 import { withNetwork } from '../../../contexts/Network';
 import FormRow from '../../../components/FormRow';
 import FormField from '../../../components/FormField';
-import FormActionGroup from '../../../components/FormActionGroup';
+import FormActionGroup from '../../../components/FormActionGroup/FormActionGroup';
 import AnsibleSelect from '../../../components/AnsibleSelect';
 import InstanceGroupsLookup from './InstanceGroupsLookup';
 import { required } from '../../../util/validators';