fix(docs): display name for function components (#1107)

* apply fix

* remove value to reduce copy paste

* fix typo

docs/src/views/Layout.tsx

@@ -69,14 +69,14 @@ export default () => (
         const OpaqueBackground = ({ children, color }) => (
           <Segment styles={{ backgroundColor: color }} content={{ children }} />
         )
+        OpaqueBackground.displayName = 'OpaqueBackground'
 
         return (
           <OpaqueBackground color="lightyellow">
             This is a bad approach to opaque background :(
           </OpaqueBackground>
         )
       }}
-      value={`<OpaqueBackground color="lightyellow">This is a bad approach to opaque background :(</OpaqueBackground>`}
     />
     <Header as="h4">Box's misuse: handle relative positioning cases</Header>
     <CodeSnippet
@@ -101,7 +101,6 @@ export default () => (
           </RelativePositioned>
         )
       }}
-      value={`<RelativePositioned left='30px'>This is a bad way to support relative-positioning :(</RelativePositioned>`}
     />
     <p>
       While it might seem that the intent is addressed with the approach taken, however, this is