Refactor classname mapping

src/components/Button/Button.tsx

@@ -1,15 +1,25 @@
 import * as React from "react";
 import "./Button.scss";
 
+export enum ButtonType {
+  Hero,
+  Filled,
+}
+
+const buttonClassNames = new Map<ButtonType, string>([
+  [ButtonType.Hero, "hero"],
+  [ButtonType.Filled, "filled"],
+]);
+
 export interface ButtonProps {
   onClick: () => void;
-  type: string;
+  type: ButtonType;
 }
 
 export default class Button extends React.Component<ButtonProps, undefined> {
   render() {
     const { type } = this.props;
-    const className = `button ${type}`;
+    const className = `button ${buttonClassNames.get(type)}`;
     return (
       <button onClick={this.props.onClick} className={className}>
         {this.props.children}

src/components/Button/index.ts

@@ -1,2 +1,3 @@
-import Button from "./Button";
+import Button, { ButtonType } from "./Button";
 export default Button;
+export { ButtonType };

src/components/PageSection/PageSection.tsx

@@ -11,19 +11,15 @@ export interface PageSectionProps {
 }
 export interface PageSectionState {}
 
-const colorToClass = (color: BackgroundColor): string => {
+const colors = new Map<BackgroundColor, string>([
-  if (color === BackgroundColor.DarkBlue) {
+  [BackgroundColor.DarkBlue, "dark-blue"],
-    return "dark-blue";
+  [BackgroundColor.White, "white"],
-  }
+]);
-  else if (color === BackgroundColor.White) {
-    return "white";
-  }
-};
 
 class PageSection extends React.Component<PageSectionProps, PageSectionState> {
   render() {
     const { backgroundColor, children } = this.props;
-    const className = `page-section ${colorToClass(backgroundColor)}`;
+    const className = `page-section ${colors.get(backgroundColor)}`;
     return (
       <div className={className}>
         {children}

src/pages/FrontPage/FrontPage.tsx

@@ -11,7 +11,7 @@ import PageSection from "../../components/PageSection";
 import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
-import Button from "../../components/Button";
+import Button, { ButtonType } from "../../components/Button";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -72,8 +72,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
             avainasemassa vauhdilla sähköistyvän maailmamme
             kehityksessä.</p>
-            <Button type="hero" onClick={() => { }}>Killan tehtävät ›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät ›</Button>
-            <Button type="hero" onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
           </HeroMainSection>
           <HeroAsideSection>
             Kikkeli