chore: tidy-up for house style

Author: benfurber

packages/components/src/CreateComment/CreateComment.test.tsx

@@ -37,7 +37,9 @@ describe('CreateComment Component', () => {
         onChange={mockOnChange}
       />,
     )
-    expect(screen.getByText('Login')).toBeInTheDocument()
+    expect(
+      screen.getByText('Hi there! Login to leave a comment'),
+    ).toBeInTheDocument()
     expect(
       screen.queryByPlaceholderText('Leave your questions or feedback...'),
     ).toBeNull()

packages/components/src/CreateComment/CreateComment.tsx

@@ -30,19 +30,22 @@ export const CreateComment = (props: Props) => {
   const placeholder = props.placeholder || 'Leave your questions or feedback...'
   const buttonLabel = props.buttonLabel ?? 'Leave a comment'
 
-  const onChange = (textAreaElement: HTMLTextAreaElement) => {
-    ;(textAreaElement.parentNode! as HTMLDivElement).dataset.replicatedValue =
-      textAreaElement.value
-    props.onChange && props?.onChange(textAreaElement.value)
+  const onChange = ({ parentNode, value }: HTMLTextAreaElement) => {
+    ;(parentNode! as HTMLDivElement).dataset.replicatedValue = value
+    props?.onChange(value)
+  }
+
+  const commentIsActive = comment.length > 0 || textareaIsFocussed
+  const onClick = () => {
+    !isLoading && onSubmit(comment)
   }
 
   return (
-    <Flex sx={{ flexDirection: 'column', gap: 3 }}>
-      <Flex data-target="create-comment-container">
+    <Flex sx={{ flexDirection: 'column' }}>
+      <Flex data-target="create-comment-container" sx={{ gap: 2 }}>
         <Box
           sx={{
             lineHeight: 0,
-            marginTop: 2,
             display: ['none', 'block'],
             flexShrink: 0,
           }}
@@ -53,8 +56,8 @@ export const CreateComment = (props: Props) => {
           sx={{
             display: 'block',
             background: 'white',
-            flexGrow: 1,
-            marginLeft: [2, 5],
+            flex: 1,
+            marginLeft: [0, 3],
             borderRadius: 1,
             position: 'relative',
             width: 'min-content',
@@ -69,16 +72,11 @@ export const CreateComment = (props: Props) => {
             },
           }}
         >
-          {!isLoggedIn ? (
-            <LoginPrompt />
-          ) : (
-            <>
-              <div
-                className={
-                  comment.length > 0 || textareaIsFocussed
-                    ? 'grow-wrap value-set'
-                    : 'grow-wrap'
-                }
+          {!isLoggedIn && <LoginPrompt />}
+          {isLoggedIn && (
+            <Flex sx={{ flexDirection: 'column' }}>
+              <Box
+                className={`grow-wrap ${commentIsActive ? 'value-set' : ''}`}
               >
                 <Textarea
                   value={comment}
@@ -93,60 +91,43 @@ export const CreateComment = (props: Props) => {
                   onFocus={() => setTextareaIsFocussed(true)}
                   onBlur={() => setTextareaIsFocussed(false)}
                 />
-              </div>
+              </Box>
               <Text
                 sx={{
                   fontSize: 1,
-                  display:
-                    comment.length > 0 || textareaIsFocussed ? 'block' : 'none',
-                  position: 'absolute',
-                  right: 0,
-                  bottom: 0,
-                  pointerEvents: 'none',
-                  padding: 1,
+                  display: commentIsActive ? 'flex' : 'none',
+                  alignSelf: 'flex-end',
+                  padding: 2,
                 }}
               >
                 {comment.length}/{maxLength}
               </Text>
-            </>
+            </Flex>
           )}
         </Box>
         <Flex
           sx={{
             alignSelf: 'flex-end',
             height: ['40px', '52px'],
             width: ['40px', 'auto'],
-            marginLeft: 3,
           }}
         >
           <Button
             data-cy={isReply ? 'reply-submit' : 'comment-submit'}
             data-testid="send-comment-button"
             disabled={!comment.trim() || !isLoggedIn || isLoading}
             variant="primary"
-            onClick={() => {
-              if (!isLoading) {
-                onSubmit(comment)
-              }
-            }}
+            onClick={onClick}
             sx={{
-              marginTop: isLoggedIn ? 0 : 0,
               height: ['40px', '100%'],
               width: ['40px', 'auto'],
               padding: [0, 1],
             }}
           >
-            {isLoading ? (
-              'Loading...'
-            ) : (
+            {isLoading && 'Loading...'}
+            {!isLoading && (
               <>
-                <Text
-                  sx={{
-                    display: ['none', 'block'],
-                  }}
-                >
-                  {buttonLabel}
-                </Text>
+                <Text sx={{ display: ['none', 'block'] }}>{buttonLabel}</Text>
                 <Image
                   src={sendMobile}
                   sx={{
@@ -168,17 +149,15 @@ const LoginPrompt = () => {
   return (
     <Box sx={{ padding: [3, 4] }}>
       <Text data-cy="comments-login-prompt">
-        Hi there!{' '}
         <Link
           to="/sign-in"
           style={{
             textDecoration: 'underline',
             color: 'inherit',
           }}
         >
-          Login
-        </Link>{' '}
-        to leave a comment
+          Hi there! Login to leave a comment
+        </Link>
       </Text>
     </Box>
   )