Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(root): add top navigation patterns compatible with React and web components #782

Closed
wants to merge 2 commits into from
Closed

feat(root): add top navigation patterns compatible with React and web components #782

wants to merge 2 commits into from

Conversation

GCHQ-Developer-112
Copy link
Contributor

@GCHQ-Developer-112 GCHQ-Developer-112 commented Jan 23, 2024 •
edited
Loading

Summary of the changes

  • Add top navigation patterns for React users, compatible with TypeScript and JavaScript.
  • Add top nav patterns for web components, compatible with JavaScript
  • Add new optional Stackblitz button to ComponentPreview & CodePreview components
  • Connect Stackblitz SDK to onClick of StackblitzButton component
  • Add cleanup function to useEffect in CookieData component
  • Prettier fixes

Patterns created:

  • Top navigation layout (Top navigation, footer, classification banner, section container)
  • Top navigation layout with mega-menu (Top navigation, footer, classification banner, section container, mega-menu, page header)
  • Top navigation layout with page header (Top navigation, footer, classification banner, section container, page header)
  • Top navigation layout with back to top (Top navigation, footer, classification banner, section container, back to top)

Related issue

#760 #751

Checklist

@github-actions GitHub Actions
Copy link

View your branch deployment here: https://animated-fiesta-gvyom1k.pages.github.io/branches/760-top-navigation-layout-pattern

@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 5 times, most recently from fb5d091 to b1f842b Compare January 24, 2024 15:05
@GCHQ-Developer-112 GCHQ-Developer-112 changed the title WIP: feat(root): add top navigation patterns compatible with React and web components feat(root): add top navigation patterns compatible with React and web components Jan 24, 2024
@GCHQ-Developer-112 GCHQ-Developer-112 marked this pull request as ready for review January 24, 2024 15:10
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 4 times, most recently from 1f7e91b to dbbec9d Compare January 28, 2024 19:08
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 3 times, most recently from 6d0f7d9 to 3bb6c62 Compare January 30, 2024 20:35
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 9 times, most recently from 37505e4 to a6811bb Compare February 8, 2024 11:01
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 4 times, most recently from ec80e01 to 38cab61 Compare February 9, 2024 12:09
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch from 1e5f3ea to bee829b Compare February 15, 2024 09:19
@MI6-255
Copy link
Contributor

MI6-255 commented Feb 15, 2024

If we can not merge this one yet please

@MI6-255
Copy link
Contributor

MI6-255 commented Feb 15, 2024

Screenshot Not directly related to your PR, but a bug that'll be made more obvious by it that we'd need to action before

@MI6-255
Copy link
Contributor

MI6-255 commented Feb 15, 2024 •
edited
Loading

Has this been tested when built? I'd be keen to try this in our pipelines to check it works (even if just to test and then remove it again)

@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch from bee829b to ae72956 Compare February 15, 2024 15:29
@MI6-255
Copy link
Contributor

MI6-255 commented Feb 15, 2024

For someone going through on the next issue to fix the code snippets, how is it that Alert's React example would work with multiple components? So you'd put the Fragment around it, but then doesn't the Fragment then display in the code snippet? Which we wouldn't want? I didn't see this in the Patterns though, unless I missed it, so I wondered how we'd go about it?

@GCHQ-Developer-112
Copy link
Contributor Author

Has this been tested when built? I'd be keen to try this in our pipelines to check it works (even if just to test and then remove it again)

I have built locally using the build command and everything seems fine. This PR currently passes all the workflow checks. The workflow checks on branches is very similar if not the same as the workflow checks run before a release. I was worried about the creation of data nodes but given it hasn't failed now, I assume it will be ok

@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 3 times, most recently from 60aa1ec to 27f82bf Compare February 20, 2024 08:54
MI6-255
MI6-255 requested changes Feb 21, 2024
View reviewed changes
Copy link
Contributor

@MI6-255 MI6-255 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awaiting fix for <>

@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch from 27f82bf to 28deb9c Compare February 29, 2024 16:07
@GCHQ-Developer-112 GCHQ-Developer-112 marked this pull request as draft March 4, 2024 10:17
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 4 times, most recently from bc35dde to e955406 Compare March 5, 2024 19:56
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch 2 times, most recently from 39f736c to d4c8b4c Compare March 20, 2024 09:51
@GCHQ-Developer-112
feat(root): add top navigation and side navigation patterns compatibl…
974c914 
…e with React and web components

Add top navigation and side navigations patterns for React users, compatible with TypeScript and
JavaScript. Add top navigation and side navigation patterns for web components, compatible with
JavaScript. Prettier fixes

. #760 #764
@GCHQ-Developer-112
feat(root): add stackblitz button and add new variant of "copy code" …
3b43731 
…button for small screen sizes

Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz
SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData
component

. #751
@GCHQ-Developer-112 GCHQ-Developer-112 force-pushed the 760-top-navigation-layout-pattern branch from d4c8b4c to 3b43731 Compare March 22, 2024 15:59
@GCHQ-Developer-112 GCHQ-Developer-112 deleted the 760-top-navigation-layout-pattern branch May 30, 2024 12:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MI6-255 MI6-255 MI6-255 requested changes

@GCHQ-Developer-299 GCHQ-Developer-299 GCHQ-Developer-299 left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@GCHQ-Developer-112 @MI6-255 @GCHQ-Developer-299