From cffa06a02af6dc3722a77e07bfb34c4bd03688c8 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Wed, 22 May 2019 17:35:57 -0500
Subject: [PATCH] feat: add initial 404

---
 packages/example/src/pages/404.js             | 12 ++++
 packages/example/src/pages/whoops.js          | 12 ++++
 packages/gatsby-theme-carbon/index.js         |  2 +-
 .../src/components/FourOhFour/FourOhFour.js   | 45 ++++++++++++
 .../FourOhFour/FourOhFour.module.scss         | 68 +++++++++++++++++++
 .../src/components/FourOhFour/index.js        |  3 +
 .../src/styles/animations.css                 | 11 +++
 .../gatsby-theme-carbon/src/styles/index.scss |  1 +
 8 files changed, 153 insertions(+), 1 deletion(-)
 create mode 100644 packages/example/src/pages/404.js
 create mode 100644 packages/example/src/pages/whoops.js
 create mode 100644 packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.js
 create mode 100644 packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss
 create mode 100644 packages/gatsby-theme-carbon/src/components/FourOhFour/index.js
 create mode 100644 packages/gatsby-theme-carbon/src/styles/animations.css

diff --git a/packages/example/src/pages/404.js b/packages/example/src/pages/404.js
new file mode 100644
index 000000000..bc0c5894b
--- /dev/null
+++ b/packages/example/src/pages/404.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { FourOhFour } from 'gatsby-theme-carbon';
+
+const links = [
+  { href: '/components/markdown', text: 'Markdown' },
+  { href: '/components/aside', text: 'Aside' },
+  { href: '/components/demo', text: 'Demo' },
+];
+
+const Custom404 = () => <FourOhFour links={links} />;
+
+export default Custom404;
diff --git a/packages/example/src/pages/whoops.js b/packages/example/src/pages/whoops.js
new file mode 100644
index 000000000..bc0c5894b
--- /dev/null
+++ b/packages/example/src/pages/whoops.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { FourOhFour } from 'gatsby-theme-carbon';
+
+const links = [
+  { href: '/components/markdown', text: 'Markdown' },
+  { href: '/components/aside', text: 'Aside' },
+  { href: '/components/demo', text: 'Demo' },
+];
+
+const Custom404 = () => <FourOhFour links={links} />;
+
+export default Custom404;
diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js
index 15acb79fa..266160971 100644
--- a/packages/gatsby-theme-carbon/index.js
+++ b/packages/gatsby-theme-carbon/index.js
@@ -9,6 +9,6 @@ export { default as ResourceCard } from './src/components/ResourceCard';
 export { default as ArticleCard } from './src/components/ArticleCard';
 export { default as Aside } from './src/components/Aside';
 export { default as FeatureCard } from './src/components/FeatureCard';
-
+export { default as FourOhFour } from './src/components/FourOhFour';
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';
diff --git a/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.js b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.js
new file mode 100644
index 000000000..24cbc6bf4
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../Layout';
+import styles, {
+  container,
+  fourOhFour,
+  paragraph,
+  heading,
+  link,
+  list,
+} from './FourOhFour.module.scss';
+
+console.log(styles);
+const whoops = ({ links }) => {
+  const getLinks = () => (
+    <>
+      <br />
+      Maybe some of these most visited links will help you?
+      <ul className={list}>
+        {links.map(({ href, text }, i) => (
+          <li key={i}>
+            <Link className={link} to={href}>
+              {text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+
+  return (
+    <Layout homepage>
+      <div className={container}>
+        <span className={fourOhFour}>404</span>
+        <h2 className={heading}>Something's gone wrong...</h2>
+        <p className={paragraph}>
+          Sorry, we can't find the page you are looking for.
+          {links && getLinks()}
+        </p>
+      </div>
+    </Layout>
+  );
+};
+
+export default whoops;
diff --git a/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss
new file mode 100644
index 000000000..161d871cd
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/components/FourOhFour/FourOhFour.module.scss
@@ -0,0 +1,68 @@
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~@carbon/elements/scss/type/type';
+
+.four-oh-four {
+  @include carbon--type-style('display-02');
+  font-size: 20vw;
+  background: linear-gradient(35deg, #92eeee, #a66efa);
+  display: inline-block;
+  background-size: 200% 200%;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  margin-bottom: 6rem;
+  @include carbon--breakpoint('lg') {
+    font-size: 300px;
+  }
+  animation: gradient 2s ease infinite;
+}
+
+.paragraph {
+  @include carbon--type-style('body-long-01');
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.heading {
+  @include carbon--type-style('expressive-heading-04', true);
+  margin-bottom: 1rem;
+}
+
+.list {
+  margin-top: 2rem;
+}
+
+.link {
+  @include carbon--type-style('body-short-01');
+  display: inline-block;
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.container {
+  margin: 0;
+  margin-top: 4rem;
+  max-width: 100%;
+  min-height: calc(100vh - 500px);
+
+  @include carbon--breakpoint('lg') {
+    padding-left: calc(
+      25% + 2rem
+    ); //2rem to account for 2rem left padding default on grid
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-left: 400px;
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
diff --git a/packages/gatsby-theme-carbon/src/components/FourOhFour/index.js b/packages/gatsby-theme-carbon/src/components/FourOhFour/index.js
new file mode 100644
index 000000000..da8f68d59
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/components/FourOhFour/index.js
@@ -0,0 +1,3 @@
+import FourOhFour from './FourOhFour';
+
+export default FourOhFour;
diff --git a/packages/gatsby-theme-carbon/src/styles/animations.css b/packages/gatsby-theme-carbon/src/styles/animations.css
new file mode 100644
index 000000000..effd6b40a
--- /dev/null
+++ b/packages/gatsby-theme-carbon/src/styles/animations.css
@@ -0,0 +1,11 @@
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss
index e2a954dfe..42aef30af 100644
--- a/packages/gatsby-theme-carbon/src/styles/index.scss
+++ b/packages/gatsby-theme-carbon/src/styles/index.scss
@@ -42,6 +42,7 @@ $prefix: 'bx';
 //---------------------------------------
 
 @import 'page';
+@import './animations.css';
 
 @import '../components/markdown/markdown.scss';
 @import '../components/Homepage/homepage.scss';