StoryBook: OpenDialog

package.json

@@ -24,6 +24,7 @@
     "@bldrs-ai/ifclib": "^5.3.3",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@iconscout/react-unicons": "^1.1.6",
     "@mui/icons-material": "^5.1.1",
     "@mui/lab": "^5.0.0-alpha.48",
     "@mui/material": "^5.0.1",

src/Components/Buttons.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import IconButton from '@mui/material/IconButton'
+import Button from '@mui/material/Button'
 import ToggleButton from '@mui/material/ToggleButton'
 import Tooltip from '@mui/material/Tooltip'
 import {makeStyles, useTheme} from '@mui/styles'
@@ -141,6 +142,35 @@ export function FormButton({title, icon, type = 'submit', placement = 'left', si
   )
 }
 
+/**
+ * A FormButton is a TooltipIconButton but with parameterized type for
+ * form actions.
+ * @param {string} title
+ * @param {Object} icon
+ * @param {string} type Type of button (and icon to render)
+ * @param {string} placement Placement of tooltip
+ * @param {string} size Size of button component
+ * @return {Object} React component
+ */
+export function RectangularButton({
+  title,
+  icon,
+}) {
+  assertDefined(title, icon)
+  return (
+    <Button
+      variant='rectangular'
+      startIcon={icon}
+      sx={{
+        '& .MuiButton-startIcon': {position: 'absolute', left: '20px'},
+        '&.MuiButtonBase-root:hover': {bgcolor: 'none'},
+      }}
+    >
+      {title}
+    </Button>
+  )
+}
+
 
 const useStyles = makeStyles((theme) => ({
   root: {

src/Components/Dialog_redesign.jsx

@@ -0,0 +1,191 @@
+import React from 'react'
+import MuiDialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import {makeStyles, useTheme} from '@mui/styles'
+import {RectangularButton} from './Buttons'
+import {assertDefined} from '../utils/assert'
+import InputBar from './InputBar'
+import {UilBuilding, UilUpload, UilMultiply, UilGraduationCap, UilGithub} from '@iconscout/react-unicons'
+import {grey} from '@mui/material/colors'
+import Divider from '@mui/material/Divider'
+
+
+/**
+ * A generic base dialog component.
+ * @param {Object} icon Leading icon above header description
+ * @param {string} headerText Short message describing the operation
+ * @param {boolean} isDialogDisplayed
+ * @param {function} setIsDialogDisplayed
+ * @param {Object} clazzes Optional classes
+ * @param {Object} content node
+ * @return {Object} React component
+ */
+export default function Dialog({
+  headerContent,
+  bodyContent,
+  isDialogDisplayed,
+  setIsDialogDisplayed,
+}) {
+  assertDefined(headerContent, bodyContent, isDialogDisplayed, setIsDialogDisplayed)
+  const classes = useStyles(useTheme())
+  const close = () => setIsDialogDisplayed(false)
+  return (
+    <MuiDialog
+      open={isDialogDisplayed}
+      onClose={close}
+      maxWidth={'sm'}
+    >
+      <DialogTitle>
+        {headerContent}
+      </DialogTitle>
+      <DialogContent className={classes.contentBody}>
+        {bodyContent}
+      </DialogContent>
+    </MuiDialog>)
+}
+
+
+/**
+ * Content for the open Dialog
+ * @return {Object} React component
+ */
+export function OpenDialogBodyContent() {
+  const classes = useStyles(useTheme())
+  return (
+    <div className={classes.contentBody}>
+      <div className={classes.recommendedContainer}>
+        <div className={classes.recommendedText}>Recommended Method</div>
+        <InputBar startAdorment={<UilGithub/>}/>
+        <div className={classes.fileDescriptionContainer}>
+          <UilGraduationCap className={classes.fileDescriptionIcon}/>
+          <div className={classes.fileDescriptionText}>
+            How do I host .ifc files on GitHub?
+          </div>
+        </div>
+      </div>
+      <div className={classes.divider}>
+        <Divider/>
+        <div className={classes.dividerText}>or</div>
+      </div>
+      <RectangularButton title='Upload from device' icon={<UilUpload/>}/>
+      <div className={classes.divider}>
+        <Divider/>
+        <div className={classes.dividerText}>or</div>
+      </div>
+      <RectangularButton title='Load Sample Model' icon={<UilBuilding/>}/>
+    </div>
+  )
+}
+
+
+/**
+ * Title for the open Dialog
+ * @return {Object} React component
+ */
+export function OpenDialogHeaderContent() {
+  const classes = useStyles(useTheme())
+  return (
+    <div className={classes.titleContainer}>
+      <div className={classes.titleTextContainer}>
+        <div className={classes.titleText}>
+          Open file
+          <div className={classes.secondarytext}>
+            We support .ifc file types
+          </div>
+        </div>
+      </div>
+      <div>
+        <UilMultiply style={{color: '#505050'}}/>
+      </div>
+    </div>
+
+  )
+}
+
+
+const useStyles = makeStyles((theme) => ({
+  titleContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    maxWidth: '500px',
+  },
+  titleTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+  },
+  titleText: {
+    fontWeight: 'bold',
+    fontSize: '30px',
+  },
+  secondarytext: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '17px',
+    color: '#777777',
+  },
+  contentBody: {
+    height: '400px',
+    maxWidth: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    alignContent: 'center',
+  },
+  divider: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+  dividerText: {
+    fontFamily: 'Helvetica',
+    position: 'absolute',
+    alignSelf: 'center',
+    textAlign: 'center',
+    width: '40px',
+    color: '#777777',
+    backgroundColor: grey[100],
+  },
+  recommendedContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+  recommendedText: {
+    fontFamily: 'Helvetica',
+    marginBottom: '12px',
+    fontWeight: 600,
+    fontSize: '10px',
+    lineHeight: '12px',
+    letterSpacing: '0.14em',
+    textTransform: 'uppercase',
+    color: '#0085FF',
+    textAlign: 'center',
+  },
+  fileDescriptionContainer: {
+    marginTop: '10px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignContent: 'center',
+    cursor: 'pointer',
+  },
+  fileDescriptionText: {
+    fontFamily: 'Helvetica',
+    marginLeft: '5px',
+    width: '200px',
+    color: '#979797',
+    fontSize: '12px',
+  },
+  fileDescriptionIcon: {
+    color: '#979797',
+    width: '13px',
+    height: '13px',
+  },
+}))
+

src/Components/Dialog_redesign.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import Dialog, {OpenDialogHeaderContent, OpenDialogBodyContent} from '../Components/Dialog_redesign'
+import ShareMock from '../ShareMock'
+
+
+test('Open Dialog', () => {
+  render(
+      <ShareMock>
+        <Dialog
+          headerContent={<OpenDialogHeaderContent/>}
+          bodyContent={<OpenDialogBodyContent/>}
+          headerText={'Open file'}
+          isDialogDisplayed={ true }
+          setIsDialogDisplayed={() => {}}
+        />
+      </ShareMock>)
+  expect(screen.getByText('Open file')).toBeInTheDocument()
+  expect(screen.getByText('Recommended Method')).toBeInTheDocument()
+  expect(screen.getByText('Upload from device')).toBeInTheDocument()
+  expect(screen.getByText('Load Sample Model')).toBeInTheDocument()
+})

src/Components/InputBar.jsx

@@ -0,0 +1,92 @@
+import React, {useRef, useState} from 'react'
+import InputBase from '@mui/material/InputBase'
+import Paper from '@mui/material/Paper'
+import {makeStyles} from '@mui/styles'
+import {TooltipToggleButton} from './Buttons'
+import Divider from '@mui/material/Divider'
+import {UilMinusSquare, UilSearch} from '@iconscout/react-unicons'
+
+
+/**
+ * Search bar component
+ * @return {Object} The SearchBar react component
+ */
+export default function InputBar({startAdorment, onSubmit}) {
+  const [inputText, setInputText] = useState('')
+  const onInputChange = (event) => setInputText(event.target.value)
+  const searchInputRef = useRef(null)
+  const classes = useStyles({inputWidth: '288px'})
+  return (
+    <div>
+      <Paper component='form' className={classes.root}>
+        <div className={classes.iconContainer}>
+          {startAdorment}
+        </div>
+        <Divider orientation="vertical" flexItem className={classes.divider}/>
+        <InputBase
+          inputRef={searchInputRef}
+          value={inputText}
+          onChange={onInputChange}
+          error={true}
+          placeholder={'Paste GitHub link here'}/>
+        {inputText.length > 0 ?
+          <TooltipToggleButton
+            title='clear'
+            size='small'
+            placement='bottom'
+            onClick={() => {
+              setInputText('')
+            }}
+            icon={<UilMinusSquare/>}/> : null
+        }
+        {inputText.length > 0 ?
+          <TooltipToggleButton
+            title='search'
+            size='small'
+            placement='bottom'
+            onClick={() => onSubmit()}
+            icon={<UilSearch/>}/> : null
+        }
+      </Paper>
+    </div>
+  )
+}
+
+
+const useStyles = makeStyles({
+  root: {
+    'display': 'flex',
+    'minWidth': '200px',
+    'width': (props) => props.inputWidth,
+    'maxWidth': '400px',
+    'alignItems': 'center',
+    'padding': '2px 2px 2px 2px',
+    '@media (max-width: 900px)': {
+      minWidth: '300px',
+      width: '300px',
+      maxWidth: '300px',
+    },
+    '& .MuiInputBase-root': {
+      flex: 1,
+    },
+  },
+  error: {
+    marginLeft: '10px',
+    marginTop: '3px',
+    fontSize: '10px',
+    color: 'red',
+  },
+  divider: {
+    height: '36px',
+    alignSelf: 'center',
+    margin: '0px 10px 0px 0px',
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '30px',
+    height: '30px',
+    margin: '5px',
+  },
+})

src/Components/IssuesControl.jsx

@@ -76,14 +76,14 @@ export function IssuesNavBar() {
              />
              <>
                <TooltipIconButton
-                 title='Previous Comment'
+                 title='Previous Note'
                  placement='bottom'
                  size='small'
                  onClick={() => selectIssue('previous')}
                  icon={<PreviousIcon style={{width: '20px', height: '20px'}}/>}
                />
                <TooltipIconButton
-                 title='Next Comment'
+                 title='Next Note'
                  size='small'
                  placement='bottom'
                  onClick={() => selectIssue('next')}