Add partial for sample output

Redande · Redande · commit c0420a2d984f · 2018-12-05T16:15:04.000+02:00
diff --git a/src/partials/SampleOutput.js b/src/partials/SampleOutput.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PagesContext from '../contexes/PagesContext'
+import styled from 'styled-components'
+
+const accentColor = '#CCC'
+
+const Wrapper = styled.div`
+  padding 1rem;
+  margin-bottom: 2rem;
+  border-left: 0.2rem solid ${accentColor};
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+`
+
+const Body = styled.div`
+  padding-bottom: 0.5rem;
+  font-family: monospace;
+  p {
+    margin-bottom: 0;
+  }
+`
+
+const Note = styled.div`
+  float: right;
+`
+
+export default props => {
+  return (
+    <Wrapper>
+      <Note>Esimerkkitulostus</Note>
+      <Body>{props.children}</Body>
+    </Wrapper>
+  )
+}
diff --git a/src/partials/TextBox.js b/src/partials/TextBox.js
@@ -29,13 +29,6 @@ const Header = styled.h3`
   border-bottom: 1px solid #f7f7f9;
 `
 
-const HeaderMuted = styled.span`
-  color: #818a91 !important;
-  font-size: 80%;
-  font-weight: 400;
-  margin-right: 0.2rem;
-`
-
 const Body = styled.div`
   padding-bottom: 0.5rem;
 `
diff --git a/src/partials/index.js b/src/partials/index.js
@@ -24,12 +24,14 @@ import Test from './Test'
 import PagesInThisSection from './PagesInThisSection'
 import ProgrammingExercise from './ProgrammingExercise'
 import TextBox from './TextBox'
+import SampleOutput from './SampleOutput'
 
 const mapping = {
   test: Test,
   'pages-in-this-section': PagesInThisSection,
   'programming-exercise': ProgrammingExercise,
   'text-box': TextBox,
+  'sample-output': SampleOutput,
 }
 
 export default () => {

Original file line number	Diff line number	Diff line change
@@ -29,13 +29,6 @@ const Header = styled.h3`
`29`	`29`	`border-bottom: 1px solid #f7f7f9;`
`30`	`30`	`
`31`	`31`
`32`		-const HeaderMuted = styled.span`
`33`		`- color: #818a91 !important;`
`34`		`- font-size: 80%;`
`35`		`- font-weight: 400;`
`36`		`- margin-right: 0.2rem;`
`37`		-`
`38`		`-`
`39`	`32`	const Body = styled.div`
`40`	`33`	`padding-bottom: 0.5rem;`
`41`	`34`	`