Merge branch 'next' of github.com:storybooks/storybook into next

addons/info/src/components/types/ArrayOf.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';

addons/info/src/components/types/ObjectOf.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';

addons/info/src/components/types/OneOfType.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';

addons/info/src/components/types/PrettyPropType.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import PropTypes from 'prop-types';
 import React from 'react';
 

addons/info/src/components/types/Shape.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import PropTypes from 'prop-types';
 import React from 'react';
 

lib/ui/src/components/sidebar/Sidebar.js

@@ -31,9 +31,9 @@ const CustomScrollArea = styled(ScrollArea)({
 });
 
 const Sidebar = ({ storyId, stories, menu, menuHighlighted, loading }) => (
-  <Container className="container">
+  <Container className="container sidebar-container">
     <CustomScrollArea vertical>
-      <Heading menuHighlighted={menuHighlighted} menu={menu} />
+      <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
       <Stories stories={stories} storyId={storyId} loading={loading} />
     </CustomScrollArea>
   </Container>

lib/ui/src/components/sidebar/SidebarHeading.js

@@ -85,11 +85,7 @@ const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', im
     return title;
   }
   if (image === null && url) {
-    return (
-      <LogoLink href={url} target={targetValue}>
-        {title}
-      </LogoLink>
-    );
+    return <LogoLink href={url} target={targetValue} dangerouslySetInnerHTML={{ __html: title }} />;
   }
   if (image && url === null) {
     return <Img src={image} alt={title} />;

lib/ui/src/components/sidebar/SidebarItem.js

@@ -111,9 +111,19 @@ export default function SidebarItem({
   }
 
   return (
-    <Item isSelected={isSelected} depth={depth} loading={loading} {...props}>
-      <Expander isExpandable={!isLeaf} isExpanded={isExpanded ? true : undefined} />
-      <Icon icon={iconName} isSelected={isSelected} />
+    <Item
+      isSelected={isSelected}
+      depth={depth}
+      loading={loading}
+      {...props}
+      className={isSelected ? 'sidebar-item selected' : 'sidebar-item'}
+    >
+      <Expander
+        className="sidebar-expander"
+        isExpandable={!isLeaf}
+        isExpanded={isExpanded ? true : undefined}
+      />
+      <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
       <span>{name}</span>
     </Item>
   );

lib/ui/src/components/sidebar/SidebarStories.js

@@ -18,6 +18,14 @@ const Subheading = styled(SidebarSubheading)({
   margin: '0 20px',
 });
 
+Subheading.propTypes = {
+  className: PropTypes.string,
+};
+
+Subheading.defaultProps = {
+  className: 'sidebar-subheading',
+};
+
 const Section = styled.section({
   '& + section': {
     marginTop: 20,