Merge 27abee8 into 86af033

src/components/BlankSlate/BlankSlate.css.js

@@ -7,8 +7,8 @@ import Text from '../Text'
 import Illo from '../Illo'
 
 export const IlloUI = styled(Illo)`
-  padding-bottom: 18px;
   margin: 0;
+  margin-bottom: 18px;
   align-self: center;
 `
 

src/components/BlankSlate/BlankSlate.tsx

@@ -12,6 +12,7 @@ interface Props {
   message?: string | React.ReactNode
   title?: string
   illoName?: string
+  illoSize?: number
   lightBackground?: boolean
   alignTop?: boolean
 }
@@ -20,13 +21,15 @@ class BlankSlate extends React.PureComponent<Props> {
   static defaultProps = {
     lightBackground: false,
     alignTop: false,
+    illoSize: 80,
   }
 
   render() {
     const {
       className,
       children,
       illoName,
+      illoSize,
       title,
       message,
       lightBackground,
@@ -43,7 +46,7 @@ class BlankSlate extends React.PureComponent<Props> {
 
     return (
       <BlankSlateUI {...getValidProps(rest)} className={componentClassName}>
-        {illoName && <IlloUI name={illoName} size="80" />}
+        {illoName && <IlloUI name={illoName} size={illoSize} />}
         {title && <HeadingUI size="h3">{title}</HeadingUI>}
         {message && <TextUI>{message}</TextUI>}
       </BlankSlateUI>

src/components/BlankSlate/__tests__/BlankSlate.test.tsx

@@ -78,4 +78,13 @@ describe('Illo', () => {
     const component = wrapper.find(IlloUI)
     expect(component.length).toBeFalsy()
   })
+
+  test('Render illo size if set in props', () => {
+    const wrapper = mount(
+      <BlankSlate illoName="chatListBlankSlate" illoSize={90} />
+    )
+    const o = wrapper.find(IlloUI)
+
+    expect(o.first().prop('size')).toBe(90)
+  })
 })

src/components/Illo/illos.all.js

@@ -7,6 +7,7 @@ import lock from '../../illos/lock.svg'
 import plane from '../../illos/plane.svg'
 import search from '../../illos/search.svg'
 import tick from '../../illos/tick.svg'
+import spotMiscEmpty from '../../illos/spot-misc-empty.svg'
 
 export default {
   bulb,
@@ -17,5 +18,6 @@ export default {
   lock,
   plane,
   search,
+  'spot-misc-empty': spotMiscEmpty,
   tick,
 }

src/components/Illo/styles/Illo.css.js

@@ -6,7 +6,7 @@ import forEach from '../../../styles/utilities/forEach'
 import { BEM } from '../../../utilities/classNames'
 
 export const ILLO_DEFAULT_SIZE = 40
-export const ILLO_SIZES = [ILLO_DEFAULT_SIZE, 60, 72, 80]
+export const ILLO_SIZES = [ILLO_DEFAULT_SIZE, 60, 72, 80, 90]
 
 const bem = BEM('.c-Illo')
 

src/components/Illo/types.js

@@ -2,4 +2,5 @@ export type IlloSize =
 | '40'
 | '60'
 | '72'
-| '80'
+| '80'
+| '90'

stories/BlankSlate.stories.js

@@ -20,7 +20,7 @@ const message = () =>
     `No results found for "boopable". Please try another search term.`
   )
 const title = (title = 'No Customers yet') => text('title', title)
-const illoName = (illoName = 'chatListBlankSlate') => text('illoName', illoName)
+const illoName = (illoName = 'spot-misc-empty') => text('illoName', illoName)
 
 const htmlMessage = (
   <span>
@@ -53,6 +53,7 @@ stories.add('Illo', () => {
     title: title(''),
     illoName: illoName(),
     message: htmlMessage,
+    illoSize: 90,
   }
   return <BlankSlate {...getKnobsProps()} {...props} />
 })
@@ -68,6 +69,7 @@ stories.add('Light background', () => {
     illoName: illoName(),
     lightBackground: boolean('lightBackground', true),
     message: htmlMessage,
+    illoSize: 90,
   }
   return <BlankSlate {...props} />
 })
@@ -81,7 +83,12 @@ storiesHsApp.addDecorator(
 storiesHsApp.addDecorator(withHsApp)
 
 storiesHsApp.add('default', () => {
-  const props = { title: title(), illoName: illoName(), message: htmlMessage }
+  const props = {
+    title: title(),
+    illoName: illoName(),
+    message: htmlMessage,
+    illoSize: number('illoSize', 90),
+  }
   return <BlankSlate {...getKnobsProps()} {...props} />
 })
 
@@ -92,6 +99,7 @@ storiesHsApp.add('Light background', () => {
     lightBackground: boolean('lightBackground', true),
     alignTop: boolean('alignTop', false),
     message: htmlMessage,
+    illoSize: 90,
   }
   return (
     <div style={{ height: '800px' }}>
@@ -107,6 +115,7 @@ storiesHsApp.add('Align top', () => {
     lightBackground: boolean('lightBackground', true),
     alignTop: boolean('alignTop', true),
     message: htmlMessage,
+    illoSize: 90,
   }
 
   return (