Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Solicitation report refactor #162

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Solicitation report refactor #162

wants to merge 2 commits into from

Conversation

collinschreyer-dev
Copy link
Collaborator

image

Overview

Hey Team! 👋

This PR addresses several changes to the Daily Report (formerly Solicitations) page, focusing on improving the layout, styling, and user experience in accordance with the UI team's suggestions. The changes include restructuring the main content area, refining the search and export functionality, and updating the table display for better readability and interaction. Importantly, we've leveraged the U.S. Web Design System (USWDS) wherever possible to ensure consistency with design standards and accessibility best practices. The primary exception to USWDS components is the PrimeNG table, which we've retained for its robust features like sorting and filtering.

Key Changes

Layout and Structure

  • Main Container:
    • Wrapped the main content in a main-container div for better layout control.
    • Added padding, font family, and other styles to the main-container for improved visual presentation, using USWDS utilities where applicable.
  • Header Section:
    • Simplified the header with a clear title "Daily Report" and a subheading indicating the date of the SRT results, following USWDS typography guidelines.
    • Added a descriptive paragraph explaining the purpose of the page, utilizing USWDS prose component styles.
  • Search and Export:
    • Created a dedicated search-export-container to house the search input, search button, and export link.
    • Improved the styling of the search input and button, making them more prominent and aligning them with USWDS form control styles.
    • Added an "Export as CSV file" link with a download icon, styled using USWDS utility classes.
  • Table Section:
    • Restructured the table header and body for improved clarity and responsiveness.
    • Added sortable columns for Solicitation #, Title, Notice Type, Date, Review Result, Latest action date, and Office.
    • Implemented filtering for the Review Result column.
    • Updated the display of the Review Result with status indicators (icons and text) for Compliant, Non-compliant, and Cannot Evaluate.
    • Note: The table itself utilizes PrimeNG components to provide advanced features, but we've styled it to be visually consistent with USWDS.
  • Loading State:
    • Maintained the visually engaging loading animation with improved structure using an unordered list and individual list items for each character, using USWDS classes for positioning and animation.

Styling Enhancements

  • Typography:
    • Consistent font family ("Source Sans Pro") applied throughout the page.
    • Adjusted font sizes and weights for headings and body text according to USWDS typography guidelines.
  • Spacing and Padding:
    • Added appropriate margins and padding to various elements for better visual spacing, using USWDS spacing utility classes.
  • Colors:
    • Used color to highlight important elements, such as the search button, export link, and status indicators, referencing USWDS color tokens where appropriate.
  • Table Styling:
    • Applied a clean and modern style to the table with clear headers and row styles.
    • Added hover effects to table rows for better interactivity.

Functionality Improvements

  • Search:
    • Enhanced the search functionality to filter table rows based on user input.
    • The search input and button are now more prominent and user-friendly.
  • Export:
    • Replaced the old CSV export image with a more accessible and styled "Export as CSV file" link.
  • Sorting:
    • Enabled sorting on multiple table columns.
  • Filtering:
    • Added a filter dropdown for the Review Result column.
  • Navigation:
    • Changed page name from "Solicitations" to "Daily Report".

Accessibility Considerations

  • Status indicators now include text descriptions along with icons for better screen reader compatibility.
  • The export functionality is now triggered by a link element, improving keyboard accessibility.
  • Throughout the page, we've adhered to USWDS guidelines for accessibility, including proper ARIA attributes, semantic HTML, and keyboard navigation, except within the confines of the PrimeNG table.

Testing Notes

  • Verified the layout and styling on different screen sizes.
  • Tested the search, export, sorting, and filtering functionalities.
  • Confirmed that the status indicators display correctly for different review results.
  • Validated accessibility with screen readers.

Please review and provide feedback on these enhancements. Thanks!

@gsa-bri
Copy link
Collaborator

gsa-bri commented Jan 15, 2025 via email

BuckinghamAJ
BuckinghamAJ requested changes Jan 21, 2025
View reviewed changes
Copy link
Collaborator

@BuckinghamAJ BuckinghamAJ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like you added the header component changes in this PR as well. Also, I had a few comments I would like you to look at prior to approval.

src/app/header/header.component.html
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were the header files accidentally included in this push?

src/app/solicitation/solicitation-report/solicitation-report.component.html Show resolved Hide resolved
src/app/header/header.component.html
</li>
<li class="usa-nav__primary-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/admin']" class="usa-nav__link" [class.usa-current]="GetHash('admin')"
(click)="menuClick('/admin')" [attr.tabindex]="isGSAAdmin ? 0 : -1">Administration</a>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please include back the menu_clicks since that is related to google analytics we are collecting.

src/app/header/header.component.scss
border-bottom: none;
}

.grid-container-widescreen {
max-width: 1400px;
max-width: 1200px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we just utilize 100% or utilize vh.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@BuckinghamAJ BuckinghamAJ BuckinghamAJ requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@collinschreyer-dev @gsa-bri @BuckinghamAJ