feat(app-general): add enter to submit to forms

eficode · Feb 4, 2021 · 6b37725 · 6b37725
1 parent e905213
commit 6b37725
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 48 deletions.
diff --git a/packages/game-app/src/_shared/components/Button/Button.tsx b/packages/game-app/src/_shared/components/Button/Button.tsx
@@ -18,6 +18,7 @@ type Props = {
   leftIcon?: React.ReactElement;
   color?: React.ComponentProps<typeof StyledButton>['color'];
   loading?: boolean;
+  type?: React.ComponentProps<typeof StyledButton>['type'];
 };
 
 const Button: React.FC<Props> = ({
@@ -29,11 +30,12 @@ const Button: React.FC<Props> = ({
   disabled,
   leftIcon,
   color,
+  type = 'button',
   loading,
 }) => {
   return (
     <StyledButton
-      type="button"
+      type={type}
       id={id}
       data-cy={testId || id}
       disabled={disabled || loading}

diff --git a/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx b/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx
@@ -92,6 +92,31 @@ const estimationDefinition = keyframes`
   animation-fill-mode: forwards;
 `;
 */
+
+export const EstimationInput = styled(Input)`
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 3px 3px #d7d2cb80;
+  border-radius: 20px;
+  opacity: 1;
+  padding-left: 16px;
+  font-family: Montserrat;
+
+  :focus {
+    border: none;
+  }
+
+  ::placeholder {
+    color: #d7d2cb;
+    opacity: 1; /* Firefox */
+  }
+`;
+
+EstimationInput.displayName = 'EstimationInput';
+
+export const EstimationInputWrapper = styled.div``;
+
+EstimationInputWrapper.displayName = 'EstimationInputWrapper';
+
 export const ConfirmButton = styled.button`
   border: none;
   background: #96d5d2;
@@ -116,33 +141,13 @@ export const ConfirmButton = styled.button`
   :focus {
     outline: none;
   }
-`;
-
-ConfirmButton.displayName = 'ConfirmButton';
-
-export const EstimationInput = styled(Input)`
-  background: #ffffff 0% 0% no-repeat padding-box;
-  box-shadow: 0px 3px 3px #d7d2cb80;
-  border-radius: 20px;
-  opacity: 1;
-  padding-left: 16px;
-  font-family: Montserrat;
 
-  :focus {
-    border: none;
-  }
-
-  ::placeholder {
-    color: #d7d2cb;
-    opacity: 1; /* Firefox */
-  }
-
-  :focus + ${ConfirmButton} {
+  ${EstimationInputWrapper}:focus-within + & {
     background: #096762;
   }
 `;
 
-EstimationInput.displayName = 'EstimationInput';
+ConfirmButton.displayName = 'ConfirmButton';
 
 export const EstimationInputContainer = styled.div`
   border-radius: 20px;

diff --git a/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.tsx b/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.tsx
@@ -1,5 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import { ConfirmButton, EstimationInput, EstimationInputContainer, EstimationWrapper } from './EstimationEditor.styled';
+import {
+  ConfirmButton,
+  EstimationInput,
+  EstimationInputContainer,
+  EstimationInputWrapper,
+  EstimationWrapper,
+} from './EstimationEditor.styled';
+import { useTranslate } from '@pipeline/i18n';
 
 type Props = {
   saveEstimation: (estimation: string) => void;
@@ -12,6 +19,8 @@ type Props = {
 const EstimationEditor: React.FC<Props> = ({ saveEstimation, initialEstimation }) => {
   const [estimation, setEstimation] = useState(initialEstimation || '');
 
+  const t = useTranslate();
+
   const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setEstimation(e.target.value);
   }, []);
@@ -20,11 +29,28 @@ const EstimationEditor: React.FC<Props> = ({ saveEstimation, initialEstimation }
     saveEstimation(estimation);
   }, [estimation, saveEstimation]);
 
+  const submit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    },
+    [onClick],
+  );
+
   return (
     <EstimationWrapper mb={2}>
       <EstimationInputContainer>
-        <EstimationInput value={estimation} onChange={onChange} placeholder={'Write time estimation'} variant="clear" />
-        <ConfirmButton onClick={onClick} />
+        <form onSubmit={submit}>
+          <EstimationInput
+            WrapperComponent={EstimationInputWrapper}
+            value={estimation}
+            onChange={onChange}
+            placeholder={t('game.estimationPlaceholder')}
+            variant="clear"
+          />
+          <ConfirmButton type="submit" onClick={onClick} />
+        </form>
       </EstimationInputContainer>
     </EstimationWrapper>
   );

diff --git a/packages/game-app/src/_shared/components/Input/Input.tsx b/packages/game-app/src/_shared/components/Input/Input.tsx
@@ -8,12 +8,14 @@ type Props = {
   variant?: InputVariants;
   iconLeft?: React.ReactElement;
   iconRight?: React.ReactElement;
+  WrapperComponent?: React.ComponentType;
 } & React.ComponentProps<typeof StyledInput>;
 
 const Input: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
-  ({ variant = 'default', className, iconLeft, iconRight, ...rest }, ref) => {
+  ({ variant = 'default', className, iconLeft, iconRight, WrapperComponent, ...rest }, ref) => {
+    const Wrapper = WrapperComponent || Box;
     return (
-      <Box position="relative" width="100%">
+      <Wrapper position="relative" width="100%">
         <StyledInput
           ref={ref}
           data-cy={rest.id}
@@ -24,7 +26,7 @@ const Input: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
         />
         {iconLeft ? <LeftInputIcon>{iconLeft}</LeftInputIcon> : null}
         {iconRight ? <RightInputIcon>{iconRight}</RightInputIcon> : null}
-      </Box>
+      </Wrapper>
     );
   },
 );

diff --git a/packages/game-app/src/_shared/components/TextArea/TextArea.tsx b/packages/game-app/src/_shared/components/TextArea/TextArea.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import ErrorMessage from '../ErrorMessage';
+import { Box } from '@pipeline/components';
+import Typography from '../Typography';
 
 type Props = {
   name: string;
@@ -16,15 +18,24 @@ const StyledTextArea = styled.textarea`
   border-radius: 10px;
   resize: none;
   width: 100%;
+  margin-top: 5px;
+
+  :active {
+    outline: none;
+  }
 `;
 
 const TextArea: React.FC<Props> = ({ name, value, errorMessage, label, onChange, disabled }) => {
   return (
-    <div className="column">
-      {label ? <label htmlFor={name}>{label}</label> : null}
+    <Box display="flex" flexDirection="column">
+      {label ? (
+        <Typography as="label" variant="label" htmlFor={name}>
+          {label}
+        </Typography>
+      ) : null}
       <StyledTextArea rows={4} disabled={disabled} value={value} name={name} id={name} onChange={onChange as any} />
       {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
-    </div>
+    </Box>
   );
 };
 

diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -45,6 +45,7 @@ const translations = {
       title: 'Ops, you are offline',
       subtitle: 'Refresh the page to re-sync',
     },
+    estimationPlaceholder: 'Write time estimation',
   },
   login: {
     title: 'Sign in to play',

diff --git a/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx b/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx
@@ -86,7 +86,7 @@ const CreateGameView: React.FC<Props> = () => {
               <Typography variant="content" fontWeight="600">
                 {t('createGame.writeYours')}
               </Typography>
-              <FormTextField disabled={!!selectedScenarioCard} name="scenarioTitle" label=" " />
+              <FormTextField disabled={!!selectedScenarioCard} name="scenarioTitle" />
               <Box mt={2}>
                 <FormTextField
                   disabled={!!selectedScenarioCard}

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -38,18 +38,20 @@ const Login: React.FC<Props> = () => {
           <Typography variant="title">{t('login.title')}</Typography>
           <Box mt={5}>
             <FormProvider {...methods}>
-              <FormTextField name="email" label={t('login.form.emailLabel')} />
-              <Box mt={3}>
-                <FormTextField CustomInput={PasswordInput} name="password" label={t('login.form.passwordLabel')} />
-              </Box>
-              <Box textAlign="center" mt={5}>
-                <Button label={t('login.form.buttonText')} loading={loginLoading} onClick={submit} />
-              </Box>
-              {loginTranslateError ? <ErrorMessage message={loginTranslateError} /> : null}
-              <Box display="flex" flexDirection="row" justifyContent="center" mt={4}>
-                <span>{t('login.notYetAccount')}</span>&nbsp;
-                <Link onClick={goToSignUp}>{t('login.goToSignup')}</Link>
-              </Box>
+              <form onSubmit={submit}>
+                <FormTextField name="email" label={t('login.form.emailLabel')} />
+                <Box mt={3}>
+                  <FormTextField CustomInput={PasswordInput} name="password" label={t('login.form.passwordLabel')} />
+                </Box>
+                <Box textAlign="center" mt={5}>
+                  <Button type="submit" label={t('login.form.buttonText')} loading={loginLoading} onClick={submit} />
+                </Box>
+                {loginTranslateError ? <ErrorMessage message={loginTranslateError} /> : null}
+                <Box display="flex" flexDirection="row" justifyContent="center" mt={4}>
+                  <span>{t('login.notYetAccount')}</span>&nbsp;
+                  <Link onClick={goToSignUp}>{t('login.goToSignup')}</Link>
+                </Box>
+              </form>
             </FormProvider>
           </Box>
         </LoginForm>

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -66,7 +66,7 @@ const Signup: React.FC<Props> = () => {
           <Typography variant="title">{t('signup.title')}</Typography>
           <Box mt={5}>
             <FormProvider {...methods}>
-              <form>
+              <form onSubmit={submit}>
                 <Box display="flex" flexDirection="row">
                   <Box flex={1}>
                     <FormTextField name="firstName" label={t('signup.form.firstNameLabel')} />
@@ -95,8 +95,7 @@ const Signup: React.FC<Props> = () => {
                   <FormSelect name="devOpsMaturity" label={t('signup.form.maturityLabel')} options={devOpsMaturities} />
                 </Box>
                 <Box mt={5} textAlign="center">
-                  <Button
-                    id="signup-button"
+                  <Button type="submit" id="signup-button"
                     label={t('signup.form.buttonText')}
                     loading={signupLoading}
                     onClick={submit}