feat(Header): adding prop "sticky" (#730)

This pull request introduces a new `sticky` property to the `Header`
component and updates relevant stories and tests to accommodate this new
feature.

### New Feature: Sticky Header

*
[`packages/ui-header/src/components/Header/Header.tsx`](diffhunk://#diff-0577ff167517db4abebe26dc9be31c541bb6e4df57ff143a7eac6bf46c836df3R14):
Added a `sticky` property to the `Header` component and applied the
appropriate CSS classes when `sticky` is true.
[[1]](diffhunk://#diff-0577ff167517db4abebe26dc9be31c541bb6e4df57ff143a7eac6bf46c836df3R14)
[[2]](diffhunk://#diff-0577ff167517db4abebe26dc9be31c541bb6e4df57ff143a7eac6bf46c836df3R27)
*
[`packages/documentation/src/Components/Header.stories.tsx`](diffhunk://#diff-4db53dc21ffe9e211fb22d1279b74c1b03a721abb0bf8499925445ed290ca158R39):
Updated the story to include the new `sticky` property for the `Header`
component.
*
[`packages/ui-header/src/components/Header/__tests__/Header.test.tsx`](diffhunk://#diff-e1d425a794111d2a786df6d8eb6fe5e3a1e8db4e8518f9bc328ec653495e47faR115-R138):
Added a test case to verify that the `Header` component renders
correctly with the `sticky` property.

packages/documentation/src/Components/Header.stories.tsx

@@ -36,6 +36,7 @@ export default {
 		raw: false,
 		noColors: false,
 		mode: "system",
+		sticky: false,
 	},
 	argTypes: {
 		mode: {

packages/ui-header/src/components/Header/Header.tsx

@@ -11,6 +11,7 @@ export const Header = ({
 	spacing,
 	mode = "system",
 	noColors = false,
+	sticky = false,
 }: HeaderProps) => {
 	const headerClass = clsx(HEADER_CLASSNAME, getSpacing(spacing), {
 		"border-border-accent bg-surface-dark":
@@ -23,6 +24,7 @@ export const Header = ({
 			mode === "system" && !raw && !noColors,
 		"border-b-4": !raw,
 		"border-transparent": !raw && noColors,
+		"sticky top-0 z-50": sticky,
 	});
 	const headerInnerClass = clsx(className, {
 		"mt-0 flex w-full flex-col p-2 md:mx-auto md:max-w-4xl": !raw,

packages/ui-header/src/components/Header/HeaderTypes.d.ts

@@ -22,4 +22,8 @@ export type HeaderProps = {
 	 * @default false
 	 */
 	raw?: boolean;
+	/**
+	 * Whether or not to render the Header component with sticky behavior.
+	 */
+	sticky?: boolean;
 } & SpacingProps;

packages/ui-header/src/components/Header/__tests__/Header.test.tsx

@@ -112,4 +112,28 @@ describe("Header modifiers", () => {
 		expect(header.className).toContain(HEADER_CLASSNAME);
 		expect(header.className).not.toContain("mt-0");
 	});
+
+	it("should render a responsive header tag (system)", async () => {
+		render(<Header sticky>hello</Header>);
+		const header = await screen.findByRole("banner");
+		expectToHaveClasses(header, [
+			HEADER_CLASSNAME,
+			"border-border-medium",
+			"bg-surface-light",
+			"dark:border-border-accent",
+			"dark:bg-surface-dark",
+			"sticky",
+			"top-0",
+			"z-50",
+		]);
+		expectToHaveClasses(header.children[0], [
+			"mt-0",
+			"flex",
+			"w-full",
+			"flex-col",
+			"p-2",
+			"md:mx-auto",
+			"md:max-w-4xl",
+		]);
+	});
 });