feat(pageheader): new component [khcp-7898]

[kaiarrowood]

Summary

Add new AppPageHeader component for KHCP-7898.
Also adds support to use new design tokens.

Figma: https://www.figma.com/file/8k70HMMdPj98APLaexYJyR/Header?type=design&node-id=11%3A7494&mode=dev

PR Checklist

• Naming & Structure: the files and package structure use the conventions outlined in the Creating a Package docs.
• Tests pass: check the output of all package unit and/or component tests.
  • If this PR is the result of a bug, test coverage was added accordingly.
• Functional: all changes do not break existing APIs, but if so, a BREAKING CHANGE commit is in place to bump the major version.
• Conventional Commits all commits follow the conventional commit standards outlined in the main README.
• Docs: includes a technically accurate README, and the docs have been updated accordingly based on the changes in this PR.

[adamdehaven]

A couple things I noticed that seem like they need to be addressed in the UI:

• The spacing between the title and the badge seems too close when compared to the Figma
  

• This component doesn't appear to be ideally responsive below certain viewport sizes. Can you please add some media queries (using the kui-breakpoint-* tokens for media queries) and tweak the layout a bit so that the items properly stack on mobile?

• If the title text is too long, it send the action menu off of the page. I think we need to add a flex container around the title and action menu (or whatever the right-side content is called) so that the title can wrap to a new line and the action menu remains visible on the right
  

[kaiarrowood]

A couple things I noticed that seem like they need to be addressed in the UI:

• The spacing between the title and the badge seems too close when compared to the Figma
  

Fixed

• This component doesn't appear to be ideally responsive below certain viewport sizes. Can you please add some media queries (using the kui-breakpoint-* tokens for media queries) and tweak the layout a bit so that the items properly stack on mobile?

Added mobile breakpoint styles

• If the title text is too long, it send the action menu off of the page. I think we need to add a flex container around the title and action menu (or whatever the right-side content is called) so that the title can wrap to a new line and the action menu remains visible on the right
  

Truncating the title in that scenario instead as agreed by design. Thanks for the help fixing this one @portikM !

@adamdehaven ready for re-review