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.

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

feat(header): L3-376 Added Header component #168

Merged
merged 32 commits into from
Jul 8, 2024

Conversation

adietrich3074
Copy link
Collaborator

@adietrich3074 adietrich3074 commented Jun 10, 2024

Jira ticket

L3-376

Screenshots
DESKTOP
Screenshot 2024-06-10 102858
Screenshot 2024-06-10 104317
Screenshot 2024-06-10 103245
Screenshot 2024-06-10 102948

MOBILE
Screenshot 2024-06-10 104649
Screenshot 2024-06-10 103048
Screenshot 2024-06-10 103137

Summary

This PR is for the addition of the Header component to the seldon repo. The following components have been added in this PR:

  • Header component
  • Navigation component
  • NavigationList component
  • NavigationItem component
  • NavigationItemTrigger component
  • Search component
  • UserManagement component

Acceptance Test (how to verify the PR)

  • Compare look and feel to Figma located here
  • Compare mobile functionality to what exists on test.phillips

Things to look for during review

  • PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
  • All commit messages follow convention and are appropriate for the changes
  • All references to phillips class prefix are using the prefix variable
  • All major areas have a data-testid attribute.
  • Document all props with jsdoc comments
  • All strings should be translatable.
  • Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

  • Default story called "Playground" should be created for all new components
  • Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
  • Export the component and its typescript type from the index.ts file

Copy link

netlify bot commented Jun 10, 2024

Deploy Preview for phillips-seldon ready!

Name Link
🔨 Latest commit d7ee00c
🔍 Latest deploy log https://app.netlify.com/sites/phillips-seldon/deploys/668c11047bad15000820c909
😎 Deploy Preview https://deploy-preview-168--phillips-seldon.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

<button
type="button"
onClick={handleMenuToggle}
className={classnames(`${px}-header__toggle-btn`, {
Copy link
Contributor

@scottdickerson scottdickerson Jun 11, 2024

Choose a reason for hiding this comment

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

is an aria-label needed here? or will the span be picked up as the accessible name of this button?

Do we need aria-expanded and aria-controls here?
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yes, I believe we do. To that point do we need to pass in an id for the menu which this toggle controls?

@adietrich3074 adietrich3074 marked this pull request as ready for review June 20, 2024 15:52
@scottdickerson scottdickerson self-requested a review July 8, 2024 18:02
Copy link
Contributor

@scottdickerson scottdickerson left a comment

Choose a reason for hiding this comment

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

LGTM

@scottdickerson scottdickerson merged commit 7e196c5 into main Jul 8, 2024
12 checks passed
@scottdickerson scottdickerson deleted the feature/L3-376_Header_Component branch July 8, 2024 18:03
davidicus pushed a commit that referenced this pull request Jul 8, 2024
# [1.27.0](v1.26.2...v1.27.0) (2024-07-08)

### Features

* **header:** L3-376 Added Header component ([#168](#168)) ([7e196c5](7e196c5))
@davidicus
Copy link
Collaborator

🎉 This issue has been resolved in version 1.27.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants