New approach for focusing

[lukemelia]

Currently, ember-freestyle supports focusing a component via a f query param that is most commonly set by clicking a "focus" icon on a freestyle-usage component. When this query param is set, a usage component is shown if the slug includes the query param value.

The current system has some funky interactions where focusing a usage results in aspects of the styleguide behaving in ways that you wouldn't expect. For example, focusing a particular usage within a collection variant results in the collection showing all variants.

In addition, the mechanism for choosing a section or subsection uses a different focus mechanism and query param for doing what is essentially the same thing: hiding content outside the focused hierarchy.

I propose a new approach:

1. Most freestyle components will support focusing and would include the focus icon.
2. Components would need to be provided with a slug, or generate one. In the case of freestyle-section and freestyle-subsection, the slug could be generated from the section/subsection names.
3. The logic for hiding/showing a component is simple: this component should be shown if it or one it's parents is focused (where "focused" is defined as the query param being an exact match with the component's slug). The "parent" logic would be based on walking the parentView hierarchy (simpler but not glimmer-component compatible) OR alternately, walking the DOM hierarchy and looking for elements registered with a service.

I'm sure I'm missing details and considerations, but I wanted to put this up as a starting point.