Ds 193/experiment footer

.eslintrc

@@ -7,5 +7,9 @@
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "2015"
+  },
+  // unneed rule causing errors with eslint/jest
+  "rules": {
+    "jest/valid-describe": "off"
   }
 }

CHANGELOG.md

@@ -11,6 +11,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Static Footer html/css
 - Static Header html/css
 - Pre-release Github Workflow
+- Example Footer test/stories/react.js
+- Locked eslint version to 7.32.0 due to an error with jest
 
 ## [v1.0.0] - 2021-06-15
 

package.json

@@ -11,9 +11,11 @@
     "dist/**/*"
   ],
   "dependencies": {
+    "@rollup/plugin-json": "^4.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "eslint-plugin-jest": "^25.2.4",
     "fetch-mock": "^9.11.0",
     "joi": "^17.4.2",
     "react-scripts": "4.0.3"
@@ -88,7 +90,7 @@
     "babel-plugin-polyfill-corejs2": "^0.2.2",
     "babel-plugin-polyfill-corejs3": "^0.2.2",
     "babel-plugin-polyfill-regenerator": "^0.2.2",
-    "eslint": "^8.2.0",
+    "eslint": "7.32.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "husky": "^6.0.0",
     "jest-axe": "^5.0.1",
@@ -105,4 +107,4 @@
     "rollup-plugin-uglify": "^6.0.4",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4"
   }
-}
+}

rollup.config.js

@@ -4,6 +4,7 @@ import del from "rollup-plugin-delete";
 import { uglify } from "rollup-plugin-uglify";
 import postcss from "rollup-plugin-postcss";
 import pkg from "./package.json";
+import json from "@rollup/plugin-json";
 
 export default {
   input: pkg.source,
@@ -12,6 +13,7 @@ export default {
     { file: pkg.module, format: "esm" },
   ],
   plugins: [
+    json(),
     external(),
     babel({
       exclude: "node_modules/**",

src/components/ActionButton/ActionButton.js

@@ -1,3 +1,7 @@
+/**
+ * Note issues with using icon when importing this component to other components.
+ * Must be fixed before officially releasing this component.
+ */
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -35,18 +39,22 @@ export function ActionButton(props) {
     <a
       href={props.href}
       className={`${basicStyle}
-        ${
-          !props.secondary &&
-          !props.tertiary &&
-          !props.disabled &&
-          !props.custom
-            ? defaultStyle
-            : props.className
-        }
-        ${props.secondary && !props.disabled ? secondaryStyle : props.className}
-        ${props.tertiary && !props.disabled ? tertiaryStyle : props.className}
-        ${props.custom && !props.tertiary ? props.custom : ""}
-        ${props.disabled ? disabledStyle : props.className}`}
+          ${
+            !props.secondary &&
+            !props.tertiary &&
+            !props.disabled &&
+            !props.custom
+              ? defaultStyle
+              : props.className
+          }
+          ${
+            props.secondary && !props.disabled
+              ? secondaryStyle
+              : props.className
+          }
+          ${props.tertiary && !props.disabled ? tertiaryStyle : props.className}
+          ${props.custom && !props.tertiary ? props.custom : ""}
+          ${props.disabled ? disabledStyle : props.className}`}
       onClick={props.onClick}
       id={props.id}
       data-testid={props.dataTestId}
@@ -69,15 +77,18 @@ export function ActionButton(props) {
   ) : (
     <button
       className={`${basicStyle}
-      ${
-        !props.secondary && !props.tertiary && !props.disabled && !props.custom
-          ? defaultStyle
-          : props.className
-      }
-      ${props.secondary && !props.disabled ? secondaryStyle : props.className}
-      ${props.tertiary && !props.disabled ? tertiaryStyle : props.className}
-      ${props.custom && !props.tertiary ? props.custom : ""}
-      ${props.disabled ? disabledStyle : props.className}`}
+        ${
+          !props.secondary &&
+          !props.tertiary &&
+          !props.disabled &&
+          !props.custom
+            ? defaultStyle
+            : props.className
+        }
+        ${props.secondary && !props.disabled ? secondaryStyle : props.className}
+        ${props.tertiary && !props.disabled ? tertiaryStyle : props.className}
+        ${props.custom && !props.tertiary ? props.custom : ""}
+        ${props.disabled ? disabledStyle : props.className}`}
       onClick={props.onClick}
       type={props.type}
       id={props.id}

src/components/DateModified/DateModified.js

@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import React from "react";
 
 export function DateModified(props) {
   // TeamCity build dates are received in the format yyyyMMdd

src/components/Details/Details.js

@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import React from "react";
 
 /**
  * Drop Down Element

src/components/Experiment/Experiment.js

@@ -28,7 +28,7 @@ export const Experiment = (props) => {
         {props.href.substring(0, 8) === "https://" ? (
           <img
             alt="external link"
-            src="/external-link.svg"
+            src="../../assets/external-link.svg"
             className="px-1 py-2"
           />
         ) : undefined}