Merge master

frontend/components/Editor/components/Heading.js

@@ -17,32 +17,6 @@ type Props = {
   component?: string,
 };
 
-const Wrapper = styled.div`
-  display: inline;
-  margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
-`;
-
-const Anchor = styled.a`
-  visibility: hidden;
-  padding-left: .25em;
-  color: #dedede;
-
-  &:hover {
-    color: #cdcdcd;
-  }
-`;
-
-// $FlowIssue I don't know
-const titleStyles = component => styled(component)`
-  position: relative;
-
-  &:hover {
-    ${Anchor} {
-      visibility: visible;
-    }
-  }
-`;
-
 function Heading(props: Props) {
   const {
     parent,
@@ -58,7 +32,7 @@ function Heading(props: Props) {
   const showPlaceholder = placeholder && firstHeading && !node.text;
   const slugish = _.escape(`${component}-${slug(node.text)}`);
   const showHash = readOnly && !!slugish;
-  const Component = titleStyles(component);
+  const Component = component;
   const emoji = editor.props.emoji || '';
   const title = node.text.trim();
   const startsWithEmojiAndSpace =
@@ -76,4 +50,32 @@ function Heading(props: Props) {
   );
 }
 
+const Wrapper = styled.div`
+  display: inline;
+  margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
+`;
+
+const Anchor = styled.a`
+  visibility: hidden;
+  padding-left: .25em;
+  color: #dedede;
+
+  &:hover {
+    color: #cdcdcd;
+  }
+`;
+
+export const Heading1 = styled(Heading)`
+  &:hover {
+    ${Anchor} {
+      visibility: visible;
+    }
+  }
+`;
+export const Heading2 = Heading1.withComponent('h2');
+export const Heading3 = Heading1.withComponent('h3');
+export const Heading4 = Heading1.withComponent('h4');
+export const Heading5 = Heading1.withComponent('h5');
+export const Heading6 = Heading1.withComponent('h6');
+
 export default Heading;

frontend/components/Editor/schema.js

@@ -6,7 +6,14 @@ import InlineCode from './components/InlineCode';
 import Image from './components/Image';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
-import Heading from './components/Heading';
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+} from './components/Heading';
 import Paragraph from './components/Paragraph';
 import type { Props, Node, Transform } from './types';
 
@@ -47,12 +54,12 @@ const createSchema = () => {
       image: Image,
       link: Link,
       'list-item': ListItem,
-      heading1: (props: Props) => <Heading placeholder {...props} />,
-      heading2: (props: Props) => <Heading component="h2" {...props} />,
-      heading3: (props: Props) => <Heading component="h3" {...props} />,
-      heading4: (props: Props) => <Heading component="h4" {...props} />,
-      heading5: (props: Props) => <Heading component="h5" {...props} />,
-      heading6: (props: Props) => <Heading component="h6" {...props} />,
+      heading1: (props: Props) => <Heading1 placeholder {...props} />,
+      heading2: (props: Props) => <Heading2 {...props} />,
+      heading3: (props: Props) => <Heading3 {...props} />,
+      heading4: (props: Props) => <Heading4 {...props} />,
+      heading5: (props: Props) => <Heading5 {...props} />,
+      heading6: (props: Props) => <Heading6 {...props} />,
     },
 
     rules: [

frontend/components/Icon/ChevronIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function NextIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+        <path d="M0 0h24v24H0z" fill="none" />
+      </svg>
+    </Icon>
+  );
+}

frontend/components/Input/Input.js

@@ -24,7 +24,7 @@ const RealInput = styled.input`
   background: none;
 
   &::placeholder {
-    color: ${color.slateLight};
+    color: ${color.slate};
   }
 `;
 
@@ -55,7 +55,7 @@ const LabelText = styled.div`
 
 export type Props = {
   type: string,
-  value: string,
+  value?: string,
   label?: string,
   className?: string,
 };

frontend/components/Labeled/Labeled.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import Flex from 'components/Flex';
+import styled from 'styled-components';
+import { size } from 'styles/constants';
+
+type Props = {
+  label: React.Element<*> | string,
+  children: React.Element<*>,
+};
+
+const Labeled = ({ label, children, ...props }: Props) => (
+  <Flex column {...props}>
+    <Header>{label}</Header>
+    {children}
+  </Flex>
+);
+
+const Header = styled(Flex)`
+  margin-bottom: ${size.medium};  
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #9FA6AB;
+  letter-spacing: 0.04em;
+`;
+
+export default observer(Labeled);

frontend/components/Labeled/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Labeled from './Labeled';
+export default Labeled;

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -43,7 +43,7 @@ const activeStyle = {
           {!canDropToImport &&
             <SidebarLink to={doc.url}>{doc.title}</SidebarLink>}
 
-          {(document.pathToDocument.includes(doc.id) ||
+          {(document.pathToDocument.map(entry => entry.id).includes(doc.id) ||
             document.id === doc.id) &&
             <Children column>
               {doc.children && this.renderDocuments(doc.children, depth + 1)}

frontend/components/Modal/Modal.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
 import { color } from 'styles/constants';
@@ -75,4 +76,4 @@ const Close = styled.a`
   }
 `;
 
-export default Modal;
+export default observer(Modal);