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(components): post-header #3837

Merged
merged 13 commits into from
Nov 12, 2024
Merged

feat(components): post-header #3837

merged 13 commits into from
Nov 12, 2024

Conversation

gfellerph
Copy link
Member

Added a provisional post-header component with some basic functionality in place. This component is not finished in this state and is intended to provide a skeleton for the other header components so integration is easier to test.

This PR adds the post-header component in a preview state. Some of the functionality is already in place and can be used for testing. The intention is, that this component is already available when building the other components for the header to make integration easier to test.
This allows to call the media mixins with keys from the breakpoint list directly, e.g. `@include media.max(lg) { }`.
@gfellerph gfellerph requested a review from a team as a code owner October 28, 2024 12:37
@gfellerph gfellerph requested a review from alizedebray October 28, 2024 12:37
Copy link

changeset-bot bot commented Oct 28, 2024

🦋 Changeset detected

Latest commit: 972e41e

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

This PR includes changesets to release 16 packages
Name Type
@swisspost/design-system-components Minor
@swisspost/design-system-components-angular Minor
@swisspost/design-system-components-react Minor
@swisspost/design-system-components-angular-workspace Patch
@swisspost/design-system-documentation Patch
@swisspost/design-system-nextjs-integration Patch
@swisspost/design-system-styles Minor
@swisspost/design-system-tokens Minor
@swisspost/design-system-intranet-header Minor
@swisspost/design-system-icons Minor
@swisspost/design-system-migrations Minor
@swisspost/design-system-styles-primeng Minor
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header-workspace Patch
@swisspost/design-system-styles-primeng-workspace Patch
@swisspost/design-system-intranet-header-showcase 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

@swisspost-bot
Copy link
Contributor

swisspost-bot commented Oct 28, 2024

Related Previews

Copy link
Contributor

Choose a reason for hiding this comment

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

Please reset changes in this file.

Copy link
Member Author

Choose a reason for hiding this comment

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

Can we keep it to document the required markup until it's in storybook?

// in Safari and Chrome because the header and the footer are yellow, the yellow surface stretches
// beyond the body. If this is not yellow, overscrolling reveals a white background and the header
// suddenly seems in the middle of the page.
background-color: color.$yellow;
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice! Do we want this to be yellow for Cargo too?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep

packages/styles/src/elements/body.scss Outdated Show resolved Hide resolved
/**
Gets a breakpoint from the map based on the key
*/
@function get-device-size($size) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you move this function to the "functions" folder?

Comment on lines 16 to 17
private throttledScroll = () => this.handleScrollEvent();
private debouncedResize = throttle(50, () => this.handleResize());
Copy link
Contributor

Choose a reason for hiding this comment

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

There seem to be a mismatch with the throttled/debounced naming.

@gfellerph gfellerph requested a review from alizedebray November 8, 2024 15:03
gfellerph and others added 3 commits November 12, 2024 14:11
Added prototypes for the main navigation and the megadropdown for
structure testing. Styles, tests and documentation is still missing.

---------

Co-authored-by: Alizé Debray <[email protected]>
@gfellerph gfellerph merged commit 6aa530e into main Nov 12, 2024
11 checks passed
@gfellerph gfellerph deleted the header branch November 12, 2024 13:35
gfellerph pushed a commit that referenced this pull request Nov 18, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/[email protected]

### Major Changes

- Removed the deprecated `.pi-*` classes, which were previously used to
display icons. The `post-icon` component should now be used instead. (by
[@alizedebray](https://github.com/alizedebray) with
[#3947](#3947))

### Minor Changes

- Added custom styles for the ordered lists. (by
[@veyaromain](https://github.com/veyaromain) with
[#3755](#3755))

### Patch Changes

- Fixed issue where the focus ring was not appearing on inactive chips.
(by [@schaertim](https://github.com/schaertim) with
[#3820](#3820))

## @swisspost/[email protected]

### Minor Changes

- Added a provisional post-header component with some basic
functionality in place. This component is not finished in this state.
(by [@gfellerph](https://github.com/gfellerph) with
[#3837](#3837))

- Added new Menu Button components (post-menu-button, post-menu-trigger,
and post-menu-item) for creating accessible dropdown menus. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3795](#3795))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Minor Changes

- Added a provisional post-header component with some basic
functionality in place. This component is not finished in this state.
(by [@gfellerph](https://github.com/gfellerph) with
[#3837](#3837))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Minor Changes

- Added a provisional post-header component with some basic
functionality in place. This component is not finished in this state.
(by [@gfellerph](https://github.com/gfellerph) with
[#3837](#3837))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]



## @swisspost/[email protected]



## @swisspost/[email protected]



## @swisspost/[email protected]

### Minor Changes

- Added new Menu Button components (post-menu-button, post-menu-trigger,
and post-menu-item) for creating accessible dropdown menus. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3795](#3795))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants