styling

scm-ui-components/packages/ui-components/src/Breadcrumb.js

@@ -1,44 +1,59 @@
 //@flow
 import React from "react";
 import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import classNames from "classnames";
 
 type Props = {
   path: string,
-  baseUrl: string
+  baseUrl: string,
+  classes: any
+};
+
+const styles = {
+  margin: {
+    margin: "1rem 1.25rem 0rem"
+  }
 };
 
 class Breadcrumb extends React.Component<Props> {
   render() {
-    const { path, baseUrl } = this.props;
+    const { path, baseUrl, classes } = this.props;
 
     if (path) {
       const paths = path.split("/");
 
       return (
-        <nav className="breadcrumb" aria-label="breadcrumbs">
+        <>
-          <ul>
+          <nav
-            {paths.map((path, index) => {
+            className={classNames("breadcrumb", classes.margin)}
-              if (paths.length - 1 === index) {
+            aria-label="breadcrumbs"
+          >
+            <ul>
+              {paths.map((path, index) => {
+                if (paths.length - 1 === index) {
+                  return (
+                    <li className="is-active" key={index}>
+                      <Link to={"#"} aria-current="page">
+                        {path}
+                      </Link>
+                    </li>
+                  );
+                }
                 return (
-                  <li className="is-active" key={index}>
+                  <li key={index}>
-                    <Link to={"#"} aria-current="page">
+                    <Link to={baseUrl + "/" + path}>{path}</Link>
-                      {path}
-                    </Link>
                   </li>
                 );
-              }
+              })}
-              return (
+            </ul>
-                <li key={index}>
+          </nav>
-                  <Link to={baseUrl + "/" + path}>{path}</Link>
+          <hr />
-                </li>
+        </>
-              );
-            })}
-          </ul>
-        </nav>
       );
     }
     return null;
   }
 }
 
-export default Breadcrumb;
+export default injectSheet(styles)(Breadcrumb);