diff --git a/.circleci/config.yml b/.circleci/config.yml
index 70bfeeb4f..25dd9b917 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -17,6 +17,9 @@ jobs:
- run:
name: Build gatsby
command: npm run build
+ - run:
+ name: Run tests
+ command: npm test
workflows:
version: 2
diff --git a/__mock__/file-mock.js b/__mocks__/file-mock.js
similarity index 100%
rename from __mock__/file-mock.js
rename to __mocks__/file-mock.js
diff --git a/__mock__/gastby.js b/__mocks__/gastby.js
similarity index 100%
rename from __mock__/gastby.js
rename to __mocks__/gastby.js
diff --git a/src/components/layouts/Banner/Banner.module.css b/src/components/layouts/Banner/Banner.module.css
index a86354cde..d5a220cba 100644
--- a/src/components/layouts/Banner/Banner.module.css
+++ b/src/components/layouts/Banner/Banner.module.css
@@ -1,8 +1,9 @@
-@value colors: "../../../css-global/colors.css";
-@value gray-pale from colors;
+:import('../../../css-global/colors.css') {
+ $gray-pale: grayPale;
+}
.root {
- background-color: gray-pale;
+ background-color: $gray-pale;
margin: 0 0 1rem 0;
font-size: 0.8rem;
line-height: 1.1875rem;
diff --git a/src/components/layouts/Banner/Banner.test.js b/src/components/layouts/Banner/Banner.test.js
new file mode 100644
index 000000000..779496e92
--- /dev/null
+++ b/src/components/layouts/Banner/Banner.test.js
@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Banner from "./Banner"
+
+describe("Banner", () => {
+ it("renders correctly", () => {
+ const tree = renderer
+ .create()
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+})
\ No newline at end of file
diff --git a/src/components/layouts/Banner/__snapshots__/Banner.test.js.snap b/src/components/layouts/Banner/__snapshots__/Banner.test.js.snap
new file mode 100644
index 000000000..e319228ef
--- /dev/null
+++ b/src/components/layouts/Banner/__snapshots__/Banner.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner renders correctly 1`] = `
+
+
+ 
+ An official website of the U.S. government
+
+
+`;
diff --git a/src/components/layouts/Tabordion/Tabordion.module.css b/src/components/layouts/Tabordion/Tabordion.module.css
index 3b77902d3..85e6af0df 100644
--- a/src/components/layouts/Tabordion/Tabordion.module.css
+++ b/src/components/layouts/Tabordion/Tabordion.module.css
@@ -1,5 +1,9 @@
-@value colors: "../../../css-global/colors.css";
-@value gray-pale, gray-light, gray-darkest from colors;
+:import('../../../css-global/colors.css') {
+ $gray-pale: grayPale;
+ $gray-light: grayLight;
+ $gray-darkest: grayDarkest;
+ $white: white;
+}
.root {
@@ -14,11 +18,11 @@
}
.tab {
- background-color: white;
- border-top: 1px solid gray-light;
- border-left: 1px solid gray-light;
- border-bottom: 1px solid gray-light;
- color: gray-darkest;
+ background-color: $white;
+ border-top: 1px solid $gray-light;
+ border-left: 1px solid $gray-light;
+ border-bottom: 1px solid $gray-light;
+ color: $gray-darkest;
cursor: pointer;
font-size: 16px;
font-weight: 200;
@@ -30,7 +34,7 @@
}
.tab:last-of-type {
- border-right: 1px solid gray-light;
+ border-right: 1px solid $gray-light;
}
.tab:hover{
@@ -38,14 +42,14 @@
}
.tabSelected {
- background-color: gray-pale;
+ background-color: $gray-pale;
border-bottom: none;
font-weight: bold;
}
.tabPanelContainer {
- background-color: gray-pale;
- border: 1px solid gray-light;
+ background-color: $gray-pale;
+ border: 1px solid $gray-light;
overflow: hidden;
position: relative;
top: -1px;
@@ -76,7 +80,7 @@
}
.tab {
float: none;
- border: 1px solid gray-light;
+ border: 1px solid $gray-light;
text-align: left;
width: 100%;
}
diff --git a/src/css-global/colors.css b/src/css-global/colors.css
index 5e402d2a8..9d07b3f96 100644
--- a/src/css-global/colors.css
+++ b/src/css-global/colors.css
@@ -1,36 +1,43 @@
-/* Grayscale */
-@value white: #ffffff;
-@value gray-pale: #f0f6fa;
-@value gray-lighter: #ebf3f7;
-@value gray-light: #d3dfe6;
-@value gray: #a7bcc7;
-@value gray-dark: #768d99;
-@value gray-darker: #5c737f;
-@value gray-darkest: #435159;
-@value black-light: #323c42;
-@value black: #1c2326;
-@value gray-blue-dark: #4e4e4e;
-@value gray-blue-mid: #a9a9a9;
-@value gray-blue-mid-light: #e0e0e0;
-/* Greens */
-@value green-light: #cde3c3;
-@value green-mid: #9dbd92;
-@value green-land: #69995a;
-@value green: #587f4c;
-@value green-dark: #2f4d26;
+:export{
+ /* Grayscale */
+ white: #ffffff;
+ grayPale: #f0f6fa;
+ grayLighter: #ebf3f7;
+ grayLight: #d3dfe6;
+ gray: #a7bcc7;
+ grayDark: #768d99;
+ grayDarker: #5c737f;
+ grayDarkest: #435159;
+ blackLight: #323c42;
+ black: #1c2326;
+ gray-blue-dark: #4e4e4e;
+ gray-blue-mid: #a9a9a9;
+ gray-blue-mid-light: #e0e0e0;
-/* Blues */
-@value blue-lighter: #f2fdff;
-@value blue-light: #dcf4fd;
-@value blue-mid-light: #c6e9ff;
-@value blue-cthru: rgba(198, 233, 255, 0.93);
-@value blue-mid: #79bbda;
-@value blue-mid-dark: #3d95bd;
-@value blue: #1478a6;
-@value blue-dark: #086996; /* darker link color for use over @value blue-cthru, for accessibility */
-@value blue-darker: #005078;
-@value blue-deep: #00354f;
+ /* Greens */
+ green-light: #cde3c3;
+ green-mid: #9dbd92;
+ green-land: #69995a;
+ green: #587f4c;
+ green-dark: #2f4d26;
-/* Reds */
-@value red: #c5403c;
\ No newline at end of file
+ /* Blues */
+ blue-lighter: #f2fdff;
+ blue-light: #dcf4fd;
+ blue-mid-light: #c6e9ff;
+ blue-cthru: rgba(198, 233, 255, 0.93);
+ blue-mid: #79bbda;
+ blue-mid-dark: #3d95bd;
+ blue: #1478a6;
+ blue-dark: #086996; /* darker link color for use over @value blue-cthru, for accessibility */
+ blue-darker: #005078;
+ blue-deep: #00354f;
+
+ /* Reds */
+ red: #c5403c;
+}
+
+.grayPaleBackground {
+ background-color: #f0f6fa;
+}
\ No newline at end of file