Merge pull request #5716 from storybooks/5421-notifications-styling

Notifications placement

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -2850,8 +2850,8 @@ exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
 </div>
 `;
 
-exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
-.emotion-1 {
+exports[`Storyshots UI|Notifications/Item longText 1`] = `
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2865,7 +2865,7 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
   text-decoration: none;
 }
 
-.emotion-1 {
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2882,20 +2882,16 @@ exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
 <div
   style="width:240px;margin:1rem"
 >
-  <div
-    class="emotion-1"
-  >
   <div
     class="emotion-0"
   >
     🎉 This is a long message that extends over two lines!
   </div>
-  </div>
 </div>
 `;
 
-exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
-.emotion-1 {
+exports[`Storyshots UI|Notifications/Item simple 1`] = `
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2909,7 +2905,7 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
   text-decoration: none;
 }
 
-.emotion-1 {
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2926,20 +2922,16 @@ exports[`Storyshots UI|Notifications/NotificationItem simple 1`] = `
 <div
   style="width:240px;margin:1rem"
 >
-  <div
-    class="emotion-1"
-  >
   <div
     class="emotion-0"
   >
     🎉 Storybook is cool!
   </div>
-  </div>
 </div>
 `;
 
-exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
-.emotion-1 {
+exports[`Storyshots UI|Notifications/Item withLink 1`] = `
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2953,7 +2945,7 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   text-decoration: none;
 }
 
-.emotion-1 {
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2971,20 +2963,16 @@ exports[`Storyshots UI|Notifications/NotificationItem withLink 1`] = `
   style="width:240px;margin:1rem"
 >
   <a
-    class="emotion-1"
+    class="emotion-0"
     href="/?path=/some/path"
-  >
-    <div
-      class="emotion-0"
   >
     🎉 Storybook X.X is available! Download now »
-    </div>
   </a>
 </div>
 `;
 
-exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
-.emotion-1 {
+exports[`Storyshots UI|Notifications/Notifications all 1`] = `
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -2998,15 +2986,23 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 > * + * {
+.emotion-3 {
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+}
+
+.emotion-3 > * + * {
   margin-top: 10px;
 }
 
-.emotion-6:empty {
+.emotion-3:empty {
   display: none;
 }
 
-.emotion-1 {
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -3020,11 +3016,19 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   text-decoration: none;
 }
 
-.emotion-6 > * + * {
+.emotion-3 {
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+}
+
+.emotion-3 > * + * {
   margin-top: 10px;
 }
 
-.emotion-6:empty {
+.emotion-3:empty {
   display: none;
 }
 
@@ -3032,42 +3036,30 @@ exports[`Storyshots UI|Notifications/NotificationList all 1`] = `
   style="width:240px;margin:1rem"
 >
   <div
-    class="emotion-6"
-  >
-    <div
-      class="emotion-1"
+    class="emotion-3"
   >
     <div
       class="emotion-0"
     >
       🎉 Storybook is cool!
     </div>
-    </div>
-    <div
-      class="emotion-1"
-    >
     <div
       class="emotion-0"
     >
       🎉 This is a long message that extends over two lines!
     </div>
-    </div>
     <a
-      class="emotion-1"
+      class="emotion-0"
       href="/?path=/some/path"
-    >
-      <div
-        class="emotion-0"
     >
       🎉 Storybook X.X is available! Download now »
-      </div>
     </a>
   </div>
 </div>
 `;
 
-exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
-.emotion-1 {
+exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -3081,15 +3073,22 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   text-decoration: none;
 }
 
-.emotion-2 > * + * {
+.emotion-3 {
+  z-index: 10;
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+}
+
+.emotion-3 > * + * {
   margin-top: 10px;
 }
 
-.emotion-2:empty {
+.emotion-3:empty {
   display: none;
 }
 
-.emotion-1 {
+.emotion-0 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -3103,11 +3102,18 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   text-decoration: none;
 }
 
-.emotion-2 > * + * {
+.emotion-3 {
+  z-index: 10;
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+}
+
+.emotion-3 > * + * {
   margin-top: 10px;
 }
 
-.emotion-2:empty {
+.emotion-3:empty {
   display: none;
 }
 
@@ -3115,8 +3121,92 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
   style="width:240px;margin:1rem"
 >
   <div
-    class="emotion-2"
+    class="emotion-3"
   >
+    <div
+      class="emotion-0"
+    >
+      🎉 Storybook is cool!
+    </div>
+    <div
+      class="emotion-0"
+    >
+      🎉 This is a long message that extends over two lines!
+    </div>
+    <a
+      class="emotion-0"
+      href="/?path=/some/path"
+    >
+      🎉 Storybook X.X is available! Download now »
+    </a>
+  </div>
+</div>
+`;
+
+exports[`Storyshots UI|Notifications/Notifications single 1`] = `
+.emotion-0 {
+  display: block;
+  padding: 16px 20px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
+  color: #FFFFFF;
+  background-color: rgba(0,0,0,0.95);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-1 {
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+}
+
+.emotion-1 > * + * {
+  margin-top: 10px;
+}
+
+.emotion-1:empty {
+  display: none;
+}
+
+.emotion-0 {
+  display: block;
+  padding: 16px 20px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
+  color: #FFFFFF;
+  background-color: rgba(0,0,0,0.95);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-1 {
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+}
+
+.emotion-1 > * + * {
+  margin-top: 10px;
+}
+
+.emotion-1:empty {
+  display: none;
+}
+
+<div
+  style="width:240px;margin:1rem"
+>
   <div
     class="emotion-1"
   >
@@ -3126,7 +3216,6 @@ exports[`Storyshots UI|Notifications/NotificationList single 1`] = `
       🎉 Storybook is cool!
     </div>
   </div>
-  </div>
 </div>
 `;
 
@@ -4422,11 +4511,9 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 
 <div
   class="emotion-100"
-  title="wrapper"
 >
   <div
     class="emotion-8"
-    title="flexbar"
   >
     <div
       class="emotion-7"
@@ -5222,29 +5309,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   fill: currentColor;
 }
 
-.emotion-81 {
-  display: block;
-  padding: 16px 20px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
-  color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-78 > * + * {
-  margin-top: 10px;
-}
-
-.emotion-78:empty {
-  display: none;
-}
-
-.emotion-84 {
+.emotion-77 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -5409,23 +5474,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   color: #774dd7;
 }
 
-.emotion-77 {
-  height: 48px;
-}
-
-.emotion-83 {
-  position: fixed;
-  display: block;
-  bottom: 20px;
-  left: 20px;
-  margin: 0;
-  padding: 0;
-  width: 20%;
-  min-width: 200px;
-  max-width: 280px;
-  z-index: 2;
-}
-
 .emotion-76 {
   margin-top: 8px;
 }
@@ -5622,29 +5670,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   fill: currentColor;
 }
 
-.emotion-81 {
-  display: block;
-  padding: 16px 20px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
-  color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-78 > * + * {
-  margin-top: 10px;
-}
-
-.emotion-78:empty {
-  display: none;
-}
-
-.emotion-84 {
+.emotion-77 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -5809,23 +5835,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   color: #774dd7;
 }
 
-.emotion-77 {
-  height: 48px;
-}
-
-.emotion-83 {
-  position: fixed;
-  display: block;
-  bottom: 20px;
-  left: 20px;
-  margin: 0;
-  padding: 0;
-  width: 20%;
-  min-width: 200px;
-  max-width: 280px;
-  z-index: 2;
-}
-
 .emotion-76 {
   margin-top: 8px;
 }
@@ -5971,7 +5980,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 }
 
 <nav
-  class="container emotion-84"
+  class="container emotion-77"
 >
   <div
     class="emotion-7"
@@ -6376,34 +6385,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
       </span>
     </div>
   </div>
-  <div
-    class="emotion-79"
-  >
-    <div
-      class="emotion-78"
-    >
-      <div
-        class="emotion-77"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-83"
-  >
-    <div
-      class="emotion-78"
-    >
-      <div
-        class="emotion-81"
-      >
-        <div
-          class="emotion-79"
-        >
-          🎉 Storybook is cool!
-        </div>
-      </div>
-    </div>
-  </div>
 </nav>
 `;
 
@@ -6420,29 +6401,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   fill: currentColor;
 }
 
-.emotion-52 {
-  display: block;
-  padding: 16px 20px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
-  color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-49 > * + * {
-  margin-top: 10px;
-}
-
-.emotion-49:empty {
-  display: none;
-}
-
-.emotion-55 {
+.emotion-48 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -6914,23 +6873,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   color: #774dd7;
 }
 
-.emotion-48 {
-  height: 48px;
-}
-
-.emotion-54 {
-  position: fixed;
-  display: block;
-  bottom: 20px;
-  left: 20px;
-  margin: 0;
-  padding: 0;
-  width: 20%;
-  min-width: 200px;
-  max-width: 280px;
-  z-index: 2;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -6943,29 +6885,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   fill: currentColor;
 }
 
-.emotion-52 {
-  display: block;
-  padding: 16px 20px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
-  color: #FFFFFF;
-  background-color: rgba(0,0,0,0.95);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-49 > * + * {
-  margin-top: 10px;
-}
-
-.emotion-49:empty {
-  display: none;
-}
-
-.emotion-55 {
+.emotion-48 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -7437,25 +7357,8 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   color: #774dd7;
 }
 
-.emotion-48 {
-  height: 48px;
-}
-
-.emotion-54 {
-  position: fixed;
-  display: block;
-  bottom: 20px;
-  left: 20px;
-  margin: 0;
-  padding: 0;
-  width: 20%;
-  min-width: 200px;
-  max-width: 280px;
-  z-index: 2;
-}
-
 <nav
-  class="container emotion-55"
+  class="container emotion-48"
 >
   <div
     class="emotion-7"
@@ -7738,34 +7641,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
       </a>
     </section>
   </div>
-  <div
-    class="emotion-31"
-  >
-    <div
-      class="emotion-49"
-    >
-      <div
-        class="emotion-48"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-54"
-  >
-    <div
-      class="emotion-49"
-    >
-      <div
-        class="emotion-52"
-      >
-        <div
-          class="emotion-31"
-        >
-          🎉 Storybook is cool!
-        </div>
-      </div>
-    </div>
-  </div>
 </nav>
 `;
 

lib/components/src/tabs/__snapshots__/tabs.stories.storyshot

@@ -219,11 +219,9 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
 >
   <div
     class="emotion-12"
-    title="wrapper"
   >
     <div
       class="emotion-9"
-      title="flexbar"
     >
       <div
         class="emotion-8"
@@ -570,11 +568,9 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
 >
   <div
     class="emotion-12"
-    title="wrapper"
   >
     <div
       class="emotion-9"
-      title="flexbar"
     >
       <div
         class="emotion-8"
@@ -873,11 +869,9 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
 >
   <div
     class="emotion-6"
-    title="wrapper"
   >
     <div
       class="emotion-5"
-      title="flexbar"
     >
       <div
         class="emotion-4"
@@ -1159,11 +1153,9 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 >
   <div
     class="emotion-12"
-    title="wrapper"
   >
     <div
       class="emotion-9"
-      title="flexbar"
     >
       <div
         class="emotion-8"
@@ -1512,11 +1504,9 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
 >
   <div
     class="emotion-12"
-    title="wrapper"
   >
     <div
       class="emotion-9"
-      title="flexbar"
     >
       <div
         class="emotion-8"
@@ -1892,11 +1882,9 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
 >
   <div
     class="emotion-12"
-    title="wrapper"
   >
     <div
       class="emotion-9"
-      title="flexbar"
     >
       <div
         class="emotion-8"
@@ -2261,11 +2249,9 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
 >
   <div
     class="emotion-13"
-    title="wrapper"
   >
     <div
       class="emotion-10"
-      title="flexbar"
     >
       <div
         class="emotion-9"

lib/components/src/tabs/tabs.js

@@ -100,8 +100,8 @@ export const Tabs = React.memo(
     const list = childrenToList(children, selected);
 
     return list.length ? (
-      <Wrapper absolute={absolute} bordered={bordered} id={htmlId} title="wrapper">
-        <FlexBar border title="flexbar">
+      <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
+        <FlexBar border>
           <TabBar role="tablist">
             {list.map(({ title, id, active }) => (
               <TabButton

lib/ui/src/app.js

@@ -11,6 +11,7 @@ import { Desktop } from './components/layout/desktop';
 import Nav from './containers/nav';
 import Preview from './containers/preview';
 import Panel from './containers/panel';
+import Notifications from './containers/notifications';
 
 import SettingsPages from './settings';
 
@@ -18,6 +19,7 @@ const createProps = memoize(1)(() => ({
   Nav,
   Preview,
   Panel,
+  Notifications,
   pages: [
     {
       key: 'settings',

lib/ui/src/components/layout/desktop.js

@@ -5,8 +5,16 @@ import ResizeDetector from 'react-resize-detector';
 
 import * as S from './container';
 
-const Desktop = React.memo(({ Panel, Nav, Preview, pages, options, viewMode }) => (
+const Desktop = React.memo(({ Panel, Nav, Preview, Notifications, pages, options, viewMode }) => (
   <S.Root>
+    <Notifications
+      placement={{
+        position: 'fixed',
+        bottom: 20,
+        left: 20,
+      }}
+    />
+
     <ResizeDetector handleWidth handleHeight>
       {(width, height) =>
         width && height ? (
@@ -48,6 +56,7 @@ Desktop.propTypes = {
   Nav: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   Preview: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   Panel: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
+  Notifications: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   pages: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string.isRequired,

lib/ui/src/components/layout/layout.stories.js

@@ -19,7 +19,6 @@ import { mockDataset } from '../sidebar/treeview/treeview.mockdata';
 const realNavProps = {
   title: 'Title',
   url: 'https://example.com',
-  notifications: [],
   stories: mockDataset.withRoot,
   menu: [],
 };
@@ -110,6 +109,7 @@ const mockProps = {
   Nav: MockNav,
   Preview: MockPreview,
   Panel: MockPanel,
+  Notifications: () => null,
   pages: [],
   options: { isFullscreen: false, showNav: true, showPanel: true, panelPosition: 'right' },
   path: '/story/UI-DesktopLayout-noNav',
@@ -120,6 +120,7 @@ const mockProps = {
 const realProps = {
   Nav: () => <Sidebar {...realNavProps} />,
   Preview: () => <Preview {...previewProps} />,
+  Notifications: () => null,
   Panel: () => (
     <Panel
       panels={panels}

lib/ui/src/components/layout/mobile.js

@@ -133,11 +133,20 @@ class Mobile extends Component {
   }
 
   render() {
-    const { Nav, Preview, Panel, pages, viewMode, options } = this.props;
+    const { Nav, Preview, Panel, Notifications, pages, viewMode, options } = this.props;
     const { active } = this.state;
 
     return (
       <Root>
+        <Notifications
+          placement={{
+            position: 'fixed',
+            bottom: 60,
+            left: 20,
+            right: 20,
+          }}
+        />
+
         <Panels active={active}>
           <Nav />
           <div>
@@ -184,6 +193,7 @@ Mobile.propTypes = {
   Nav: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   Preview: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   Panel: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
+  Notifications: PropTypes.any.isRequired, // eslint-disable-line react/forbid-prop-types
   pages: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string.isRequired,

lib/ui/src/components/notifications/item.js

@@ -4,8 +4,6 @@ import { styled } from '@storybook/theming';
 import { Link } from '@storybook/router';
 import { rgba, lighten, darken } from 'polished';
 
-const NotificationText = styled.div();
-
 const baseStyle = ({ theme }) => ({
   display: 'block',
   padding: '16px 20px',
@@ -31,19 +29,14 @@ export const NotificationItemSpacer = styled.div({
 
 export default function NotificationItem({ notification: { content, link } }) {
   return link ? (
-    <NotificationLink to={link}>
-      <NotificationText>{content}</NotificationText>
-    </NotificationLink>
+    <NotificationLink to={link}>{content}</NotificationLink>
   ) : (
-    <Notification>
-      <NotificationText>{content}</NotificationText>
-    </Notification>
+    <Notification>{content}</Notification>
   );
 }
 
 NotificationItem.propTypes = {
   notification: PropTypes.shape({
-    icon: PropTypes.string,
     content: PropTypes.string.isRequired,
     link: PropTypes.string,
   }).isRequired,

lib/ui/src/components/notifications/item.stories.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import NotificationItem from './NotificationItem';
+import NotificationItem from './item';
 
 export default {
   component: NotificationItem,
-  title: 'UI|Notifications/NotificationItem',
+  title: 'UI|Notifications/Item',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
 };
 

lib/ui/src/components/notifications/notifications.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@storybook/theming';
+
+import NotificationItem from './item';
+
+const List = styled.div(
+  {
+    zIndex: 10,
+
+    '> * + *': {
+      marginTop: 10,
+    },
+    '&:empty': {
+      display: 'none',
+    },
+  },
+  ({ placement }) =>
+    placement || {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: 'fixed',
+    }
+);
+
+export default function NotificationList({ notifications, placement }) {
+  return (
+    <List placement={placement}>
+      {notifications.map(notification => (
+        <NotificationItem key={notification.id} notification={notification} />
+      ))}
+    </List>
+  );
+}
+
+NotificationList.propTypes = {
+  placement: PropTypes.shape({
+    position: PropTypes.string,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+  }),
+  notifications: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired)
+    .isRequired,
+};
+NotificationList.defaultProps = {
+  placement: undefined,
+};

lib/ui/src/components/notifications/notifications.stories.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import NotificationList from './NotificationList';
-import * as NotificationItemStories from './NotificationItem.stories';
+import NotificationList from './notifications';
+import * as NotificationItemStories from './item.stories';
 
 export default {
   component: NotificationList,
-  title: 'UI|Notifications/NotificationList',
+  title: 'UI|Notifications/Notifications',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
 };
 
@@ -15,8 +15,17 @@ const notifications = Object.values(NotificationItemStories)
     ...notification,
     id: index.toString(),
   }));
-export const all = () => <NotificationList notifications={notifications} />;
-all.storyData = { notifications };
 
 export const single = () => <NotificationList notifications={notifications.slice(0, 1)} />;
 single.storyData = { notifications: notifications.slice(0, 1) };
+
+export const all = () => <NotificationList notifications={notifications} />;
+all.storyData = { notifications };
+
+export const placement = () => (
+  <NotificationList
+    placement={{ position: 'fixed', left: 20, bottom: 20 }}
+    notifications={notifications}
+  />
+);
+all.storyData = { notifications };

lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot

@@ -287,11 +287,9 @@ exports[`Storyshots UI|Panel default 1`] = `
 <div
   class="emotion-14"
   id="storybook-panel-root"
-  title="wrapper"
 >
   <div
     class="emotion-12"
-    title="flexbar"
   >
     <div
       class="emotion-11"

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-import NotificationItem, { NotificationItemSpacer } from './NotificationItem';
-
-const List = styled.div({
-  '> * + *': {
-    marginTop: 10,
-  },
-  '&:empty': {
-    display: 'none',
-  },
-});
-
-export function NotificationListSpacer({ notifications }) {
-  return (
-    <List>
-      {notifications.map(notification => (
-        <NotificationItemSpacer key={notification.id} />
-      ))}
-    </List>
-  );
-}
-NotificationListSpacer.propTypes = {
-  notifications: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired)
-    .isRequired,
-};
-
-export default function NotificationList({ notifications }) {
-  return (
-    <List>
-      {notifications.map(notification => (
-        <NotificationItem key={notification.id} notification={notification} />
-      ))}
-    </List>
-  );
-}
-
-NotificationList.propTypes = {
-  notifications: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired)
-    .isRequired,
-};

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-import NotificationList, { NotificationListSpacer } from './NotificationList';
 import SidebarHeading from './SidebarHeading';
 import SidebarStories from './SidebarStories';
 
@@ -25,40 +24,16 @@ const Container = styled.nav({
   overflowX: 'hidden',
 });
 
-const Foot = styled.div({});
-
-export const Notifications = styled.div({
-  position: 'fixed',
-  display: 'block',
-  bottom: 20,
-  left: 20,
-  margin: 0,
-  padding: 0,
-  width: '20%',
-  minWidth: 200,
-  maxWidth: 280,
-  zIndex: 2,
-});
-
-const Sidebar = ({ storyId, notifications = [], stories, menu, menuHighlighted, loading }) => (
+const Sidebar = ({ storyId, stories, menu, menuHighlighted, loading }) => (
   <Container className="container">
     <Heading menuHighlighted={menuHighlighted} menu={menu} />
     <Stories stories={stories} storyId={storyId} loading={loading} />
-
-    <Foot>
-      <NotificationListSpacer notifications={notifications} />
-    </Foot>
-
-    <Notifications>
-      <NotificationList notifications={notifications} />
-    </Notifications>
   </Container>
 );
 
 Sidebar.propTypes = {
   stories: PropTypes.shape({}).isRequired,
   storyId: PropTypes.string,
-  notifications: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   menu: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   menuHighlighted: PropTypes.bool,
   loading: PropTypes.bool,

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Sidebar from './Sidebar';
 import * as SidebarHeadingStories from './SidebarHeading.stories';
-import * as NotificationsListStories from './NotificationList.stories';
 import * as SidebarStoriesStories from './SidebarStories.stories';
 
 export default {
@@ -11,15 +10,10 @@ export default {
 };
 
 const { menu } = SidebarHeadingStories.standard.storyData;
-const { notifications } = NotificationsListStories.single.storyData;
 const { stories, storyId } = SidebarStoriesStories.withRoot.storyData;
 
-export const simple = () => (
-  <Sidebar menu={menu} notifications={notifications} stories={stories} storyId={storyId} />
-);
-simple.storyData = { menu, notifications, stories, storyId };
+export const simple = () => <Sidebar menu={menu} stories={stories} storyId={storyId} />;
+simple.storyData = { menu, stories, storyId };
 
-export const loading = () => (
-  <Sidebar menu={menu} notifications={notifications} stories={{}} loading />
-);
-loading.storyData = { menu, notifications, stories: {} };
+export const loading = () => <Sidebar menu={menu} stories={{}} loading />;
+loading.storyData = { menu, stories: {} };

lib/ui/src/containers/nav.js

@@ -92,7 +92,6 @@ const createMenu = memoize(1)((api, shortcutKeys, isFullscreen, showPanel, showN
 export const mapper = (state, api) => {
   const {
     ui: { name, url },
-    notifications,
     viewMode,
     storyId,
     layout: { isFullscreen, showPanel, showNav, panelPosition },
@@ -105,7 +104,6 @@ export const mapper = (state, api) => {
     loading: !storiesConfigured,
     title: name,
     url,
-    notifications,
     stories: storiesHash,
     storyId,
     viewMode,

lib/ui/src/containers/notifications.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Notifications from '../components/notifications/notifications';
+import { Consumer } from '../core/context';
+
+export const mapper = state => {
+  const { notifications } = state;
+
+  return {
+    notifications,
+  };
+};
+
+const NotificationConnect = props => (
+  <Consumer>{({ state, api }) => <Notifications {...props} {...mapper(state, api)} />}</Consumer>
+);
+
+export default NotificationConnect;

lib/ui/src/core/versions.js

@@ -83,10 +83,8 @@ export default function({ store }) {
       if (latestVersion !== dismissedVersionNotification) {
         addNotification({
           id: 'update',
-          level: 2,
           link: '/settings/about',
-          icon: '🎉',
-          content: `There's a new version available: ${latestVersion}`,
+          content: `🎉 Storybook ${latestVersion} is available!`,
           onClear() {
             store.setState(
               { dismissedVersionNotification: latestVersion },

lib/ui/src/settings/__snapshots__/about.stories.storyshot

@@ -411,11 +411,9 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
 
 <div
   class="emotion-26"
-  title="wrapper"
 >
   <div
     class="emotion-8"
-    title="flexbar"
   >
     <div
       class="emotion-7"
@@ -1697,11 +1695,9 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
 
 <div
   class="emotion-42"
-  title="wrapper"
 >
   <div
     class="emotion-8"
-    title="flexbar"
   >
     <div
       class="emotion-7"
@@ -2853,11 +2849,9 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
 
 <div
   class="emotion-28"
-  title="wrapper"
 >
   <div
     class="emotion-8"
-    title="flexbar"
   >
     <div
       class="emotion-7"