fixed global variable share for tabordion and banner. added jest test…

… for Banner. added run test to circleci

.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

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;

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(<Banner />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

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`] = `
+<section
+  className="root"
+>
+  <span>
+    <img
+      alt="U.S. flag signifying that this is a United States Federal Government website"
+      className="bannerImage"
+      src="test-file-stub"
+    />
+     An official website of the U.S. government
+  </span>
+</section>
+`;

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,22 +34,22 @@
 }
 
 .tab:last-of-type {
-	border-right: 1px solid gray-light;
+	border-right: 1px solid $gray-light;
 }
 
 .tab:hover{
 	text-decoration: underline;
 }
 
 .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%;
 	}

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;
+	/* 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;
+}