From 69e1d15745d5176ef2825c93c3f38ea8467369e1 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sun, 18 Nov 2018 13:35:50 +0200
Subject: [PATCH] Refactor page_statement class to Ribbon component

---
 src/components/Ribbon/Ribbon.scss  | 32 ++++++++++++++++++++++++++++++
 src/components/Ribbon/Ribbon.tsx   | 17 ++++++++++++++++
 src/components/Ribbon/index.ts     |  2 ++
 src/pages/FrontPage/FrontPage.scss | 30 ----------------------------
 src/pages/FrontPage/FrontPage.tsx  |  5 +++--
 5 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Ribbon/Ribbon.scss
 create mode 100644 src/components/Ribbon/Ribbon.tsx
 create mode 100644 src/components/Ribbon/index.ts

diff --git a/src/components/Ribbon/Ribbon.scss b/src/components/Ribbon/Ribbon.scss
new file mode 100644
index 0000000..f272e4b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/Ribbon/Ribbon.tsx b/src/components/Ribbon/Ribbon.tsx
new file mode 100644
index 0000000..5c66e5c
--- /dev/null
+++ b/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;
diff --git a/src/components/Ribbon/index.ts b/src/components/Ribbon/index.ts
new file mode 100644
index 0000000..896a201
--- /dev/null
+++ b/src/components/Ribbon/index.ts
@@ -0,0 +1,2 @@
+import Ribbon from "./Ribbon";
+export default Ribbon;
diff --git a/src/pages/FrontPage/FrontPage.scss b/src/pages/FrontPage/FrontPage.scss
index 3978825..a3163a5 100644
--- a/src/pages/FrontPage/FrontPage.scss
+++ b/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;
-    }
-  }
 }
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 0ad571a..c2452fd 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/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 => (