prevent state name from extending past the sidebar column (#139749)

Enterprise-CMCS · Aug 23, 2024 · 6fe173c · 6fe173c
1 parent 1198e6c
commit 6fe173c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 34 deletions.
diff --git a/services/ui-src/src/components/layout/StateHeader.jsx b/services/ui-src/src/components/layout/StateHeader.jsx
@@ -1,20 +1,28 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { AppRoles } from "../../types";
 
 const StateHeader = () => {
-  const { name, imageURI } = useSelector((state) => state.stateUser);
-
+  const { currentUser, name, imageURI } = useSelector(
+    (state) => state.stateUser
+  );
   return (
-    <div
-      className="state-header"
-      data-testid="state-header"
-      aria-label="State Header"
-    >
-      <div className="state-image">
-        <img src={imageURI} alt={name} />
-      </div>
-      <div className="state-name">{name}</div>
-    </div>
+    <>
+      {currentUser?.role === AppRoles.STATE_USER && (
+        <div
+          className="state-header"
+          data-testid="state-header"
+          aria-label="State Header"
+        >
+          <div className="state-image">
+            <img src={imageURI} alt={name} />
+          </div>
+          <div className="state-name" aria-label={name}>
+            {name}
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/services/ui-src/src/components/layout/StateHeader.test.jsx b/services/ui-src/src/components/layout/StateHeader.test.jsx
@@ -4,30 +4,45 @@ import configureMockStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { render } from "@testing-library/react";
 import StateHeader from "./StateHeader";
+import {
+  adminUserWithReportInProgress,
+  stateUserWithReportInProgress,
+} from "../../store/fakeStoreExamples";
 
 const mockStore = configureMockStore();
-const store = mockStore({
-  stateUser: {
-    name: "Kentucky",
-    imageURI: "kentucky.png",
-  },
-});
-const header = (
-  <Provider store={store}>
-    <StateHeader />
-  </Provider>
-);
+const stateUserStore = mockStore(stateUserWithReportInProgress);
+const adminUserStore = mockStore(adminUserWithReportInProgress);
 
 describe("State Header Component", () => {
-  it("should render correctly", () => {
+  test("should render correctly", () => {
+    const header = (
+      <Provider store={stateUserStore}>
+        <StateHeader />
+      </Provider>
+    );
     expect(shallow(header).exists()).toBe(true);
   });
 
-  it("Displays name, image, and alt-text for a state", () => {
+  test("Displays state header content for state user", () => {
+    const header = (
+      <Provider store={stateUserStore}>
+        <StateHeader />
+      </Provider>
+    );
     const { getByTestId, getByAltText } = render(header);
     const headerComponent = getByTestId("state-header");
-    expect(headerComponent).toHaveTextContent("Kentucky");
-    const img = getByAltText("Kentucky");
-    expect(img.src).toContain("kentucky.png");
+    expect(headerComponent).toHaveTextContent("Alabama");
+    const img = getByAltText("Alabama");
+    expect(img.src).toContain("al.svg");
+  });
+
+  test("Does not display state header content for admin user", () => {
+    const header = (
+      <Provider store={adminUserStore}>
+        <StateHeader />
+      </Provider>
+    );
+    const { queryByTestId } = render(header);
+    expect(queryByTestId("state-header")).not.toBeInTheDocument();
   });
 });
diff --git a/services/ui-src/src/styles/_sidebar.scss b/services/ui-src/src/styles/_sidebar.scss
@@ -5,26 +5,25 @@
 .sidebar {
   margin: ($margin * 3) 0;
 
+
   .skip-content {
     margin-bottom: ($margin * 3);
   }
   .state-header {
     margin-bottom: ($margin * 3);
     position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
   }
 
   .state-image {
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    transform: translateY(-50%);
     width: 70px;
   }
 
   .state-name {
     font-size: 1.6rem;
     font-weight: $font-weight-semi-bold;
-    line-height: 70px;
-    padding-left: 70px;
+    overflow-wrap: anywhere; 
   }
 }