💅 pages: therapeutic conversion from sass to styled-components

Author: xavxyz

components/AppStarRating.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import IconBase from './IconBase';
 import IconStarFull from './IconStarFull';
 import IconStarEmpty from './IconStarEmpty';
@@ -7,7 +8,7 @@ export default () => {
   const seqN = Array(4).fill(null);
 
   return (
-    <div>
+    <Wrapper>
       {seqN.map((_, n) => (
         <IconBase iconName="full star" iconColor="orangered" key={n}>
           <IconStarFull />
@@ -16,6 +17,10 @@ export default () => {
       <IconBase iconName="empty star" iconColor="orangered">
         <IconStarEmpty />
       </IconBase>
-    </div>
+    </Wrapper>
   );
 };
+
+const Wrapper = styled.div`
+  margin: 10px 0;
+`;

components/Content.fixture.js

@@ -0,0 +1,8 @@
+import Content from './Content';
+
+export default {
+  component: Content,
+  props: {
+    children: 'Pipo pipo, pipo.',
+  },
+};

components/Content.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Content = styled.div`
+  width: 60%;
+
+  @media screen and (max-width: 600px) {
+    width: 100%;
+  }
+`;
+
+Content.displayName = 'Content';
+
+export default Content;

components/Hr.fixture.js

@@ -0,0 +1,5 @@
+import Hr from './Hr';
+
+export default {
+  component: Hr,
+};

components/Hr.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Hr = styled.hr`
+  border-top: 1px solid #ddd;
+  border-bottom: none;
+  margin-top: 15px;
+`;
+
+Hr.displayName = 'Hr';
+
+export default Hr;

components/Main.fixture.js

@@ -0,0 +1,8 @@
+import Main from './Main';
+
+export default {
+  component: Main,
+  props: {
+    children: 'Main frame in a primary context',
+  },
+};

components/Main.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const Main = styled.main`
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+
+  @media screen and (max-width: 1030px) {
+    padding: 0 20px;
+  }
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+  }
+`;
+
+Main.displayName = 'Main';
+
+export default Main;

components/Paragraph.fixture.js

@@ -0,0 +1,8 @@
+import Paragraph from './Paragraph';
+
+export default {
+  component: Paragraph,
+  props: {
+    children: 'Paraphrase a sentence',
+  },
+};

components/Paragraph.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Paragraph = styled.p`
+  margin: 10px 0;
+`;
+
+Paragraph.displayName = 'Paragraph';
+
+export default Paragraph;

components/Places.fixture.js

@@ -0,0 +1,11 @@
+// @flow
+import { createFixture } from 'react-cosmos';
+import Places from './Places';
+import data from '../tools/data';
+
+export default createFixture({
+  component: Places,
+  props: {
+    places: data.places,
+  },
+});

components/Places.js

@@ -0,0 +1,37 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+
+import Top from './Top';
+import Paragraph from './Paragraph';
+import Hr from './Hr';
+
+import type { Place } from '../tools/types';
+
+type Props = {
+  places: Array<Place>,
+};
+
+export default class Places extends React.Component<Props> {
+  render() {
+    return this.props.places.map(place => (
+      <Item key={place.name}>
+        <Image src={place.img} alt={place.name} />
+        <Top>
+          <strong>{place.name}</strong>
+        </Top>
+        <Paragraph>{place.description}</Paragraph>
+        <Hr />
+      </Item>
+    ));
+  }
+}
+
+const Item = styled.div`
+  padding: 10px 0;
+`;
+
+const Image = styled.img`
+  float: left;
+  margin: 0 15px 15px 0;
+`;

components/Sidebar.fixture.js

@@ -0,0 +1,8 @@
+import Top from './Top';
+
+export default {
+  component: Top,
+  props: {
+    children: 'Siding, baring, whatever',
+  },
+};

components/Sidebar.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Sidebar = styled.aside`
+  width: 35%;
+  padding: 20px;
+  margin: 40px 0 0 20px;
+  background: #eee;
+  float: right;
+
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    margin: 10px 0;
+  }
+`;
+
+Sidebar.displayName = 'Sidebar';
+
+export default Sidebar;

components/Top.fixture.js

@@ -0,0 +1,8 @@
+import Top from './Top';
+
+export default {
+  component: Top,
+  props: {
+    children: "I'm a top paragraph",
+  },
+};

components/Top.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Top = styled.p`
+  margin: 30px 0 0;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: #666;
+  padding: 0;
+`;
+
+Top.displayName = 'Top';
+
+export default Top;

pages/_app.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import AppNavigation from '../components/AppNavigation';
 import AppFooter from '../components/AppFooter';
-import data from '../data';
+import data from '../tools/data';
+import './_styles';
 
 export default class MyApp extends App {
   state = {

pages/_styles.js

@@ -47,56 +47,6 @@ injectGlobal`
     font-weight: normal;
   }
 
-  main {
-    max-width: 1000px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-
-    @media screen and (max-width: 1030px) {
-      padding: 0 20px;
-    }
-
-    @media screen and (max-width: 600px) {
-      flex-direction: column;
-    }
-  }
-
-  .top {
-    text-transform: uppercase;
-    font-size: 14px;
-    color: #666;
-    padding: 0;
-    margin: 30px 0 0;
-  }
-
-  .places {
-    width: 60%;
-
-    @media screen and (max-width: 600px) {
-      width: 100%;
-    }
-  }
-
-  aside.sidebar {
-    width: 35%;
-    padding: 20px;
-    margin: 40px 0 0 20px;
-    background: #eee;
-    float: right;
-
-    @media screen and (max-width: 600px) {
-      width: 100%;
-      margin: 10px 0;
-    }
-  }
-
-  hr {
-    border-top: 1px solid #ccc;
-    border-bottom: none;
-    margin-top: 15px;
-  }
-
   .transition-group-wrapper {
     position: relative; /* xavier's dirty hack */
   }
@@ -118,14 +68,4 @@ injectGlobal`
     opacity: 1;
     position: absolute; /* xavier's dirty hack */
   }
-
-  /* screen reader only */
-  .hidden {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  }
 `;