From 189e12f8b3250e95a3b41867c2ca2f00ae47be52 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 23 May 2019 13:47:41 -0400 Subject: [PATCH] Restore logo (#218) * move tower logo svg into component * switch to new logo in header & login screen --- __tests__/components/TowerLogo.test.jsx | 40 +------- images/tower-logo-header.svg | 67 +++++++++---- src/App.jsx | 21 +++- src/app.scss | 11 --- src/components/TowerLogo/TowerLogo.jsx | 126 +++++++++++++----------- 5 files changed, 140 insertions(+), 125 deletions(-) diff --git a/__tests__/components/TowerLogo.test.jsx b/__tests__/components/TowerLogo.test.jsx index b91f89c3f3..fde568320d 100644 --- a/__tests__/components/TowerLogo.test.jsx +++ b/__tests__/components/TowerLogo.test.jsx @@ -1,15 +1,14 @@ import React from 'react'; -import { createMemoryHistory } from 'history'; import { mountWithContexts } from '../enzymeHelpers'; import TowerLogo from '../../src/components/TowerLogo'; let logoWrapper; let towerLogoElem; -let brandElem; +let svgElem; const findChildren = () => { towerLogoElem = logoWrapper.find('TowerLogo'); - brandElem = logoWrapper.find('Brand'); + svgElem = logoWrapper.find('svg'); }; describe('', () => { @@ -20,39 +19,6 @@ describe('', () => { findChildren(); expect(logoWrapper.length).toBe(1); expect(towerLogoElem.length).toBe(1); - expect(brandElem.length).toBe(1); - }); - - test('adds navigation to route history on click', () => { - const history = createMemoryHistory({ - initialEntries: ['/organizations/1/teams'], - }); - - logoWrapper = mountWithContexts( - , { context: { router: { history } } } - ); - findChildren(); - expect(towerLogoElem.props().history.length).toBe(1); - logoWrapper.simulate('click'); - expect(towerLogoElem.props().history.length).toBe(2); - }); - - test('handles mouse over and out state.hover changes', () => { - logoWrapper = mountWithContexts( - - ); - findChildren(); - findChildren(); - expect(brandElem.props().src).toBe('tower-logo-header.svg'); - brandElem.props().onMouseOver(); - expect(towerLogoElem.state().hover).toBe(true); - logoWrapper.update(); - findChildren(); - expect(brandElem.props().src).toBe('tower-logo-header-hover.svg'); - brandElem.props().onMouseOut(); - expect(towerLogoElem.state().hover).toBe(false); - logoWrapper.update(); - findChildren(); - expect(brandElem.props().src).toBe('tower-logo-header.svg'); + expect(svgElem.length).toBe(1); }); }); diff --git a/images/tower-logo-header.svg b/images/tower-logo-header.svg index 094db9bfa2..4d31e643c1 100644 --- a/images/tower-logo-header.svg +++ b/images/tower-logo-header.svg @@ -1,25 +1,54 @@ - + + viewBox="0 0 823 230" style="enable-background:new 0 0 823 230;" xml:space="preserve"> - - - - - - - - - - - +Logo-Red_Hat-Ansible_Tower-A-Standard-RGB + + + + + + + + + + + + + + + diff --git a/src/App.jsx b/src/App.jsx index d47c545e3a..60d1e7900f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,13 +4,13 @@ import { Nav, NavList, Page, - PageHeader, + PageHeader as PFPageHeader, PageSidebar, Button } from '@patternfly/react-core'; - import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; +import styled from 'styled-components'; import { RootDialog } from './contexts/RootDialog'; import { withNetwork } from './contexts/Network'; @@ -22,6 +22,20 @@ import NavExpandableGroup from './components/NavExpandableGroup'; import TowerLogo from './components/TowerLogo'; import PageHeaderToolbar from './components/PageHeaderToolbar'; +const PageHeader = styled(PFPageHeader)` + & .pf-c-page__header-brand-link { + color: inherit; + + &:hover { + color: inherit; + } + + & svg { + width: 125px; + } + } +`; + class App extends Component { constructor (props) { super(props); @@ -104,7 +118,8 @@ class App extends Component { } + logo={} + logoProps={{ href: '/' }} toolbar={( + + {i18n._(t`Tower Brand Image`)} + + + + + + + + + + + + + + + + + + ); } } -TowerLogo.propTypes = { - linkTo: PropTypes.string, -}; - -TowerLogo.defaultProps = { - linkTo: null, -}; - -export default withI18n()(withRouter(TowerLogo)); +export default withI18n()(TowerLogo);