feat(snippets): show/hide link functionality

[alizaberger]

Jira issue

Describe your changes

Adds a "Show/Hide" link to toggle the visibility of code snippets (not the results pane) in the StackSnippetView. This corresponds to how snippets preview worked in the old editor. The link is only rendered when the hide attribute is "true".

PR Checklist

• All new/changed functionality includes unit and (optionally) e2e tests as appropriate
• All new/changed functions have /** ... */ docs
• I've added the bug/enhancement and other labels as appropriate

Environment(s) tested

• Device: desktop
• OS: [e.g. iOS]
• Browser: chrome
• Version [e.g. 22]

Additional context

TODO: Need to add the same functionality to the preview pane in the MD+P mode.

[changeset-bot]

🦋 Changeset detected

Latest commit: c2da4c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks-editor	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-editor ready!

Name	Link
🔨 Latest commit	c2da4c4
🔍 Latest deploy log	https://app.netlify.com/sites/stacks-editor/deploys/6810e0c8dc0921000808e5b8
😎 Deploy Preview	https://deploy-preview-430--stacks-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[threefjefff]

This matches current functionality. Out of scope for this PR, but I wonder if we could improve on what's here by always showing the show/hide accordian rather than keying it off of the snippet config (and instead setting the default based on that config value)

[alizaberger]

I also thought this behavior was interesting but I spoke to @KyleMit and it seems like users want to be able to control how the final post will look and if the snippet will have a show/hide link above it.

[KyleMit]

I think what @threefjefff is still inline with my use cases (although agreed this matches existing behavior). It wouldn't bug me if the link to be able to show/hide was always visible, but the default respected the value set by the config in the post.

That way OP has first say in whether it should be collapsed or visible, but users could also quickly collapse existing snippets in answers

[threefjefff]

Pretty sure this is just a netlify thing, but it looks like the icon isn't being rendered properly in the preview there.

Functionality works great. Happy with the testing

[alizaberger]

@threefjefff Can you please take a look at the failing test and see if it has something to do with what I changed? I can't seem to figure it out

[alizaberger]

Pretty sure this is just a netlify thing, but it looks like the icon isn't being rendered properly in the preview there.

Functionality works great. Happy with the testing

No, this is happening on my local machine too, but the new snippets icon is acting the same for me locally. @dancormier any idea why the stacks icon is not rendering correctly?

[dancormier]

@alizaberger I'm looking into the icon issue. In the meantime, can you provide instructions on how to test this functionality?

[dancormier]

@alizaberger the editor relies on CSS definitions for icons (as opposed to importing SVGs), and only a small subset of icons are included in the icons CSS (see also https://github.com/StackExchange/Stacks-Icons/blob/production/README.md#using-the-css-icons).

To use this icon, I suggest importing the icon needed in src/styles/icons.css like this:

…
.svg-icon-bg.iconArrowDownSm {
    --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/ArrowDownSm.svg");
}
…

[alizaberger]

@alizaberger I'm looking into the icon issue. In the meantime, can you provide instructions on how to test this functionality?

@dancormier In the snippets preview paste a valid snippet in markdown mode, with the hide param set to true.

<!-- begin snippet: js hide: true console: true babel: null babelPresetReact: false babelPresetTS: false -->

<!-- language: lang-js -->

    console.log("test");

<!-- language: lang-css -->

    .test {
      position: fixed;
    }

<!-- language: lang-html -->

    <div>test</div>

<!-- end snippet -->

This should enable the show/hide link for the snippet in rich text mode

[dancormier]

Thanks for the changes @alizaberger. I noticed a minor styling issue and have suggested some changes. Other than that minor issue, this is good to go from my perspective