diff --git a/src/components/BlankSlate/BlankSlate.css.js b/src/components/BlankSlate/BlankSlate.css.js index f81e8c3dc..6a5f2fdf2 100644 --- a/src/components/BlankSlate/BlankSlate.css.js +++ b/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; ` diff --git a/src/components/BlankSlate/BlankSlate.tsx b/src/components/BlankSlate/BlankSlate.tsx index 72a6ea74f..d9733ad08 100644 --- a/src/components/BlankSlate/BlankSlate.tsx +++ b/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,6 +21,7 @@ class BlankSlate extends React.PureComponent { static defaultProps = { lightBackground: false, alignTop: false, + illoSize: 80, } render() { @@ -27,6 +29,7 @@ class BlankSlate extends React.PureComponent { className, children, illoName, + illoSize, title, message, lightBackground, @@ -43,7 +46,7 @@ class BlankSlate extends React.PureComponent { return ( - {illoName && } + {illoName && } {title && {title}} {message && {message}} diff --git a/src/components/BlankSlate/__tests__/BlankSlate.test.tsx b/src/components/BlankSlate/__tests__/BlankSlate.test.tsx index e1eed0285..24d5270ec 100644 --- a/src/components/BlankSlate/__tests__/BlankSlate.test.tsx +++ b/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( + + ) + const o = wrapper.find(IlloUI) + + expect(o.first().prop('size')).toBe(90) + }) }) diff --git a/src/components/Illo/illos.all.js b/src/components/Illo/illos.all.js index 49a30811d..bb238563e 100644 --- a/src/components/Illo/illos.all.js +++ b/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, } diff --git a/src/components/Illo/styles/Illo.css.js b/src/components/Illo/styles/Illo.css.js index fb8446c25..a3d9b1f72 100644 --- a/src/components/Illo/styles/Illo.css.js +++ b/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') diff --git a/src/components/Illo/types.js b/src/components/Illo/types.js index 336adaacf..e69e89fef 100644 --- a/src/components/Illo/types.js +++ b/src/components/Illo/types.js @@ -2,4 +2,5 @@ export type IlloSize = | '40' | '60' | '72' -| '80' \ No newline at end of file +| '80' +| '90' \ No newline at end of file diff --git a/src/illos/spot-misc-empty.svg b/src/illos/spot-misc-empty.svg new file mode 100644 index 000000000..74574bfed --- /dev/null +++ b/src/illos/spot-misc-empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stories/BlankSlate.stories.js b/stories/BlankSlate.stories.js index 858a260f4..ea7e25a3f 100644 --- a/stories/BlankSlate.stories.js +++ b/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 = ( @@ -53,6 +53,7 @@ stories.add('Illo', () => { title: title(''), illoName: illoName(), message: htmlMessage, + illoSize: 90, } return }) @@ -68,6 +69,7 @@ stories.add('Light background', () => { illoName: illoName(), lightBackground: boolean('lightBackground', true), message: htmlMessage, + illoSize: 90, } return }) @@ -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 }) @@ -92,6 +99,7 @@ storiesHsApp.add('Light background', () => { lightBackground: boolean('lightBackground', true), alignTop: boolean('alignTop', false), message: htmlMessage, + illoSize: 90, } return (
@@ -107,6 +115,7 @@ storiesHsApp.add('Align top', () => { lightBackground: boolean('lightBackground', true), alignTop: boolean('alignTop', true), message: htmlMessage, + illoSize: 90, } return (