HeroAside

src/components/NewHero/Hero.tsx

@@ -9,34 +9,18 @@ const Container = styled.div`
   position: relative;
   padding: 0;
 
-  min-height: 70vh;
+  min-height: 80vh;
 
   section {
     padding: 2rem 1rem;
   }
 
-  aside {
-    padding: 0 2rem;
-  }
-
   & > div {
     flex: 8;
   }
 
-  & > aside {
-
-    flex: 4;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
   @media screen and (max-width: 800px) {
     flex-direction: column;
-
-    & > aside {
-      margin: 48px auto;
-    }
   }
 
   color: ${colors.white};

src/components/NewHero/HeroAside.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import { colors, Colors2 } from "@theme/colors";
 import Anchor from "@components/Anchor";
 
 interface HeroAsideItemProps {
@@ -41,7 +41,7 @@ const Article = styled.article`
   }
 `;
 
-const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
+export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
   <Article>
     <h2>{header}</h2>
     {text && (
@@ -53,4 +53,31 @@ const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkT
   </Article>
 )
 
-export default HeroAsideItem;
+
+interface HeroAsideProps {
+  bgColor?: Colors2;
+}
+
+// TODO: Color combos
+const Aside = styled.aside<HeroAsideProps>`
+  flex: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 2rem;
+
+  background: ${(p) => p.bgColor};
+  color: ${colors.darkBlue};
+
+  @media screen and (max-width: 800px) {
+    margin: 48px auto;
+  }
+`;
+
+const HeroAside: React.FC<HeroAsideProps> = ({ bgColor = "inherit", children}) => (
+  <Aside bgColor={bgColor}>
+    {children}
+  </Aside>
+)
+
+export default HeroAside;

src/components/NewHero/index.tsx

@@ -2,5 +2,6 @@ export { default as Hero } from "./Hero";
 export { default as HeroPrimarySection } from "./HeroPrimarySection";
 export { default as HeroSecondarySection } from "./HeroSecondarySection";
 export { HeroSecondarySectionItem } from "./HeroSecondarySection";
-export { default as HeroAsideItem } from "./HeroAsideItem";
+export { default as HeroAside } from "./HeroAside";
+export { HeroAsideItem as HeroAsideItem } from "./HeroAside";
 export { default as HeroPrimaryButtons } from "./HeroPrimaryButtons";

src/views/ActualPage/ActualPageHero.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
+import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
 import Anchor from "@components/Anchor";
 
 const ActualPageHero: React.FC = () => (
@@ -34,7 +34,7 @@ const ActualPageHero: React.FC = () => (
         </HeroSecondarySectionItem>
       </HeroSecondarySection>
     </div>
-    <aside>
+    <HeroAside bgColor="lightBlue">
       <p>
         Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
       </p>
@@ -63,7 +63,7 @@ const ActualPageHero: React.FC = () => (
         link="#ulkosuhteet"
         linkText="Ulkoiset suhteet">
       </HeroAsideItem>
-    </aside>
+    </HeroAside>
   </Hero>
 )
 

src/views/FrontPage/FrontPageHero.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Anchor from "@components/Anchor";
-import { Hero, HeroPrimarySection, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
+import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/NewHero";
 
 const FrontPageHero: React.FC = () => (
   <Hero>
@@ -24,7 +24,7 @@ const FrontPageHero: React.FC = () => (
       </HeroPrimarySection>
     </div>
 
-    <aside>
+    <HeroAside>
       <HeroAsideItem
         header="Vasta-aloittanut opiskelija"
         text="Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet."
@@ -43,7 +43,7 @@ const FrontPageHero: React.FC = () => (
         link="/yritysyhteistyo"
         linkText="Yritysyhteistyö&nbsp; ›"
       />
-    </aside>
+    </HeroAside>
   </Hero>
 );