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

Hds 1672 skip link #1049

Merged
merged 9 commits into from
Jul 13, 2023
Merged

Hds 1672 skip link #1049

merged 9 commits into from
Jul 13, 2023

Conversation

minnas
Copy link
Contributor

@minnas minnas commented Jun 15, 2023 •
edited
Loading

Description

This pr adds skip link support to header component

Motivation and Context

HDS-1672

How Has This Been Tested?

Tested locally

Demo

Skip link react

Base automatically changed from hds-1448-action-bar to release-3.0.0 June 22, 2023 09:49
@minnas minnas marked this pull request as ready for review July 3, 2023 09:39
harriplappalainen
harriplappalainen reviewed Jul 5, 2023
View reviewed changes
Copy link
Contributor

@harriplappalainen harriplappalainen left a comment

Choose a reason for hiding this comment

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

Great work 🥇 I had a couple of suggestions.

packages/react/src/components/header/Header.stories.tsx
export const WithSkipLink = (args) => {
return (
<Header {...args} onDidChangeLanguage={languageChangedAction}>
<Header.SkipLink skipTo="#content" label="Skip To Content" />
Copy link
Contributor

Choose a reason for hiding this comment

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

The SkipLink is quite big, it covers the whole logo and part of service name. Although the old version does that too (on laptop size) but isn't quite so big. Where did you get the designs for it? I can't find any new designs.
Edit: Actually the old implementation displays more to the left if there is space (check doc site header's Skip to content link).

Copy link
Contributor

Choose a reason for hiding this comment

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

Now I noticed that the new Header doesn't have max width set so I can't test where this SkipLink settles if there is space on the side. So I guess we'll see to this later if need be.

packages/react/src/components/header/components/skipLink/SkipLink.module.scss Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.module.scss Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.module.scss Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.module.scss Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.tsx Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.tsx Outdated Show resolved Hide resolved
packages/react/src/components/header/components/skipLink/SkipLink.tsx Outdated Show resolved Hide resolved
site/src/docs/components/header/index.mdx Outdated Show resolved Hide resolved
harriplappalainen
harriplappalainen reviewed Jul 12, 2023
View reviewed changes
packages/react/src/components/header/Header.stories.tsx Outdated
);
};

export const WithSkipLinkAriaLabel = (args) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think the aria-label support is big enough of a feature to showcase it in an own story. More suitable might be to mention it in the docs?

harriplappalainen
harriplappalainen approved these changes Jul 12, 2023
View reviewed changes
Copy link
Contributor

@harriplappalainen harriplappalainen left a comment

Choose a reason for hiding this comment

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

Nice work 🏅 Making this into an own component was a good idea so it's perfectly optional to use, and the logic doesn't clutter another component such as Header.

@minnas minnas merged commit 1e65f1b into release-3.0.0 Jul 13, 2023
5 checks passed
@minnas minnas deleted the hds-1672-skip-link branch July 13, 2023 10:54
@harriplappalainen harriplappalainen restored the hds-1672-skip-link branch August 30, 2023 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@harriplappalainen harriplappalainen harriplappalainen approved these changes

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

Successfully merging this pull request may close these issues.
2 participants
@minnas @harriplappalainen