Chore: Add basic screen and toggle

Chore: form skeleton

Feat: wizard step 1 and 2

Feat: toggle button group for formik

Feat: select input type Form and styling

Feat: text entry page

Feat: Choice list and CSS

Fix: scroll to bottom on Add choice button click

Feat: format data at end of wizard

Feat: wizard toggle button and background blur

Feat: data table for custom info requests

Feat: editing and deleting custom info request

Feat: add icons

Fix: Wizard changes

Feat: custom requests migrations

Feat: fetch custom info requests

Feat: add mutations

Feat: add custom request option in trigger wizard

Feat: show customrequests on table

Feat: Triggers page code refactor

Feat: integrate custom info requests on Customer graphql type

Feat: Show custom info requests on user page

Fix: use normal table instead of datatable

Feat: modal for custom information request details

Feat: poller returns custom request information details

Feat: send customer custom info requests to machine

Chore: add field CustomInfoRequestsData on customer updates

Feat: customer custom info request data saving

Chore: variable name changes and lots of fixes

Feat: remove default value in query, sort request on customer profile

Signed-off-by: csrapr <26280794+csrapr@users.noreply.github.com>

Fix: return promise when array of ids is empty

Feat: TitleSection can receive more than one button

new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.js

@@ -0,0 +1,75 @@
+import { makeStyles } from '@material-ui/core'
+import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
+import ToggleButton from '@material-ui/lab/ToggleButton'
+import React from 'react'
+
+import { H4, P } from 'src/components/typography'
+import { backgroundColor, comet } from 'src/styling/variables'
+const styles = {
+  noTextTransform: {
+    textTransform: 'none'
+  },
+  flex: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'start',
+    width: '90%',
+    overflow: 'hidden',
+    maxHeight: 80
+  },
+  buttonTextContent: {
+    marginLeft: 32,
+    textTransform: 'none',
+    textAlign: 'left'
+  },
+  button: {
+    backgroundColor: backgroundColor,
+    marginBottom: 16
+  },
+  paragraph: {
+    color: comet,
+    marginTop: -10
+  }
+}
+
+const useStyles = makeStyles(styles)
+const ToggleButtonGroup = ({
+  name,
+  orientation = 'vertical',
+  value,
+  exclusive = true,
+  onChange,
+  size = 'small',
+  ...props
+}) => {
+  const classes = useStyles()
+  return (
+    <MUIToggleButtonGroup
+      size={size}
+      name={name}
+      orientation={orientation}
+      value={value}
+      exclusive={exclusive}
+      onChange={onChange}>
+      {props.options.map(option => {
+        return (
+          <ToggleButton
+            className={classes.button}
+            value={option.value}
+            aria-label={option.value}
+            key={option.value}>
+            <div className={classes.flex}>
+              <option.icon />
+              <div className={classes.buttonTextContent}>
+                <H4>{option.title}</H4>
+                <P className={classes.paragraph}> {option.description}</P>
+              </div>
+            </div>
+          </ToggleButton>
+        )
+      })}
+    </MUIToggleButtonGroup>
+  )
+}
+
+export default ToggleButtonGroup