Content below Sky Nav animates again

[gerardo-rodriguez]

Overview

This PR fixes a bug where the content below the Sky Nav menu was not animating open/closed.

Changes include:

• transition the document.body instead of all of the wrapper containers
• update demo with more up-to-date header markup

Screenshots

Testing

The best test method will be using your local Cloud Four WordPress site via npm link.

Checkout both repos

1. Checkout out the cloudfour.com-wp main branch locally
2. Checkout this cloudfour.com-patterns branch locally

In the cloudfour.com-patterns repo

1. npm ci && npm run build && npm link

In the cloudfour.com-wp repo

1. In the theme directory: npm ci && npm link @cloudfour/patterns && npm run build

Confirm

• At smaller viewports, the content below the Sky Nav should animate open/closed (try various pages)

Undo npm link

1. In the WP repo: npm uninstall --no-save @cloudfour/patterns && npm i
2. In the Patterns repo (delete global symlink): npm uninstall

---

• Closes The Sky Nav should animate open/closed at smaller viewports #1984

[changeset-bot]

🦋 Changeset detected

Latest commit: 84232b6

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

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Patch

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 cloudfour-patterns ready!

Name	Link
🔨 Latest commit	84232b6
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/62e301cb603aa8000927807a
😎 Deploy Preview	https://deploy-preview-1986--cloudfour-patterns.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 settings.

[tylersticka]

Has someone tested this in all of our optimized browsers? I remember on the last version of the site we had to move away from animating document.body, but I can't remember if it was IE or some mobile browser that had issues with it.

[gerardo-rodriguez]

Has someone tested this in all of our optimized browsers? I remember on the last version of the site we had to move away from animating document.body, but I can't remember if it was IE or some mobile browser that had issues with it.

@tylersticka I was able to confirm it works in the following browsers:

• macOS Firefox
• macOS Chrome
• macOS Edge
• macOS Safari
• ios Safari via Simulator

[tylersticka]

I have not followed all of the described testing steps, but if this has been thoroughly tested and approved by two developers that's good enough for me. If it's misbehaving on production we'll spot it before launch (🤞)