Merge branch 'release-0.2.14' into main

Author: entrotech

.github/ISSUE_TEMPLATE/feature--request.md

@@ -0,0 +1,32 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: 'Feature Suggestion: '
+labels: documentation, product
+assignees: ''
+
+---
+
+### Overview
+Please write a user story for this feature suggestion in the following format: As a ______, I want to do X for Y reason and replace this text with it.
+
+### Action Items
+- [ ] Define your Feature Suggestion
+   - [ ] What is the feature you are suggesting?
+   - [ ] Is this feature urgent
+      - [ ] if so why?
+   - [ ] How long do you expect it take to implement this issue?
+   - [ ] Who is needed to implement this feature (Could you implement it yourself?)
+      - [ ] Design
+      - [ ] Front End
+      - [ ] Back End
+      - [ ] Database
+   - [ ] What problem does this feature solve?
+   - [ ] What technologies are needed for this feature?
+
+### Resources/Instructions
+If there is a website which has documentation that helps with this issue provide the link(s) here:
+
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "private": true,
   "proxy": "http://localhost:5000",
   "dependencies": {

client/package.json

@@ -8,6 +8,8 @@ import Projects from "./components/Projects";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import About from "./components/About";
+import TermsAndConditions from "./components/TermsAndConditions";
+import PrivacyPolicy from "./components/PrivacyPolicy";
 import ContactUs from "./components/ContactUs";
 import Register from "./components/Authorization/Register";
 import ConfirmEmail from "./components/Authorization/ConfirmEmail";
@@ -100,6 +102,8 @@ const App = () => {
               render={() => <Projects account={account} />}
             />
             <Route path="/about" component={About} />
+            <Route path="/termsandconditions" component={TermsAndConditions} />
+            <Route path="/privacypolicy" component={PrivacyPolicy} />
             <Route path="/register/:email?" component={Register} />
             <Route path="/confirm/:token" component={ConfirmEmail} />
             <Route

client/src/App.js

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import clsx from "clsx";
+
+const useStyles = createUseStyles({
+  root: {
+    color: ({ theme }) => theme.colorText,
+    cursor: "pointer",
+    fontFamily: "Calibri Bold",
+    height: "min-content",
+    margin: "0.5em",
+    padding: "0.5em 1em",
+    textAlign: "center",
+    textTransform: "uppercase",
+    //TODO: Move these when we figure out size-related props
+    letterSpacing: "0.05em",
+    fontSize: "20px"
+  },
+  contained: {
+    backgroundColor: ({ theme, color }) => theme[color],
+    borderColor: "rgba(0, 0, 0, .05)", //lightest grey
+    boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px"
+  },
+  outlined: {
+    backgroundColor: ({ theme }) => theme.colorWhite,
+    borderColor: "rgba(0, 46, 109, .2)", //medium grey
+    borderWidth: "thin"
+  }
+});
+
+const Button = ({
+  children,
+  className,
+  isDisplayed = true,
+  onClick,
+  variant = "contained",
+  color = "colorDefault"
+}) => {
+  const theme = useTheme();
+  const classes = useStyles({ color, theme });
+
+  if (!isDisplayed) return null;
+  return (
+    <button
+      className={clsx(classes.root, classes[variant], className)}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+  children: PropTypes.string,
+  size: PropTypes.string,
+  variant: PropTypes.string,
+  isDisplayed: PropTypes.bool,
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+
+export default Button;

client/src/components/Button/Button.js

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+
+const useStyles = createUseStyles({
+  root: {
+    cursor: "pointer",
+    padding: "0.35em 0.7em",
+    margin: "0.5em",
+    fontSize: "2em",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    boxShadow: "rgba(0, 46, 109, 0.3) 0px 3px 5px",
+    backgroundColor: ({ theme }) => theme.colorPrimary,
+    "&:focus": {
+      borderRadius: "none"
+    }
+  },
+  wizardNavButtonDisabled: {
+    backgroundColor: ({ theme }) => theme.colorDisabled,
+    cursor: "default"
+  },
+  hidden: {
+    visibility: "hidden"
+  },
+  "@media print": {
+    root: {
+      display: "none"
+    }
+  }
+});
+
+const NavButton = ({ id, onClick, navDirection, isVisible, isDisabled }) => {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+  const maybeDisabled = isDisabled && classes.wizardNavButtonDisabled;
+  const maybeHiddenVisibility = !isVisible && classes.hidden;
+
+  return (
+    <button
+      id={id}
+      className={clsx(classes.root, maybeDisabled, maybeHiddenVisibility)}
+      data-testid={id}
+      onClick={onClick}
+      disabled={isDisabled}
+    >
+      <FontAwesomeIcon
+        icon={navDirection === "previous" ? faAngleLeft : faAngleRight}
+      />
+    </button>
+  );
+};
+
+NavButton.propTypes = {
+  children: PropTypes.object,
+  onClick: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  navDirection: PropTypes.string.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired
+};
+
+export default NavButton;

client/src/components/Button/NavButton.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import Button from "./Button";
+
+const useStyles = createUseStyles({
+  switchView: {
+    fontSize: "16px"
+  }
+});
+
+const SwitchViewButton = ({ children, onViewChange, isDisplayed = true }) => {
+  const theme = useTheme();
+  const styles = useStyles({ theme });
+
+  if (!isDisplayed) return null;
+  return (
+    <Button className={styles.switchView} onClick={onViewChange}>
+      {children}
+    </Button>
+  );
+};
+
+SwitchViewButton.propTypes = {
+  onViewChange: PropTypes.func,
+  children: PropTypes.string,
+  isDisplayed: PropTypes.bool
+};
+
+export default SwitchViewButton;

client/src/components/ProjectWizard/NavButton.stories.js renamed to client/src/components/Button/NavButton.stories.js

@@ -30,11 +30,11 @@ const Footer = () => {
   return (
     <footer className={classes.root}>
       <div className={classes.links}>
-        <Link className={classes.link} to="/">
+        <Link className={classes.link} to="/termsandconditions">
           Terms and Conditions
         </Link>
         <div>|</div>
-        <Link className={classes.link} to="/">
+        <Link className={classes.link} to="/privacypolicy">
           Privacy Policy
         </Link>
       </div>

client/src/components/Button/SwitchViewButton.js

@@ -0,0 +1,80 @@
+import React from "react";
+import SideBar from "./Sidebar";
+import clsx from "clsx";
+import { createUseStyles } from "react-jss";
+
+import { version } from "../../package.json";
+
+const useStyles = createUseStyles({
+  root: {
+    flex: "1 0 auto",
+    display: "flex",
+    flexDirection: "column"
+  },
+  tdmWizard: {
+    flex: "1 0 auto",
+    display: "flex",
+    flexDirection: "row"
+  },
+  aboutText: {
+    maxWidth: "500px",
+    minWidth: 300,
+    padding: "0 2em"
+  },
+  "@media (max-width: 768px)": {
+    aboutText: {
+      padding: "0"
+    }
+  },
+  link: {
+    textDecoration: "underline",
+    fontWeight: "bold"
+  }
+});
+
+const PrivacyPolicy = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <div className={clsx("tdm-wizard", classes.tdmWizard)}>
+        <SideBar />
+        <div className="tdm-wizard-content-container">
+          <h2>Privacy Policy</h2>
+          <br />
+          <div className={classes.aboutText}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              To find more about Hack for LA and their work to improve Los
+              Angeles please visit:{" "}
+              <a className={classes.link} href="http://www.hackforla.org">
+                www.hackforla.org
+              </a>
+            </p>
+          </div>
+          <p>{`Release #: ${version}`}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;

client/src/components/Footer.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import RulePanels from "./RulePanels";
 import ResultList from "./ResultList";
-import SwitchViewButton from "../SwitchViewButton";
+import SwitchViewButton from "../Button/SwitchViewButton";
 
 const useStyles = createUseStyles({
   root: {
@@ -116,7 +116,7 @@ const TdmCalculation = props => {
       <div className={classes.container}>
         <div className={classes.switchButtonWrapper}>
           <div className={classes.switchButton}>
-            <SwitchViewButton onClick={props.onViewChange}>
+            <SwitchViewButton onViewChange={props.onViewChange}>
               Switch to Wizard View
             </SwitchViewButton>
           </div>