react/ Refactor Illustrated Header and Page Header for semantic markup

[clairesunstudio]

In React and Patternlab, Illustrated Header was rendering duplicated category and publishState fields that are now removed/replaced by the same fields in PageHeader inside of IllustratedHeader. This will fix the ordering issue seen in tnc report, allow the category to be visible for screen readers and print style

The markup of PageHeader has category text repeated in two different tag, one is for SR only and one is for SR hidden. Now they are combined into one.
Before:

  <div class="ma__illustrated-header__content">
    <div class="ma__illustrated-header__category" aria-hidden="true">
      Guide
    </div>

    <section class="ma__page-header">
      <div class="ma__page-header__content">
        <h1 class="ma__page-header__title">
          <span class="visually-hidden">Guide&nbsp;</span>
          Moving to Massachusetts
        </h1>
...

Same fix is also ported into patternlab.

[clairesunstudio]

Based on the failed VR tests in patternlab, the only unexpected change is with the use of the Sub Category filed in PageHeader. Sub Category is not rendered in the markup in the same order as the markup visible to SR in <h1>. This field is only rendered in binder internal template and after reviewing all the court rule (binder internal) pages with the design team, and noticing mostly repetitive/misplaced information in the sub-category or subHeading field in the CMS. The design team decide to take out that field from Mayflower and from the CMS, but need to communicate/discuss about this change with Courts first.