Line Diagram | Collapsible branches

[thecristen]

Summary of changes

Asana Ticket: Line Diagram | Collapsible branches

• Adds styles for collapsed and expanded branches. It's a delightful mix of JavaScript logic, SVG attributes, rather complex CSS rules...
• Breaks up the larger React component into a few smaller ones
• Reuses the existing <ExpandableBlock /> component to handle collapsing/expanding sections of the line diagram
• Bugfix - removes the "View schedule" link from the terminus stops
• IE fix - removes the usage of "unset" in our CSS
• Apparently I'm the first to use a lodash function here... so I moved the package from devDependencies.

Screenshots!

IE11 preview

Video: https://app.crossbrowsertesting.com/public/i31732a965037ca8/livetests/35727589/videos/z9d8a4cb074e2a020941?test_hash=e0aed05e

Firefox preview

Safari preview

Chrome preview

[ingridpierre]

Really small presentational changes. Can we:

• increase the border radius, so that the expand/collapse control has more rounded shoulders.
• vertically center the three dots more inside the expansion control
• make the lines thinner (it's taking a lot of room in mobile especially), instead of 10px and 16px wide, let's try 8 and 12?

Current:

Desired (roughly):

[digitalcora]

This change doesn't seem to have propagated to package-lock.json (I think something should have flipped to dev: false?)

[thecristen]

I'm not exactly sure how package-lock is supposed to reflect this change, but I've run the update and committed what it gave me.

[digitalcora]

I had thought since we moved a package from devDependencies to dependencies that this would be reflected in the lockfile by that dependency flipping from "dev": true to "dev": false. But since nothing changed (aside from the usual optional fights), I'm thinking we already had a package in our production dependencies that was pulling in Lodash as a dependency of its own, hence it was already marked as "dev": false.

tl;dr: we don't have to commit this change to the package-lock 😅

[thecristen]

@ingridpierre @digitalcora Made some updates that should address the comments here.

[codecov]

Codecov Report

Merging #345 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #345   +/-   ##
=====================================
  Coverage      94%    94%           
=====================================
  Files         356    356           
  Lines        5918   5918           
=====================================
  Hits         5563   5563           
  Misses        355    355

[ingridpierre]

Looks so good, one teeny adjustment -- can we reduce the padding on .m-schedule-diagram__stop from 1rem all the way around to: 1rem .5rem? Decreasing the horizontal padding wins just a tiny bit more line length, which I'd like to take where I can get it :)

[thecristen]

@ingridpierre done!
@digitalcora I've gone ahead and renamed first/last to origin/destination and also was able to deprecate the isEnd prop!

I've also updated the logic to expand short branches by default. So now Line Diagram | Don't collapse short branches is covered.

[digitalcora]

Looking good @thecristen, I'm glad we have your CSS and React wizardry on this task 🙇‍♀

[digitalcora]

@thecristen Looks like some things you extracted to separate commits are also still present in the commit message for the "main" commit.