Use generic logo if provider logo not found

If a provider doesn't have a logo, use a generic logo with the provider
name.

private/storybook/Decorator.jsx

@@ -17,11 +17,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from 'react'
 import styled from 'styled-components'
 import Palette from '../../src/components/styleUtils/Palette'
+import StyleProps from '../../src/components/styleUtils/StyleProps'
 
 const Wrapper = styled.div`
   display: inline-block;
   background: ${Palette.grayscale[7]};
   padding: 32px;
+  color: ${Palette.black};
+  font-family: Rubik;
+  font-size: 14px;
+  font-weight: ${StyleProps.fontWeights.regular};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 `
 
 type Props = {

src/components/atoms/EndpointLogos/images/Generic.jsx

@@ -0,0 +1,121 @@
+/*
+Copyright (C) 2017  Cloudbase Solutions SRL
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Palette from '../../../styleUtils/Palette'
+import StyleProps from '../../../styleUtils/StyleProps'
+import generic64Image from './generic-64.svg'
+import generic128Image from './generic-128.svg'
+import generic128DisabledImage from './generic-128-disabled.svg'
+
+const Wrapper = styled.div`
+  text-align: center;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  letter-spacing: -1px;
+`
+const Logo = styled.div`
+  ${props => StyleProps.exactWidth(`${props.width}px`)}
+  ${props => StyleProps.exactHeight(`${props.height}px`)}
+  background: url(${props => props.image}) center no-repeat;
+`
+
+type Props = {
+  name: string,
+  size: {w: number, h: number},
+  disabled: ?boolean,
+}
+class Generic extends React.Component<Props> {
+  render32Generic() {
+    return (
+      <Wrapper style={{
+        fontSize: '14px',
+        color: Palette.grayscale[4],
+      }}
+      >
+        {this.props.name}
+      </Wrapper>
+    )
+  }
+
+  render42Generic() {
+    return (
+      <Wrapper style={{
+        fontSize: '18px',
+        color: Palette.grayscale[4],
+      }}
+      >
+        {this.props.name}
+      </Wrapper>
+    )
+  }
+
+  render64Generic() {
+    return (
+      <Wrapper style={{
+        fontSize: '22px',
+        color: Palette.black,
+        textAlign: 'left',
+      }}
+      >
+        <Logo width={49} height={43} image={generic64Image} style={{ marginRight: '9px' }} />
+        {this.props.name}
+      </Wrapper>
+    )
+  }
+
+  render128Generic(disabled: ?boolean) {
+    return (
+      <Wrapper style={{
+        fontSize: '22px',
+        color: disabled ? Palette.grayscale[3] : Palette.black,
+        textAlign: 'left',
+        flexDirection: 'column',
+      }}
+      >
+        <Logo
+          width={80}
+          height={70}
+          image={disabled ? generic128DisabledImage : generic128Image}
+          style={{ marginBottom: '4px' }}
+        />
+        {this.props.name}
+      </Wrapper>
+    )
+  }
+
+  render() {
+    switch (this.props.size.h) {
+      case 32:
+        return this.render32Generic()
+      case 42:
+        return this.render42Generic()
+      case 64:
+        return this.render64Generic()
+      case 128:
+        return this.render128Generic(this.props.disabled)
+      default:
+        return null
+    }
+  }
+}
+
+export default Generic

src/components/atoms/EndpointLogos/index.jsx

@@ -15,7 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+
+import Generic from './images/Generic'
 
 import aws32Image from './images/aws-32.svg'
 import azure32Image from './images/azure-32.svg'
@@ -98,9 +100,12 @@ const endpointImages = {
 }
 const Wrapper = styled.div``
 const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: ${props => props.width}px;
   height: ${props => props.height}px;
-  ${props => props.imageInfo ? `background: url('${props.imageInfo.image}') no-repeat center;` : ''}
+  ${props => props.imageInfo ? css`background: url('${props.imageInfo.image}') no-repeat center;` : ''}
 `
 const widthHeights = [
   { w: 80, h: 32 },
@@ -119,15 +124,42 @@ class EndpointLogos extends React.Component<Props> {
     height: 64,
   }
 
-  render() {
+  renderLogo(size: {w: number, h: number}) {
     let imageInfo = null
+
+    if (this.props.endpoint && endpointImages[this.props.endpoint]) {
+      imageInfo = endpointImages[this.props.endpoint].find(i => i.h === size.h && (!this.props.disabled || i.disabled === true))
+    } else {
+      return null
+    }
+
+    if (!imageInfo) {
+      return null
+    }
+
+    return (
+      <Logo
+        width={size.w}
+        height={size.h}
+        imageInfo={imageInfo}
+      />
+    )
+  }
+
+  renderGenericLogo(size: {w: number, h: number}) {
+    return <Generic size={size} name={this.props.endpoint || 'Generic Cloud'} disabled={this.props.disabled} />
+  }
+
+  render() {
     let size = widthHeights.find(wh => wh.h === this.props.height)
 
     if (!size) {
       return null
     }
 
-    if (this.props.endpoint) {
+    let imageInfo = null
+
+    if (this.props.endpoint && endpointImages[this.props.endpoint]) {
       imageInfo = endpointImages[this.props.endpoint].find(i => i.h === size.h && (!this.props.disabled || i.disabled === true))
     }
 
@@ -137,7 +169,9 @@ class EndpointLogos extends React.Component<Props> {
           width={size.w}
           height={size.h}
           imageInfo={imageInfo}
-        />
+        >
+          {imageInfo ? null : this.renderGenericLogo(size)}
+        </Logo>
       </Wrapper>
     )
   }

src/components/atoms/EndpointLogos/story.jsx

@@ -41,6 +41,7 @@ storiesOf('EndpointLogos', module)
         {wrap('openstack', height)}
         {wrap('oracle_vm', height)}
         {wrap('vmware_vsphere', height)}
+        {wrap('Generic Cloud', height)}
       </Wrapper>
     )
   })
@@ -54,6 +55,7 @@ storiesOf('EndpointLogos', module)
         {wrap('openstack', height)}
         {wrap('oracle_vm', height)}
         {wrap('vmware_vsphere', height)}
+        {wrap('Generic Cloud', height)}
       </Wrapper>
     )
   })
@@ -67,6 +69,7 @@ storiesOf('EndpointLogos', module)
         {wrap('openstack', height)}
         {wrap('oracle_vm', height)}
         {wrap('vmware_vsphere', height)}
+        {wrap('Generic Cloud', height)}
       </Wrapper>
     )
   })
@@ -80,6 +83,7 @@ storiesOf('EndpointLogos', module)
         {wrap('openstack', height)}
         {wrap('oracle_vm', height)}
         {wrap('vmware_vsphere', height)}
+        {wrap('Generic Cloud', height)}
       </Wrapper>
     )
   })
@@ -93,6 +97,7 @@ storiesOf('EndpointLogos', module)
         {wrap('openstack', height, true)}
         {wrap('oracle_vm', height, true)}
         {wrap('vmware_vsphere', height, true)}
+        {wrap('Generic Cloud', height, true)}
       </Wrapper>
     )
   })