Merge pull request #920 from hackforla/831-FRONT-ToggleButtons

831 front toggle buttons

client/components/common/ToggleGroup.jsx

@@ -0,0 +1,94 @@
+import { makeStyles } from '@material-ui/core';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function ToggleGroup({
+  children, onToggle, value, rounded,
+}) {
+  const [firstChild] = children;
+  const [selectedValue, setSelectedValue] = React.useState(
+    value || firstChild.props.value,
+  );
+
+  const useStyles = makeStyles(theme => {
+    const borderRadius = {
+      borderRadius: rounded ? theme.borderRadius.lg : theme.borderRadius.sm,
+    };
+
+    return {
+      root: {
+        backgroundColor: theme.palette.primary.dark,
+        padding: theme.gaps.xs,
+        display: 'inline-flex',
+        alignItems: 'center',
+        ...borderRadius,
+      },
+      regular: {
+        ...borderRadius,
+        ...theme.typography.body2,
+        padding: theme.gaps.sm,
+        backgroundColor: theme.palette.primary.dark,
+        height: rounded ? 25 : 'auto',
+        color: theme.palette.text.secondaryLight,
+      },
+      selected: {
+        backgroundColor: theme.palette.primary.main,
+      },
+    };
+  });
+
+  const classes = useStyles();
+
+  const addClasses = component => {
+    const { props } = component;
+
+    const isTheSelectedChild = props.value === selectedValue;
+
+    let className = '';
+
+    if (isTheSelectedChild) {
+      className = `${classes.selected} ${classes.regular}`;
+    } else {
+      className = classes.regular;
+    }
+
+    const clone = React.cloneElement(component, { className });
+
+    return clone;
+  };
+
+  const handleClick = e => {
+    const isContainerClicked = e.target.classList.contains(classes.root);
+
+    if (isContainerClicked) return;
+
+    let element = e.target;
+    let isNotDirectChildOfContainer = !element.parentElement.classList.contains(classes.root);
+    while (isNotDirectChildOfContainer) {
+      element = element.parentElement;
+      isNotDirectChildOfContainer = !element.parentElement.classList.contains(classes.root);
+    }
+
+    setSelectedValue(element.value);
+    if (onToggle) onToggle(element.value);
+  };
+
+  return (
+    <div className={classes.root} aria-hidden onClick={handleClick}>
+      {children.map(component => addClasses(component))}
+    </div>
+  );
+}
+
+ToggleGroup.propTypes = {
+  onToggle: PropTypes.func,
+  rounded: PropTypes.bool,
+  value: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
+
+ToggleGroup.defaultProps = {
+  rounded: false,
+  value: '',
+  onToggle: undefined,
+};

client/public/index.html

@@ -23,8 +23,9 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""/> -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto:300,400,500,700&display=swap" >
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" >
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
 
     <!-- Webpack injected tags -->
     <title><%= htmlWebpackPlugin.options.title %></title>

client/theme/borderRadius.js

@@ -1,6 +1,6 @@
 export default {
   sm: 5,
   md: 10,
-  lg: 70,
+  lg: 50,
   round: '50%',
 };

client/theme/theme.js

@@ -8,10 +8,12 @@ import {
 } from './colors';
 import gaps from './gaps';
 import borderRadius from './borderRadius';
+import typography from './typography';
 
 const theme = createMuiTheme({
   gaps,
   borderRadius,
+  typography,
   palette: {
     type: 'dark',
     primary: {
@@ -39,9 +41,6 @@ const theme = createMuiTheme({
   footer: {
     height: '40px',
   },
-  typography: {
-    fontFamily: ['Oswald', 'sans-serif'],
-  },
 });
 
 export default theme;

client/theme/typography.js

@@ -0,0 +1,56 @@
+const roboto = ['Roboto', 'sans-serif'];
+const oswald = ['Oswald', 'sans-serif'];
+
+const robotoMedium = 500;
+const robotoRegular = 400;
+const robotoBold = 700;
+
+export default {
+  button: {
+    textTransform: 'none',
+  },
+  fontFamily: roboto,
+  fontWeight: robotoRegular,
+  h1: {
+    fontFamily: oswald,
+    fontSize: 21,
+  },
+  h2: {
+    fontSize: 18,
+    fontWeight: robotoMedium,
+
+  },
+  h3: {
+    fontFamily: oswald,
+    fontSize: 17,
+  },
+  h4: {
+    fontSize: 17,
+    fontWeight: robotoBold,
+  },
+  h5: {
+    fontSize: 16,
+    fontWeight: robotoMedium,
+  },
+  h6: {
+    fontSize: 16,
+    fontWeight: robotoBold,
+  },
+  body1: {
+    fontSize: 16,
+  },
+  body2: {
+    fontSize: 14,
+
+  },
+  body3: {
+    fontSize: 14,
+    fontWeight: robotoMedium,
+  },
+  subtitle1: {
+    fontSize: 21,
+  },
+  subtitle2: {
+    fontSize: 21,
+  },
+};