feat(header): add Header component

.changeset/config.json

@@ -9,6 +9,7 @@
   "ignore": [
     "@contentful/f36-avatar",
     "@contentful/f36-image",
+    "@contentful/f36-header",
     "@contentful/f36-navlist",
     "@contentful/f36-website"
   ],

.changeset/rude-lamps-tan.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-header': minor
+---
+
+Add Header component

packages/components/header/README.mdx

@@ -0,0 +1,51 @@
+---
+title: 'Header'
+type: 'layout'
+status: 'alpha'
+slug: /components/header/
+github: 'https://github.com/contentful/forma-36/tree/main/packages/components/header'
+storybook: 'https://f36-storybook.contentful.com/?path=/story/components-header--default'
+typescript: ./src/Header.tsx
+---
+
+The Header component exposes a way to build visually consistent hierarchy into apps that look and feel like part of the Contentful UI.
+
+Note that the Header is not meant to be used when building navigation, for this case you will be better served by `Navbar`.
+
+## Import
+
+```jsx static=true
+import { Header } from '@contentful/f36-components';
+// or
+import { Header } from '@contentful/f36-header';
+```
+
+## Examples
+
+### Empty Header with title (variant name)
+
+```jsx file=./examples/WithTitle.tsx
+
+```
+
+### With breadcrumbs & back button
+
+```jsx file=./examples/WithBreadcrumbs.tsx
+
+```
+
+### With actions
+
+```jsx file=./examples/WithActions.tsx
+
+```
+
+### With filters
+
+```jsx file=./examples/WithFilters.tsx
+
+```
+
+## Props (API reference)
+
+<PropsTable of="Header" />

packages/components/header/examples/WithActions.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Flex } from '@contentful/f36-components';
+import { Header } from '@contentful/f36-header';
+import tokens from '@contentful/f36-tokens';
+
+export default function HeaderExample() {
+  return (
+    <Header
+      title="Article"
+      actions={
+        <Flex
+          alignItems="center"
+          gap={tokens.spacingS}
+          justifyContent="flex-end"
+        >
+          <Button variant="secondary" size="small">
+            Suggest Alternatives
+          </Button>
+          <Button variant="positive" size="small">
+            Save
+          </Button>
+        </Flex>
+      }
+    />
+  );
+}

packages/components/header/examples/WithBreadcrumbs.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header } from '@contentful/f36-header';
+
+export default function HeaderExample() {
+  return (
+    <Header
+      title="Article"
+      withBackButton={true}
+      backButtonProps={{ onClick: () => console.log('back button click') }}
+      breadcrumbs={[
+        {
+          content: 'Content Types',
+          url: '#',
+        },
+      ]}
+    />
+  );
+}

packages/components/header/examples/WithFilters.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextInput } from '@contentful/f36-components';
+import { Header } from '@contentful/f36-header';
+
+export default function HeaderExample() {
+  return (
+    <Header
+      title="Entries"
+      filters={<TextInput size="small" placeholder="Search" />}
+    />
+  );
+}

packages/components/header/examples/WithTitle.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Header } from '@contentful/f36-header';
+
+export default function HeaderExample() {
+  return <Header title="Content Types" />;
+}

packages/components/header/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@contentful/f36-header",
+  "version": "4.0.0-alpha.1",
+  "description": "Forma 36: Header component",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@contentful/f36-button": "^4.48.0",
+    "@contentful/f36-core": "^4.48.0",
+    "@contentful/f36-icons": "^4.27.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-typography": "^4.48.0",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/header/src/BackButton.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, type Ref } from 'react';
+import { IconButton, type IconButtonProps } from '@contentful/f36-button';
+import { ArrowBackwardIcon } from '@contentful/f36-icons';
+
+export type BackButtonProps = Omit<
+  Partial<IconButtonProps>,
+  'aria-label' | 'children' | 'icon' | 'variant' | 'size'
+>;
+
+function _BackButton(
+  { onClick, ...otherProps }: BackButtonProps,
+  ref: Ref<HTMLButtonElement>,
+) {
+  return (
+    <IconButton
+      {...otherProps}
+      aria-label="Go back"
+      icon={<ArrowBackwardIcon variant="muted" />}
+      onClick={onClick}
+      size="small"
+      ref={ref}
+      variant="transparent"
+    />
+  );
+}
+
+export const BackButton = forwardRef<HTMLButtonElement, BackButtonProps>(
+  _BackButton,
+);

packages/components/header/src/Breadcrumb.styles.ts

@@ -0,0 +1,12 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const getBreadcrumbStyles = () => ({
+  button: css({
+    color: tokens.gray500,
+    fontSize: tokens.fontSizeL,
+    fontWeight: tokens.fontWeightNormal,
+    paddingLeft: tokens.spacingXs,
+    paddingRight: tokens.spacingXs,
+  }),
+});

packages/components/header/src/Breadcrumb.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from '@contentful/f36-button';
+import { Segmentation } from './Segmentation';
+import { getBreadcrumbStyles } from './Breadcrumb.styles';
+
+type Breadcrumb = {
+  content: string;
+  url: string;
+};
+
+export type BreadcrumbProps = {
+  breadcrumbs: Breadcrumb[];
+};
+
+export const Breadcrumb = ({ breadcrumbs, ...otherProps }: BreadcrumbProps) => {
+  const styles = getBreadcrumbStyles();
+  const segments = breadcrumbs.map((breadcrumb) => (
+    <Button
+      as="a"
+      className={styles.button}
+      href={breadcrumb.url}
+      key={breadcrumb.url}
+      size="small"
+      variant="transparent"
+    >
+      {breadcrumb.content}
+    </Button>
+  ));
+
+  return <Segmentation segments={segments} {...otherProps} />;
+};

packages/components/header/src/Header.styles.ts

@@ -0,0 +1,44 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const getHeaderStyles = () => ({
+  actions: css({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: '25%',
+    textAlign: 'right',
+  }),
+  context: css({
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: '25%',
+  }),
+  filters: css({
+    display: 'flex',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '50%',
+  }),
+  root: (hasFilters?: boolean) =>
+    css({
+      background: tokens.gray100,
+      minHeight: '56px',
+      // Reduce vertical padding when there's a filter in the header
+      padding: hasFilters
+        ? `${tokens.spacingXs} ${tokens.spacingS}`
+        : tokens.spacingS,
+    }),
+  separator: css({
+    backgroundColor: tokens.gray200,
+    height: '16px',
+    margin: `0 ${tokens.spacingS} 0 ${tokens.spacingXs}`,
+    transform: 'rotate3d(0, 0, 1, 18deg)',
+    width: '1px',
+  }),
+  title: css({
+    margin: `${tokens.spacing2Xs} 0`,
+    '&:not(:first-child)': {
+      marginLeft: tokens.spacingXs,
+    },
+  }),
+});