link styling for findings content

[bpdesigns]

Acceptance criteria

• [x] remove the paperclip and arrow icons for the "copy," "expand," and "contract" actions on the findings page and replace with text links (styling below)
• [x] show only 5 rows of text for findings by default

Implementation notes

• the following is for the "findings text" column. This is the column that we'll have the "expand" and "hide text" feature.
  • for the "corrective action text" column add a copy button
• "copy text" button should copy only the text in the specified cell.
• the "..." should come at the end of the last row of text in the collapsed state.
• the "..." should come after the last full word that can fit on the line if thats easy enough to do
• the "expand," "hide text," and "copy" links should all be flush right to the bottom of the cell they exist in.

Design notes

active state

text copied state

expanded text state

[danielnaab]

@bpdesigns any of the 3 columns (including CFDA #) might be more than 5 rows of text - should we put the links in the finding column instead, or duplicate expand/collapse links in each of the three cells?

The problem with duplicating it is the max height should apply to the whole row, not just the cell.

[bpdesigns]

• [x] Add the "copy/ expand" to the "corrective action plan" column as well
• [x] "CFDA awards" column do not add copy/ expand." If "CFDA awards" cell has text hidden by the limited view of lines of text that is okay. Lets indicate with three dots ". . . " in the last line where there is text hidden.

Let me know if this is clear @danielnaab

[danielnaab]

Hope this is an okay alternative... Due to browser compatibility issues and a desire to not add additional third-party Javascript dependencies, I used a faded line to indicate clipped text rather than an ellipsis.

[bpdesigns]

Thanks @danielnaab, that works.

One update based on this screenshot - lets underline the expand link.