Portfolio Shell Page

[jonnalley]

User Story

As an OPRE staff member, I want to know the most basic information of a portfolio I'm viewing so that I can clearly distinguish and comprehend information about a single portfolio.

Acceptance Criteria

• [x] User can see portfolio name, division, and description when viewing the details of a portfolio.
• [x] User can be directed to the corresponding portfolio page on the ACF public website, if applicable.

---

Tasks

• [x] Gather portfolio descriptions from OPRE/website @andressacurvelo
• [x] Decide on URL/routes for portfolio pages (unique portfolio number vs. name)

UX:

• [x] Identify/confirm portfolios and division
• [x] Identify how many characters to truncate
• [x] Provide design assets and determine interactions for the hiding or showing of full description text.
• [x] Procure and communicate the ACF public website links for each portfolio
• [x] Assess what/if any further research is needed for UI header and navigation
• [x] Solicit initial feedback from primary stakeholders on options for header @andressacurvelo
• [x] Create design assets for header and preliminary navigation

Dev:

• [x] Create header logo, search/login components, etc... @tdonaworth
• [x] Craft mechanism to import static data @johndeange
• [x] Create any other frontend components to display title, division, and description
• [x] Merge in new flask backend into this branch
• [x] Populate persistence layer with name, division, description, and destination URL (if applicable) @johndeange
• [x] Add e2e tests
• [x] Add a11y tests
• [x] Add "Read less" option for portfolio description once the user has already opted to "Read more..."

Definition of Done Checklist

• [ ] Usability validated
• [x] UI works as designed
• [x] OESA: Code refactored for clarity
• [x] OESA: Dependency rules followed
• [x] Automated unit tests passed
• [x] Automated integration tests passed
• [x] Automated quality tests passed
• [x] Automated load tests passed
• [x] Automated a11y tests passed
• [x] Automated security tests passed
• [x] 90%+ Code coverage achieved
• [x] PR(s) have been merged to main
• [ ] Design/tech debt eliminated
• [ ] Build process updated
• [ ] Documentation updated or added
• [ ] Feature flags/toggles created

Additional Context & Resources

• Use a portfolio acronym in the URL route for each portfolio
• Icons shown in Figma will be added in a later story
• Current navigation for MAPS

*18F Wiki on User Needs and Use Cases

[kimschulke]

There are currently 9 portfolios across 4 Divisions:

Division of Child and Family Development (DFCD)

• Child Welfare Research
• Head Start Research
• Child Care Research

Division of Economic Independence (DEI)

• Welfare Research

Division of Family Strengthening (DFS)

• Adolescent Development Research
• Healthy Marriage and Responsible Fatherhood Research
• Home Visiting Research

Division of Data and Improvement (DDI)

• Program Team Support
• Data Governance

Please note that "program team support "and "data governance" might be combined into one portfolio that focuses on OPRE internal work. To be determined.

[kimschulke]

Attached mock ups for portfolio shell pages. Still need to determine how many characters before truncating description text. TBD.

[kimschulke]

Heres what is looks like after you click "read more" to expand the full description text

[kimschulke]

@andressacurvelo is working to gather portfolio descriptions and will link here once they are compiled

[andressacurvelo]

@jonnalley about the number of characters before the read more link. I think that 238 is enough, so we have space for the “…” ending the text and the “read more” link in just two lines.

[kimschulke]

There will now be 8 portfolios instead of 9.

Combining "Program Team Support" and "Data Governance" into Social Science Research Demonstration (SSRD) under the Division of Data and Improvement (DDI)

[kimschulke]

Here is the content for portfolio names, divisions and descriptions. https://docs.google.com/document/d/1rcuTL6MxtQmZ4YgJ6XYh4uWz2M261Xv5U_ZKxj0Rwnw/edit

** Do not include acronyms in the portfolio names. We will find another solution to incorporate the acronyms

** SSRD portfolio description is still currently being drafted. Will share an update once it's ready

[kimschulke]

Current design for Portfolio Page and UI header/navigation here: https://www.figma.com/file/dsQFe6G2KjcTWNq7NNZujm/View-Portfolio-Details-2?node-id=706%3A12865

** Please note we are still doing user research / design feedback with OPRE. Design may change depending on feedback.

[jonnalley]

@kimschulke @andressacurvelo probably looking to have you check off the first two items on the DoD. Since we're not doing usability testing on the whole page just yet, you we can strike through that one or amend it as desired.