feat: move Placeholder to a component folder

webpack · May 8, 2018 · 3bfdf66 · 3bfdf66
1 parent 62fb928
commit 3bfdf66
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 68 deletions.
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
@@ -6,31 +6,11 @@ import PageLinks from '../PageLinks/PageLinks';
 import Markdown from '../Markdown/Markdown';
 import Contributors from '../Contributors/Contributors';
 import Gitter from '../Gitter/Gitter';
+import Placeholder from '../Placeholder/Placeholder';
 
 // Load Styling
 import './Page.scss';
 
-// Placeholder string
-const Placeholder = () => (`
-  <div class="placeholder">
-    <p class="placeholder--medium">&nbsp;</p>
-    <p class="placeholder--large">&nbsp;</p>
-    <p class="placeholder--small">&nbsp;</p>
-    <h2 class="placeholder--xsmall">&nbsp;</h2>
-    <p class="placeholder--large">&nbsp;</p>
-    <p class="placeholder--small">&nbsp;</p>
-    <p class="placeholder--medium">&nbsp;</p>
-    <h2 class="placeholder--small">&nbsp;</h2>
-    <p class="placeholder--large">&nbsp;</p>
-    <p class="placeholder--medium">&nbsp;</p>
-    <p class="placeholder--xsmall">&nbsp;</p>
-    <h2 class="placeholder--xsmall">&nbsp;</h2>
-    <p class="placeholder--large">&nbsp;</p>
-    <p class="placeholder--small">&nbsp;</p>
-    <p class="placeholder--medium">&nbsp;</p>
-  </div>
-`);
-
 class Page extends React.Component {
   constructor(props) {
     super(props);

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
@@ -12,50 +12,3 @@
     padding: 1.5em;
   }
 }
-
-.placeholder {
-
-  h2, p {
-    background-color: getColor(concrete);
-    // use system font to prevent layout change
-    font-family: sans-serif;
-    overflow: hidden;
-    position: relative;
-
-    &:after {
-      animation: placeholderAnimation 1s infinite;
-      background: linear-gradient(to right, getColor(concrete), #fcfcfc, getColor(concrete));
-      content: '';
-      left: 0;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-
-  &--xsmall {
-    width: 35%;
-  }
-
-  &--small {
-    width: 50%;
-  }
-
-  &--medium {
-    width: 75%;
-  }
-
-  &--large {
-    width: 85%;
-  }
-}
-
-@keyframes placeholderAnimation {
-  from {
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    transform: translate3d(100%, 0, 0);
-  }
-}
diff --git a/src/components/Placeholder/Placeholder.js b/src/components/Placeholder/Placeholder.js
@@ -0,0 +1,25 @@
+// Import Styling
+import './Placeholder.scss';
+
+// Placeholder string
+const Placeholder = () => (`
+  <div class="placeholder">
+    <p class="placeholder--medium">&nbsp;</p>
+    <p class="placeholder--large">&nbsp;</p>
+    <p class="placeholder--small">&nbsp;</p>
+    <h2 class="placeholder--xsmall">&nbsp;</h2>
+    <p class="placeholder--large">&nbsp;</p>
+    <p class="placeholder--small">&nbsp;</p>
+    <p class="placeholder--medium">&nbsp;</p>
+    <h2 class="placeholder--small">&nbsp;</h2>
+    <p class="placeholder--large">&nbsp;</p>
+    <p class="placeholder--medium">&nbsp;</p>
+    <p class="placeholder--xsmall">&nbsp;</p>
+    <h2 class="placeholder--xsmall">&nbsp;</h2>
+    <p class="placeholder--large">&nbsp;</p>
+    <p class="placeholder--small">&nbsp;</p>
+    <p class="placeholder--medium">&nbsp;</p>
+  </div>
+`);
+
+export default Placeholder;
diff --git a/src/components/Placeholder/Placeholder.scss b/src/components/Placeholder/Placeholder.scss
@@ -0,0 +1,48 @@
+@import 'functions';
+
+.placeholder {
+
+  h2, p {
+    background-color: getColor(concrete);
+    // use system font to prevent layout change
+    font-family: sans-serif;
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+      animation: placeholderAnimation 1s infinite;
+      background: linear-gradient(to right, getColor(concrete), #fcfcfc, getColor(concrete));
+      content: '';
+      left: 0;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  &--xsmall {
+    width: 35%;
+  }
+
+  &--small {
+    width: 50%;
+  }
+
+  &--medium {
+    width: 75%;
+  }
+
+  &--large {
+    width: 85%;
+  }
+}
+
+@keyframes placeholderAnimation {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}