test: update styleguide to isolate by state

[wusteven815]

• Refactor styleguide page to filter components by if it's rendered, instead of by CSS variables
• Refactor styleguide test to have sections be soft steps instead of its own step
  • Refactor buttons section to be a function component
• Refactor styleguide test to run in parallel instead of serial

[bmingles]

Instead of passing this around via props, I would consider encapsulating the hash matching functionality in a custom hook. Something like:

function useIsHash() {
  const [hash, setHash] = useState(window.location.hash);

  useEffect(() => {
    const hashChangeHandler = () => setHash(window.location.hash);
    window.addEventListener('hashchange', hashChangeHandler);
    return () => window.removeEventListener('hashchange', hashChangeHandler);
  }, []);

  const isHash = useCallback(
    (label: string, processLabel = false): boolean => {
      const newLabel = processLabel
        ? label.toLocaleLowerCase().replaceAll(' ', '-')
        : label;

      return hash === `#${newLabel}` || hash === '';
    },
    [hash]
  );

  return isHash;
}

Then you can just use it in any component like:

const isHash = useIsHash();

[dsmmcken]

is there something that can be done so that it doesn't have to be littered all over the place?

[dsmmcken]

Closing in favor of ticket inspired by this one: #2000