fix(tab-indicator): update component to work with mdc tab

[moog16]

• removed component management of --active class
• using foundation.active() method to manage --active class
• using ref to directly set content style instead of state. Animation did not always show
• put computeContentClientRect on component to be called by parent component (mdc-tab)
• moved tab indicator content child to render within content element. This allows the content element to accept a ref, instead of trying to pass it to the child (code is a lot more complex).
  • this change requires us to have a override style for height/width on the --icon .material-icons element. Since .material-icons has a 24px font-size

[codecov-io]

Codecov Report

Merging #215 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master    #215      +/-   ##
=========================================
+ Coverage   98.78%   98.8%   +0.01%     
=========================================
  Files          21      21              
  Lines         824     834      +10     
  Branches       76      78       +2     
=========================================
+ Hits          814     824      +10     
  Misses         10      10

Impacted Files	Coverage Δ
packages/tab-indicator/index.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 05afa91...e2fcaea. Read the comment docs.

[lynnmercier]

dont do this. Instead make the material-icons stylesheet load before the mdc-tab-indicator stylesheet

[moog16]

Actually the .material-icons class has the font-size: 24px. So rearranging the stylesheets will not help here.

I moved the logic around so that we now have the ref on the TabIndicatorElement. We then use .getElementsByClassName, which I think is fine in this case. The call is scoped to just the tabIndicator.