Extract Instruction component into components for examples (#2790)

examples/components.js

@@ -80,6 +80,23 @@ export const Icon = React.forwardRef(({ className, ...props }, ref) => (
   />
 ))
 
+export const Instruction = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    className={cx(
+      className,
+      css`
+        white-space: pre-wrap;
+        margin: 0 -20px 10px;
+        padding: 10px 20px;
+        font-size: 14px;
+        background: #f8f8e8;
+      `
+    )}
+  />
+))
+
 export const Menu = React.forwardRef(({ className, ...props }, ref) => (
   <div
     {...props}

examples/composition/index.js

@@ -8,7 +8,7 @@ import splitJoin from './split-join.js'
 import insert from './insert.js'
 import special from './special.js'
 import { isKeyHotkey } from 'is-hotkey'
-import { Button, EditorValue, Icon, Toolbar } from '../components'
+import { Button, EditorValue, Icon, Instruction, Toolbar } from '../components'
 import { ANDROID_API_VERSION } from 'slate-dev-environment'
 
 /**
@@ -25,23 +25,11 @@ const DEFAULT_NODE = 'paragraph'
  * @type {Component}
  */
 
-const Instruction = props => (
-  <div
-    {...props}
-    className={css`
-      white-space: pre-wrap;
-      margin: -1em -1em 1em;
-      padding: 0.5em;
-      background: #eee;
-    `}
-  />
-)
-
 const Tabs = props => (
   <div
     {...props}
     className={css`
-      margin-bottom: 0.5em;
+      margin: -10px -10px 0;
     `}
   />
 )
@@ -52,11 +40,13 @@ const Tab = ({ active, ...props }) => (
     className={css`
       display: inline-block;
       text-decoration: none;
-      color: black;
-      background: ${active ? '#AAA' : '#DDD'};
-      padding: 0.25em 0.5em;
-      border-radius: 0.25em;
+      font-size: 14px;
+      color: ${active ? 'black' : '#808080'};
+      background: ${active ? '#f8f8e8' : '#fff'};
+      padding: 10px;
       margin-right: 0.25em;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
     `}
   />
 )
@@ -174,26 +164,20 @@ class RichTextExample extends React.Component {
     // const textLines = getTextLines(this.state.value)
     return (
       <div>
+        <Tabs>
+          {SUBPAGES.map(([name, Component, subpage]) => {
+            const active = subpage === this.props.params.subpage
+            return (
+              <Tab key={subpage} to={`/composition/${subpage}`} active={active}>
+                {name}
+              </Tab>
+            )
+          })}
+          <Version>
+            {ANDROID_API_VERSION ? `Android API ${ANDROID_API_VERSION}` : null}
+          </Version>
+        </Tabs>
         <Instruction>
-          <Tabs>
-            {SUBPAGES.map(([name, Component, subpage]) => {
-              const active = subpage === this.props.params.subpage
-              return (
-                <Tab
-                  key={subpage}
-                  to={`/composition/${subpage}`}
-                  active={active}
-                >
-                  {name}
-                </Tab>
-              )
-            })}
-            <Version>
-              {ANDROID_API_VERSION
-                ? `Android API ${ANDROID_API_VERSION}`
-                : null}
-            </Version>
-          </Tabs>
           <div>{this.state.text}</div>
         </Instruction>
         <Toolbar>

examples/composition/special.js

@@ -1,23 +1,23 @@
-import { p, bold } from './util'
+import { p, text, bold } from './util'
 
 export default {
   text: `Follow the instructions on each line exactly`,
   document: {
     nodes: [
       p(bold('Type "it is". cursor to "i|t" then hit enter.')),
-      p(''),
+      p(text('')),
       p(
         bold(
           'Cursor to "mid|dle" then press space, backspace, space, backspace. Should say "middle".'
         )
       ),
-      p('The middle word.'),
+      p(text('The middle word.')),
       p(
         bold(
           'Cursor in line below. Wait for caps on keyboard to show up. If not try again. Type "It me. No." and it should not mangle on the last period.'
         )
       ),
-      p(''),
+      p(text('')),
     ],
   },
 }

examples/composition/util.js

@@ -2,14 +2,14 @@ export function p(...leaves) {
   return {
     object: 'block',
     type: 'paragraph',
-    nodes: [{ object: 'text', leaves }],
+    nodes: leaves,
   }
 }
 
 export function text(textContent) {
-  return { text: textContent }
+  return { object: 'text', text: textContent }
 }
 
 export function bold(textContent) {
-  return { text: textContent, marks: [{ type: 'bold' }] }
+  return { object: 'text', text: textContent, marks: [{ type: 'bold' }] }
 }