Merge pull request #26 from epwinchell/footer_updates

fix: restyle VA footer
patternfly · Jul 24, 2024 · 5a2c1af · 5a2c1af
2 parents bb3a158 + 1fb5898
commit 5a2c1af
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 77 deletions.
diff --git a/cypress/component/VirtualAssistant.cy.tsx b/cypress/component/VirtualAssistant.cy.tsx
@@ -6,7 +6,7 @@ describe('VirtualAssistant', () => {
     cy.mount(<VirtualAssistant />);
 
     cy.get('[data-test-id="assistant-title"]').first().should('contain', 'Virtual Assistant');
-    cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Type a message...');
+    cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Send a message...');
     cy.get('[data-test-id="assistant-send-button"]').first().should('not.be.disabled');
   })
 

diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
@@ -5,10 +5,9 @@ import {
   CardBody,
   CardFooter,
   CardHeader,
-  Icon,
-  InputGroup,
-  InputGroupText,
+  Divider,
   Flex,
+  Icon,
   TextArea
 } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
@@ -50,7 +49,7 @@ const useStyles = createUseStyles({
   cardTitle: {
     alignSelf: "center",
     color: "var(--pf-v5-global--Color--light-100)",
-    fontSize: "18px",
+    fontSize: "var(--pf-v5-global--FontSize--lg)",
     fontWeight: "400",
     lineHeight: "27px",
     paddingLeft: "var(--pf-v5-global--spacer--sm)",
@@ -59,14 +58,14 @@ const useStyles = createUseStyles({
     marginLeft: "5px",
     marginTop: "4px",
     fontSize: "28px",
-    color: "#C9190B",
+    color: "var(--pf-v5-global--danger-color--100)",
   },
   titleIconWrapper: {
     display: "block",
     float: "left",
     width: "38px",
     height: "38px",
-    background: "#fff",
+    background: "var(--pf-v5-global--BackgroundColor--100)",
     borderRadius: "20px",
     marginRight: "7px",
   },
@@ -79,14 +78,40 @@ const useStyles = createUseStyles({
     "&::-webkit-scrollbar": "display: none",
   },
   cardFooter: {
-    padding: "0",
-  },
-  inputGroup: {
-    height: "60px",
+    padding: "10px",
+    paddingBottom: "16px",
+    "& :focus-visible": {
+      outline: "none",
+    },
+    "& .pf-v5-c-button.pf-m-disabled": {
+      color: "transparent !important",
+    },
+    "& .pf-v5-c-button.pf-m-plain": {
+      "--pf-v5-c-button--disabled--Color": "transparent",
+      color: "var(--pf-v5-global--danger-color--100)",
+    },
+    "& .pf-v5-c-form-control": {
+      "--pf-v5-c-form-control--after--BorderBottomWidth": "0",
+    },
+    "& .pf-v5-svg": {
+      width: "27px",
+      height: "27px",
+    }
   },
   textArea: {
     resize: "none",
-  }
+    backgroundColor: "var(--pf-v5-global--BackgroundColor--200)",
+    borderRadius: "50px 50px 50px 50px",
+    color: "var(--pf-v5-global--Color--light-100)",
+    paddingRight: "50px",
+    paddingLeft: "20px",
+
+  },
+  sendButton: {
+    position: "absolute",
+    bottom: "22px",
+    right: "14px",
+  },
 })
 
 export interface VirtualAssistantProps {
@@ -115,7 +140,7 @@ export interface VirtualAssistantProps {
 export const VirtualAssistant: React.FunctionComponent<VirtualAssistantProps> = ({
   children,
   title = 'Virtual Assistant',
-  inputPlaceholder = 'Type a message...',
+  inputPlaceholder = 'Send a message...',
   message = '',
   actions,
   onChangeMessage,
@@ -158,26 +183,24 @@ export const VirtualAssistant: React.FunctionComponent<VirtualAssistantProps> =
         {children}
       </CardBody>
       <CardFooter className={classes.cardFooter}>
-        <InputGroup className={classes.inputGroup}>
-          <TextArea
-            className={classes.textArea}
-            placeholder={inputPlaceholder}
-            value={message}
-            onChange={onChangeMessage}
-            onKeyPress={handleKeyPress}
-            type="text"
-            aria-label="Assistant input"
-            isDisabled={isInputDisabled}
-            data-test-id="assistant-text-input"
-          />
-          <InputGroupText>
-            <Button isDisabled={isSendButtonDisabled} data-test-id="assistant-send-button" aria-label="Virtual assistant's message" variant="plain" className="pf-v5-u-px-sm" onClick={onSendMessage ? () => {
-              onSendMessage(message);
-            } : undefined}>
-              <PaperPlaneIcon />
-            </Button>
-          </InputGroupText>
-        </InputGroup>
+        <Divider className="pf-v5-u-pb-md" />
+        <TextArea
+          className={classes.textArea}
+          placeholder={inputPlaceholder}
+          value={message}
+          onChange={onChangeMessage}
+          onKeyPress={handleKeyPress}
+          type="text"
+          aria-label="Assistant input"
+          isDisabled={isInputDisabled}
+          data-test-id="assistant-text-input"
+        >
+        </TextArea>
+        <Button className={classes.sendButton} isDisabled={isSendButtonDisabled} data-test-id="assistant-send-button" aria-label="Virtual assistant's message" variant="plain" onClick={onSendMessage ? () => {
+          onSendMessage(message);
+        } : undefined}>
+          <PaperPlaneIcon />
+        </Button>
       </CardFooter>
     </Card>
   );

diff --git a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap
@@ -58,53 +58,44 @@ exports[`VirtualAssistant should render assistant 1`] = `
     <div
       class="pf-v5-c-card__footer cardFooter-0-2-7"
     >
-      <div
-        class="pf-v5-c-input-group inputGroup-0-2-8"
+      <hr
+        class="pf-v5-c-divider pf-v5-u-pb-md"
+      />
+      <span
+        class="pf-v5-c-form-control pf-m-resize-both textArea-0-2-8"
+      >
+        <textarea
+          aria-invalid="false"
+          aria-label="Assistant input"
+          data-test-id="assistant-text-input"
+          placeholder="Send a message..."
+          type="text"
+        />
+      </span>
+      <button
+        aria-disabled="false"
+        aria-label="Virtual assistant's message"
+        class="pf-v5-c-button pf-m-plain sendButton-0-2-9"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        data-test-id="assistant-send-button"
+        type="button"
       >
-        <span
-          class="pf-v5-c-form-control pf-m-resize-both textArea-0-2-9"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 512 512"
+          width="1em"
         >
-          <textarea
-            aria-invalid="false"
-            aria-label="Assistant input"
-            data-test-id="assistant-text-input"
-            placeholder="Type a message..."
-            type="text"
+          <path
+            d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"
           />
-        </span>
-        <div
-          class="pf-v5-c-input-group__item pf-m-box"
-        >
-          <span
-            class="pf-v5-c-input-group__text"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Virtual assistant's message"
-              class="pf-v5-c-button pf-m-plain pf-v5-u-px-sm"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              data-test-id="assistant-send-button"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 512 512"
-                width="1em"
-              >
-                <path
-                  d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"
-                />
-              </svg>
-            </button>
-          </span>
-        </div>
-      </div>
+        </svg>
+      </button>
     </div>
   </div>
 </div>