Skip to content

Commit

Permalink
Add icons to Add Data list and tutorial view (#16592)
Browse files Browse the repository at this point in the history
* add icons for home tutorials

* add test for Synopsis component
  • Loading branch information
nreese authored Feb 13, 2018
1 parent b677848 commit 62f3b80
Show file tree
Hide file tree
Showing 25 changed files with 452 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const tutorialSchema = {
category: Joi.string().valid(Object.values(TUTORIAL_CATEGORY)).required(),
name: Joi.string().required(),
shortDescription: Joi.string().required(),
iconPath: Joi.string(),
euiIconType: Joi.string(), //EUI icon type string, one of https://elastic.github.io/eui/#/icons
longDescription: Joi.string().required(),
completionTimeMinutes: Joi.number().integer(),
previewImagePath: Joi.string(),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`props iconType 1`] = `
<a
className="euiLink synopsis"
data-test-subj="homeSynopsisLinkgreat tutorial"
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiIcon
size="xl"
type="logoApache"
/>
</EuiFlexItem>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="s"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
>
<p>
<EuiTextColor
color="subdued"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
`;

exports[`props iconUrl 1`] = `
<a
className="euiLink synopsis"
data-test-subj="homeSynopsisLinkgreat tutorial"
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<img
alt=""
className="synopsisIcon"
src="icon_url"
/>
</EuiFlexItem>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="s"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
>
<p>
<EuiTextColor
color="subdued"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
`;

exports[`render 1`] = `
<a
className="euiLink synopsis"
data-test-subj="homeSynopsisLinkgreat tutorial"
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="s"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
>
<p>
<EuiTextColor
color="subdued"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
`;
15 changes: 12 additions & 3 deletions src/core_plugins/kibana/public/home/components/synopsis.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import {
EuiTitle,
EuiText,
EuiTextColor,
EuiIcon,
} from '@elastic/eui';

export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPanel }) {
let optionalImg;
if (iconUrl) {
optionalImg = (
Expand All @@ -22,6 +23,15 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
/>
</EuiFlexItem>
);
} else if (iconType) {
optionalImg = (
<EuiFlexItem grow={false}>
<EuiIcon
type={iconType}
size="xl"
/>
</EuiFlexItem>
);
}

const content = (
Expand Down Expand Up @@ -53,8 +63,6 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
);
}



return (
<a
href={url}
Expand All @@ -69,6 +77,7 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
Synopsis.propTypes = {
description: PropTypes.string.isRequired,
iconUrl: PropTypes.string,
iconType: PropTypes.string,
title: PropTypes.string.isRequired,
url: PropTypes.string.isRequired
};
35 changes: 35 additions & 0 deletions src/core_plugins/kibana/public/home/components/synopsis.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { shallow } from 'enzyme';

import { Synopsis } from './synopsis';

test('render', () => {
const component = shallow(<Synopsis
description="this is a great tutorial about..."
title="Great tutorial"
url="link_to_item"
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
});

describe('props', () => {
test('iconType', () => {
const component = shallow(<Synopsis
description="this is a great tutorial about..."
title="Great tutorial"
url="link_to_item"
iconType="logoApache"
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
});

test('iconUrl', () => {
const component = shallow(<Synopsis
description="this is a great tutorial about..."
title="Great tutorial"
url="link_to_item"
iconUrl="icon_url"
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
});
});
Loading

0 comments on commit 62f3b80

Please sign in to comment.