Merge pull request #78 from 30-seconds/breadcrumbs

Introduce breadcrumbs
Resolves #24

src/atoms/_index.scss

@@ -1,4 +1,5 @@
 @import './anchor';
+@import './breadcrumbs';
 @import './browserSupport';
 @import './button';
 @import './card';

src/atoms/anchor/_index.scss

@@ -1,2 +1,24 @@
-@import './regularAnchor';
-@import './linkBackAnchor';
+// Colors
+:root {
+  --a-link-color: #0277bd;
+  --a-visited-color: #01579b;
+}
+
+// Dark mode colors
+.page-container.dark {
+  --a-link-color: #6DC7FD;
+  --a-visited-color: #5DB7FE;
+}
+
+a {
+  text-decoration: none;
+  &:link{
+    color: var(--a-link-color);
+  }
+  &:visited {
+    color: var(--a-visited-color);
+  }
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
+}

src/atoms/anchor/index.jsx

@@ -1,7 +1,50 @@
-import Anchor from './regularAnchor';
-import LinkBackAnchor from './linkBackAnchor';
+import React from 'react';
+import { Link } from 'gatsby';
+import PropTypes from 'prop-types';
+import { Link as LinkPropType } from 'typedefs';
+import { addTrailingSlashToSlug } from 'functions/utils';
 
-export {
-  Anchor,
-  LinkBackAnchor,
+/**
+ * Anchor component for linking to a different URL (internal or external).
+ * Depends on Gatsby's Link component for internal linking.
+ */
+const Anchor = ({
+  children,
+  link,
+  ...rest
+}) => {
+  return link.internal ?
+    (
+      <Link
+        to={ addTrailingSlashToSlug(link.url) }
+        rel={ link.rel }
+        target={ link.target }
+        { ...rest }
+      >
+        { children }
+      </Link>
+    ) : (
+      <a
+        href={ link.url }
+        rel={ link.rel }
+        target={ link.target }
+        { ...rest }
+      >
+        { children }
+      </a>
+    );
 };
+
+Anchor.propTypes = {
+  /** Children elements */
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+  /** Anchor link data */
+  link: LinkPropType.isRequired,
+  /** Any other props to be passed to the component */
+  rest: PropTypes.any,
+};
+
+export default Anchor;

src/atoms/anchor/linkBackAnchor/_index.scss → src/atoms/breadcrumbs/_index.scss

@@ -23,3 +23,26 @@ a.link-back {
     margin-right: 0.875rem;
   }
 }
+
+a.link-back.has-more {
+  display: inline-block;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+// Second link in breadcrumbs
+a.link-back-more {
+  transition: 0.3s ease all;
+  font-size: 1.125rem;
+  line-height: 1.35;
+  display: inline-block;
+  margin: 0.8125rem 1.25rem 0 0;
+  position: relative;
+  &, &:link, &:visited {
+    color: var(--fore-color-dark);
+  }
+
+  @media screen and (max-width: calc(#{$layout-medium-breakpoint} - 1px)) {
+    margin-right: 0.875rem;
+  }
+}