feat: Update pfe-content-set to accept custom container queries

[alazzara]

Update pfe-content-set to accept custom container queries

Discovery doc:

• https://docs.google.com/document/d/15sfSRWp4OAy2ndbXqHp-nuPjj7kYbyP1zbTqxiHfvo8/edit#heading=h.ughne74p2l4j

Sandbox link:

• https://web-dev-drupal-alazzara.dev.a1.vary.redhat.com/en/pfe-content-set-test

---

What has changed and why

• Updated pfe-content-set.js - to update offsetWidth based on a value given in a new data attribute called "pfe-breakpoint". This was done to fix and issue with tabs spilling off the page by giving the ability to set when the tabs change to accordions. You can input values with or without px and it will work (the code strips out any non-numeric values). This is to insure the code wont break if someone happens to put 500px instead of just 500.

Testing instructions

Test cases:

1. If I set the value of the attribute pfe-breakpoint to 500
   a. And I reload the page at window size 300, i expect that
   i. The content set should become accordions
   b. And I reload the page at window size 550, i expect that
   i. The content set should become tabs
2. If I set the value of the attribute pfe-breakpoint to 900
   a. And I reload the page at window size 800, i expect that
   i. The content set should become accordions
   b. And I reload the page at window size 1000, i expect that
   i. The content set should become tabs
3. If I do not set the value of the attribute pfe-breakpoint
   a. And I reload the page at window size 600, i expect that
   i. The content set should become accordions
   b. And I reload the page at window size 800, i expect that
   i. The content set should become tabs
4. If I load the page at window size 600, And then I use web inspector to add the attribute pfe-breakpoint
   a. with a value of 400 after the page has loaded
   i. The content set should become accordions
   b. with a value of 650 after the page has loaded
   i. The content set should become tabs

Edge case:
1. Test using px and no px in the value of pfe-breakpoint

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 60.7.2 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Galaxy S9 Firefox
• iPhone X Safari
• iPad Pro Safari
• Pixel 3 Chrome

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one feature request or issue (no stragglers)?
• Did browser testing pass?
• Did you update or add any necessary documentation (README.md, WHY.md, etc.)?
• Was this feature demo'd and the design review approved?
• Did you update the CHANGELOG.md file with a summary of this update?

Be sure to share your updates with the patternfly-elements-contribute@redhat.com mailing list!

[castastrophe]

Looks great! Love this update. Needs a changelog.

[castastrophe]

A couple small notes for the demo page

[starryeyez024]

Late? Gimme Ten Minutes

[starryeyez024]

@castastrophe this PR is stuck on your requested changes, can you approve when you have a moment? Thx!

[starryeyez024]

Large Galaxy, Tiny Me