fix: Storybook bug fixes; jump links imports

[castastrophe]

Goal 1: Fix any stories not currently updating

Goal 2: Add context support to the storybook instances.

The current approach of using the built-in storybook background color settings is putting the background color outside the iframe that contains the components. That means that the components can't detect the color or read the theme property being set. I removed that setting and instead added a theming function to the utilities in storybook. Not every component responds to the context so I left it as opt-in. You can invoke the contexts in the storybook instance by adding:

tools.context();

This will set background color and the theme custom property on the body tag of the iframe containing the web component:

    document.querySelector("body").style.backgroundColor = "#fff";
    document.querySelector("body").style.setProperty("--theme", "light");

Testing

Basic context

1. Open the storybook instance.
2. Navigate to the Accordion story.
3. Set the context to complement.

Expect: The background color should change to #0477a4 and the accordion should respond to that context by invoking the saturated theme styles (white text, etc.)

Custom context

1. Open the storybook instance.
2. Navigate to the Accordion story.
3. Set the context to custom.
4. Choose a color from the color picker.
5. Choose a context from the custom context dropdown.

Expect: The background color should change to the hex value in the color picker and the accordion should respond to that context by invoking the selected theme style.

Resetting the selections

1. Run through the steps in the Custom context test case.
2. To clear the custom selection, go to the first dropdown labeled Context and select lightest.
3. The background should reset to the lightest color and the custom color and context dropdowns should disappear from the UI.

Goal 3: Fix imports for jump links to enable access to the nav and panel properties objects.

[kylebuch8]

@castastrophe I can't seem to remove the custom background color after I've chosen one. Is that a bug?

[castastrophe]

@kylebuch8 Updated this PR and added additional test cases to cover the resetting of the custom colors! Thanks!

[castastrophe]

Bump @kylebuch8 or @starryeyez024. This adds the theming attribute support to storybook.

[castastrophe]

On holding pending base class PR updates

[castastrophe]

@starryeyez024 There is an issue importing the fonts from Google isn't there? We're not referencing the Red Hat fonts in the project yet but if we do the weight mappings are off right?

[starryeyez024]

PFE can/should use the google font import method since its public, and the variables in the theme should match google fonts. https://github.com/patternfly/patternfly-elements/pull/1180/files#diff-72f58e02c1bef4a30c0860a93753d6c664bcc75326b9dc79911d410bf1c0d91bR9

Redhat-theme makes use of the font on static, and set different font weights:
https://gitlab.corp.redhat.com/uxdd/redhat-theme/-/merge_requests/103/diffs#8032f081053a55c41b3898c25e235f27f1daf4f6_43_43

[starryeyez024]

It seems like this is totally fine as-is. The typography branch does the work of having the components load the RH fonts, so this just means storybook will be ready. And Overpass is working too currently 👍

[kylebuch8]

Lives Generously, Though Miserly
🤷