Write Demo help component (#33)

* add help component * use display instead of visibility * version bump * remove bug fix that is fixed in different PR * move helpContent to fixture and button to shared * improved window styling * combine common theming * v bump
digicatapult · Sep 16, 2022 · 9d07e4f · 9d07e4f
1 parent f135152
commit 9d07e4f
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digicatapult/morello-ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "User interface for interacting with morello-api",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/components/demos/write/Demo.js b/src/components/demos/write/Demo.js
@@ -11,6 +11,7 @@ import { ButtonSide } from '../../shared/Buttons'
 import { Themes } from '../../../fixtures/themes'
 import SecretDesktop from './SecretDesktop'
 import LoginForm from './LoginForm'
+import Help from '../../shared/Help'
 
 const Wrapper = styled.div`
   grid-area: body;
@@ -26,19 +27,21 @@ const successfulLogin = (apiOutput) =>
 const loginError = (apiOutput) => extractLoginResult(apiOutput) === 'error'
 
 export default function WriteDemo(props) {
-  const { execute, binaryName } = props
+  const { execute, binaryName, helpContent } = props
 
   const nav = useNavigate()
   const state = React.useContext(Context)
   const { update, writeDemo: demoState } = state
   const { theme } = demoState
   const isMorello = theme.name === 'Morello'
 
+  const [showHelp, setShowHelp] = useState(false)
   const [awaitingApi, setAwaitingApi] = useState(false)
   const [apiOutput, setApiOutput] = useState('')
   const [usernamePasswordPairs, setUsernamePasswordPairs] = useState([])
 
   const resetStates = () => {
+    setShowHelp(false)
     setAwaitingApi(false)
     setApiOutput('')
     setUsernamePasswordPairs([])
@@ -108,6 +111,12 @@ export default function WriteDemo(props) {
                 }}
               />
             )}
+        <Help
+          theme={theme}
+          content={helpContent}
+          showContentState={showHelp}
+          setShowContentState={setShowHelp}
+        />
       </Wrapper>
     </>
   )

diff --git a/src/components/shared/Box.js b/src/components/shared/Box.js
@@ -5,16 +5,13 @@ import { Row } from './Common'
 import Title from './Title'
 
 const Window = styled.div((props) => props)
-const Body = styled.div((props) => ({
-  width: '100%',
-  ...props,
-}))
+const Body = styled.div((props) => props)
 
 export default function Box(props) {
   const { theme } = props
 
   return (
-    <Window {...theme.primary.windowCont}>
+    <Window {...theme.primary.window} {...theme.primary.demoWindow}>
       <Title title={props.windowTitle} arch={theme.name} />
       <Row flex={'auto'}>
         <Body {...theme.primary.windowBody}>{props.children}</Body>

diff --git a/src/components/shared/Buttons.js b/src/components/shared/Buttons.js
@@ -95,3 +95,16 @@ export const Button = styled.button`
     cursor: default;
   }
 `
+
+export const IconButton = styled.div`
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: ${(props) => props.background};
+  box-shadow: ${(props) => props.boxShadow};
+  border-radius: ${(props) => props.borderRadius};
+  border: ${(props) => props.border};
+`
diff --git a/src/components/shared/Help.js b/src/components/shared/Help.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { IconButton } from './Buttons'
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 200px;
+  left: 50px;
+`
+
+const ContentWrapper = styled.div`
+  max-width: 500px;
+  max-height: 400px;
+  padding: 10px;
+  background: ${(props) => props.background};
+  display: ${(props) => props.display};
+  box-shadow: ${(props) => props.boxShadow};
+  border-radius: ${(props) => props.borderRadius};
+  border: ${(props) => props.border};
+`
+
+const ButtonText = styled.p`
+  font-family: ${(props) => props.fontFamily};
+  color: ${(props) => props.color};
+  font-size: 24px;
+`
+
+const ContentText = styled.p`
+  font-family: ${(props) => props.fontFamily};
+  color: ${(props) => props.color};
+  font-size: 16px;
+  white-space: pre-line;
+  text-align: left;
+  margin: 0;
+`
+
+export default function Help({
+  theme,
+  content,
+  showContentState,
+  setShowContentState,
+}) {
+  const toggle = () => {
+    setShowContentState(!showContentState)
+  }
+
+  return (
+    <Wrapper>
+      <IconButton
+        background={theme.primary.window.background}
+        boxShadow={theme.primary.window.boxShadow}
+        borderRadius={theme.primary.window.borderRadius}
+        border={theme.primary.window.border}
+        onClick={toggle}
+      >
+        <ButtonText {...theme.font}>?</ButtonText>
+      </IconButton>
+
+      <ContentWrapper
+        display={showContentState ? 'flex' : 'none'}
+        background={theme.primary.window.background}
+        boxShadow={theme.primary.window.boxShadow}
+        borderRadius={theme.primary.window.borderRadius}
+        border={theme.primary.window.border}
+      >
+        <ContentText {...theme.font}>{content}</ContentText>
+      </ContentWrapper>
+    </Wrapper>
+  )
+}
diff --git a/src/fixtures/demos.js b/src/fixtures/demos.js
@@ -61,6 +61,12 @@ export const demos = [
     icon: bugIcon,
     windowTitle: 'SUPER_SAFE_APP.EXE',
     modalTitle: 'hacker.app',
+    helpContent: `
+      The username is root.
+      \nPassword can be changed by attempting to login with a username that is longer than 16 characters to perform an out of bounds write. 
+      The password will be replaced with the out of bounds characters. 
+      \ne.g. if 'root------------123' is attempted for a username, the password is now '123'.
+    `,
     Element: (props) => <WriteDemo {...props} />,
     execute: async (executable, params) => {
       return await executeBinary(executable, {

diff --git a/src/fixtures/themes.js b/src/fixtures/themes.js
@@ -182,29 +182,25 @@ export const Themes = (arch) => {
           },
     },
     primary: {
-      windowCont: isCheri
+      window: isCheri
         ? {
             background: '#fff',
-            width: '826px',
-            height: '626px',
-            border: '1px solid #818181',
             borderRadius: '6px',
-            color: '#fff',
+            border: '1px solid #818181',
             boxShadow: '0px 0px 4px #818181',
           }
         : {
-            display: 'flex',
-            position: 'relative',
-            flexDirection: 'column',
-            width: '826px',
-            height: '626px',
-            boxShadow: '24px 24px 1px rgba(0, 0, 0, 0.8)',
             background: '#343556',
+            boxShadow: '12px 12px 1px rgba(0, 0, 0, 0.8)',
           },
+      demoWindow: {
+        width: '826px',
+        height: '626px',
+        display: 'flex',
+        flexDirection: 'column',
+      },
       windowBody: isCheri
         ? {
-            display: 'flex',
-            flexDirection: 'column',
             justifyContent: 'center',
             width: '100%',
             padding: '10px',