Refactor page_statement class to Ribbon component

src/components/Ribbon/Ribbon.scss

@@ -0,0 +1,32 @@
+@import "../../assets/scss/globals";
+
+.ribbon {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  text-align: center;
+  justify-content: center;
+  width: 100%;
+
+  p {
+    display: flex;
+    color: $white;
+    margin: 0 1rem;
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 30px;
+  }
+
+  a {
+    display: flex;
+    color: $white;
+    margin: 0 1rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  @media screen and (max-width: 600px - 1px) {
+    flex-flow: column nowrap;
+  }
+}

src/components/Ribbon/Ribbon.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import "./Ribbon.scss";
+
+export interface RibbonProps {}
+export interface RibbonState {}
+
+class Ribbon extends React.Component<RibbonProps, RibbonState> {
+  render() {
+    return (
+      <div className="ribbon">
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Ribbon;

src/components/Ribbon/index.ts

@@ -0,0 +1,2 @@
+import Ribbon from "./Ribbon";
+export default Ribbon;

src/pages/FrontPage/FrontPage.scss

@@ -9,34 +9,4 @@
     display: flex;
     flex-flow: column wrap;
   }
-
-  &__page-statement {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: flex-end;
-    text-align: center;
-    justify-content: center;
-    width: 100%;
-
-    p {
-      display: flex;
-      color: $white;
-      margin: 0 1rem;
-      font-size: 2rem;
-      font-weight: 300;
-    }
-
-    a {
-      display: flex;
-      color: $white;
-      margin: 0 1rem;
-      font-size: 0.8rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    @media screen and (max-width: 600px - 1px) {
-      flex-flow: column nowrap;
-    }
-  }
 }

src/pages/FrontPage/FrontPage.tsx

@@ -14,6 +14,7 @@ import PageLink from "../../components/PageLink/PageLink";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
 import Button, { ButtonType } from "../../components/Button";
+import Ribbon from "../../components/Ribbon";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -117,10 +118,10 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
           </div>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.Orange}>
-          <div className="front-page__page-statement">
+          <Ribbon>
             <p>Sössöä vuodesta 1969.</p>
             <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero ›</a>
-          </div>
+          </Ribbon>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White}>
           {feed.map(inst => (